import { Check, Gamepad2, Layers, X } from 'lucide-react';
import React, { useEffect, useState } from 'react';

interface DeployModalProps {
    isOpen: boolean;
    onClose: () => void;
}

export const DeployModal: React.FC<DeployModalProps> = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    const [serverName, setServerName] = useState<string>('Mein Minecraft Server');
    const [versionList, setVersionList] = useState<string[]>([
        '1.21.4', '1.21.3', '1.21.1', '1.21',
        '1.20.6', '1.20.4', '1.20.2', '1.20.1',
        '1.19.4', '1.19.3', '1.19.2', '1.18.2',
        '1.17.1', '1.16.5', '1.12.2', '1.8.8'
    ]);
    const [version, setVersion] = useState<string>('1.21.4');
    const [ram, setRam] = useState<number>(4);
    const [isDeploying, setIsDeploying] = useState<boolean>(false);
    const [successMsg, setSuccessMsg] = useState<string | null>(null);

    useEffect(() => {
        fetch('/api/minecraft/paper-versions')
            .then((res) => res.json())
            .then((data) => {
                if (data.success && Array.isArray(data.versions)) {
                    setVersionList(data.versions);
                    if (data.versions.length > 0 && !data.versions.includes(version)) {
                        setVersion(data.versions[0]);
                    }
                }
            })
            .catch(() => {});
    }, []);

    const handleDeploy = async () => {
        setIsDeploying(true);
        try {
            const res = await fetch('/api/minecraft/create', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '',
                },
                body: JSON.stringify({
                    name: serverName,
                    version: version,
                    ram: ram,
                }),
            });
            const data = await res.json();

            if (data.success && data.server) {
                setSuccessMsg(`✓ Echter Minecraft Paper ${version} Server gestartet! IP: ${data.server.ip}`);
                setTimeout(() => {
                    setSuccessMsg(null);
                    setIsDeploying(false);
                    onClose();
                    window.location.reload();
                }, 2000);
                return;
            }
        } catch (e) {
            console.error('Deploy error:', e);
        }

        setIsDeploying(false);
        onClose();
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[#070405]/80 backdrop-blur-md animate-fade-in">
            <div className="w-full max-w-xl rounded-2xl border border-[#311119] bg-[#0c0507] shadow-2xl p-6 space-y-6">
                <div className="flex items-center justify-between border-b border-[#1f0b0f] pb-4">
                    <div>
                        <h3 className="text-lg font-bold text-white flex items-center gap-2">
                            <Gamepad2 className="h-5 w-5 text-rose-400" />
                            Minecraft Gameserver Erstellen
                        </h3>
                        <p className="text-xs text-slate-400">Automatische Paper-Installation & Bereitstellung.</p>
                    </div>
                    <button onClick={onClose} className="p-1 rounded-lg text-slate-400 hover:text-white hover:bg-[#1c0a0e]">
                        <X className="h-5 w-5" />
                    </button>
                </div>

                {/* Form Controls */}
                <div className="space-y-4 text-xs font-sans">
                    {/* Server Name */}
                    <div className="space-y-1">
                        <label className="block font-semibold text-slate-200">Server Name</label>
                        <input
                            type="text"
                            value={serverName}
                            onChange={(e) => setServerName(e.target.value)}
                            placeholder="z. B. Survival Server 1.21"
                            className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-medium"
                        />
                    </div>

                    {/* Paper Version Selector */}
                    <div className="space-y-1">
                        <label className="block font-semibold text-slate-200">Minecraft Version (Paper MC)</label>
                        <select
                            value={version}
                            onChange={(e) => setVersion(e.target.value)}
                            className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-mono"
                        >
                            {versionList.map((v) => (
                                <option key={v} value={v}>
                                    Paper {v}
                                </option>
                            ))}
                        </select>
                    </div>

                    {/* RAM slider */}
                    <div>
                        <div className="flex justify-between text-xs font-semibold text-slate-200 mb-1">
                            <span className="flex items-center gap-1.5"><Layers className="h-4 w-4 text-rose-400" /> RAM (Arbeitsspeicher)</span>
                            <span className="font-mono text-rose-400">{ram} GB DDR5</span>
                        </div>
                        <input
                            type="range"
                            min={2}
                            max={32}
                            step={2}
                            value={ram}
                            onChange={(e) => setRam(parseInt(e.target.value))}
                            className="w-full h-2 bg-[#050203] rounded-lg appearance-none cursor-pointer accent-red-600"
                        />
                    </div>
                </div>

                {/* Submit */}
                <div className="pt-3 border-t border-[#1f0b0f] flex items-center justify-between">
                    <div>
                        <span className="text-[10px] text-slate-400">Monatlicher Preis</span>
                        <div className="text-xl font-bold text-white font-mono">12,50 € / mtl.</div>
                    </div>

                    <button
                        onClick={handleDeploy}
                        disabled={isDeploying}
                        className="px-6 py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow-lg shadow-red-600/25 disabled:opacity-50 transition-all"
                    >
                        {isDeploying ? 'Wird Erstellt & Gestartet...' : 'Minecraft Server Erstellen'}
                    </button>
                </div>

                {successMsg && (
                    <div className="p-3 rounded-xl bg-emerald-950 border border-emerald-700 text-center text-xs text-emerald-300 flex items-center justify-center gap-2 font-mono">
                        <Check className="h-4 w-4 text-emerald-400" />
                        {successMsg}
                    </div>
                )}
            </div>
        </div>
    );
};