import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { SUPPORT_CALLS, REPORTS } from "@/lib/mock/data";
import { Phone, Flag, CheckCircle2 } from "lucide-react";

export const Route = createFileRoute("/admin/support")({
  head: () => ({ meta: [{ title: "Support — Admin Al-Arabat" }] }),
  component: SupportPage,
});

function SupportPage() {
  const { t } = useLang();
  const [tab, setTab] = useState<"calls" | "reports">("calls");
  const [calls, setCalls] = useState(SUPPORT_CALLS);
  const [reports, setReports] = useState(REPORTS);

  return (
    <div className="p-4 md:p-8">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Support", "الدعم")}</h1>

      <div className="mt-6 flex gap-2">
        <TabBtn active={tab === "calls"} onClick={() => setTab("calls")}>
          <Phone className="h-4 w-4" /> {t("Appels fallback", "مكالمات النجدة")} ({calls.filter(c => !c.handled).length})
        </TabBtn>
        <TabBtn active={tab === "reports"} onClick={() => setTab("reports")}>
          <Flag className="h-4 w-4" /> {t("Signalements", "الإبلاغات")} ({reports.filter(r => !r.handled).length})
        </TabBtn>
      </div>

      <ul className="mt-6 space-y-3">
        {tab === "calls" && calls.map((c) => (
          <li key={c.id} className="flex flex-wrap items-center justify-between gap-3 border-2 border-ink bg-white p-4">
            <div>
              <div className="font-bold">{c.phone} · <span className="text-ink/60">{c.wilaya}</span></div>
              <div className="mt-1 text-sm text-ink/70">{c.reason}</div>
              <div className="text-xs text-ink/50">{c.createdAt}</div>
            </div>
            <button
              disabled={c.handled}
              onClick={() => setCalls((xs) => xs.map((x) => x.id === c.id ? { ...x, handled: true } : x))}
              className={`flex items-center gap-2 border-2 border-ink px-3 py-2 text-xs font-bold uppercase tracking-widest ${
                c.handled ? "bg-brand" : "bg-white hover:bg-brand"
              }`}
            >
              <CheckCircle2 className="h-4 w-4" /> {c.handled ? t("Traité", "تم") : t("Marquer traité", "وضع كمنجز")}
            </button>
          </li>
        ))}
        {tab === "reports" && reports.map((r) => (
          <li key={r.id} className="flex flex-wrap items-center justify-between gap-3 border-2 border-ink bg-white p-4">
            <div>
              <div className="font-bold">{r.clientName} · <span className="font-mono text-xs">#{r.requestId.toUpperCase()}</span></div>
              <div className="mt-1 text-sm text-ink/70">{r.reason}</div>
              <div className="text-xs text-ink/50">{r.createdAt}</div>
            </div>
            <button
              disabled={r.handled}
              onClick={() => setReports((xs) => xs.map((x) => x.id === r.id ? { ...x, handled: true } : x))}
              className={`flex items-center gap-2 border-2 border-ink px-3 py-2 text-xs font-bold uppercase tracking-widest ${
                r.handled ? "bg-brand" : "bg-white hover:bg-brand"
              }`}
            >
              <CheckCircle2 className="h-4 w-4" /> {r.handled ? t("Traité", "تم") : t("Marquer traité", "وضع كمنجز")}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button onClick={onClick} className={`flex items-center gap-2 border-2 border-ink px-4 py-2 text-xs font-bold uppercase tracking-widest ${active ? "bg-ink text-brand" : "bg-white"}`}>
      {children}
    </button>
  );
}