import { useState, useRef } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { Patient } from "@repo/db/types";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Plus, Pencil, Trash2, Printer, X, Check, FlaskConical, ChevronUp, ChevronDown } from "lucide-react";

type LabRxTemplate = {
  id: number;
  name: string;
  labName?: string | null;
  labPhone?: string | null;
  labFax?: string | null;
  labAddress?: string | null;
  labAccount?: string | null;
  caseType?: string | null;
  material?: string | null;
  instructions?: string | null;
  sortOrder: number;
};

type TemplateFormState = {
  name: string;
  labName: string;
  labPhone: string;
  labFax: string;
  labAddress: string;
  labAccount: string;
  caseType: string;
  material: string;
  instructions: string;
};

type RxFields = {
  toothNumbers: string;
  shade: string;
  dueDate: string;
  doctorName: string;
  age: string;
  officeName: string;
  additionalNotes: string;
};

const EMPTY_TEMPLATE: TemplateFormState = {
  name: "", labName: "", labPhone: "", labFax: "",
  labAddress: "", labAccount: "", caseType: "", material: "", instructions: "Please make\nThank you!",
};
const EMPTY_RX: RxFields = { toothNumbers: "", shade: "", dueDate: "", doctorName: "", age: "", officeName: "", additionalNotes: "Please make\nThank you!" };

const calcAge = (dob: string | Date | null | undefined): string => {
  if (!dob) return "";
  const birth = new Date(dob);
  const today = new Date();
  let age = today.getFullYear() - birth.getFullYear();
  const m = today.getMonth() - birth.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--;
  return String(age);
};

const CASE_TYPES = ["Crown", "Bridge", "Veneer", "Inlay/Onlay", "Full Denture", "Partial Denture", "Night Guard", "Retainer", "Implant Crown", "Other"];
const MATERIALS = ["Zirconia", "PFM (Porcelain-Fused-to-Metal)", "E-Max", "Acrylic", "Cast Metal", "Composite", "PMMA", "Other"];

interface Props {
  open: boolean;
  onClose: () => void;
  patient: Patient;
}

