index.jsx

import React, { useState, useEffect, useRef } from "react";
import { Server } from "@/entities/Server";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Terminal, Send, AlertTriangle, CheckCircle2, Server as ServerIcon } from "lucide-react";
import { Textarea } from "@/components/ui/textarea";

export default function Dashboard() {
  const [servers, setServers] = useState([]);
  const [activeServer, setActiveServer] = useState(null);
  const [command, setCommand] = useState("");
  const [commandHistory, setCommandHistory] = useState([]);
  const [isConnected, setIsConnected] = useState(false);
  const outputRef = useRef(null);

  useEffect(() => {
    loadServers();
    const urlParams = new URLSearchParams(window.location.search);
    const commandFromUrl = urlParams.get('command');
    if (commandFromUrl) {
      setCommand(decodeURIComponent(commandFromUrl));
    }
  }, []);

  useEffect(() => {
    if (outputRef.current) {
      outputRef.current.scrollTop = outputRef.current.scrollHeight;
    }
  }, [commandHistory]);

  const loadServers = async () => {
    const serverList = await Server.list();
    setServers(serverList);
    const active = serverList.find(s => s.is_active);
    if (active) {
      setActiveServer(active);
      setIsConnected(true);
    }
  };

  const executeCommand = () => {
    if (!command.trim() || !activeServer) return;

    const timestamp = new Date().toLocaleTimeString();
    
    const newEntry = {
      id: Date.now(),
      timestamp,
      command: command.trim(),
      type: 'command'
    };

    setCommandHistory(prev => [...prev, newEntry]);
    setCommand("");

    // Simulate response (since we can't actually connect to RCON)
    setTimeout(() => {
      setCommandHistory(prev => [...prev, {
        id: Date.now() + 1,
        timestamp: new Date().toLocaleTimeString(),
        response: `Response from server will appear here (backend integration needed).`,
        type: 'response'
      }]);
    }, 500);
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      executeCommand();
    }
  };

  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-7xl">
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent">
            Minecraft RCON Console
          </h1>
          <p className="text-gray-400">Execute commands remotely on your Minecraft server</p>
        </div>

        {!isConnected && (
          <Alert className="mb-6 bg-yellow-900/50 border-yellow-600 text-yellow-300">
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>
              No server connected. Go to the Servers tab to add and connect to a server.
            </AlertDescription>
          </Alert>
        )}

        <div className="grid lg:grid-cols-3 gap-6">
          {/* Console Output */}
          <div className="lg:col-span-2">
            <Card className="bg-gray-800/50 border-gray-700 h-[600px] flex flex-col">
              <CardHeader className="pb-4">
                <CardTitle className="flex items-center gap-2 text-green-400">
                  <Terminal className="w-5 h-5" />
                  Console Output
                  {activeServer && (
                    <Badge variant="outline" className="ml-auto border-green-400 text-green-400">
                      {activeServer.name}
                    </Badge>
                  )}
                </CardTitle>
              </CardHeader>
              <CardContent className="flex-1 flex flex-col p-0">
                <div 
                  ref={outputRef}
                  className="flex-1 bg-gray-900 border border-gray-700 rounded-lg m-4 mb-0 p-4 overflow-y-auto font-mono text-sm space-y-2"
                >
                  {commandHistory.length === 0 ? (
                    <div className="text-gray-500 text-center py-8">
                      <Terminal className="w-12 h-12 mx-auto mb-4 opacity-50" />
                      <p>Console ready. Enter commands below.</p>
                      <p className="text-xs mt-2">Backend integration required to send commands.</p>
                    </div>
                  ) : (
                    commandHistory.map((entry) => (
                      <div key={entry.id}>
                        {entry.type === 'command' ? (
                          <div className="flex items-center gap-2 text-green-400">
                            <span className="text-gray-500 text-xs">{entry.timestamp}</span>
                            <span>&gt; {entry.command}</span>
                          </div>
                        ) : (
                          <div className="text-gray-300 text-sm pl-4">
                            <span className="text-gray-500 text-xs">{entry.timestamp}</span> {entry.response}
                          </div>
                        )}
                      </div>
                    ))
                  )}
                </div>
                
                {/* Command Input */}
                <div className="p-4 border-t border-gray-700">
                  <div className="flex gap-2">
                    <Input
                      value={command}
                      onChange={(e) => setCommand(e.target.value)}
                      onKeyPress={handleKeyPress}
                      placeholder="Enter Minecraft command (e.g., 'give @a diamond 64')"
                      className="flex-1 bg-gray-900 border-gray-600 text-white placeholder-gray-500 font-mono"
                      disabled={!isConnected}
                    />
                    <Button
                      onClick={executeCommand}
                      disabled={!command.trim() || !isConnected}
                      className="bg-green-600 hover:bg-green-700"
                    >
                      <Send className="w-4 h-4" />
                    </Button>
                  </div>
                  <p className="text-xs text-gray-500 mt-2">
                    Press Enter to send
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Server Status & Quick Actions */}
          <div className="space-y-6">
            {/* Server Status */}
            <Card className="bg-gray-800/50 border-gray-700">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-white">
                  <ServerIcon className="w-5 h-5" />
                  Server Status
                </CardTitle>
              </CardHeader>
              <CardContent>
                {activeServer ? (
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-gray-400">Name:</span>
                      <span className="text-white font-medium">{activeServer.name}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-400">Address:</span>
                      <span className="text-white font-mono text-sm">{activeServer.ip}:{activeServer.port}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-400">Status:</span>
                      <Badge className="bg-green-600 text-white">
                        <CheckCircle2 className="w-3 h-3 mr-1" />
                        Connected
                      </Badge>
                    </div>
                  </div>
                ) : (
                  <p className="text-gray-500 text-center py-4">No server connected</p>
                )}
              </CardContent>
            </Card>

            {/* Quick Commands */}
            <Card className="bg-gray-800/50 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Quick Commands</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {[
                  { name: "List Players", cmd: "list" },
                  { name: "Server Info", cmd: "version" },
                  { name: "Set Day", cmd: "time set day" },
                  { name: "Clear Weather", cmd: "weather clear" },
                  { name: "Save World", cmd: "save-all" }
                ].map((quick) => (
                  <Button
                    key={quick.cmd}
                    variant="outline"
                    className="w-full justify-start text-left border-gray-600 hover:bg-gray-700 hover:border-green-400"
                    onClick={() => setCommand(quick.cmd)}
                    disabled={!isConnected}
                  >
                    {quick.name}
                  </Button>
                ))}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}