import { useState } from "react";
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 { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Plus, Pencil, Trash2, Package } from "lucide-react";

type LabStatus = "pending" | "in-lab" | "received" | "delivered" | "cancelled";

interface LabOrder {
  id: number;
  orderDate: string;
  dueDate: string;
  tooth: string;
  caseType: string;
  lab: string;
  shade: string;
  status: LabStatus;
  rush: boolean;
  notes: string;
  trackingNumber: string;
}

const STATUS_COLORS: Record<LabStatus, string> = {
  pending: "bg-yellow-100 text-yellow-700 border-yellow-200",
  "in-lab": "bg-blue-100 text-blue-700 border-blue-200",
  received: "bg-green-100 text-green-700 border-green-200",
  delivered: "bg-gray-100 text-gray-600 border-gray-200",
  cancelled: "bg-red-100 text-red-600 border-red-200",
};

const STATUS_LABELS: Record<LabStatus, string> = {
  pending: "Pending",
  "in-lab": "In Lab",
  received: "Received",
  delivered: "Delivered",
  cancelled: "Cancelled",
};

const CASE_TYPES = [
  "Crown – PFM",
  "Crown – All Ceramic",
  "Crown – Zirconia",
  "Crown – Gold",
  "Bridge – PFM",
  "Bridge – Zirconia",
  "Implant Crown",
  "Implant Abutment",
  "Veneer",
  "Inlay / Onlay",
  "Full Denture (Upper)",
  "Full Denture (Lower)",
  "Partial Denture",
  "Night Guard",
  "Bleaching Tray",
  "Retainer",
  "Diagnostic Model",
  "Other",
];

const COMMON_LABS = [
  "Dental Arts Lab",
  "National Dentex",
  "Glidewell Dental",
  "Henry Schein Lab",
  "Affordable Dentures Lab",
  "Local Lab",
];

const SHADES = [
  "A1", "A2", "A3", "A3.5", "A4",
  "B1", "B2", "B3", "B4",
  "C1", "C2", "C3", "C4",
  "D2", "D3", "D4",
  "BL1", "BL2", "BL3", "BL4",
  "Custom",
];

let nextId = 1;
const newOrder = (): LabOrder => ({
  id: nextId++,
  orderDate: new Date().toISOString().substring(0, 10),
  dueDate: "",
  tooth: "",
  caseType: "",
  lab: "",
  shade: "",
  status: "pending",
  rush: false,
  notes: "",
  trackingNumber: "",
});

