"use client";
import { useEffect, useState } from "react";
import { Building2, Plus, Trash2, RefreshCw, Shield } from "lucide-react";
import Badge from "./ui/Badge";

interface Tenant {
  id: number;
  name: string;
  slug: string;
  domain: string | null;
  isActive: boolean | null;
  departmentCount?: number;
  employeeCount?: number;
}

export default function SuperAdminPanel() {
  const [tenants, setTenants] = useState<Tenant[]>([]);
  const [loading, setLoading] = useState(true);
  const [name, setName] = useState("");
  const [domain, setDomain] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/super-admin/tenants");
      const data = await res.json();
      setTenants(Array.isArray(data) ? data : []);
    } catch {
      setTenants([]);
    } finally {
      setLoading(false);
    }
  };

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

  const create = async () => {
    if (!name.trim()) return;
    setBusy(true);
    setError(null);
    try {
      const res = await fetch("/api/super-admin/tenants", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim(), domain: domain.trim() || null }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed");
      setName("");
      setDomain("");
      await load();
    } catch (e) {
      setError(String(e));
    } finally {
      setBusy(false);
    }
  };

  const remove = async (id: number, label: string) => {
    if (!confirm(`Delete company "${label}" and all of its data? This cannot be undone.`)) return;
    await fetch(`/api/super-admin/tenants?id=${id}`, { method: "DELETE" });
    await load();
  };

  return (
    <div className="space-y-6">
      <div className="rounded-2xl border border-indigo-200 bg-indigo-50 p-4 flex gap-3">
        <Shield className="text-indigo-600 flex-shrink-0" size={20} />
        <div className="text-sm text-indigo-900">
          <strong>Super Admin console.</strong> Companies (tenants) are fully isolated — each agency only
          sees its own officers, org chart, schedules and leave. Create a company here, then open it from
          the department switcher after its department is provisioned.
        </div>
      </div>

      <div className="bg-white rounded-2xl border border-slate-200 p-5">
        <h3 className="font-bold text-slate-800 mb-3 flex items-center gap-2">
          <Plus size={16} /> Add company
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Agency name"
            className="border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            value={domain}
            onChange={(e) => setDomain(e.target.value)}
            placeholder="Optional domain (agency.example.com)"
            className="border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            onClick={create}
            disabled={busy || !name.trim()}
            className="rounded-xl bg-blue-600 text-white text-sm font-medium px-4 py-2 hover:bg-blue-700 disabled:opacity-50"
          >
            {busy ? "Creating…" : "Create company"}
          </button>
        </div>
        {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
      </div>

      <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
          <h3 className="font-bold text-slate-800 flex items-center gap-2">
            <Building2 size={16} /> Companies
          </h3>
          <button onClick={load} className="p-2 rounded-lg hover:bg-slate-50 text-slate-500">
            <RefreshCw size={15} className={loading ? "animate-spin" : ""} />
          </button>
        </div>
        {loading ? (
          <div className="p-8 text-center text-slate-400 text-sm">Loading…</div>
        ) : tenants.length === 0 ? (
          <div className="p-8 text-center text-slate-400 text-sm">
            No companies yet. Create your first agency above (or run the installer).
          </div>
        ) : (
          <div className="divide-y divide-slate-100">
            {tenants.map((t) => (
              <div key={t.id} className="px-5 py-3 flex flex-wrap items-center gap-3">
                <div className="flex-1 min-w-[180px]">
                  <div className="font-semibold text-slate-800">{t.name}</div>
                  <div className="text-xs text-slate-400">
                    slug: {t.slug}
                    {t.domain ? ` · ${t.domain}` : ""}
                  </div>
                </div>
                <Badge color={t.isActive ? "#10B981" : "#94A3B8"}>
                  {t.isActive ? "Active" : "Disabled"}
                </Badge>
                <span className="text-xs text-slate-500">
                  {t.departmentCount ?? 0} dept · {t.employeeCount ?? 0} staff
                </span>
                <button
                  onClick={() => remove(t.id, t.name)}
                  className="p-2 rounded-lg bg-red-50 text-red-500 hover:bg-red-100"
                  title="Delete company"
                >
                  <Trash2 size={14} />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}