import { createFileRoute, Link } from "@tanstack/react-router";
import { useLang } from "@/lib/language";
import { REQUESTS, serviceLabel } from "@/lib/mock/data";
import { MapPin, Clock } from "lucide-react";

export const Route = createFileRoute("/driver/")({
  component: DriverDashboard,
});

function DriverDashboard() {
  const { t } = useLang();
  const incoming = REQUESTS.filter((r) => r.status === "en_recherche");
  const current = REQUESTS.find((r) => r.status === "en_route");
  return (
    <div className="mx-auto max-w-4xl px-4 py-8 md:px-8 md:py-12">
      {current && (
        <section className="mb-8 border-2 border-ink bg-brand p-5 shadow-[6px_6px_0_0_hsl(220_15%_10%)]">
          <div className="text-[10px] font-bold uppercase tracking-widest">{t("Mission en cours", "مهمة جارية")}</div>
          <div className="mt-1 flex items-center justify-between">
            <div>
              <div className="font-display text-2xl uppercase">{serviceLabel(current.service, t)}</div>
              <div className="text-sm">{current.clientName} · {current.address}</div>
            </div>
            <Link to="/driver/job/$id" params={{ id: current.id }} className="bg-ink px-5 py-3 text-xs font-bold uppercase text-brand">
              {t("Ouvrir", "افتح")} →
            </Link>
          </div>
        </section>
      )}

      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Demandes entrantes", "طلبات واردة")}</h1>
      <p className="mt-2 text-ink/60">{t("Acceptez celles qui vous conviennent.", "اقبل ما يناسبك.")}</p>

      <ul className="mt-6 space-y-3">
        {incoming.map((r) => (
          <li key={r.id} className="border-2 border-ink bg-white p-5">
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <div className="text-[10px] font-bold uppercase tracking-widest text-terracotta">#{r.id.toUpperCase()}</div>
                <div className="mt-1 font-display text-xl uppercase">{serviceLabel(r.service, t)}</div>
                <div className="mt-2 space-y-1 text-sm text-ink/70">
                  <div className="flex items-center gap-2"><MapPin className="h-4 w-4" /> {r.address}, {r.wilaya}</div>
                  <div className="flex items-center gap-2"><Clock className="h-4 w-4" /> {r.createdAt}</div>
                </div>
              </div>
              <div className="text-end">
                <div className="font-display text-2xl text-terracotta">{r.price.toLocaleString()} DZD</div>
                <div className="text-xs text-ink/50">{t("~ 3.5 km", "~ 3.5 كم")}</div>
              </div>
            </div>
            <div className="mt-4 flex gap-3">
              <button className="flex-1 border-2 border-ink py-3 text-sm font-bold uppercase tracking-widest">{t("Ignorer", "تجاهل")}</button>
              <Link to="/driver/job/$id" params={{ id: r.id }} className="flex-1 bg-brand py-3 text-center text-sm font-bold uppercase tracking-widest shadow-[4px_4px_0_0_hsl(220_15%_10%)]">
                {t("Accepter", "قبول")}
              </Link>
            </div>
          </li>
        ))}
        {incoming.length === 0 && (
          <li className="border-2 border-dashed border-ink/30 p-8 text-center text-ink/50">
            {t("Aucune demande pour le moment.", "لا توجد طلبات حاليًا.")}
          </li>
        )}
      </ul>
    </div>
  );
}