import { createFileRoute } from "@tanstack/react-router";
import { useLang } from "@/lib/language";
import { KPIS, REQUESTS, serviceLabel, statusLabel } from "@/lib/mock/data";
import { Activity, Truck, CheckSquare, Coins } from "lucide-react";

export const Route = createFileRoute("/admin/")({
  component: AdminOverview,
});

function AdminOverview() {
  const { t } = useLang();
  const kpis = [
    { label: t("Demandes actives", "الطلبات النشطة"), value: KPIS.activeRequests, icon: Activity },
    { label: t("Chauffeurs en ligne", "السائقون المتصلون"), value: KPIS.driversOnline, icon: Truck },
    { label: t("Courses aujourd'hui", "المهام اليوم"), value: KPIS.jobsToday, icon: CheckSquare },
    { label: t("Revenus estimés", "الإيرادات المقدرة"), value: `${KPIS.revenueDZD.toLocaleString()} DZD`, icon: Coins },
  ];
  const bars = [12, 18, 9, 23, 31, 27, 22];
  const max = Math.max(...bars);
  const days = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
  return (
    <div className="p-4 md:p-8">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Aperçu", "نظرة عامة")}</h1>
      <p className="mt-2 text-ink/60">{t("Vue en temps réel du réseau Al-Arabat.", "نظرة مباشرة على شبكة العربات.")}</p>

      <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {kpis.map((k) => (
          <div key={k.label} className="border-2 border-ink bg-white p-5">
            <k.icon className="h-5 w-5 text-terracotta" />
            <div className="mt-3 text-[10px] font-bold uppercase tracking-widest text-ink/50">{k.label}</div>
            <div className="mt-1 font-display text-3xl">{k.value}</div>
          </div>
        ))}
      </div>

      <div className="mt-8 grid gap-6 lg:grid-cols-3">
        <div className="border-2 border-ink bg-white p-5 lg:col-span-2">
          <div className="flex items-center justify-between">
            <h2 className="font-display text-xl uppercase">{t("Courses / 7 jours", "المهام / 7 أيام")}</h2>
            <span className="text-xs text-ink/50">{bars.reduce((a, b) => a + b, 0)} {t("courses", "مهمة")}</span>
          </div>
          <div className="mt-6 flex h-48 items-end gap-3">
            {bars.map((v, i) => (
              <div key={i} className="flex flex-1 flex-col items-center gap-2">
                <div className="w-full bg-brand" style={{ height: `${(v / max) * 100}%` }} />
                <span className="text-[10px] font-bold uppercase text-ink/50">{days[i]}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="border-2 border-ink bg-white p-5">
          <h2 className="font-display text-xl uppercase">{t("Dernières demandes", "آخر الطلبات")}</h2>
          <ul className="mt-4 space-y-3">
            {REQUESTS.slice(0, 4).map((r) => (
              <li key={r.id} className="border-b border-ink/10 pb-3 last:border-0">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-bold">{serviceLabel(r.service, t)}</span>
                  <span className="text-terracotta">{r.price.toLocaleString()} DZD</span>
                </div>
                <div className="mt-1 text-xs text-ink/50">#{r.id.toUpperCase()} · {statusLabel(r.status, t)}</div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}