import { createFileRoute, Link } from "@tanstack/react-router";
import { Phone, Star, Truck as TruckIcon, CheckCircle2 } from "lucide-react";
import { useLang } from "@/lib/language";
import { DRIVERS } from "@/lib/mock/data";

export const Route = createFileRoute("/app/matched")({
  head: () => ({ meta: [{ title: "Chauffeur trouvé — Al-Arabat" }] }),
  component: MatchedPage,
});

function MatchedPage() {
  const { t } = useLang();
  const d = DRIVERS[0];
  return (
    <div className="mx-auto max-w-xl px-4 py-8 md:px-8 md:py-12">
      <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-terracotta">
        <CheckCircle2 className="h-4 w-4" /> {t("Chauffeur trouvé", "تم إيجاد سائق")}
      </div>
      <h1 className="mt-2 font-display text-3xl uppercase leading-none md:text-4xl">
        {t("Il arrive.", "إنه قادم.")}
      </h1>
      <p className="mt-2 text-ink/60">
        {t("Le chauffeur va vous appeler sous peu pour confirmer le lieu.", "سيتصل بك السائق قريبًا لتأكيد المكان.")}
      </p>

      <div className="mt-8 border-2 border-ink bg-white p-6 shadow-[6px_6px_0_0_hsl(45_95%_50%)]">
        <div className="flex items-center gap-4">
          <div className="grid size-16 place-items-center rounded-full bg-ink font-display text-2xl text-brand">
            {d.name[0]}
          </div>
          <div className="flex-1">
            <div className="font-display text-xl uppercase">{d.name}</div>
            <div className="mt-1 flex items-center gap-1 text-sm">
              <Star className="h-4 w-4 fill-brand text-brand" />
              <span className="font-bold">{d.rating}</span>
              <span className="text-ink/50">· {d.jobs} {t("courses", "مهمة")}</span>
            </div>
          </div>
        </div>
        <div className="mt-5 grid grid-cols-2 gap-3 border-t-2 border-ink pt-5">
          <Info label={t("Plaque", "لوحة")} value={d.plate} />
          <Info label={t("Camion", "الشاحنة")} value={d.truck === "plateau" ? t("Plateau", "منصة") : t("Treuil", "ونش")} />
        </div>
      </div>

      <div className="mt-6 flex flex-col gap-3">
        <a href={`tel:${d.phone.replace(/\s/g, "")}`} className="flex items-center justify-center gap-2 bg-brand py-4 font-bold uppercase text-ink shadow-[6px_6px_0_0_hsl(220_15%_10%)]">
          <Phone className="h-4 w-4" /> {t("Appeler le chauffeur", "اتصل بالسائق")}
        </a>
        <Link to="/app/history" className="border-2 border-ink py-4 text-center font-bold uppercase">
          {t("Voir mes demandes", "طلباتي")}
        </Link>
      </div>

      <div className="mt-8 flex items-start gap-3 border-l-4 border-terracotta bg-white p-4 text-sm">
        <TruckIcon className="h-5 w-5 shrink-0 text-terracotta" />
        <p className="text-ink/70">
          {t(
            "Al-Arabat n'affiche pas de carte ni de suivi en temps réel. Le chauffeur vous contacte directement.",
            "لا يعرض تطبيق العربات خريطة ولا تتبعًا مباشرًا. السائق يتصل بك مباشرة.",
          )}
        </p>
      </div>
    </div>
  );
}

function Info({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="text-[10px] font-bold uppercase tracking-widest text-ink/50">{label}</div>
      <div className="mt-1 font-display text-lg">{value}</div>
    </div>
  );
}