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, Printer } from "lucide-react";

interface Prescription {
  id: number;
  date: string;
  medication: string;
  dosage: string;
  frequency: string;
  duration: string;
  refills: number;
  route: string;
  indication: string;
  instructions: string;
  prescriber: string;
}

const COMMON_MEDICATIONS = [
  "Amoxicillin 500mg",
  "Amoxicillin 875mg",
  "Clindamycin 300mg",
  "Clindamycin 150mg",
  "Metronidazole 500mg",
  "Azithromycin 250mg",
  "Ibuprofen 400mg",
  "Ibuprofen 600mg",
  "Ibuprofen 800mg",
  "Acetaminophen 500mg",
  "Naproxen 500mg",
  "Hydrocodone/APAP 5-325mg",
  "Oxycodone 5mg",
  "Tramadol 50mg",
  "Dexamethasone 4mg",
  "Prednisone 20mg",
  "Chlorhexidine 0.12% Rinse",
  "Nystatin Oral Suspension",
  "Fluconazole 150mg",
  "Benzocaine Topical",
];

const FREQUENCIES = [
  "Once daily (QD)",
  "Twice daily (BID)",
  "Three times daily (TID)",
  "Four times daily (QID)",
  "Every 4 hours",
  "Every 6 hours",
  "Every 8 hours",
  "Every 12 hours",
  "As needed (PRN)",
  "With food",
];

const ROUTES = ["Oral", "Topical", "Sublingual", "Rinse and spit"];

let nextId = 1;
const newRx = (): Prescription => ({
  id: nextId++,
  date: new Date().toISOString().substring(0, 10),
  medication: "",
  dosage: "",
  frequency: "",
  duration: "",
  refills: 0,
  route: "Oral",
  indication: "",
  instructions: "",
  prescriber: "",
});

export function PrescriptionTab() {
  const [prescriptions, setPrescriptions] = useState<Prescription[]>([]);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<Prescription>(newRx());

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

  const openEdit = (rx: Prescription) => {
    setEditing({ ...rx });
    setDialogOpen(true);
  };

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

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

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-sm text-gray-500">
          {prescriptions.length} prescription{prescriptions.length !== 1 ? "s" : ""}
        </p>
        <Button size="sm" onClick={openAdd} className="gap-1.5">
          <Plus className="h-4 w-4" />
          New Prescription
        </Button>
      </div>

      <div className="border rounded-lg overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50">
              <TableHead className="w-24">Date</TableHead>
              <TableHead>Medication</TableHead>
              <TableHead className="w-32">Frequency</TableHead>
              <TableHead className="w-24">Duration</TableHead>
              <TableHead className="w-16 text-center">Refills</TableHead>
              <TableHead>Prescriber</TableHead>
              <TableHead className="w-24 text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {prescriptions.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center text-gray-400 py-10">
                  No prescriptions yet. Click "New Prescription" to add one.
                </TableCell>
              </TableRow>
            ) : (
              prescriptions.map((rx) => (
                <TableRow key={rx.id}>
                  <TableCell className="text-sm">{rx.date}</TableCell>
                  <TableCell>
                    <div>
                      <p className="text-sm font-medium">{rx.medication}</p>
                      <p className="text-xs text-gray-400">{rx.dosage} · {rx.route}</p>
                      {rx.instructions && (
                        <p className="text-xs text-gray-400 mt-0.5 truncate max-w-xs">{rx.instructions}</p>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">{rx.frequency}</TableCell>
                  <TableCell className="text-sm text-gray-600">{rx.duration}</TableCell>
                  <TableCell className="text-center">
                    <Badge variant="secondary" className="text-xs">{rx.refills}</Badge>
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">{rx.prescriber || "—"}</TableCell>
                  <TableCell>
                    <div className="flex justify-end gap-1">
                      <Button variant="ghost" size="icon" className="h-7 w-7" title="Print" onClick={() => window.print()}>
                        <Printer className="h-3.5 w-3.5" />
                      </Button>
                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(rx)}>
                        <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(rx.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>New Prescription</DialogTitle>
          </DialogHeader>
          <div className="grid grid-cols-2 gap-3 py-2">
            <div className="space-y-1">
              <Label className="text-xs">Date</Label>
              <Input
                type="date"
                value={editing.date}
                onChange={(e) => setEditing((d) => ({ ...d, date: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Route</Label>
              <Select
                value={editing.route}
                onValueChange={(v) => setEditing((d) => ({ ...d, route: v }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {ROUTES.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Medication</Label>
              <Select
                value={editing.medication}
                onValueChange={(v) => setEditing((d) => ({ ...d, medication: v }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue placeholder="Select medication..." />
                </SelectTrigger>
                <SelectContent>
                  {COMMON_MEDICATIONS.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Dosage</Label>
              <Input
                placeholder="e.g. 500mg"
                value={editing.dosage}
                onChange={(e) => setEditing((d) => ({ ...d, dosage: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Frequency</Label>
              <Select
                value={editing.frequency}
                onValueChange={(v) => setEditing((d) => ({ ...d, frequency: v }))}
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue placeholder="Select..." />
                </SelectTrigger>
                <SelectContent>
                  {FREQUENCIES.map((f) => <SelectItem key={f} value={f}>{f}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Duration</Label>
              <Input
                placeholder="e.g. 7 days"
                value={editing.duration}
                onChange={(e) => setEditing((d) => ({ ...d, duration: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Refills</Label>
              <Input
                type="number"
                min="0"
                max="12"
                value={editing.refills}
                onChange={(e) => setEditing((d) => ({ ...d, refills: Number(e.target.value) }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Indication</Label>
              <Input
                placeholder="Reason for prescription"
                value={editing.indication}
                onChange={(e) => setEditing((d) => ({ ...d, indication: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Patient Instructions</Label>
              <Textarea
                placeholder="Take with food, avoid alcohol..."
                value={editing.instructions}
                onChange={(e) => setEditing((d) => ({ ...d, instructions: e.target.value }))}
                className="text-sm resize-none"
                rows={2}
              />
            </div>
            <div className="col-span-2 space-y-1">
              <Label className="text-xs">Prescriber</Label>
              <Input
                placeholder="Provider name"
                value={editing.prescriber}
                onChange={(e) => setEditing((d) => ({ ...d, prescriber: e.target.value }))}
                className="h-9 text-sm"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleSave} disabled={!editing.medication}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}