export function LabRxModal({ open, onClose, patient }: Props) {
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const printRef = useRef<HTMLDivElement>(null);

  // RX popup
  const [rxTemplate, setRxTemplate] = useState<LabRxTemplate | null>(null);
  const [rx, setRx] = useState<RxFields>(EMPTY_RX);

  // Inline rename (Tab 1 cards)
  const [renamingId, setRenamingId] = useState<number | null>(null);
  const [renameValue, setRenameValue] = useState("");

  // Manage Templates form
  const [showTemplateForm, setShowTemplateForm] = useState(false);
  const [editingTemplateId, setEditingTemplateId] = useState<number | null>(null);
  const [templateForm, setTemplateForm] = useState<TemplateFormState>(EMPTY_TEMPLATE);

  const { data: providers = [] } = useQuery<{ id: number; providerName: string }[]>({
    queryKey: ["/api/npiProviders"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/npiProviders");
      if (!res.ok) throw new Error("Failed to fetch providers");
      return res.json();
    },
    enabled: open,
  });

  const { data: officeContact } = useQuery<{ officeName?: string } | null>({
    queryKey: ["/api/office-contact"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/office-contact");
      if (!res.ok) return null;
      return res.json();
    },
    enabled: open,
  });

  const { data: templates = [], isLoading } = useQuery<LabRxTemplate[]>({
    queryKey: ["/api/lab-rx/templates"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/lab-rx/templates");
      if (!res.ok) throw new Error("Failed to fetch");
      return res.json();
    },
    enabled: open,
  });

  const invalidate = () => queryClient.invalidateQueries({ queryKey: ["/api/lab-rx/templates"] });

  const createMutation = useMutation({
    mutationFn: async (data: TemplateFormState) => {
      const res = await apiRequest("POST", "/api/lab-rx/templates", data);
      if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.message || "Failed to save"); }
      return res.json();
    },
    onSuccess: () => { invalidate(); setShowTemplateForm(false); setTemplateForm(EMPTY_TEMPLATE); toast({ title: "Template saved" }); },
    onError: (e: any) => toast({ title: "Error", description: e.message, variant: "destructive" }),
  });

  const updateMutation = useMutation({
    mutationFn: async ({ id, data }: { id: number; data: Partial<TemplateFormState> }) => {
      const res = await apiRequest("PUT", `/api/lab-rx/templates/${id}`, data);
      if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.message || "Failed to update"); }
      return res.json();
    },
    onSuccess: () => { invalidate(); setEditingTemplateId(null); setTemplateForm(EMPTY_TEMPLATE); setShowTemplateForm(false); toast({ title: "Template updated" }); },
    onError: (e: any) => toast({ title: "Error", description: e.message, variant: "destructive" }),
  });

  const renameMutation = useMutation({
    mutationFn: async ({ id, name }: { id: number; name: string }) => {
      const res = await apiRequest("PUT", `/api/lab-rx/templates/${id}`, { name });
      if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.message || "Failed to rename"); }
      return res.json();
    },
    onSuccess: () => { invalidate(); setRenamingId(null); },
    onError: (e: any) => toast({ title: "Error", description: e.message, variant: "destructive" }),
  });

  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      const res = await apiRequest("DELETE", `/api/lab-rx/templates/${id}`);
      if (!res.ok) throw new Error("Failed to delete");
    },
    onSuccess: () => { invalidate(); toast({ title: "Template deleted" }); },
    onError: (e: any) => toast({ title: "Error", description: e.message, variant: "destructive" }),
  });

  const reorderMutation = useMutation({
    mutationFn: async (orderedIds: number[]) => {
      const res = await apiRequest("POST", "/api/lab-rx/templates/reorder", { orderedIds });
      if (!res.ok) throw new Error("Failed to reorder");
    },
    onSuccess: () => invalidate(),
    onError: (e: any) => toast({ title: "Error", description: e.message, variant: "destructive" }),
  });

  const moveTemplate = (index: number, direction: "up" | "down") => {
    const swapIndex = direction === "up" ? index - 1 : index + 1;
    const reordered = [...templates];
    const a = reordered[index]!;
    const b = reordered[swapIndex]!;
    reordered[index] = b;
    reordered[swapIndex] = a;
    queryClient.setQueryData<LabRxTemplate[]>(["/api/lab-rx/templates"], reordered);
    reorderMutation.mutate(reordered.map((t) => t.id));
  };

  const openRx = (t: LabRxTemplate) => {
    if (renamingId !== null) return;
    setRxTemplate(t);
    setRx({ ...EMPTY_RX, doctorName: providers[0]?.providerName ?? "", age: calcAge(patient.dateOfBirth), officeName: officeContact?.officeName ?? "" });
  };

  const startRename = (e: React.MouseEvent, t: LabRxTemplate) => {
    e.stopPropagation();
    setRenamingId(t.id);
    setRenameValue(t.name);
  };

  const commitRename = () => {
    if (!renameValue.trim()) { toast({ title: "Name cannot be empty", variant: "destructive" }); return; }
    if (renamingId !== null) renameMutation.mutate({ id: renamingId, name: renameValue.trim() });
  };

  const cancelRename = () => setRenamingId(null);

  const openAddTemplate = () => { setEditingTemplateId(null); setTemplateForm(EMPTY_TEMPLATE); setShowTemplateForm(true); };
  const openEditTemplate = (t: LabRxTemplate) => {
    setEditingTemplateId(t.id);
    setTemplateForm({ name: t.name, labName: t.labName ?? "", labPhone: t.labPhone ?? "", labFax: t.labFax ?? "", labAddress: t.labAddress ?? "", labAccount: t.labAccount ?? "", caseType: t.caseType ?? "", material: t.material ?? "", instructions: t.instructions ?? "" });
    setShowTemplateForm(true);
  };
  const handleSaveTemplate = () => {
    if (!templateForm.name.trim()) { toast({ title: "Template name is required", variant: "destructive" }); return; }
    if (editingTemplateId !== null) updateMutation.mutate({ id: editingTemplateId, data: templateForm });
    else createMutation.mutate(templateForm);
  };
  const isSaving = createMutation.isPending || updateMutation.isPending;

  const handlePrint = () => {
    const content = printRef.current;
    if (!content || !rxTemplate) return;
    const win = window.open("", "_blank", "width=800,height=900");
    if (!win) return;
    win.document.write(`<!DOCTYPE html><html><head><title>Lab RX</title>
      <style>
        body{font-family:Arial,sans-serif;margin:0;padding:24px;font-size:13px;color:#111}
        h1{font-size:22px;margin:0 0 4px;text-align:center}
        .subtitle{text-align:center;color:#555;font-size:12px;margin-bottom:12px}
        hr{border:none;border-top:2px solid #000;margin:10px 0}
        .section{margin-bottom:14px}
        .section-title{font-weight:bold;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #bbb;margin-bottom:8px;padding-bottom:3px;color:#333}
        .row{display:flex;gap:24px;margin-bottom:6px}
        .field{flex:1}
        .field label{display:block;font-size:10px;color:#777;margin-bottom:1px}
        .field span{display:block;border-bottom:1px solid #aaa;padding-bottom:2px;min-height:18px;font-size:13px}
        .instructions-box{border:1px solid #bbb;padding:8px;min-height:64px;white-space:pre-wrap;font-size:12px}
        .sig-area{display:flex;gap:48px;margin-top:32px}
        .sig-line{border-top:1px solid #000;padding-top:3px;font-size:10px;color:#777;min-width:180px}
        @media print{body{margin:0}}
      </style>
      </head><body>${content.innerHTML}</body></html>`);
    win.document.close();
    win.focus();
    setTimeout(() => { win.print(); win.close(); }, 300);
  };

  const patientName = `${patient.firstName} ${patient.lastName}`;
  const today = new Date().toLocaleDateString("en-US");

  return (
    <>
      {/* ── Main modal ── */}
      <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FlaskConical className="h-5 w-5" />
              Lab RX — {patientName}
            </DialogTitle>
          </DialogHeader>

          <Tabs defaultValue="rx">
            <TabsList className="mb-4">
              <TabsTrigger value="rx">Create Lab RX</TabsTrigger>
              <TabsTrigger value="templates">Manage Templates</TabsTrigger>
            </TabsList>

            {/* ── Tab 1: pick template ── */}
            <TabsContent value="rx" className="space-y-4">
              <p className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                Click a template to create a Lab RX
              </p>
              {isLoading ? (
                <p className="text-sm text-gray-400">Loading templates…</p>
              ) : templates.length === 0 ? (
                <p className="text-sm text-gray-400">No templates yet. Go to "Manage Templates" to add one.</p>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {templates.map((t) => (
                    <div
                      key={t.id}
                      onClick={() => openRx(t)}
                      className="group relative border rounded-lg p-3 bg-white cursor-pointer hover:border-blue-400 hover:shadow-sm transition-all"
                    >
                      {renamingId === t.id ? (
                        <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                          <Input
                            autoFocus
                            value={renameValue}
                            onChange={(e) => setRenameValue(e.target.value)}
                            onKeyDown={(e) => { if (e.key === "Enter") commitRename(); if (e.key === "Escape") cancelRename(); }}
                            className="h-7 text-sm font-medium"
                          />
                          <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0 text-green-600" onClick={commitRename} disabled={renameMutation.isPending}>
                            <Check className="h-3.5 w-3.5" />
                          </Button>
                          <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={cancelRename}>
                            <X className="h-3.5 w-3.5" />
                          </Button>
                        </div>
                      ) : (
                        <div className="flex items-start justify-between gap-2">
                          <div className="min-w-0">
                            <p className="font-semibold text-sm text-gray-900 truncate">{t.name}</p>
                            {t.labName && <p className="text-xs text-gray-500 mt-0.5">{t.labName}</p>}
                            <div className="flex flex-wrap gap-x-3 gap-y-0.5 mt-1 text-xs text-gray-400">
                              {t.caseType && <span>{t.caseType}</span>}
                              {t.material && <span>{t.material}</span>}
                            </div>
                          </div>
                          <button
                            title="Rename template"
                            onClick={(e) => startRename(e, t)}
                            className="shrink-0 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-100 transition-opacity"
                          >
                            <Pencil className="h-3.5 w-3.5 text-gray-400" />
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </TabsContent>

            {/* ── Tab 2: manage templates ── */}
            <TabsContent value="templates" className="space-y-4">
              <div className="flex items-center justify-between">
                <p className="text-sm text-gray-500">{templates.length} template{templates.length !== 1 ? "s" : ""}</p>
                <Button size="sm" onClick={openAddTemplate} className="gap-1.5">
                  <Plus className="h-4 w-4" /> Add Template
                </Button>
              </div>

              {showTemplateForm && (
                <div className="border rounded-lg overflow-hidden">
                  <div className="bg-gray-100 border-b px-4 py-2.5">
                    <p className="text-sm font-semibold text-gray-800">
                      {editingTemplateId !== null ? "Edit Template" : "New Template"}
                    </p>
                  </div>
                  <div className="p-4 space-y-5 bg-white">

                    {/* Template Name section */}
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <p className="text-xs font-bold uppercase tracking-widest text-blue-600">Template Name</p>
                        <div className="flex-1 h-px bg-blue-100" />
                      </div>
                      <div className="space-y-1">
                        <Label className="text-xs text-gray-600">Name <span className="text-red-500">*</span></Label>
                        <Input
                          placeholder="e.g. Glidewell Crown, Argen Bridge…"
                          value={templateForm.name}
                          onChange={(e) => setTemplateForm((f) => ({ ...f, name: e.target.value }))}
                          className="h-9 text-sm"
                        />
                        <p className="text-xs text-gray-400">This name appears on the template picker button.</p>
                      </div>
                    </div>

                    {/* Lab Information section */}
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <p className="text-xs font-bold uppercase tracking-widest text-gray-500">Lab Information</p>
                        <div className="flex-1 h-px bg-gray-200" />
                      </div>
                      <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-600">Lab Name</Label>
                          <Input placeholder="e.g. Glidewell Dental" value={templateForm.labName} onChange={(e) => setTemplateForm((f) => ({ ...f, labName: e.target.value }))} className="h-9 text-sm" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-600">Account #</Label>
                          <Input placeholder="e.g. 123456" value={templateForm.labAccount} onChange={(e) => setTemplateForm((f) => ({ ...f, labAccount: e.target.value }))} className="h-9 text-sm" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-600">Phone</Label>
                          <Input placeholder="(800) 000-0000" value={templateForm.labPhone} onChange={(e) => setTemplateForm((f) => ({ ...f, labPhone: e.target.value }))} className="h-9 text-sm" />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-600">Fax</Label>
                          <Input placeholder="(800) 000-0001" value={templateForm.labFax} onChange={(e) => setTemplateForm((f) => ({ ...f, labFax: e.target.value }))} className="h-9 text-sm" />
                        </div>
                        <div className="col-span-2 space-y-1">
                          <Label className="text-xs text-gray-600">Address</Label>
                          <Input placeholder="123 Lab St, City, State 00000" value={templateForm.labAddress} onChange={(e) => setTemplateForm((f) => ({ ...f, labAddress: e.target.value }))} className="h-9 text-sm" />
                        </div>
                      </div>
                    </div>

                    {/* Default Case Details section */}
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <p className="text-xs font-bold uppercase tracking-widest text-gray-500">Default Case Details</p>
                        <div className="flex-1 h-px bg-gray-200" />
                      </div>
                      <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-600">Case Type</Label>
                          <Select value={templateForm.caseType} onValueChange={(v) => setTemplateForm((f) => ({ ...f, caseType: v }))}>
                            <SelectTrigger className="h-9 text-sm"><SelectValue placeholder="Select…" /></SelectTrigger>
                            <SelectContent>{CASE_TYPES.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}</SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-600">Material</Label>
                          <Select value={templateForm.material} onValueChange={(v) => setTemplateForm((f) => ({ ...f, material: v }))}>
                            <SelectTrigger className="h-9 text-sm"><SelectValue placeholder="Select…" /></SelectTrigger>
                            <SelectContent>{MATERIALS.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}</SelectContent>
                          </Select>
                        </div>
                        <div className="col-span-2 space-y-1">
                          <Label className="text-xs text-gray-600">Instructions</Label>
                          <Textarea placeholder="Standard instructions for this lab…" value={templateForm.instructions} onChange={(e) => setTemplateForm((f) => ({ ...f, instructions: e.target.value }))} className="text-sm resize-none" rows={3} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="bg-gray-50 border-t px-4 py-3 flex gap-2">
                    <Button size="sm" onClick={handleSaveTemplate} disabled={isSaving}>
                      <Check className="h-3.5 w-3.5 mr-1" />{isSaving ? "Saving…" : "Save Template"}
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => { setShowTemplateForm(false); setEditingTemplateId(null); setTemplateForm(EMPTY_TEMPLATE); }} disabled={isSaving}>
                      <X className="h-3.5 w-3.5 mr-1" /> Cancel
                    </Button>
                  </div>
                </div>
              )}

              {isLoading ? (
                <p className="text-sm text-gray-400 py-4 text-center">Loading…</p>
              ) : templates.length === 0 ? (
                <p className="text-sm text-gray-400 py-8 text-center">No templates yet. Click "Add Template" to create one.</p>
              ) : (
                <div className="space-y-2">
                  {templates.map((t, index) => (
                    <div key={t.id} className="border rounded-lg p-3 bg-white flex items-center gap-2">
                      <div className="flex flex-col shrink-0">
                        <Button
                          variant="ghost" size="icon" className="h-6 w-6 text-gray-400 hover:text-gray-700 disabled:opacity-20"
                          disabled={index === 0 || reorderMutation.isPending}
                          onClick={() => moveTemplate(index, "up")}
                        >
                          <ChevronUp className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost" size="icon" className="h-6 w-6 text-gray-400 hover:text-gray-700 disabled:opacity-20"
                          disabled={index === templates.length - 1 || reorderMutation.isPending}
                          onClick={() => moveTemplate(index, "down")}
                        >
                          <ChevronDown className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm text-gray-900">{t.name}</p>
                        {t.labName && <p className="text-xs text-gray-500">{t.labName}</p>}
                        <div className="flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-gray-400 mt-0.5">
                          {t.caseType && <span>Case: {t.caseType}</span>}
                          {t.material && <span>Material: {t.material}</span>}
                          {t.labPhone && <span>Ph: {t.labPhone}</span>}
                        </div>
                      </div>
                      <div className="flex items-center gap-1 shrink-0">
                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditTemplate(t)}>
                          <Pencil className="h-3.5 w-3.5 text-gray-500" />
                        </Button>
                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => deleteMutation.mutate(t.id)} disabled={deleteMutation.isPending}>
                          <Trash2 className="h-3.5 w-3.5 text-red-500" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>

      {/* ── RX popup ── */}
      <Dialog open={!!rxTemplate} onOpenChange={(v) => { if (!v) setRxTemplate(null); }}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Printer className="h-5 w-5" />
              Lab RX — {rxTemplate?.name}
            </DialogTitle>
          </DialogHeader>

          {rxTemplate && (
            <>
              <div className="space-y-5 py-2">

                {/* Tooth Number section */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <p className="text-xs font-bold uppercase tracking-widest text-blue-600">Tooth Number</p>
                    <div className="flex-1 h-px bg-blue-100" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-1">
                      <Label className="text-xs text-gray-600">Tooth Number(s)</Label>
                      <Input placeholder="e.g. 3, 14, 19" value={rx.toothNumbers} onChange={(e) => setRx((r) => ({ ...r, toothNumbers: e.target.value }))} className="h-9 text-sm" />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs text-gray-600">Shade</Label>
                      <Input placeholder="e.g. A2, B1" value={rx.shade} onChange={(e) => setRx((r) => ({ ...r, shade: e.target.value }))} className="h-9 text-sm" />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs text-gray-600">Age</Label>
                      <Input placeholder="e.g. 72" value={rx.age} onChange={(e) => setRx((r) => ({ ...r, age: e.target.value }))} className="h-9 text-sm" />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs text-gray-600">Due Date</Label>
                      <Input type="date" value={rx.dueDate} onChange={(e) => setRx((r) => ({ ...r, dueDate: e.target.value }))} className="h-9 text-sm" />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs text-gray-600">Doctor's Name</Label>
                      <Select value={rx.doctorName} onValueChange={(v) => setRx((r) => ({ ...r, doctorName: v }))}>
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue placeholder="Select provider…" />
                        </SelectTrigger>
                        <SelectContent>
                          {providers.map((p) => (
                            <SelectItem key={p.id} value={p.providerName}>{p.providerName}</SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="col-span-2 space-y-1">
                      <Label className="text-xs text-gray-600">Dental Office Name</Label>
                      <Input placeholder="e.g. Summit Dental Care" value={rx.officeName} onChange={(e) => setRx((r) => ({ ...r, officeName: e.target.value }))} className="h-9 text-sm" />
                    </div>
                  </div>
                </div>

                {/* Instructions section */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <p className="text-xs font-bold uppercase tracking-widest text-gray-500">Instructions</p>
                    <div className="flex-1 h-px bg-gray-200" />
                  </div>
                  {rxTemplate.instructions && (
                    <div className="rounded-md bg-gray-50 border px-3 py-2 text-xs text-gray-600 whitespace-pre-wrap">
                      <span className="font-medium text-gray-400 block mb-1">From template</span>
                      {rxTemplate.instructions}
                    </div>
                  )}
                  <div className="space-y-1">
                    <Label className="text-xs text-gray-600">Additional Notes</Label>
                    <Textarea placeholder="Any extra instructions for this case…" value={rx.additionalNotes} onChange={(e) => setRx((r) => ({ ...r, additionalNotes: e.target.value }))} className="text-sm resize-none" rows={3} />
                  </div>
                </div>

                {/* RX preview */}
                <div className="border rounded-lg p-4 bg-gray-50 text-sm space-y-3">
                  <div className="text-center border-b pb-3">
                    <p className="font-bold text-base">Dental Lab Prescription</p>
                    <p className="text-xs text-gray-500">
                      Date: {today}{rx.dueDate ? ` · Due: ${new Date(rx.dueDate + "T00:00").toLocaleDateString("en-US")}` : ""}
                    </p>
                  </div>
                  <div className="grid grid-cols-2 gap-x-6 gap-y-1">
                    <div><span className="text-gray-400 text-xs">Patient</span><p className="font-medium">{patientName}</p></div>
                    <div><span className="text-gray-400 text-xs">Age</span><p>{rx.age || "—"}</p></div>
                    {rx.officeName && <div className="col-span-2"><span className="text-gray-400 text-xs">Dental Office</span><p className="font-medium">{rx.officeName}</p></div>}
                    <div className="col-span-2 mt-1 border-t pt-2"><span className="text-gray-400 text-xs">Lab</span><p className="font-medium">{rxTemplate.labName || "—"}</p></div>
                    <div><span className="text-gray-400 text-xs">Phone</span><p>{rxTemplate.labPhone || "—"}</p></div>
                    {rxTemplate.labFax && <div><span className="text-gray-400 text-xs">Fax</span><p>{rxTemplate.labFax}</p></div>}
                    {rxTemplate.labAddress && <div className="col-span-2"><span className="text-gray-400 text-xs">Address</span><p>{rxTemplate.labAddress}</p></div>}
                    {rxTemplate.labAccount && <div><span className="text-gray-400 text-xs">Account #</span><p>{rxTemplate.labAccount}</p></div>}
                    <div className="col-span-2 mt-1 border-t pt-2 grid grid-cols-2 gap-x-6">
                      <div><span className="text-gray-400 text-xs">Case Type</span><p>{rxTemplate.caseType || "—"}</p></div>
                      <div><span className="text-gray-400 text-xs">Material</span><p>{rxTemplate.material || "—"}</p></div>
                      <div><span className="text-gray-400 text-xs">Tooth #</span><p>{rx.toothNumbers || "—"}</p></div>
                      <div><span className="text-gray-400 text-xs">Shade</span><p>{rx.shade || "—"}</p></div>
                      {rx.doctorName && <div><span className="text-gray-400 text-xs">Doctor</span><p>{rx.doctorName}</p></div>}
                    </div>
                    {(rxTemplate.instructions || rx.additionalNotes) && (
                      <div className="col-span-2 mt-1 border-t pt-2">
                        <span className="text-gray-400 text-xs">Instructions</span>
                        <p className="whitespace-pre-wrap text-xs mt-1 text-gray-700">
                          {[rxTemplate.instructions, rx.additionalNotes].filter(Boolean).join("\n\n")}
                        </p>
                      </div>
                    )}
                  </div>
                </div>

              </div>

              {/* Hidden print DOM */}
              <div className="hidden">
                <div ref={printRef}>
                  <h1>Dental Lab Prescription</h1>
                  <div className="subtitle">
                    Date: {today}{rx.dueDate ? ` · Due: ${new Date(rx.dueDate + "T00:00").toLocaleDateString("en-US")}` : ""}
                  </div>
                  <hr />
                  <div className="section">
                    <div className="section-title">Patient Information</div>
                    <div className="row">
                      <div className="field"><label>Patient Name</label><span>{patientName}</span></div>
                      <div className="field"><label>Age</label><span>{rx.age}</span></div>
                      <div className="field"><label>Dental Office</label><span>{rx.officeName}</span></div>
                    </div>
                  </div>
                  <div className="section">
                    <div className="section-title">Dental Lab</div>
                    <div className="row">
                      <div className="field"><label>Lab Name</label><span>{rxTemplate.labName ?? ""}</span></div>
                      <div className="field"><label>Account #</label><span>{rxTemplate.labAccount ?? ""}</span></div>
                    </div>
                    <div className="row">
                      <div className="field"><label>Phone</label><span>{rxTemplate.labPhone ?? ""}</span></div>
                      <div className="field"><label>Fax</label><span>{rxTemplate.labFax ?? ""}</span></div>
                    </div>
                    <div className="row">
                      <div className="field"><label>Address</label><span>{rxTemplate.labAddress ?? ""}</span></div>
                    </div>
                  </div>
                  <div className="section">
                    <div className="section-title">Prescription Details</div>
                    <div className="row">
                      <div className="field"><label>Case Type</label><span>{rxTemplate.caseType ?? ""}</span></div>
                      <div className="field"><label>Material</label><span>{rxTemplate.material ?? ""}</span></div>
                    </div>
                    <div className="row">
                      <div className="field"><label>Tooth Number(s)</label><span>{rx.toothNumbers}</span></div>
                      <div className="field"><label>Shade</label><span>{rx.shade}</span></div>
                    </div>
                    <div className="row">
                      <div className="field"><label>Doctor's Name</label><span>{rx.doctorName}</span></div>
                    </div>
                  </div>
                  <div className="section">
                    <div className="section-title">Instructions</div>
                    <div className="instructions-box">
                      {[rxTemplate.instructions, rx.additionalNotes].filter(Boolean).join("\n\n")}
                    </div>
                  </div>
                  <div className="sig-area">
                    <div className="sig-line">Doctor Signature</div>
                    <div className="sig-line">Date</div>
                  </div>
                </div>
              </div>
            </>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={() => setRxTemplate(null)}>Close</Button>
            <Button onClick={handlePrint} className="gap-2">
              <Printer className="h-4 w-4" /> Print Lab RX
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}