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

export const Route = createFileRoute("/app/history")({
  head: () => ({ meta: [{ title: "Historique — Al-Arabat" }] }),
  component: HistoryPage,
});

function HistoryPage() {
  const { t } = useLang();
  const mine = REQUESTS.slice(0, 4);
  return (
    <div className="mx-auto max-w-3xl px-4 py-8 md:px-8 md:py-12">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Mes demandes", "طلباتي")}</h1>
      <p className="mt-2 text-ink/60">{t("Reçus, notes et signalements.", "الفواتير، التقييم والإبلاغات.")}</p>

      <ul className="mt-6 space-y-3">
        {mine.map((r) => (
          <li key={r.id} className="border-2 border-ink bg-white">
            <div className="flex flex-wrap items-start justify-between gap-3 p-5">
              <div>
                <div className="text-[10px] font-bold uppercase tracking-widest text-terracotta">#{r.id.toUpperCase()}</div>
                <div className="mt-1 font-display text-lg uppercase">{serviceLabel(r.service, t)}</div>
                <div className="mt-1 text-sm text-ink/60">{r.vehicle} · {r.address}</div>
                <div className="mt-1 text-xs text-ink/50">{r.createdAt}</div>
              </div>
              <div className="text-end">
                <div className="font-display text-xl">{r.price.toLocaleString()} DZD</div>
                <div className={`mt-1 inline-block border px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest ${
                  r.status === "termine" ? "border-ink bg-brand" :
                  r.status === "en_route" ? "border-terracotta text-terracotta" :
                  "border-ink/40 text-ink/60"
                }`}>{statusLabel(r.status, t)}</div>
              </div>
            </div>
            {r.status === "termine" && (
              <div className="flex flex-wrap items-center justify-between gap-3 border-t border-ink/15 bg-sand px-5 py-3">
                {r.rated ? (
                  <div className="flex items-center gap-1 text-sm">
                    <Star className="h-4 w-4 fill-brand text-brand" />
                    <span className="font-bold">{r.rating}/5</span>
                    <span className="text-ink/50">— {t("noté", "تم التقييم")}</span>
                  </div>
                ) : (
                  <Link to="/app/rate/$id" params={{ id: r.id }} className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-terracotta">
                    <Star className="h-4 w-4" /> {t("Noter ce service", "قيّم هذه الخدمة")}
                  </Link>
                )}
                <button className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-ink/60 hover:text-ink">
                  <Flag className="h-4 w-4" /> {t("Signaler un problème", "أبلغ عن مشكلة")}
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}