import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { REQUESTS, serviceLabel } from "@/lib/mock/data";
import { Phone, MapPin, CheckCircle2 } from "lucide-react";

export const Route = createFileRoute("/driver/job/$id")({
  head: () => ({ meta: [{ title: "Mission — Al-Arabat" }] }),
  component: JobPage,
});

const STEPS = [
  { key: "en_route", fr: "En route", ar: "في الطريق" },
  { key: "arrive", fr: "Arrivé", ar: "وصلت" },
  { key: "termine", fr: "Terminé", ar: "منجز" },
] as const;

function JobPage() {
  const { t } = useLang();
  const { id } = Route.useParams();
  const navigate = useNavigate();
  const req = REQUESTS.find((r) => r.id === id) ?? REQUESTS[0];
  const [stepIdx, setStepIdx] = useState(0);
  const [collected, setCollected] = useState(false);

  return (
    <div className="mx-auto max-w-2xl px-4 py-8 md:px-8 md:py-12">
      <span className="text-xs font-bold uppercase tracking-widest text-terracotta">#{req.id.toUpperCase()}</span>
      <h1 className="mt-1 font-display text-3xl uppercase md:text-4xl">{serviceLabel(req.service, t)}</h1>

      <section className="mt-6 border-2 border-ink bg-white p-5">
        <div className="text-[10px] font-bold uppercase tracking-widest text-ink/50">{t("Client", "الزبون")}</div>
        <div className="mt-1 flex items-center justify-between">
          <div>
            <div className="font-display text-xl">{req.clientName}</div>
            <div className="text-sm text-ink/60">{req.vehicle}</div>
          </div>
          <a href={`tel:${req.clientPhone.replace(/\s/g, "")}`} className="flex items-center gap-2 bg-brand px-4 py-2 text-sm font-bold uppercase">
            <Phone className="h-4 w-4" /> {t("Appeler", "اتصال")}
          </a>
        </div>
        <div className="mt-4 flex items-start gap-2 border-t border-ink/15 pt-4 text-sm">
          <MapPin className="h-4 w-4 text-terracotta" />
          <span>{req.address}, {req.wilaya}</span>
        </div>
      </section>

      <section className="mt-6 border-2 border-ink bg-ink p-5 text-sand">
        <div className="text-[10px] font-bold uppercase tracking-widest text-brand">{t("À encaisser (espèces)", "المبلغ نقدًا")}</div>
        <div className="mt-1 font-display text-4xl text-brand">{req.price.toLocaleString()} DZD</div>
      </section>

      <section className="mt-6">
        <div className="mb-3 text-xs font-bold uppercase tracking-widest">{t("Progression", "التقدم")}</div>
        <div className="space-y-2">
          {STEPS.map((s, i) => (
            <button
              key={s.key}
              onClick={() => setStepIdx(i)}
              className={`flex w-full items-center gap-3 border-2 p-3 text-start ${
                i <= stepIdx ? "border-ink bg-brand" : "border-ink/20 bg-white"
              }`}
            >
              <span className="font-display text-lg">{String(i + 1).padStart(2, "0")}</span>
              <span className="font-bold uppercase">{t(s.fr, s.ar)}</span>
              {i <= stepIdx && <CheckCircle2 className="ml-auto h-5 w-5" />}
            </button>
          ))}
        </div>
      </section>

      {stepIdx === 2 && (
        <section className="mt-6 border-2 border-ink bg-white p-5">
          <div className="font-display text-xl uppercase">{t("Confirmer l'encaissement", "تأكيد الاستلام")}</div>
          <p className="mt-1 text-sm text-ink/60">
            {t("Confirmez avoir reçu le montant en espèces auprès du client.", "أكد أنك استلمت المبلغ نقدًا من الزبون.")}
          </p>
          <label className="mt-4 flex items-center gap-2 text-sm">
            <input type="checkbox" checked={collected} onChange={(e) => setCollected(e.target.checked)} className="size-4 accent-terracotta" />
            {t(`J'ai reçu ${req.price.toLocaleString()} DZD`, `استلمت ${req.price.toLocaleString()} دج`)}
          </label>
          <button
            disabled={!collected}
            onClick={() => navigate({ to: "/driver" })}
            className="mt-4 w-full bg-ink py-4 font-bold uppercase text-brand disabled:opacity-40"
          >
            {t("Clôturer la mission", "إنهاء المهمة")}
          </button>
        </section>
      )}
    </div>
  );
}