"use client";

import { useState, useEffect } from "react";
import { X, Plus, Trash2, Network, Save, AlertTriangle } from "lucide-react";

interface SubnetConfigModalProps {
  agentUuid: string;
  agentLabel: string;
  open: boolean;
  onClose: () => void;
}

export function SubnetConfigModal({ agentUuid, agentLabel, open, onClose }: SubnetConfigModalProps) {
  const [subnets, setSubnets] = useState<string[]>([]);
  const [newSubnet, setNewSubnet] = useState("");
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (!open || !agentUuid) return;
    setLoading(true);
    setError("");
    setSuccess(false);
    fetch(`/api/dashboard/agents/${agentUuid}/subnets`)
      .then(res => res.json())
      .then(data => {
        if (data.ok) setSubnets(data.data?.allowed_subnets || []);
        else setError(data.error || "Gagal memuat data");
      })
      .catch(() => setError("Koneksi gagal"))
      .finally(() => setLoading(false));
  }, [open, agentUuid]);

  const addSubnet = () => {
    let val = newSubnet.trim();
    if (!val) return;
    if (val.endsWith('.')) val = val.slice(0, -1);

    if (val.includes('/')) {
      const [ip, bits] = val.split('/');
      const ipParts = ip.split('.');
      if (ipParts.length !== 4 || ipParts.some(p => p === "" || isNaN(Number(p)) || Number(p) > 255) || isNaN(Number(bits)) || Number(bits) < 0 || Number(bits) > 32) {
        setError("Format CIDR tidak valid. Contoh: 192.168.15.0/24");
        return;
      }
    } else {
      const parts = val.split(".");
      if (parts.some(p => p !== "" && (isNaN(Number(p)) || Number(p) > 255))) {
        setError("Format subnet tidak valid. Contoh: 192.168 atau 10.21.5");
        return;
      }
    }

    if (subnets.includes(val)) {
      setError("Subnet sudah ada");
      return;
    }
    setError("");
    setSubnets(prev => [...prev, val]);
    setNewSubnet("");
  };

  const removeSubnet = (idx: number) => {
    setSubnets(prev => prev.filter((_, i) => i !== idx));
  };

  const save = async () => {
    setSaving(true);
    setError("");
    setSuccess(false);
    try {
      const res = await fetch(`/api/dashboard/agents/${agentUuid}/subnets`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ allowed_subnets: subnets }),
      });
      const data = await res.json();
      if (data.ok) {
        setSuccess(true);
        setTimeout(() => setSuccess(false), 3000);
      } else {
        setError(data.error || "Gagal menyimpan");
      }
    } catch {
      setError("Koneksi gagal");
    } finally {
      setSaving(false);
    }
  };

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
      <div className="relative z-10 w-full max-w-lg mx-4 bg-slate-900 border border-white/10 rounded-2xl shadow-2xl overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-white/[0.02]">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-violet-500/10 border border-violet-500/20 rounded-lg">
              <Network className="w-4 h-4 text-violet-400" />
            </div>
            <div>
              <h2 className="text-sm font-semibold text-white">Konfigurasi Subnet IP</h2>
              <p className="text-xs text-slate-500 font-mono">{agentLabel || agentUuid}</p>
            </div>
          </div>
          <button onClick={onClose} className="p-1.5 rounded-lg text-slate-500 hover:text-white hover:bg-white/10 transition-colors">
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Body */}
        <div className="p-6 space-y-5">
          {/* Info banner */}
          <div className="flex gap-3 p-3 rounded-xl bg-amber-500/5 border border-amber-500/15">
            <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
            <p className="text-xs text-amber-300/80 leading-relaxed">
              Daftarkan prefix subnet IP yang <strong className="text-amber-300">hanya milik agen ini</strong>. 
              Saat sinkronisasi data, IP yang tidak cocok dengan subnet di bawah ini akan otomatis dibuang 
              agar tidak bercampur dengan agen lain.
              <br /><br />
              <span className="text-slate-400">Contoh format valid:<br/>
              • <code className="bg-slate-800 px-1 rounded text-amber-300">192.168.10.0/24</code> atau <code className="bg-slate-800 px-1 rounded text-amber-300">10.8.60.0/20</code> (Format CIDR)<br/>
              • <code className="bg-slate-800 px-1 rounded text-amber-300">192.168.10</code> (Semua IP berawalan 192.168.10)<br/>
              • <code className="bg-slate-800 px-1 rounded text-amber-300">10.21.7.72</code> (Hanya IP Spesifik)</span>
            </p>
          </div>

          {/* Subnet list */}
          <div className="space-y-2">
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Subnet yang Diizinkan</label>
            {loading ? (
              <div className="flex items-center justify-center py-8">
                <div className="w-5 h-5 border-2 border-violet-500/30 border-t-violet-500 rounded-full animate-spin" />
              </div>
            ) : subnets.length === 0 ? (
              <div className="rounded-xl border border-dashed border-white/10 py-6 text-center">
                <Network className="w-6 h-6 text-slate-600 mx-auto mb-2" />
                <p className="text-xs text-slate-500">Belum ada subnet dikonfigurasi.</p>
                <p className="text-xs text-slate-600">Semua IP akan diterima (tidak difilter).</p>
              </div>
            ) : (
              <div className="space-y-1.5 max-h-48 overflow-y-auto custom-scrollbar pr-1">
                {subnets.map((s, i) => (
                  <div key={i} className="flex items-center justify-between gap-2 px-3 py-2 bg-white/[0.03] border border-white/[0.06] rounded-lg group">
                    <span className="font-mono text-sm text-violet-300">
                      {s.includes('/') || s.split('.').length === 4 ? s : `${s}.x`}
                    </span>
                    <button
                      onClick={() => removeSubnet(i)}
                      className="p-1 text-slate-600 hover:text-red-400 hover:bg-red-950/30 rounded transition-colors opacity-0 group-hover:opacity-100"
                      title="Hapus subnet ini"
                    >
                      <Trash2 className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Add new subnet */}
          <div className="space-y-2">
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Tambah Subnet Baru</label>
            <div className="flex gap-2">
              <input
                type="text"
                value={newSubnet}
                onChange={e => { setNewSubnet(e.target.value); setError(""); }}
                onKeyDown={e => e.key === "Enter" && addSubnet()}
                placeholder="Contoh: 192.168.10.0/24 atau 10.21"
                className="flex-1 bg-white/[0.03] border border-white/10 rounded-xl px-3 py-2 text-sm text-white font-mono placeholder:text-slate-600 focus:outline-none focus:border-violet-500/50 focus:bg-white/[0.05] transition-all"
              />
              <button
                onClick={addSubnet}
                className="px-3 py-2 bg-violet-600/20 border border-violet-500/30 hover:bg-violet-600/30 text-violet-400 rounded-xl transition-colors flex items-center gap-1.5 text-xs font-medium"
              >
                <Plus className="w-3.5 h-3.5" />
                Tambah
              </button>
            </div>
          </div>

          {/* Error / Success */}
          {error && <p className="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">{error}</p>}
          {success && <p className="text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-lg px-3 py-2">✓ Konfigurasi subnet berhasil disimpan!</p>}
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-2 px-6 py-4 border-t border-white/10 bg-white/[0.02]">
          <button onClick={onClose} className="px-4 py-2 text-xs text-slate-400 hover:text-white hover:bg-white/10 rounded-xl transition-colors">
            Tutup
          </button>
          <button
            onClick={save}
            disabled={saving}
            className="flex items-center gap-2 px-4 py-2 bg-violet-600 hover:bg-violet-500 disabled:opacity-50 text-white text-xs font-medium rounded-xl transition-colors"
          >
            {saving ? <div className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-3.5 h-3.5" />}
            {saving ? "Menyimpan..." : "Simpan"}
          </button>
        </div>
      </div>
    </div>
  );
}