import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { useScheduled, useTrucks } from "@/lib/queries";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/auth";
import { PageHeader } from "@/components/PageHeader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CalendarClock, Plus, CheckCircle2, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { getAlertLevel, alertBadgeClass, alertLabel, type AlertLevel } from "@/lib/maintenance-alerts";

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

type FilterKey = "all" | "overdue" | "due-soon" | "upcoming" | "done";

function ScheduledPage() {
  const { user } = useAuth();
  const sched = useScheduled();
  const trucks = useTrucks();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);
  const [filter, setFilter] = useState<FilterKey>("all");
  const [form, setForm] = useState({ truck_id: "", service_type: "", due_date: "", due_mileage: "", notes: "" });

  const items = (sched.data ?? []).map((s: any) => ({ ...s, _level: getAlertLevel(s) as AlertLevel }));
  const counts = {
    all: items.length,
    overdue: items.filter((i) => i._level === "overdue").length,
    "due-soon": items.filter((i) => i._level === "due-soon").length,
    upcoming: items.filter((i) => i._level === "upcoming").length,
    done: items.filter((i) => i._level === "done").length,
  };
  const visible = filter === "all" ? items : items.filter((i) => i._level === filter);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.truck_id) return toast.error("Select a truck");
    const { error } = await supabase.from("scheduled_maintenance").insert({
      owner_id: user!.id,
      truck_id: form.truck_id,
      service_type: form.service_type,
      due_date: form.due_date || null,
      due_mileage: form.due_mileage ? Number(form.due_mileage) : null,
      notes: form.notes || null,
    });
    if (error) return toast.error(error.message);
    toast.success("Scheduled");
    qc.invalidateQueries({ queryKey: ["scheduled"] });
    setOpen(false);
    setForm({ truck_id: "", service_type: "", due_date: "", due_mileage: "", notes: "" });
  };

  const markDone = async (id: string) => {
    const { error } = await supabase.from("scheduled_maintenance").update({ status: "done" }).eq("id", id);
    if (error) return toast.error(error.message);
    qc.invalidateQueries({ queryKey: ["scheduled"] });
  };
  const remove = async (id: string) => {
    const { error } = await supabase.from("scheduled_maintenance").delete().eq("id", id);
    if (error) return toast.error(error.message);
    qc.invalidateQueries({ queryKey: ["scheduled"] });
  };

  return (
    <div>
      <PageHeader
        title="Scheduled maintenance"
        description="Upcoming services across the fleet."
        actions={
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild><Button><Plus className="h-4 w-4" /> Schedule</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Schedule maintenance</DialogTitle></DialogHeader>
              <form onSubmit={submit} className="space-y-3">
                <div className="space-y-1.5">
                  <Label>Truck *</Label>
                  <Select value={form.truck_id} onValueChange={(v) => setForm({ ...form, truck_id: v })}>
                    <SelectTrigger><SelectValue placeholder="Select truck" /></SelectTrigger>
                    <SelectContent>
                      {trucks.data?.map((t) => <SelectItem key={t.id} value={t.id}>{t.plate}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1.5"><Label>Service type *</Label><Input required value={form.service_type} onChange={(e) => setForm({ ...form, service_type: e.target.value })} /></div>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5"><Label>Due date</Label><Input type="date" value={form.due_date} onChange={(e) => setForm({ ...form, due_date: e.target.value })} /></div>
                  <div className="space-y-1.5"><Label>Due mileage</Label><Input type="number" value={form.due_mileage} onChange={(e) => setForm({ ...form, due_mileage: e.target.value })} /></div>
                </div>
                <DialogFooter><Button type="submit">Save</Button></DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        }
      />
      {(sched.data?.length ?? 0) === 0 ? (
        <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
          <CalendarClock className="mx-auto h-10 w-10 text-muted-foreground" />
          <p className="mt-3 text-muted-foreground">Nothing scheduled.</p>
        </div>
      ) : (
        <>
          <div className="mb-4 flex flex-wrap gap-2">
            {([
              ["all", "All"],
              ["overdue", "Overdue"],
              ["due-soon", "Due soon"],
              ["upcoming", "Upcoming"],
              ["done", "Done"],
            ] as [FilterKey, string][]).map(([k, label]) => (
              <button
                key={k}
                onClick={() => setFilter(k)}
                className={`rounded-full border px-3 py-1 text-xs transition-colors ${
                  filter === k ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-muted"
                }`}
              >
                {label} <span className="ml-1 opacity-70">{counts[k]}</span>
              </button>
            ))}
          </div>
          {visible.length === 0 ? (
            <p className="rounded-lg border border-dashed border-border bg-card p-6 text-center text-sm text-muted-foreground">No items in this filter.</p>
          ) : (
            <div className="space-y-2">
              {visible.map((s: any) => (
                <div key={s.id} className="flex items-center justify-between rounded-lg border border-border bg-card p-4">
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{s.service_type}</span>
                      <span className={`rounded-full px-2 py-0.5 text-xs ${alertBadgeClass(s._level)}`}>
                        {alertLabel(s._level, s.due_date)}
                      </span>
                    </div>
                    <div className="mt-1 text-xs text-muted-foreground">
                      Truck {s.trucks?.plate ?? "—"} · {s.due_date ?? "no date"}{s.due_mileage ? ` · ${s.due_mileage.toLocaleString()} mi` : ""}
                    </div>
                  </div>
                  <div className="flex gap-1">
                    {s.status !== "done" && (
                      <Button size="sm" variant="outline" onClick={() => markDone(s.id)}>
                        <CheckCircle2 className="h-4 w-4" /> Done
                      </Button>
                    )}
                    <Button size="sm" variant="ghost" onClick={() => remove(s.id)}><Trash2 className="h-4 w-4" /></Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
}