import { createFileRoute, Link } from "@tanstack/react-router";
import { PageHeader } from "@/components/PageHeader";
import { useTrucks, useScheduled, useWorkOrders, useParts } from "@/lib/queries";
import { Truck, Wrench, AlertTriangle, Package, BellRing } from "lucide-react";
import { getAlertLevel, alertBadgeClass, alertLabel } from "@/lib/maintenance-alerts";

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: Dashboard,
});

function Stat({ icon: Icon, label, value, accent }: { icon: any; label: string; value: string | number; accent?: string }) {
  return (
    <div className="rounded-xl border border-border bg-card p-5" style={{ boxShadow: "var(--shadow-card)" }}>
      <div className="flex items-center justify-between">
        <span className="text-sm text-muted-foreground">{label}</span>
        <Icon className={`h-5 w-5 ${accent ?? "text-primary"}`} />
      </div>
      <div className="mt-3 text-3xl font-bold">{value}</div>
    </div>
  );
}

function Dashboard() {
  const trucks = useTrucks();
  const sched = useScheduled();
  const wo = useWorkOrders();
  const parts = useParts();

  const activeTrucks = trucks.data?.filter((t) => t.status === "active").length ?? 0;
  const inMaint = trucks.data?.filter((t) => t.status === "in_maintenance").length ?? 0;

  const schedWithLevel = (sched.data ?? []).map((s: any) => ({ ...s, _level: getAlertLevel(s) }));
  const overdue = schedWithLevel.filter((s) => s._level === "overdue").length;
  const dueSoon = schedWithLevel.filter((s) => s._level === "due-soon").length;
  const openWO = wo.data?.filter((w) => w.status !== "completed" && w.status !== "cancelled").length ?? 0;
  const lowStock = parts.data?.filter((p) => p.quantity <= p.min_stock).length ?? 0;

  const alerts = schedWithLevel
    .filter((s) => s._level === "overdue" || s._level === "due-soon")
    .sort((a, b) => (a.due_date ?? "").localeCompare(b.due_date ?? ""));

  return (
    <div>
      <PageHeader title="Dashboard" description="Fleet health at a glance." />
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <Stat icon={Truck} label="Active trucks" value={activeTrucks} />
        <Stat icon={Wrench} label="In maintenance" value={inMaint} accent="text-warning" />
        <Stat icon={AlertTriangle} label="Overdue services" value={overdue} accent="text-destructive" />
        <Stat icon={BellRing} label="Due soon (14d)" value={dueSoon} accent="text-warning" />
        <Stat icon={Package} label="Low-stock parts" value={lowStock} accent="text-warning" />
      </div>

      <div className="mt-8 grid gap-6 lg:grid-cols-2">
        <div className="rounded-xl border border-border bg-card p-5" style={{ boxShadow: "var(--shadow-card)" }}>
          <div className="mb-4 flex items-center justify-between">
            <h2 className="font-semibold flex items-center gap-2"><BellRing className="h-4 w-4 text-warning" /> Maintenance alerts</h2>
            <Link to="/scheduled" className="text-xs text-primary hover:underline">View all</Link>
          </div>
          {sched.isLoading ? (
            <p className="text-sm text-muted-foreground">Loading…</p>
          ) : alerts.length === 0 ? (
            <p className="text-sm text-muted-foreground">No services due in the next {14} days. 🎉</p>
          ) : (
            <ul className="space-y-2">
              {alerts.slice(0, 6).map((s: any) => (
                <li key={s.id} className="flex items-center justify-between rounded-md border border-border px-3 py-2 text-sm">
                  <div>
                    <div className="font-medium">{s.service_type}</div>
                    <div className="text-xs text-muted-foreground">
                      {s.trucks?.plate ?? "—"} · {s.due_date ?? "no date"}
                    </div>
                  </div>
                  <span className={`rounded-full px-2 py-0.5 text-xs ${alertBadgeClass(s._level)}`}>
                    {alertLabel(s._level, s.due_date)}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="rounded-xl border border-border bg-card p-5" style={{ boxShadow: "var(--shadow-card)" }}>
          <div className="mb-4 flex items-center justify-between">
            <h2 className="font-semibold">Open work orders</h2>
            <Link to="/work-orders" className="text-xs text-primary hover:underline">View all</Link>
          </div>
          {wo.isLoading ? (
            <p className="text-sm text-muted-foreground">Loading…</p>
          ) : openWO === 0 ? (
            <p className="text-sm text-muted-foreground">No open work orders.</p>
          ) : (
            <ul className="space-y-2">
              {wo.data!.filter((w) => w.status !== "completed" && w.status !== "cancelled").slice(0, 5).map((w) => (
                <li key={w.id} className="flex items-center justify-between rounded-md border border-border px-3 py-2 text-sm">
                  <div>
                    <div className="font-medium">{w.title}</div>
                    <div className="text-xs text-muted-foreground">Truck {(w as any).trucks?.plate ?? "—"}</div>
                  </div>
                  <span className={`rounded-full px-2 py-0.5 text-xs ${
                    w.priority === "critical" ? "bg-destructive/15 text-destructive" :
                    w.priority === "high" ? "bg-warning/15 text-warning" :
                    "bg-muted text-muted-foreground"
                  }`}>{w.priority}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}