import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { DRIVERS, type Driver } from "@/lib/mock/data";
import { CheckCircle2, XCircle, Star } from "lucide-react";

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

function DriversPage() {
  const { t } = useLang();
  const [tab, setTab] = useState<"all" | "pending">("all");
  const [state, setState] = useState<Driver[]>(DRIVERS);

  const list = tab === "pending" ? state.filter((d) => d.verified === "en_attente") : state;
  const set = (id: string, verified: Driver["verified"]) =>
    setState((s) => s.map((d) => (d.id === id ? { ...d, verified } : d)));

  return (
    <div className="p-4 md:p-8">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Chauffeurs", "السائقون")}</h1>

      <div className="mt-6 flex gap-2">
        {(["all", "pending"] as const).map((k) => (
          <button
            key={k}
            onClick={() => setTab(k)}
            className={`border-2 border-ink px-4 py-2 text-xs font-bold uppercase tracking-widest ${
              tab === k ? "bg-ink text-brand" : "bg-white"
            }`}
          >
            {k === "all" ? t("Tous", "الكل") : t("Documents à valider", "وثائق للتحقق")}
          </button>
        ))}
      </div>

      <div className="mt-6 overflow-hidden border-2 border-ink bg-white">
        <table className="w-full text-sm">
          <thead className="bg-ink text-sand">
            <tr className="text-start text-[10px] font-bold uppercase tracking-widest">
              <th className="p-3 text-start">{t("Nom", "الاسم")}</th>
              <th className="p-3 text-start">{t("Wilaya", "الولاية")}</th>
              <th className="p-3 text-start">{t("Camion", "الشاحنة")}</th>
              <th className="p-3 text-start">{t("Note", "التقييم")}</th>
              <th className="p-3 text-start">{t("Statut", "الحالة")}</th>
              <th className="p-3 text-start">{t("Vérification", "التحقق")}</th>
            </tr>
          </thead>
          <tbody>
            {list.map((d) => (
              <tr key={d.id} className="border-t border-ink/10">
                <td className="p-3">
                  <div className="font-bold">{d.name}</div>
                  <div className="text-xs text-ink/50">{d.phone} · {d.plate}</div>
                </td>
                <td className="p-3">{d.wilaya}</td>
                <td className="p-3 capitalize">{d.truck}</td>
                <td className="p-3">
                  <span className="inline-flex items-center gap-1">
                    <Star className="h-3.5 w-3.5 fill-brand text-brand" /> {d.rating || "—"}
                  </span>
                  <div className="text-xs text-ink/50">{d.jobs} {t("courses", "مهمة")}</div>
                </td>
                <td className="p-3">
                  <span className={`border px-2 py-0.5 text-[10px] font-bold uppercase ${
                    d.status === "en_ligne" ? "border-green-700 text-green-700" :
                    d.status === "en_mission" ? "border-terracotta text-terracotta" :
                    "border-ink/30 text-ink/50"
                  }`}>{d.status.replace("_", " ")}</span>
                </td>
                <td className="p-3">
                  {d.verified === "en_attente" ? (
                    <div className="flex gap-1">
                      <button onClick={() => set(d.id, "verifie")} className="flex items-center gap-1 bg-brand px-2 py-1 text-[10px] font-bold uppercase">
                        <CheckCircle2 className="h-3 w-3" /> {t("Approuver", "قبول")}
                      </button>
                      <button onClick={() => set(d.id, "refuse")} className="flex items-center gap-1 border-2 border-ink px-2 py-1 text-[10px] font-bold uppercase">
                        <XCircle className="h-3 w-3" /> {t("Refuser", "رفض")}
                      </button>
                    </div>
                  ) : (
                    <span className={`text-[10px] font-bold uppercase tracking-widest ${
                      d.verified === "verifie" ? "text-green-700" : "text-red-700"
                    }`}>{d.verified === "verifie" ? t("Vérifié", "موثق") : t("Refusé", "مرفوض")}</span>
                  )}
                </td>
              </tr>
            ))}
            {list.length === 0 && (
              <tr><td colSpan={6} className="p-8 text-center text-ink/50">{t("Aucun élément.", "لا شيء.")}</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}