import { createFileRoute, Link } from "@tanstack/react-router";
import { Phone, Wrench, Fuel, Truck, LifeBuoy } from "lucide-react";
import { useLang } from "@/lib/language";
import { SERVICES, type ServiceKey } from "@/lib/mock/data";

export const Route = createFileRoute("/app/")({
  component: AppHome,
});

const ICONS: Record<ServiceKey, typeof Wrench> = {
  remorquage: Truck,
  assistance: LifeBuoy,
  carburant: Fuel,
  concessionnaire: Wrench,
};

function AppHome() {
  const { t } = useLang();
  return (
    <div className="mx-auto max-w-4xl px-4 py-8 md:px-8 md:py-12">
      <span className="text-xs font-bold uppercase tracking-[0.25em] text-terracotta">
        {t("Bonjour Amina", "مرحبا أمينة")}
      </span>
      <h1 className="mt-1 font-display text-3xl uppercase leading-none md:text-5xl">
        {t("Que se passe-t-il ?", "ما الذي حدث ؟")}
      </h1>
      <p className="mt-3 text-ink/60">
        {t("Choisissez un service pour démarrer votre demande.", "اختر خدمة لبدء طلبك.")}
      </p>

      <div className="mt-8 grid gap-4 sm:grid-cols-2">
        {SERVICES.map((s) => {
          const Icon = ICONS[s.key];
          return (
            <Link
              key={s.key}
              to="/app/request"
              search={{ service: s.key }}
              className="group flex items-start gap-4 border-2 border-ink bg-white p-5 transition-transform hover:-translate-y-1 hover:shadow-[6px_6px_0_0_hsl(45_95%_50%)]"
            >
              <div className="grid size-12 shrink-0 place-items-center border-2 border-ink bg-brand text-ink">
                <Icon className="h-6 w-6" />
              </div>
              <div>
                <div className="text-[10px] font-bold uppercase tracking-widest text-terracotta">
                  {s.category === "urgence" ? t("Urgence", "طوارئ") : t("Logistique", "لوجستيك")}
                </div>
                <div className="mt-1 font-display text-xl uppercase leading-tight">{t(s.fr, s.ar)}</div>
              </div>
            </Link>
          );
        })}
      </div>

      <div className="mt-10 flex items-center justify-between border-2 border-ink bg-ink px-5 py-4 text-sand">
        <div>
          <div className="text-[10px] font-bold uppercase tracking-widest text-brand">
            {t("Aucun chauffeur trouvé ?", "لم يتم إيجاد سائق ؟")}
          </div>
          <div className="font-display text-lg uppercase">{t("Appelez l'assistance", "اتصل بالنجدة")}</div>
        </div>
        <a href="tel:+213555000000" className="flex items-center gap-2 bg-brand px-4 py-3 font-bold uppercase text-ink">
          <Phone className="h-4 w-4" /> 0555 00 00 00
        </a>
      </div>
    </div>
  );
}