import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { useWorkOrders, 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 { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ClipboardList, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/_authenticated/work-orders")({
  component: WorkOrdersPage,
});

const priorityStyle: Record<string, string> = {
  low: "bg-muted text-muted-foreground",
  medium: "bg-secondary text-secondary-foreground",
  high: "bg-warning/15 text-warning",
  critical: "bg-destructive/15 text-destructive",
};
const statusStyle: Record<string, string> = {
  open: "bg-primary/15 text-primary",
  in_progress: "bg-warning/15 text-warning",
  completed: "bg-success/15 text-success",
  cancelled: "bg-muted text-muted-foreground",
};

function WorkOrdersPage() {
  const { user } = useAuth();
  const wo = useWorkOrders();
  const trucks = useTrucks();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ truck_id: "", title: "", description: "", priority: "medium", assigned_to: "", estimated_cost: "" });

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.truck_id) return toast.error("Select a truck");
    const { error } = await supabase.from("work_orders").insert({
      owner_id: user!.id,
      truck_id: form.truck_id,
      title: form.title,
      description: form.description || null,
      priority: form.priority as any,
      assigned_to: form.assigned_to || null,
      estimated_cost: form.estimated_cost ? Number(form.estimated_cost) : 0,
    });
    if (error) return toast.error(error.message);
    toast.success("Work order created");
    qc.invalidateQueries({ queryKey: ["work_orders"] });
    setOpen(false);
    setForm({ truck_id: "", title: "", description: "", priority: "medium", assigned_to: "", estimated_cost: "" });
  };

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

  return (
    <div>
      <PageHeader
        title="Work orders"
        actions={
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild><Button><Plus className="h-4 w-4" /> New order</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>New work order</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>Title *</Label><Input required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></div>
                <div className="space-y-1.5"><Label>Description</Label><Textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></div>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label>Priority</Label>
                    <Select value={form.priority} onValueChange={(v) => setForm({ ...form, priority: v })}>
                      <SelectTrigger><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="low">Low</SelectItem><SelectItem value="medium">Medium</SelectItem>
                        <SelectItem value="high">High</SelectItem><SelectItem value="critical">Critical</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-1.5"><Label>Estimated cost</Label><Input type="number" step="0.01" value={form.estimated_cost} onChange={(e) => setForm({ ...form, estimated_cost: e.target.value })} /></div>
                </div>
                <div className="space-y-1.5"><Label>Assigned to</Label><Input value={form.assigned_to} onChange={(e) => setForm({ ...form, assigned_to: e.target.value })} /></div>
                <DialogFooter><Button type="submit">Create</Button></DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        }
      />
      {(wo.data?.length ?? 0) === 0 ? (
        <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
          <ClipboardList className="mx-auto h-10 w-10 text-muted-foreground" />
          <p className="mt-3 text-muted-foreground">No work orders yet.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {wo.data!.map((w: any) => (
            <div key={w.id} className="rounded-xl border border-border bg-card p-4">
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="font-medium">{w.title}</span>
                    <span className={`rounded-full px-2 py-0.5 text-xs ${priorityStyle[w.priority]}`}>{w.priority}</span>
                    <span className={`rounded-full px-2 py-0.5 text-xs ${statusStyle[w.status]}`}>{w.status.replace("_", " ")}</span>
                  </div>
                  <div className="mt-1 text-xs text-muted-foreground">
                    Truck {w.trucks?.plate ?? "—"} {w.assigned_to ? `· assigned to ${w.assigned_to}` : ""} {w.estimated_cost ? `· est. $${Number(w.estimated_cost).toFixed(2)}` : ""}
                  </div>
                  {w.description && <p className="mt-2 text-sm text-muted-foreground">{w.description}</p>}
                </div>
                <div className="flex shrink-0 items-center gap-1">
                  <Select value={w.status} onValueChange={(v) => setStatus(w.id, v)}>
                    <SelectTrigger className="h-8 w-36"><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="open">Open</SelectItem><SelectItem value="in_progress">In progress</SelectItem>
                      <SelectItem value="completed">Completed</SelectItem><SelectItem value="cancelled">Cancelled</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button size="sm" variant="ghost" onClick={() => remove(w.id)}><Trash2 className="h-4 w-4" /></Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}