"use client";

import { useEffect, useState, type FormEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/Icon";
import { api } from "@/lib/client";
import { useT } from "@/components/providers";

export interface UnitItem {
  id: number;
  unit_kind: "national" | "governorate";
  governorate_name: string | null;
  name_ar: string;
  formation_decision_ref: string;
  notes: string | null;
  open_positions: number;
  member_count: number | null;
  readiness_note: string | null;
}

export function StructureBoard({ initialUnits, canManage, labels }: { initialUnits: UnitItem[]; canManage: boolean; labels?: { title: string; subtitle: string } }) {
  const router = useRouter();
  const [units, setUnits] = useState(initialUnits);
  const [govs, setGovs] = useState<{ id: number; name_ar: string }[]>([]);
  const [kind, setKind] = useState<"governorate" | "national">("governorate");
  const [message, setMessage] = useState<{ kind: "ok" | "err"; text: string } | null>(null);
  const [busy, setBusy] = useState(false);
  const { t } = useT();

  useEffect(() => {
    api<{ items: { id: number; name_ar: string }[] }>("/api/structure/governorates").then((res) => {
      if (res.status === 200 && res.data) setGovs(res.data.items);
    });
  }, []);

  async function refresh() {
    const res = await api<{ items: UnitItem[] }>("/api/structure/units");
    if (res.status === 200 && res.data) setUnits(res.data.items);
    router.refresh();
  }

  async function createUnit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    setBusy(true);
    setMessage(null);
    const res = await api("/api/structure/units", "POST", {
      unitKind: kind,
      governorateId: kind === "governorate" ? Number(form.get("governorateId")) : null,
      nameAr: String(form.get("nameAr") ?? "").trim(),
      formationDecisionRef: String(form.get("decisionRef") ?? "").trim(),
      notes: String(form.get("notes") ?? "").trim() || null,
    });
    setBusy(false);
    if (res.status === 201) {
      setMessage({ kind: "ok", text: t.structure.unitCreated });
      (e.target as HTMLFormElement).reset();
      await refresh();
    } else {
      setMessage({ kind: "err", text: res.error ?? t.members.opFailed });
    }
  }

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="text-2xl font-extrabold text-slate-900">{labels?.title ?? t.structure.title}</h1>
          <p className="mt-1 text-sm text-slate-500">
            {labels?.subtitle ?? t.structure.subtitle}
          </p>
        </div>
        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">{units.length} {t.structure.units}</span>
      </header>

      {message && (
        <div role="status" className={`rounded-lg border px-4 py-2.5 text-sm ${message.kind === "ok" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-red-200 bg-red-50 text-red-700"}`}>
          {message.text}
        </div>
      )}

      {units.length === 0 ? (
        <p className="rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-card">
          {t.structure.noUnits}
        </p>
      ) : (
        <ul className="grid gap-4 md:grid-cols-2">
          {units.map((u) => (
            <li key={u.id} className="rounded-xl border border-slate-200 bg-white p-5 shadow-card">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <Link href={`/dashboard/structure/${u.id}`} className="font-bold text-slate-900 hover:text-bousla-700">
                    {u.name_ar}
                  </Link>
                  <p className="mt-0.5 text-xs text-slate-400">
                    {u.unit_kind === "national" ? t.structure.nationalUnit : `${t.structure.governorateUnit}: ${u.governorate_name ?? "—"}`} · {t.structure.formationRef}: {u.formation_decision_ref}
                  </p>
                </div>
                <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-[11px] font-bold ${u.unit_kind === "national" ? "bg-sky-50 text-sky-700" : "bg-slate-100 text-slate-600"}`}>
                  {u.open_positions} {t.structure.openPositions}
                </span>
              </div>
              {u.readiness_note && (
                <p className="mt-3 rounded-lg bg-slate-50 px-3 py-1.5 text-[11px] text-slate-500">
                  {u.member_count} {t.structure.liveMembers} — {u.readiness_note}
                </p>
              )}
              {u.notes && <p className="mt-2 text-xs text-slate-500" dir="auto">{u.notes}</p>}
            </li>
          ))}
        </ul>
      )}

      {canManage && (
        <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-card">
          <h2 className="mb-4 flex items-center gap-2 font-bold text-slate-900">
            <Icon name="sitemap" className="h-5 w-5 text-bousla-700" /> {t.structure.createUnit}
          </h2>
          <form onSubmit={createUnit} className="grid gap-4 sm:grid-cols-2">
            <div>
              <label htmlFor="u-kind" className="mb-1 block text-xs font-bold text-slate-600">{t.structure.unitKind}</label>
              <select
                id="u-kind"
                value={kind}
                onChange={(e) => setKind(e.target.value as "governorate" | "national")}
                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100"
              >
                <option value="governorate">{t.structure.kindGovernorate}</option>
                <option value="national">{t.structure.kindNational}</option>
              </select>
            </div>
            {kind === "governorate" && (
              <div>
                <label htmlFor="u-gov" className="mb-1 block text-xs font-bold text-slate-600">{t.members.governorate}</label>
                <select id="u-gov" name="governorateId" required className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100">
                  <option value="" disabled>{t.structure.pickGovernorate}</option>
                  {govs.map((g) => (
                    <option key={g.id} value={g.id}>{g.name_ar}</option>
                  ))}
                </select>
              </div>
            )}
            <div className="sm:col-span-2">
              <label htmlFor="u-name" className="mb-1 block text-xs font-bold text-slate-600">{t.structure.unitName}</label>
              <input id="u-name" name="nameAr" required minLength={3} maxLength={200} dir="auto" className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div className="sm:col-span-2">
              <label htmlFor="u-ref" className="mb-1 block text-xs font-bold text-slate-600">{t.structure.decisionRefLabel}</label>
              <input id="u-ref" name="decisionRef" required minLength={3} maxLength={255} dir="auto" placeholder="{t.members.reasonPlaceholder}" className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div className="sm:col-span-2">
              <label htmlFor="u-notes" className="mb-1 block text-xs font-bold text-slate-600">{t.structure.notes}</label>
              <input id="u-notes" name="notes" maxLength={2000} dir="auto" className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div className="sm:col-span-2">
              <button type="submit" disabled={busy} className="rounded-lg bg-bousla-700 px-4 py-2 text-sm font-bold text-white hover:bg-bousla-800 disabled:opacity-60">
                {t.structure.createBtn}
              </button>
            </div>
          </form>
        </section>
      )}
    </div>
  );
}