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

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

function DriversPage() {
  const { user } = useAuth();
  const drivers = useDrivers();
  const trucks = useTrucks();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ full_name: "", license_number: "", phone: "", email: "", assigned_truck_id: "none" });

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const { error } = await supabase.from("drivers").insert({
      owner_id: user!.id,
      full_name: form.full_name,
      license_number: form.license_number || null,
      phone: form.phone || null,
      email: form.email || null,
      assigned_truck_id: form.assigned_truck_id === "none" ? null : form.assigned_truck_id,
    });
    if (error) return toast.error(error.message);
    toast.success("Driver added");
    qc.invalidateQueries({ queryKey: ["drivers"] });
    setOpen(false);
    setForm({ full_name: "", license_number: "", phone: "", email: "", assigned_truck_id: "none" });
  };

  const remove = async (id: string) => {
    if (!confirm("Delete this driver?")) return;
    const { error } = await supabase.from("drivers").delete().eq("id", id);
    if (error) return toast.error(error.message);
    qc.invalidateQueries({ queryKey: ["drivers"] });
  };

  return (
    <div>
      <PageHeader
        title="Drivers"
        actions={
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild><Button><Plus className="h-4 w-4" /> Add driver</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Add driver</DialogTitle></DialogHeader>
              <form onSubmit={submit} className="space-y-3">
                <div className="space-y-1.5"><Label>Full name *</Label><Input required value={form.full_name} onChange={(e) => setForm({ ...form, full_name: e.target.value })} /></div>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5"><Label>License #</Label><Input value={form.license_number} onChange={(e) => setForm({ ...form, license_number: e.target.value })} /></div>
                  <div className="space-y-1.5"><Label>Phone</Label><Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></div>
                </div>
                <div className="space-y-1.5"><Label>Email</Label><Input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></div>
                <div className="space-y-1.5">
                  <Label>Assigned truck</Label>
                  <Select value={form.assigned_truck_id} onValueChange={(v) => setForm({ ...form, assigned_truck_id: v })}>
                    <SelectTrigger><SelectValue placeholder="None" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">None</SelectItem>
                      {trucks.data?.map((t) => <SelectItem key={t.id} value={t.id}>{t.plate}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>
                <DialogFooter><Button type="submit">Save</Button></DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        }
      />
      {(drivers.data?.length ?? 0) === 0 ? (
        <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
          <Users className="mx-auto h-10 w-10 text-muted-foreground" />
          <p className="mt-3 text-muted-foreground">No drivers yet.</p>
        </div>
      ) : (
        <div className="overflow-hidden rounded-xl border border-border bg-card">
          <table className="w-full text-sm">
            <thead className="bg-secondary/40 text-left text-xs uppercase tracking-wider text-muted-foreground">
              <tr><th className="px-4 py-3">Name</th><th className="px-4 py-3">License</th><th className="px-4 py-3">Phone</th><th className="px-4 py-3">Truck</th><th /></tr>
            </thead>
            <tbody>
              {drivers.data!.map((d) => {
                const truck = trucks.data?.find((t) => t.id === d.assigned_truck_id);
                return (
                  <tr key={d.id} className="border-t border-border">
                    <td className="px-4 py-3 font-medium">{d.full_name}</td>
                    <td className="px-4 py-3 text-muted-foreground">{d.license_number ?? "—"}</td>
                    <td className="px-4 py-3 text-muted-foreground">{d.phone ?? "—"}</td>
                    <td className="px-4 py-3 font-mono">{truck?.plate ?? "—"}</td>
                    <td className="px-4 py-3 text-right"><Button size="sm" variant="ghost" onClick={() => remove(d.id)}><Trash2 className="h-4 w-4" /></Button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}