server.jsx

import React, { useState, useEffect } from "react";
import { Server } from "@/entities/Server";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Plus, Server as ServerIcon, Edit, Trash2, Wifi, WifiOff } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";

export default function Servers() {
  const [servers, setServers] = useState([]);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [editingServer, setEditingServer] = useState(null);
  const [formData, setFormData] = useState({
    name: "",
    ip: "",
    port: 25575,
    password: ""
  });

  useEffect(() => {
    loadServers();
  }, []);

  const loadServers = async () => {
    const serverList = await Server.list();
    setServers(serverList);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (editingServer) {
      await Server.update(editingServer.id, formData);
    } else {
      await Server.create(formData);
    }
    setShowAddDialog(false);
    setEditingServer(null);
    setFormData({ name: "", ip: "", port: 25575, password: "" });
    loadServers();
  };

  const handleEdit = (server) => {
    setEditingServer(server);
    setFormData({
      name: server.name,
      ip: server.ip,
      port: server.port,
      password: server.password
    });
    setShowAddDialog(true);
  };

  const handleDelete = async (serverId) => {
    if (confirm("Are you sure you want to delete this server?")) {
      await Server.delete(serverId);
      loadServers();
    }
  };

  const toggleConnection = async (server) => {
    // First, deactivate all servers
    for (const s of servers) {
      if (s.is_active) {
        await Server.update(s.id, { is_active: false });
      }
    }
    
    // Then activate the selected server if it wasn't already active
    if (!server.is_active) {
      await Server.update(server.id, { 
        is_active: true, 
        last_connected: new Date().toISOString() 
      });
    }
    
    loadServers();
  };

  const closeDialog = () => {
    setShowAddDialog(false);
    setEditingServer(null);
    setFormData({ name: "", ip: "", port: 25575, password: "" });
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
      <div className="container mx-auto p-6 max-w-6xl">
        <div className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent">
              Server Management
            </h1>
            <p className="text-gray-400">Manage your Minecraft server connections</p>
          </div>
          <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
            <DialogTrigger asChild>
              <Button className="bg-green-600 hover:bg-green-700">
                <Plus className="w-4 h-4 mr-2" />
                Add Server
              </Button>
            </DialogTrigger>
            <DialogContent className="bg-gray-800 border-gray-700 text-white">
              <DialogHeader>
                <DialogTitle>{editingServer ? 'Edit Server' : 'Add New Server'}</DialogTitle>
              </DialogHeader>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="name">Server Name</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({...formData, name: e.target.value})}
                    placeholder="My Minecraft Server"
                    className="bg-gray-900 border-gray-600 text-white"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="ip">Server IP</Label>
                  <Input
                    id="ip"
                    value={formData.ip}
                    onChange={(e) => setFormData({...formData, ip: e.target.value})}
                    placeholder="127.0.0.1 or minecraft.example.com"
                    className="bg-gray-900 border-gray-600 text-white"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="port">RCON Port</Label>
                  <Input
                    id="port"
                    type="number"
                    value={formData.port}
                    onChange={(e) => setFormData({...formData, port: parseInt(e.target.value)})}
                    placeholder="25575"
                    className="bg-gray-900 border-gray-600 text-white"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="password">RCON Password</Label>
                  <Input
                    id="password"
                    type="password"
                    value={formData.password}
                    onChange={(e) => setFormData({...formData, password: e.target.value})}
                    placeholder="Your RCON password"
                    className="bg-gray-900 border-gray-600 text-white"
                    required
                  />
                </div>
                <div className="flex justify-end gap-3 pt-4">
                  <Button type="button" variant="outline" onClick={closeDialog} className="border-gray-600">
                    Cancel
                  </Button>
                  <Button type="submit" className="bg-green-600 hover:bg-green-700">
                    {editingServer ? 'Update Server' : 'Add Server'}
                  </Button>
                </div>
              </form>
            </DialogContent>
          </Dialog>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {servers.map((server) => (
            <Card key={server.id} className="bg-gray-800/50 border-gray-700 hover:border-green-400 transition-colors">
              <CardHeader className="pb-3">
                <div className="flex justify-between items-start">
                  <CardTitle className="flex items-center gap-2 text-white">
                    <ServerIcon className="w-5 h-5" />
                    {server.name}
                  </CardTitle>
                  <Badge className={server.is_active ? "bg-green-600" : "bg-gray-600"}>
                    {server.is_active ? (
                      <>
                        <Wifi className="w-3 h-3 mr-1" />
                        Connected
                      </>
                    ) : (
                      <>
                        <WifiOff className="w-3 h-3 mr-1" />
                        Disconnected
                      </>
                    )}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-400">Address:</span>
                    <span className="text-white font-mono">{server.ip}:{server.port}</span>
                  </div>
                  {server.last_connected && (
                    <div className="flex justify-between">
                      <span className="text-gray-400">Last connected:</span>
                      <span className="text-white text-xs">
                        {new Date(server.last_connected).toLocaleDateString()}
                      </span>
                    </div>
                  )}
                </div>
                
                <div className="flex gap-2">
                  <Button
                    onClick={() => toggleConnection(server)}
                    className={server.is_active ? "bg-red-600 hover:bg-red-700" : "bg-green-600 hover:bg-green-700"}
                    size="sm"
                  >
                    {server.is_active ? "Disconnect" : "Connect"}
                  </Button>
                  <Button
                    onClick={() => handleEdit(server)}
                    variant="outline"
                    size="sm"
                    className="border-gray-600 hover:bg-gray-700"
                  >
                    <Edit className="w-3 h-3" />
                  </Button>
                  <Button
                    onClick={() => handleDelete(server.id)}
                    variant="outline"
                    size="sm"
                    className="border-red-600 text-red-400 hover:bg-red-600 hover:text-white"
                  >
                    <Trash2 className="w-3 h-3" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}

          {servers.length === 0 && (
            <div className="col-span-full text-center py-12">
              <ServerIcon className="w-16 h-16 mx-auto mb-4 text-gray-600" />
              <h3 className="text-xl font-semibold text-gray-400 mb-2">No servers added</h3>
              <p className="text-gray-500 mb-4">Add your first Minecraft server to get started</p>
              <Button 
                onClick={() => setShowAddDialog(true)}
                className="bg-green-600 hover:bg-green-700"
              >
                <Plus className="w-4 h-4 mr-2" />
                Add Your First Server
              </Button>
            </div>
          )}
        </div>

        <Card className="mt-8 bg-blue-900/20 border-blue-700">
          <CardHeader>
            <CardTitle className="text-blue-400">RCON Setup Guide</CardTitle>
          </CardHeader>
          <CardContent className="prose prose-invert prose-sm max-w-none">
            <div className="space-y-4 text-blue-200">
              <div>
                <h4 className="text-blue-300 font-semibold">1. Enable RCON on your server</h4>
                <p>Add these lines to your server.properties file:</p>
                <code className="bg-gray-900 p-2 rounded block text-green-400">
                  enable-rcon=true<br/>
                  rcon.port=25575<br/>
                  rcon.password=yourpassword
                </code>
              </div>
              <div>
                <h4 className="text-blue-300 font-semibold">2. Restart your server</h4>
                <p>Restart your Minecraft server for changes to take effect.</p>
              </div>
              <div>
                <h4 className="text-blue-300 font-semibold">3. Add server connection</h4>
                <p>Use the "Add Server" button above to configure your connection details.</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}