export function LabManagementTab() {
  const [orders, setOrders] = useState<LabOrder[]>([]);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<LabOrder>(newOrder());

  const openAdd = () => {
    setEditing(newOrder());
    setDialogOpen(true);
  };

  const openEdit = (order: LabOrder) => {
    setEditing({ ...order });
    setDialogOpen(true);
  };

  const handleSave = () => {
    setOrders((prev) => {
      const idx = prev.findIndex((o) => o.id === editing.id);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = editing;
        return next;
      }
      return [...prev, editing];
    });
    setDialogOpen(false);
  };

  const handleDelete = (id: number) => {
    setOrders((prev) => prev.filter((o) => o.id !== id));
  };

  const pending = orders.filter((o) => o.status === "pending" || o.status === "in-lab").length;
  const rush = orders.filter((o) => o.rush && o.status !== "delivered" && o.status !== "cancelled").length;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex gap-4 text-sm text-gray-600">
          {pending > 0 && <span>Open orders: <strong>{pending}</strong></span>}
          {rush > 0 && <span className="text-red-600">Rush: <strong>{rush}</strong></span>}
          {orders.length === 0 && <span>No lab orders yet</span>}
        </div>
        <Button size="sm" onClick={openAdd} className="gap-1.5">
          <Plus className="h-4 w-4" />
          New Lab Order
        </Button>
      </div>

      <div className="border rounded-lg overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50">
              <TableHead className="w-24">Order Date</TableHead>
              <TableHead className="w-16">Tooth</TableHead>
              <TableHead>Case Type</TableHead>
              <TableHead>Lab</TableHead>
              <TableHead className="w-16 text-center">Shade</TableHead>
              <TableHead className="w-24">Due</TableHead>
              <TableHead className="w-28">Status</TableHead>
              <TableHead className="w-20 text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {orders.length === 0 ? (
              <TableRow>
                <TableCell colSpan={8} className="text-center text-gray-400 py-10">
                  <div className="flex flex-col items-center gap-2">
                    <Package className="h-8 w-8 text-gray-300" />
                    <span>No lab orders yet. Click "New Lab Order" to add one.</span>
                  </div>
                </TableCell>
              </TableRow>
            ) : (
              orders.map((order) => (
                <TableRow key={order.id} className={order.rush ? "bg-red-50/40" : ""}>
                  <TableCell className="text-sm">{order.orderDate}</TableCell>
                  <TableCell className="font-mono text-sm">{order.tooth || "—"}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1.5">
                      <span className="text-sm font-medium">{order.caseType}</span>
                      {order.rush && (
                        <Badge className="text-[10px] bg-red-100 text-red-600 border-red-200 px-1 py-0" variant="outline">
                          RUSH
                        </Badge>
                      )}
                    </div>
                    {order.notes && (
                      <p className="text-xs text-gray-400 truncate max-w-xs mt-0.5">{order.notes}</p>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">{order.lab || "—"}</TableCell>
                  <TableCell className="text-center text-sm">{order.shade || "—"}</TableCell>
                  <TableCell className="text-sm text-gray-600">{order.dueDate || "—"}</TableCell>
                  <TableCell>
                    <Badge className={`text-xs border ${STATUS_COLORS[order.status]}`} variant="outline">
                      {STATUS_LABELS[order.status]}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex justify-end gap-1">
                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(order)}>
                        <Pencil className="h-3.5 w-3.5" />
                      </Button>
                      <Button variant="ghost" size="icon" className="h-7 w-7 text-red-500 hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(order.id)}>
                        <Trash2 className="h-3.5 w-3.5" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Lab Order</DialogTitle>
          </DialogHeader>
          <div className="grid grid-cols-2 gap-3 py-2">
            <div className="space-y-1">
              <Label className="text-xs">Order Date</Label>
              <Input
                type="date"
                value={editing.orderDate}
                onChange={(e) => setEditing((d) => ({ ...d, orderDate: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Due Date</Label>
              <Input
                type="date"
                value={editing.dueDate}
                onChange={(e) => setEditing((d) => ({ ...d, dueDate: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Tooth #</Label>
              <Input
                placeholder="e.g. 14"
                value={editing.tooth}
                onChange={(e) => setEditing((d) => ({ ...d, tooth: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Shade</Label>
              <Select
                value={editing.shade}
                onValueChange={(v) => setEditing((d) => ({ ...d, shade: v }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue placeholder="Select..." />
                </SelectTrigger>
                <SelectContent>
                  {SHADES.map((s) => <SelectItem key={s} value={s}>{s}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Case Type</Label>
              <Select
                value={editing.caseType}
                onValueChange={(v) => setEditing((d) => ({ ...d, caseType: v }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue placeholder="Select case type..." />
                </SelectTrigger>
                <SelectContent>
                  {CASE_TYPES.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Lab</Label>
              <Select
                value={editing.lab}
                onValueChange={(v) => setEditing((d) => ({ ...d, lab: v }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue placeholder="Select lab..." />
                </SelectTrigger>
                <SelectContent>
                  {COMMON_LABS.map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Status</Label>
              <Select
                value={editing.status}
                onValueChange={(v) => setEditing((d) => ({ ...d, status: v as LabStatus }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {(Object.keys(STATUS_LABELS) as LabStatus[]).map((s) => (
                    <SelectItem key={s} value={s}>{STATUS_LABELS[s]}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Tracking #</Label>
              <Input
                placeholder="Optional"
                value={editing.trackingNumber}
                onChange={(e) => setEditing((d) => ({ ...d, trackingNumber: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="col-span-2 flex items-center gap-2">
              <input
                type="checkbox"
                id="rush"
                checked={editing.rush}
                onChange={(e) => setEditing((d) => ({ ...d, rush: e.target.checked }))}
                className="h-4 w-4 rounded border-gray-300"
              />
              <Label htmlFor="rush" className="text-sm cursor-pointer text-red-600 font-medium">
                Rush Order
              </Label>
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Notes</Label>
              <Textarea
                placeholder="Special instructions, shade details..."
                value={editing.notes}
                onChange={(e) => setEditing((d) => ({ ...d, notes: e.target.value }))}
                className="text-sm resize-none"
                rows={2}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleSave} disabled={!editing.caseType}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
