import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { REQUESTS, WILAYAS, SERVICES, serviceLabel, statusLabel, type RequestStatus } from "@/lib/mock/data";

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

const STATUSES: RequestStatus[] = ["en_recherche", "en_route", "arrive", "termine", "annule"];

function RequestsPage() {
  const { t } = useLang();
  const [status, setStatus] = useState<string>("");
  const [wilaya, setWilaya] = useState<string>("");
  const [service, setService] = useState<string>("");
  const [open, setOpen] = useState<string | null>(null);

  const filtered = REQUESTS.filter((r) =>
    (!status || r.status === status) &&
    (!wilaya || r.wilaya === wilaya) &&
    (!service || r.service === service),
  );
  const selected = filtered.find((r) => r.id === open);

  return (
    <div className="p-4 md:p-8">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Demandes", "الطلبات")}</h1>

      <div className="mt-6 grid gap-3 md:grid-cols-3">
        <Select value={status} onChange={setStatus} placeholder={t("Statut", "الحالة")}>
          {STATUSES.map((s) => <option key={s} value={s}>{statusLabel(s, t)}</option>)}
        </Select>
        <Select value={wilaya} onChange={setWilaya} placeholder={t("Wilaya", "الولاية")}>
          {WILAYAS.map((w) => <option key={w} value={w}>{w}</option>)}
        </Select>
        <Select value={service} onChange={setService} placeholder={t("Service", "الخدمة")}>
          {SERVICES.map((s) => <option key={s.key} value={s.key}>{t(s.fr, s.ar)}</option>)}
        </Select>
      </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">ID</th>
              <th className="p-3 text-start">{t("Service", "الخدمة")}</th>
              <th className="p-3 text-start">{t("Client", "الزبون")}</th>
              <th className="p-3 text-start">{t("Wilaya", "الولاية")}</th>
              <th className="p-3 text-start">{t("Prix", "السعر")}</th>
              <th className="p-3 text-start">{t("Statut", "الحالة")}</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((r) => (
              <tr key={r.id} onClick={() => setOpen(r.id)} className="cursor-pointer border-t border-ink/10 hover:bg-brand/20">
                <td className="p-3 font-mono text-xs">#{r.id.toUpperCase()}</td>
                <td className="p-3 font-bold">{serviceLabel(r.service, t)}</td>
                <td className="p-3">{r.clientName}</td>
                <td className="p-3">{r.wilaya}</td>
                <td className="p-3">{r.price.toLocaleString()} DZD</td>
                <td className="p-3"><span className="border border-ink px-2 py-0.5 text-[10px] font-bold uppercase">{statusLabel(r.status, t)}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {selected && (
        <div className="fixed inset-0 z-50 flex justify-end bg-ink/40" onClick={() => setOpen(null)}>
          <div onClick={(e) => e.stopPropagation()} className="h-full w-full max-w-md overflow-y-auto border-l-4 border-ink bg-sand p-6">
            <div className="text-xs font-bold uppercase tracking-widest text-terracotta">#{selected.id.toUpperCase()}</div>
            <h2 className="mt-1 font-display text-2xl uppercase">{serviceLabel(selected.service, t)}</h2>
            <dl className="mt-6 space-y-3 text-sm">
              <Row k={t("Client", "الزبون")} v={`${selected.clientName} · ${selected.clientPhone}`} />
              <Row k={t("Véhicule", "المركبة")} v={selected.vehicle} />
              <Row k={t("Adresse", "العنوان")} v={`${selected.address}, ${selected.wilaya}`} />
              <Row k={t("Chauffeur", "السائق")} v={selected.driverId ?? "—"} />
              <Row k={t("Prix", "السعر")} v={`${selected.price.toLocaleString()} DZD`} />
              <Row k={t("Statut", "الحالة")} v={statusLabel(selected.status, t)} />
            </dl>
            <div className="mt-6 border-t-2 border-ink pt-4 text-xs font-bold uppercase tracking-widest">{t("Historique", "السجل")}</div>
            <ol className="mt-3 space-y-2 text-sm">
              <li>· {t("Créée", "أنشئ")} — {selected.createdAt}</li>
              {selected.driverId && <li>· {t("Chauffeur assigné", "تم تعيين السائق")}</li>}
              {selected.status === "termine" && <li>· {t("Terminée", "منجزة")}</li>}
            </ol>
            <button onClick={() => setOpen(null)} className="mt-8 w-full border-2 border-ink py-3 font-bold uppercase">{t("Fermer", "إغلاق")}</button>
          </div>
        </div>
      )}
    </div>
  );
}

function Row({ k, v }: { k: string; v: string }) {
  return (
    <div className="flex justify-between gap-4 border-b border-ink/10 pb-2">
      <dt className="font-bold uppercase tracking-widest text-ink/50 text-xs">{k}</dt>
      <dd className="text-end">{v}</dd>
    </div>
  );
}

function Select({ value, onChange, placeholder, children }: { value: string; onChange: (v: string) => void; placeholder: string; children: React.ReactNode }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)} className="border-2 border-ink bg-white p-3 text-sm">
      <option value="">{placeholder}</option>
      {children}
    </select>
  );
}