import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { 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 { Plus, Truck as TruckIcon, Trash2 } from "lucide-react";
import { toast } from "sonner";

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

const statusStyle: Record<string, string> = {
  active: "bg-success/15 text-success",
  in_maintenance: "bg-warning/15 text-warning",
  out_of_service: "bg-destructive/15 text-destructive",
};

function TrucksPage() {
  const { data: trucks, isLoading } = useTrucks();
  const { user } = useAuth();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ plate: "", make: "", model: "", year: "", vin: "", mileage: "", status: "active" as const });

  const reset = () => setForm({ plate: "", make: "", model: "", year: "", vin: "", mileage: "", status: "active" });

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const { error } = await supabase.from("trucks").insert({
      owner_id: user!.id,
      plate: form.plate,
      make: form.make || null,
      model: form.model || null,
      year: form.year ? Number(form.year) : null,
      vin: form.vin || null,
      mileage: form.mileage ? Number(form.mileage) : 0,
      status: form.status,
    });
    if (error) return toast.error(error.message);
    toast.success("Truck added");
    qc.invalidateQueries({ queryKey: ["trucks"] });
    setOpen(false);
    reset();
  };

  const remove = async (id: string) => {
    if (!confirm("Delete this truck and all its records?")) return;
    const { error } = await supabase.from("trucks").delete().eq("id", id);
    if (error) return toast.error(error.message);
    toast.success("Truck deleted");
    qc.invalidateQueries({ queryKey: ["trucks"] });
  };

  return (
    <div>
      <PageHeader
        title="Trucks"
        description="Your fleet registry."
        actions={
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
              <Button><Plus className="h-4 w-4" /> Add truck</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Add truck</DialogTitle></DialogHeader>
              <form onSubmit={submit} className="space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label>Plate *</Label>
                    <Input required value={form.plate} onChange={(e) => setForm({ ...form, plate: e.target.value })} />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Year</Label>
                    <Input type="number" value={form.year} onChange={(e) => setForm({ ...form, year: e.target.value })} />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Make</Label>
                    <Input value={form.make} onChange={(e) => setForm({ ...form, make: e.target.value })} />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Model</Label>
                    <Input value={form.model} onChange={(e) => setForm({ ...form, model: e.target.value })} />
                  </div>
                  <div className="space-y-1.5 col-span-2">
                    <Label>VIN</Label>
                    <Input value={form.vin} onChange={(e) => setForm({ ...form, vin: e.target.value })} />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Mileage</Label>
                    <Input type="number" value={form.mileage} onChange={(e) => setForm({ ...form, mileage: e.target.value })} />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Status</Label>
                    <Select value={form.status} onValueChange={(v) => setForm({ ...form, status: v as any })}>
                      <SelectTrigger><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="active">Active</SelectItem>
                        <SelectItem value="in_maintenance">In maintenance</SelectItem>
                        <SelectItem value="out_of_service">Out of service</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <DialogFooter>
                  <Button type="submit">Save truck</Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        }
      />

      {isLoading ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (trucks?.length ?? 0) === 0 ? (
        <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
          <TruckIcon className="mx-auto h-10 w-10 text-muted-foreground" />
          <p className="mt-3 text-muted-foreground">No trucks yet. Add your first to get started.</p>
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {trucks!.map((t) => (
            <div key={t.id} className="rounded-xl border border-border bg-card p-5 transition-colors hover:border-primary/40" style={{ boxShadow: "var(--shadow-card)" }}>
              <div className="flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <TruckIcon className="h-4 w-4 text-primary" />
                    <span className="font-mono text-lg font-bold">{t.plate}</span>
                  </div>
                  <p className="mt-1 text-sm text-muted-foreground">
                    {[t.year, t.make, t.model].filter(Boolean).join(" ") || "—"}
                  </p>
                </div>
                <span className={`rounded-full px-2 py-0.5 text-xs ${statusStyle[t.status]}`}>
                  {t.status.replace("_", " ")}
                </span>
              </div>
              <div className="mt-4 flex items-center justify-between text-sm">
                <span className="text-muted-foreground">{t.mileage.toLocaleString()} mi</span>
                <div className="flex gap-2">
                  <Link to="/trucks/$truckId" params={{ truckId: t.id }}>
                    <Button size="sm" variant="outline">Open</Button>
                  </Link>
                  <Button size="sm" variant="ghost" onClick={() => remove(t.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}