import { useState } from "react";
import { motion } from "framer-motion";
import { FileText, Search, Plus, MoreVertical, Eye, Edit, Download, Calendar, Stethoscope } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";

const medicalRecords = [
  {
    id: "MR-001",
    pet: "Max",
    species: "Dog",
    owner: "John Kamau",
    date: "2024-12-10",
    type: "General Checkup",
    diagnosis: "Healthy - routine examination",
    treatment: "None required",
    vet: "Dr. Amara Njeri",
    notes: "Pet in excellent health. Weight stable. Recommended continuing current diet.",
    followUp: "Annual checkup in 12 months",
  },
  {
    id: "MR-002",
    pet: "Bella",
    species: "Cat",
    owner: "Sarah Wanjiku",
    date: "2024-12-08",
    type: "Vaccination",
    diagnosis: "Healthy",
    treatment: "FVRCP vaccine administered",
    vet: "Dr. James Ochieng",
    notes: "Vaccine well tolerated. Monitor for 24 hours for any reactions.",
    followUp: "Booster in 3 weeks",
  },
  {
    id: "MR-003",
    pet: "Charlie",
    species: "Dog",
    owner: "David Omondi",
    date: "2024-12-05",
    type: "Dental",
    diagnosis: "Moderate tartar buildup, gingivitis",
    treatment: "Professional dental cleaning under anesthesia",
    vet: "Dr. Amara Njeri",
    notes: "Extracted one loose molar. Prescribed antibiotics for 7 days.",
    followUp: "Dental check in 6 months",
  },
  {
    id: "MR-004",
    pet: "Luna",
    species: "Cat",
    owner: "Grace Muthoni",
    date: "2024-12-01",
    type: "Surgery",
    diagnosis: "Scheduled spaying",
    treatment: "Ovariohysterectomy performed successfully",
    vet: "Dr. Peter Mwangi",
    notes: "Surgery completed without complications. Kept overnight for observation.",
    followUp: "Suture removal in 10 days",
  },
  {
    id: "MR-005",
    pet: "Rocky",
    species: "Dog",
    owner: "Peter Njoroge",
    date: "2024-11-28",
    type: "Emergency",
    diagnosis: "Acute gastritis",
    treatment: "IV fluids, anti-emetics, gastroprotectants",
    vet: "Dr. James Ochieng",
    notes: "Pet presented with vomiting and lethargy. Suspected dietary indiscretion.",
    followUp: "Check in 3 days if symptoms persist",
  },
  {
    id: "MR-006",
    pet: "Milo",
    species: "Dog",
    owner: "Anne Wambui",
    date: "2024-11-25",
    type: "Dermatology",
    diagnosis: "Allergic dermatitis",
    treatment: "Antihistamines, medicated shampoo, dietary changes",
    vet: "Dr. Amara Njeri",
    notes: "Suspected food allergy. Recommended elimination diet trial.",
    followUp: "Recheck in 4 weeks",
  },
  {
    id: "MR-007",
    pet: "Whiskers",
    species: "Cat",
    owner: "James Otieno",
    date: "2024-11-20",
    type: "Senior Wellness",
    diagnosis: "Early stage kidney disease",
    treatment: "Prescription renal diet, subcutaneous fluids as needed",
    vet: "Dr. Peter Mwangi",
    notes: "Blood work shows elevated creatinine. Started on supportive therapy.",
    followUp: "Blood work recheck in 1 month",
  },
  {
    id: "MR-008",
    pet: "Daisy",
    species: "Dog",
    owner: "Mary Akinyi",
    date: "2024-11-15",
    type: "Vaccination",
    diagnosis: "Healthy puppy",
    treatment: "DHPP vaccine, deworming",
    vet: "Dr. James Ochieng",
    notes: "First puppy vaccination series. Discussed proper nutrition and training.",
    followUp: "Next vaccine in 3 weeks",
  },
];

const MedicalRecords = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const filteredRecords = medicalRecords.filter(
    (r) =>
      r.pet.toLowerCase().includes(searchTerm.toLowerCase()) ||
      r.owner.toLowerCase().includes(searchTerm.toLowerCase()) ||
      r.id.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const getTypeBadgeColor = (type: string) => {
    const colors: Record<string, string> = {
      "General Checkup": "bg-blue-100 text-blue-700",
      Vaccination: "bg-green-100 text-green-700",
      Dental: "bg-purple-100 text-purple-700",
      Surgery: "bg-red-100 text-red-700",
      Emergency: "bg-orange-100 text-orange-700",
      Dermatology: "bg-pink-100 text-pink-700",
      "Senior Wellness": "bg-teal-100 text-teal-700",
    };
    return colors[type] || "bg-gray-100 text-gray-700";
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-display font-bold text-foreground">Medical Records</h1>
          <p className="text-muted-foreground">View and manage patient medical history</p>
        </div>
        <Button variant="hero">
          <Plus className="w-4 h-4 mr-2" />
          New Record
        </Button>
      </div>

      {/* Search */}
      <Card variant="glass">
        <CardContent className="p-4">
          <div className="relative max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              placeholder="Search by pet, owner, or record ID..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

      {/* Records Grid */}
      <div className="grid md:grid-cols-2 gap-4">
        {filteredRecords.map((record, index) => (
          <motion.div
            key={record.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.05 }}
          >
            <Card variant="glass" className="h-full">
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
                      <FileText className="w-6 h-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-foreground">{record.pet}</h3>
                      <p className="text-sm text-muted-foreground">{record.id}</p>
                    </div>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm">
                        <MoreVertical className="w-4 h-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem><Eye className="w-4 h-4 mr-2" /> View Full Record</DropdownMenuItem>
                      <DropdownMenuItem><Edit className="w-4 h-4 mr-2" /> Edit</DropdownMenuItem>
                      <DropdownMenuItem><Download className="w-4 h-4 mr-2" /> Download PDF</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge className={getTypeBadgeColor(record.type)}>{record.type}</Badge>
                    <span className="text-sm text-muted-foreground">{record.species}</span>
                  </div>

                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <div className="flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      {record.date}
                    </div>
                    <div className="flex items-center gap-1">
                      <Stethoscope className="w-4 h-4" />
                      {record.vet}
                    </div>
                  </div>

                  <div>
                    <p className="text-sm font-medium text-foreground mb-1">Diagnosis</p>
                    <p className="text-sm text-muted-foreground">{record.diagnosis}</p>
                  </div>

                  <div>
                    <p className="text-sm font-medium text-foreground mb-1">Treatment</p>
                    <p className="text-sm text-muted-foreground">{record.treatment}</p>
                  </div>

                  <div className="pt-3 border-t border-border">
                    <p className="text-xs text-muted-foreground">
                      <span className="font-medium">Owner:</span> {record.owner}
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">
                      <span className="font-medium">Follow-up:</span> {record.followUp}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </div>
  );
};

export default MedicalRecords;