import React, { useState, useEffect, useMemo } from 'react';
import { 
  LayoutDashboard, Users, Pill, Activity, Search, Plus, 
  AlertCircle, CheckCircle, FileText, Clock, UserPlus, 
  Printer, Bone, Trash2, ShieldAlert, ChevronDown, ChevronUp, User,
  Droplets
} from 'lucide-react';

// --- ADVANCED MOCK DATA ---

const initialPatients = [
  { 
    id: 1, name: 'John Doe', dob: '1978-05-15', gender: 'Male', weight: 85, height: 178, bloodType: 'O+', 
    phone: '555-0101', email: 'john@example.com',
    allergies: ['Penicillin'], 
    chronicConditions: ['Hypertension', 'Type 2 Diabetes'], 
    currentMeds: ['Metformin 500mg'] 
  },
  { 
    id: 2, name: 'Timmy Smith', dob: '2019-08-22', gender: 'Male', weight: 18, height: 110, bloodType: 'A-', 
    phone: '555-0102', email: 'parent@example.com',
    allergies: [], 
    chronicConditions: ['Asthma'], 
    currentMeds: ['Albuterol Inhaler'] 
  },
  { 
    id: 3, name: 'Jane Roe', dob: '1945-11-03', gender: 'Female', weight: 62, height: 160, bloodType: 'AB+', 
    phone: '555-0103', email: 'jane.roe@example.com',
    allergies: ['Sulfa Drugs', 'Latex'], 
    chronicConditions: ['CKD Stage 3', 'Atrial Fibrillation', 'Osteoarthritis'], 
    currentMeds: ['Warfarin 5mg', 'Amlodipine 5mg'] 
  }
];

// Rich Medication Database with Interaction Mapping
const medicationsDB = [
  { id: 'm1', name: 'Amoxicillin', class: 'Antibiotic (Penicillin)', defaultDose: '500mg', defaultRoute: 'PO', defaultFreq: 'TID', interactsWith: [] },
  { id: 'm2', name: 'Warfarin', class: 'Anticoagulant', defaultDose: '5mg', defaultRoute: 'PO', defaultFreq: 'QD', interactsWith: ['m4', 'm5'] },
  { id: 'm3', name: 'Lisinopril', class: 'ACE Inhibitor', defaultDose: '10mg', defaultRoute: 'PO', defaultFreq: 'QD', interactsWith: ['m4'] },
  { id: 'm4', name: 'Ibuprofen', class: 'NSAID', defaultDose: '400mg', defaultRoute: 'PO', defaultFreq: 'PRN', interactsWith: ['m2', 'm3'] },
  { id: 'm5', name: 'Aspirin', class: 'NSAID / Antiplatelet', defaultDose: '81mg', defaultRoute: 'PO', defaultFreq: 'QD', interactsWith: ['m2'] },
  { id: 'm6', name: 'Azithromycin', class: 'Antibiotic (Macrolide)', defaultDose: '250mg', defaultRoute: 'PO', defaultFreq: 'QD', interactsWith: [] },
  { id: 'm7', name: 'Metformin', class: 'Antidiabetic', defaultDose: '500mg', defaultRoute: 'PO', defaultFreq: 'BID', interactsWith: [] },
  { id: 'm8', name: 'Bactrim', class: 'Antibiotic (Sulfa)', defaultDose: '800/160mg', defaultRoute: 'PO', defaultFreq: 'BID', interactsWith: [] }
];

export default function ClinicMindApp() {
  const [currentView, setCurrentView] = useState('dashboard');
  const [patients, setPatients] = useState(initialPatients);
  const [prescriptions, setPrescriptions] = useState([]);
  const [radiologyOrders, setRadiologyOrders] = useState([
    { id: 101, patient: 'Jane Roe', type: 'MRI Brain w/ Contrast', status: 'Resulted', date: '2026-04-04' },
    { id: 102, patient: 'John Doe', type: 'Chest X-Ray PA/Lat', status: 'Pending', date: '2026-04-05' },
    { id: 103, patient: 'Timmy Smith', type: 'Ultrasound Abdomen', status: 'Scheduled', date: '2026-04-06' }
  ]);

  // Helper: Calculate Age from DOB
  const getAge = (dob) => {
    const today = new Date();
    const birthDate = new Date(dob);
    let age = today.getFullYear() - birthDate.getFullYear();
    const m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) age--;
    return age;
  };

  // --- NAVIGATION COMPONENT ---
  const Sidebar = () => (
    <div className="w-64 bg-slate-900 text-slate-300 flex flex-col h-screen fixed left-0 top-0 z-20">
      <div className="p-6 flex items-center gap-2 text-white font-bold text-2xl border-b border-slate-800">
        ⚕️ ClinicMind<span className="text-teal-500">AI</span>
      </div>
      <nav className="flex-1 px-4 py-6 space-y-2 overflow-y-auto custom-scrollbar">
        <NavItem icon={<LayoutDashboard />} label="Dashboard" view="dashboard" />
        <NavItem icon={<Users />} label="Patient Directory" view="patients" />
        <NavItem icon={<Pill />} label="e-Prescribe (Rx)" view="rx" />
        <NavItem icon={<Bone />} label="Radiology & Labs" view="radio" />
        <NavItem icon={<Activity />} label="Dialysis Unit" view="dialysis" />
      </nav>
      <div className="p-4 border-t border-slate-800 text-sm flex items-center gap-3 bg-slate-950">
        <div className="w-9 h-9 rounded-full bg-teal-600 flex items-center justify-center text-white font-bold border-2 border-slate-800 shadow-md">SJ</div>
        <div>
          <p className="text-white font-medium text-sm">Dr. Sarah Jenkins</p>
          <p className="text-xs text-teal-500">Internal Medicine</p>
        </div>
      </div>
    </div>
  );

  const NavItem = ({ icon, label, view }) => {
    const isActive = currentView === view;
    return (
      <button 
        onClick={() => setCurrentView(view)}
        className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all ${isActive ? 'bg-teal-600 text-white shadow-md' : 'hover:bg-slate-800 hover:text-white'}`}
      >
        {React.cloneElement(icon, { size: 20 })}
        <span className="font-medium">{label}</span>
      </button>
    );
  };

  // --- DASHBOARD VIEW ---
  const DashboardView = () => (
    <div className="animate-in fade-in duration-300">
      <header className="mb-8 flex justify-between items-end">
        <div>
          <h1 className="text-3xl font-bold text-slate-800">Overview Dashboard</h1>
          <p className="text-slate-500 mt-1">Real-time clinical insights and pending tasks.</p>
        </div>
        <div className="text-right text-sm text-slate-500 font-medium">
          {new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
        </div>
      </header>
      
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <StatCard icon={<Users />} title="Total Patients" value={patients.length} color="blue" />
        <StatCard icon={<FileText />} title="Pending Rx" value={prescriptions.length} color="purple" />
        <StatCard icon={<Bone />} title="Imaging Orders" value={radiologyOrders.length} color="amber" />
        <StatCard icon={<Activity />} title="Dialysis active" value="1" color="teal" />
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
        <h2 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2"><Clock size={20} className="text-teal-600"/> Recent Clinical Activity</h2>
        <div className="space-y-3">
          {prescriptions.slice(0, 5).map((rx, idx) => (
            <div key={idx} className="flex justify-between items-center p-4 bg-slate-50 hover:bg-slate-100 transition rounded-xl border border-slate-100">
              <div className="flex gap-4 items-center">
                <div className="bg-teal-100 text-teal-700 p-2 rounded-lg"><Pill size={18}/></div>
                <div>
                  <p className="font-bold text-slate-800">{rx.patientName}</p>
                  <p className="text-sm text-slate-500">{rx.meds.length} medication(s) prescribed</p>
                </div>
              </div>
              <span className="text-xs bg-slate-200 text-slate-700 px-3 py-1 rounded-full font-bold">{rx.date}</span>
            </div>
          ))}
          {prescriptions.length === 0 && (
             <div className="text-center py-12 bg-slate-50 rounded-xl border border-dashed border-slate-300">
                <p className="text-slate-500 font-medium">No recent activity. Start by prescribing a medication.</p>
             </div>
          )}
        </div>
      </div>
    </div>
  );

  const StatCard = ({ icon, title, value, color }) => {
    const colorMap = {
      blue: 'bg-blue-50 text-blue-600 border-blue-100',
      purple: 'bg-purple-50 text-purple-600 border-purple-100',
      amber: 'bg-amber-50 text-amber-600 border-amber-100',
      teal: 'bg-teal-50 text-teal-600 border-teal-100'
    };
    return (
      <div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between h-32 hover:shadow-md transition">
        <div className="flex justify-between items-start">
           <p className="text-slate-500 text-sm font-bold uppercase tracking-wider">{title}</p>
           <div className={`p-2 rounded-lg border ${colorMap[color]}`}>{React.cloneElement(icon, { size: 18 })}</div>
        </div>
        <p className="text-4xl font-extrabold text-slate-800">{value}</p>
      </div>
    );
  };

  // --- PATIENTS VIEW (Enhanced) ---
  const PatientsView = () => {
    const [isAdding, setIsAdding] = useState(false);
    const [expandedPt, setExpandedPt] = useState(null);
    const [newPatient, setNewPatient] = useState({ 
      name: '', dob: '', gender: 'Male', weight: '', height: '', bloodType: 'Unknown', phone: '', allergies: '' 
    });

    const handleAddPatient = (e) => {
      e.preventDefault();
      const pt = { 
        ...newPatient, 
        id: Date.now(), 
        weight: parseFloat(newPatient.weight), 
        height: parseFloat(newPatient.height),
        allergies: newPatient.allergies ? newPatient.allergies.split(',').map(s=>s.trim()) : [],
        chronicConditions: [], currentMeds: []
      };
      setPatients([pt, ...patients]);
      setIsAdding(false);
      setNewPatient({ name: '', dob: '', gender: 'Male', weight: '', height: '', bloodType: 'Unknown', phone: '', allergies: '' });
    };

    return (
      <div className="animate-in fade-in duration-300">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold text-slate-800">Patient Directory</h1>
          <button onClick={() => setIsAdding(!isAdding)} className="bg-teal-600 text-white px-5 py-2.5 rounded-xl font-bold hover:bg-teal-700 transition shadow-sm flex items-center gap-2">
            {isAdding ? 'Cancel' : <><UserPlus size={18} /> Register Patient</>}
          </button>
        </div>

        {isAdding && (
          <div className="bg-white p-8 rounded-2xl shadow-md border border-teal-100 mb-8 animate-in slide-in-from-top-4">
            <h2 className="font-bold text-xl mb-6 text-slate-800 border-b pb-3">New Patient Registration</h2>
            <form onSubmit={handleAddPatient} className="grid grid-cols-1 md:grid-cols-3 gap-5">
              <div className="md:col-span-2"><label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Full Name</label><input required type="text" value={newPatient.name} onChange={e=>setNewPatient({...newPatient, name: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50 focus:bg-white focus:ring-2 focus:ring-teal-500 outline-none transition" /></div>
              <div><label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Date of Birth</label><input required type="date" value={newPatient.dob} onChange={e=>setNewPatient({...newPatient, dob: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50 focus:bg-white outline-none" /></div>
              
              <div><label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Weight (kg)</label><input required type="number" step="0.1" value={newPatient.weight} onChange={e=>setNewPatient({...newPatient, weight: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50" /></div>
              <div><label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Height (cm)</label><input required type="number" value={newPatient.height} onChange={e=>setNewPatient({...newPatient, height: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50" /></div>
              
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Gender</label>
                <select value={newPatient.gender} onChange={e=>setNewPatient({...newPatient, gender: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50">
                  <option>Male</option><option>Female</option><option>Other</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Blood Type</label>
                <select value={newPatient.bloodType} onChange={e=>setNewPatient({...newPatient, bloodType: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50">
                  <option>Unknown</option><option>O+</option><option>O-</option><option>A+</option><option>A-</option><option>B+</option><option>B-</option><option>AB+</option><option>AB-</option>
                </select>
              </div>
              
              <div className="md:col-span-2"><label className="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1.5">Known Allergies (Comma separated)</label><input type="text" placeholder="e.g., Penicillin, Peanuts" value={newPatient.allergies} onChange={e=>setNewPatient({...newPatient, allergies: e.target.value})} className="w-full p-2.5 border border-slate-300 rounded-lg bg-slate-50" /></div>

              <div className="md:col-span-3 flex justify-end mt-4 pt-4 border-t border-slate-100">
                <button type="submit" className="bg-slate-900 text-white px-8 py-3 rounded-xl font-bold hover:bg-slate-800 transition">Save Patient Record</button>
              </div>
            </form>
          </div>
        )}

        <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
          <div className="divide-y divide-slate-100">
            {patients.map(p => (
              <div key={p.id} className="flex flex-col">
                {/* Row Header */}
                <div 
                  className="flex items-center justify-between p-4 hover:bg-slate-50 cursor-pointer transition"
                  onClick={() => setExpandedPt(expandedPt === p.id ? null : p.id)}
                >
                  <div className="flex items-center gap-4 w-1/3">
                    <div className="w-10 h-10 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center font-bold">
                      {p.name.split(' ').map(n=>n[0]).join('')}
                    </div>
                    <div>
                      <p className="font-bold text-slate-800">{p.name}</p>
                      <p className="text-xs text-slate-500">ID: PT-{10000 + p.id}</p>
                    </div>
                  </div>
                  <div className="w-1/4">
                    <p className="text-sm font-medium text-slate-700">{getAge(p.dob)} yrs • {p.gender}</p>
                    <p className="text-xs text-slate-500">DOB: {p.dob}</p>
                  </div>
                  <div className="w-1/4 flex gap-1 flex-wrap">
                    {p.allergies.length > 0 ? (
                       <span className="text-xs bg-red-50 text-red-700 border border-red-200 px-2 py-1 rounded-md flex items-center gap-1 font-bold">
                         <ShieldAlert size={12}/> {p.allergies.length} Allergies
                       </span>
                    ) : <span className="text-xs text-slate-400">NKA</span>}
                  </div>
                  <div className="w-12 flex justify-end text-slate-400">
                    {expandedPt === p.id ? <ChevronUp /> : <ChevronDown />}
                  </div>
                </div>

                {/* Expanded Details */}
                {expandedPt === p.id && (
                  <div className="bg-slate-50 p-6 border-t border-slate-100 grid grid-cols-1 md:grid-cols-3 gap-6 animate-in slide-in-from-top-2">
                    <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                      <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Vitals & Demographics</h4>
                      <div className="space-y-2 text-sm">
                        <div className="flex justify-between"><span className="text-slate-500">Weight:</span> <span className="font-medium text-slate-800">{p.weight} kg</span></div>
                        <div className="flex justify-between"><span className="text-slate-500">Height:</span> <span className="font-medium text-slate-800">{p.height} cm</span></div>
                        <div className="flex justify-between"><span className="text-slate-500">BMI:</span> <span className="font-medium text-slate-800">{((p.weight / ((p.height/100)**2)) || 0).toFixed(1)}</span></div>
                        <div className="flex justify-between"><span className="text-slate-500">Blood:</span> <span className="font-medium text-red-600">{p.bloodType}</span></div>
                      </div>
                    </div>

                    <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                      <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                         <ShieldAlert size={14} className="text-red-500"/> Allergies
                      </h4>
                      {p.allergies.length > 0 ? (
                        <ul className="list-disc pl-5 text-sm text-red-700 font-medium space-y-1">
                          {p.allergies.map(a => <li key={a}>{a}</li>)}
                        </ul>
                      ) : <p className="text-sm text-slate-500 italic">No Known Allergies (NKA)</p>}
                    </div>

                    <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
                      <div>
                        <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Chronic Conditions</h4>
                        {p.chronicConditions.length > 0 ? (
                          <div className="flex flex-wrap gap-2">
                            {p.chronicConditions.map(c => <span key={c} className="text-xs bg-blue-50 text-blue-700 border border-blue-100 px-2 py-1 rounded-md">{c}</span>)}
                          </div>
                        ) : <p className="text-sm text-slate-500 italic">None recorded</p>}
                      </div>
                      <button onClick={() => setCurrentView('rx')} className="w-full mt-4 bg-slate-900 text-white py-2 rounded-lg text-sm font-bold hover:bg-teal-600 transition">
                        Start e-Prescription
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  // --- ADVANCED e-PRESCRIPTION (Rx) MODULE ---
  const PrescriptionView = () => {
    const [selectedPatientId, setSelectedPatientId] = useState('');
    // Dynamic array for multiple drugs
    const [rxList, setRxList] = useState([{ id: Date.now(), medId: '', dose: '', route: 'PO', freq: 'QD', duration: '7 days', disp: '' }]);
    const [aiStatus, setAiStatus] = useState('idle'); 
    const [aiMessages, setAiMessages] = useState([]); // Array of { type: 'danger'|'warning'|'safe', msg }

    const activePatient = patients.find(p => p.id === parseInt(selectedPatientId));

    // When patient changes or rxList changes, reset AI status
    useEffect(() => { setAiStatus('idle'); setAiMessages([]); }, [selectedPatientId, rxList]);

    const addMedRow = () => {
      setRxList([...rxList, { id: Date.now(), medId: '', dose: '', route: 'PO', freq: 'QD', duration: '7 days', disp: '' }]);
    };

    const removeMedRow = (id) => {
      if(rxList.length > 1) {
        setRxList(rxList.filter(row => row.id !== id));
      }
    };

    const updateMedRow = (id, field, value) => {
      setRxList(rxList.map(row => {
        if (row.id === id) {
          const newRow = { ...row, [field]: value };
          // Auto-populate defaults if med changes
          if (field === 'medId' && value !== '') {
            const medDef = medicationsDB.find(m => m.id === value);
            if(medDef) {
              newRow.dose = medDef.defaultDose;
              newRow.route = medDef.defaultRoute;
              newRow.freq = medDef.defaultFreq;
            }
          }
          return newRow;
        }
        return row;
      }));
    };

    const runAdvancedAiCheck = () => {
      if (!activePatient) { alert("Select a patient first."); return; }
      
      const selectedMeds = rxList.filter(row => row.medId !== '').map(row => medicationsDB.find(m => m.id === row.medId));
      if (selectedMeds.length === 0) { alert("Add at least one medication."); return; }

      setAiStatus('analyzing');
      setAiMessages([]);

      setTimeout(() => {
        let messages = [];
        let hasDanger = false;
        let hasWarning = false;

        const patientAge = getAge(activePatient.dob);

        // 1. ALLERGY CHECK
        selectedMeds.forEach(med => {
          // Simplistic mock allergy check logic (string match class/name)
          const isAllergic = activePatient.allergies.some(alg => 
            med.class.toLowerCase().includes(alg.toLowerCase()) || 
            med.name.toLowerCase().includes(alg.toLowerCase())
          );
          if (isAllergic) {
            hasDanger = true;
            messages.push({ type: 'danger', title: 'Allergy Conflict', msg: `Patient has documented allergy matching ${med.name} (${med.class}). ABSOLUTE CONTRAINDICATION.` });
          }
        });

        // 2. DRUG-DRUG INTERACTION CHECK (O(N^2) pairing)
        for (let i = 0; i < selectedMeds.length; i++) {
          for (let j = i + 1; j < selectedMeds.length; j++) {
            const m1 = selectedMeds[i];
            const m2 = selectedMeds[j];
            if (m1.interactsWith.includes(m2.id) || m2.interactsWith.includes(m1.id)) {
              hasDanger = true;
              messages.push({ type: 'danger', title: 'Severe Interaction', msg: `${m1.name} + ${m2.name}: High risk of adverse reaction. Concurrent use requires strict monitoring.` });
            }
          }
        }

        // 3. PEDIATRIC DOSAGE CHECK
        if (patientAge < 12) {
          selectedMeds.forEach(med => {
            // Find specific row for this med to check dose
            const row = rxList.find(r => r.medId === med.id);
            if (row && row.dose.includes('500mg') && med.name === 'Amoxicillin') {
               hasWarning = true;
               messages.push({ type: 'warning', title: 'Pediatric Dosage', msg: `${med.name} 500mg exceeds standard weight-based dosing for a ${patientAge}-yr-old (${activePatient.weight}kg). Consider 250mg.` });
            }
          });
        }

        // Generate Status
        if (messages.length === 0) {
          setAiStatus('safe');
          setAiMessages([{ type: 'safe', title: 'All Clear', msg: 'No allergies or drug-drug interactions detected. Dosages appear appropriate.' }]);
        } else {
          setAiStatus(hasDanger ? 'danger' : 'warning');
          setAiMessages(messages);
        }

      }, 1200);
    };

    const handleSign = () => {
      if(aiStatus === 'idle' || aiStatus === 'analyzing') { alert("Run AI Check First."); return; }
      
      const prescribedDrugs = rxList.filter(r => r.medId !== '').map(r => {
        const name = medicationsDB.find(m => m.id === r.medId)?.name;
        return `${name} ${r.dose} ${r.route} ${r.freq}`;
      });

      const newRx = { patientName: activePatient.name, meds: prescribedDrugs, date: new Date().toLocaleDateString() };
      setPrescriptions([newRx, ...prescriptions]);
      alert("Prescription digitally signed & sent to pharmacy/patient portal.");
      
      // Reset
      setRxList([{ id: Date.now(), medId: '', dose: '', route: 'PO', freq: 'QD', duration: '7 days', disp: '' }]);
      setSelectedPatientId('');
    };

    return (
      <div className="animate-in fade-in duration-300">
        <h1 className="text-3xl font-bold text-slate-800 mb-2">Smart e-Prescription Engine</h1>
        <p className="text-slate-500 mb-8">Build complex regimens with real-time multi-drug safety guardrails.</p>

        <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
          
          {/* LEFT: Rx Builder (Takes 2 columns on extra large screens) */}
          <div className="xl:col-span-2 flex flex-col gap-6">
            
            {/* Patient Selector */}
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
              <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Select Patient File</label>
              <div className="flex gap-4 items-center">
                 <select value={selectedPatientId} onChange={e => setSelectedPatientId(e.target.value)} className="flex-1 p-3 border border-slate-300 rounded-xl bg-slate-50 focus:bg-white focus:ring-2 focus:ring-teal-500 outline-none font-medium text-slate-800">
                  <option value="">-- Search & Select Patient --</option>
                  {patients.map(p => <option key={p.id} value={p.id}>{p.name} (DOB: {p.dob})</option>)}
                </select>
                {activePatient && (
                  <div className="hidden md:flex items-center gap-3 bg-blue-50 px-4 py-2 rounded-lg border border-blue-100">
                     <div className="text-blue-700 text-sm font-bold">Wt: {activePatient.weight}kg</div>
                     <div className="w-px h-4 bg-blue-200"></div>
                     <div className="text-red-700 text-sm font-bold flex items-center gap-1"><ShieldAlert size={14}/> {activePatient.allergies.length} Allergies</div>
                  </div>
                )}
              </div>
            </div>

            {/* Dynamic Drug List */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="bg-slate-800 px-6 py-4 flex justify-between items-center">
                <h2 className="font-bold text-white flex items-center gap-2"><Pill size={18}/> Medication Regimen</h2>
                <span className="text-xs bg-slate-700 text-slate-300 px-2 py-1 rounded">Rx Draft</span>
              </div>
              
              <div className="p-6 space-y-4 bg-slate-50">
                {rxList.map((row, index) => (
                  <div key={row.id} className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm relative">
                    {/* Delete Button */}
                    {rxList.length > 1 && (
                      <button onClick={() => removeMedRow(row.id)} className="absolute -right-3 -top-3 bg-red-100 hover:bg-red-200 text-red-600 p-2 rounded-full transition shadow-sm">
                        <Trash2 size={14} />
                      </button>
                    )}

                    <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
                      {/* Drug Name */}
                      <div className="md:col-span-4">
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Drug Name</label>
                        <select value={row.medId} onChange={e => updateMedRow(row.id, 'medId', e.target.value)} className="w-full p-2 border border-slate-300 rounded-md font-medium text-slate-800 outline-none focus:border-teal-500">
                          <option value="">-- Select Drug --</option>
                          {medicationsDB.map(m => <option key={m.id} value={m.id}>{m.name} ({m.class})</option>)}
                        </select>
                      </div>
                      
                      {/* Dose */}
                      <div className="md:col-span-2">
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Dose</label>
                        <input type="text" value={row.dose} onChange={e => updateMedRow(row.id, 'dose', e.target.value)} placeholder="e.g. 500mg" className="w-full p-2 border border-slate-300 rounded-md outline-none focus:border-teal-500" disabled={!row.medId}/>
                      </div>

                      {/* Route */}
                      <div className="md:col-span-2">
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Route</label>
                        <select value={row.route} onChange={e => updateMedRow(row.id, 'route', e.target.value)} className="w-full p-2 border border-slate-300 rounded-md outline-none focus:border-teal-500" disabled={!row.medId}>
                          <option value="PO">Oral (PO)</option><option value="IV">IV</option><option value="IM">IM</option><option value="TOP">Topical</option>
                        </select>
                      </div>

                      {/* Frequency */}
                      <div className="md:col-span-2">
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Freq</label>
                        <select value={row.freq} onChange={e => updateMedRow(row.id, 'freq', e.target.value)} className="w-full p-2 border border-slate-300 rounded-md outline-none focus:border-teal-500" disabled={!row.medId}>
                          <option value="QD">Daily (QD)</option><option value="BID">Twice (BID)</option><option value="TID">3x (TID)</option><option value="QID">4x (QID)</option><option value="PRN">As Needed (PRN)</option>
                        </select>
                      </div>

                       {/* Duration */}
                       <div className="md:col-span-2">
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Duration</label>
                        <input type="text" value={row.duration} onChange={e => updateMedRow(row.id, 'duration', e.target.value)} placeholder="e.g. 7 days" className="w-full p-2 border border-slate-300 rounded-md outline-none focus:border-teal-500" disabled={!row.medId}/>
                      </div>
                    </div>
                  </div>
                ))}

                <button onClick={addMedRow} className="w-full py-3 border-2 border-dashed border-teal-300 text-teal-700 bg-teal-50 hover:bg-teal-100 rounded-xl font-bold flex items-center justify-center gap-2 transition">
                  <Plus size={18}/> Add Another Medication
                </button>
              </div>
            </div>

          </div>

          {/* RIGHT: AI Safety Engine & Actions */}
          <div className="xl:col-span-1 flex flex-col gap-6">
            
            <button onClick={runAdvancedAiCheck} className="w-full bg-slate-900 text-teal-400 py-4 rounded-2xl font-bold hover:bg-slate-800 transition shadow-lg flex items-center justify-center gap-3 text-lg border border-slate-700">
              <Activity size={24} /> Run AI Safety Scan
            </button>

            {/* AI Output Console */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col min-h-[400px]">
              <div className="bg-slate-100 px-6 py-4 border-b border-slate-200 flex items-center gap-2">
                <ShieldAlert className="text-slate-500" size={18}/> 
                <h3 className="font-bold text-slate-700">Safety Report</h3>
              </div>
              
              <div className="p-6 flex-1 overflow-y-auto bg-slate-50 custom-scrollbar">
                {aiStatus === 'idle' && (
                  <div className="h-full flex flex-col items-center justify-center text-slate-400 text-center">
                    <Search size={48} className="mb-4 opacity-50"/>
                    <p className="font-medium">Build your prescription and run the scan to detect conflicts.</p>
                  </div>
                )}

                {aiStatus === 'analyzing' && (
                  <div className="h-full flex flex-col items-center justify-center text-blue-500 text-center">
                    <Activity size={48} className="mb-4 animate-spin"/>
                    <p className="font-bold">Analyzing Medical Knowledge Graph...</p>
                    <p className="text-sm mt-2 text-slate-500">Cross-referencing {rxList.length} drug(s) with patient history.</p>
                  </div>
                )}

                {(aiStatus === 'safe' || aiStatus === 'warning' || aiStatus === 'danger') && (
                  <div className="space-y-4">
                    {aiMessages.map((msg, i) => (
                      <div key={i} className={`p-4 rounded-xl border-l-4 animate-in slide-in-from-right-4 ${
                        msg.type === 'danger' ? 'bg-red-50 border-red-500 text-red-900' :
                        msg.type === 'warning' ? 'bg-amber-50 border-amber-500 text-amber-900' :
                        'bg-green-50 border-green-500 text-green-900'
                      }`}>
                        <div className="flex items-center gap-2 font-bold mb-1">
                          {msg.type === 'danger' && <AlertCircle size={16}/>}
                          {msg.type === 'warning' && <AlertCircle size={16}/>}
                          {msg.type === 'safe' && <CheckCircle size={16}/>}
                          {msg.title}
                        </div>
                        <p className="text-sm font-medium opacity-90">{msg.msg}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Action Area Footer */}
              <div className="p-6 bg-white border-t border-slate-200">
                 <button 
                  onClick={handleSign}
                  disabled={aiStatus === 'idle' || aiStatus === 'analyzing' || aiStatus === 'danger'}
                  className="w-full bg-teal-600 disabled:bg-slate-300 disabled:cursor-not-allowed text-white py-4 rounded-xl font-bold hover:bg-teal-700 transition flex items-center justify-center gap-2 shadow-md"
                >
                  <Printer size={20}/> Cryptographically Sign Script
                </button>
              </div>
            </div>

          </div>

        </div>
      </div>
    );
  };

  // --- MINOR MODULES: RADIOLOGY & LABS ---
  const RadiologyView = () => {
    const [newOrder, setNewOrder] = useState({ patientId: '', type: 'X-Ray', detail: '', indication: '' });

    const handleSubmit = (e) => {
      e.preventDefault();
      if(!newOrder.patientId) return alert('Please select a patient.');
      const patient = patients.find(p => p.id === parseInt(newOrder.patientId));
      setRadiologyOrders([{ 
        id: Date.now(), 
        patient: patient.name, 
        type: `${newOrder.type} - ${newOrder.detail || 'General'}`, 
        status: 'Pending', 
        date: new Date().toLocaleDateString() 
      }, ...radiologyOrders]);
      setNewOrder({ patientId: '', type: 'X-Ray', detail: '', indication: '' });
      alert('Diagnostic order submitted successfully.');
    };

    return (
      <div className="animate-in fade-in duration-300">
        <h1 className="text-3xl font-bold text-slate-800 mb-2">Radiology & Labs</h1>
        <p className="text-slate-500 mb-8">Order diagnostics and track results in real-time.</p>

        <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
          {/* Form */}
          <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 h-fit">
            <h2 className="font-bold text-lg mb-6 border-b pb-2 flex items-center gap-2"><Plus size={20} className="text-teal-600"/> New Order</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Patient</label>
                <select value={newOrder.patientId} onChange={e=>setNewOrder({...newOrder, patientId: e.target.value})} className="w-full p-3 border border-slate-300 rounded-xl bg-slate-50 outline-none focus:ring-2 focus:ring-teal-500 font-medium" required>
                  <option value="">Select Patient...</option>
                  {patients.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Modality</label>
                <select value={newOrder.type} onChange={e=>setNewOrder({...newOrder, type: e.target.value})} className="w-full p-3 border border-slate-300 rounded-xl bg-slate-50 outline-none focus:ring-2 focus:ring-teal-500 font-medium">
                  <option>X-Ray</option>
                  <option>MRI</option>
                  <option>CT Scan</option>
                  <option>Ultrasound</option>
                  <option>Blood Panel</option>
                </select>
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Body Part / Specifics</label>
                <input type="text" value={newOrder.detail} onChange={e=>setNewOrder({...newOrder, detail: e.target.value})} placeholder="e.g. Chest PA/Lat" className="w-full p-3 border border-slate-300 rounded-xl bg-slate-50 outline-none focus:ring-2 focus:ring-teal-500" required/>
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Clinical Indication</label>
                <textarea value={newOrder.indication} onChange={e=>setNewOrder({...newOrder, indication: e.target.value})} rows="3" placeholder="Reason for exam..." className="w-full p-3 border border-slate-300 rounded-xl bg-slate-50 outline-none focus:ring-2 focus:ring-teal-500" required></textarea>
              </div>
              <button type="submit" className="w-full bg-slate-900 text-white py-3 rounded-xl font-bold hover:bg-teal-600 transition shadow-md">Submit Order</button>
            </form>
          </div>
          
          {/* Queue */}
          <div className="xl:col-span-2">
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="bg-slate-800 text-white p-5 flex justify-between items-center">
                  <h4 className="font-bold flex items-center gap-2"><Bone size={20} className="text-teal-400"/> Imaging Queue</h4>
                  <span className="text-xs font-bold bg-slate-700 px-2 py-1 rounded-md">{radiologyOrders.length} Total</span>
              </div>
              <div className="p-6 space-y-4 bg-slate-50">
                {radiologyOrders.map(order => (
                  <div key={order.id} className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex justify-between items-center hover:border-teal-300 transition">
                    <div className="flex gap-4 items-center">
                      <div className={`p-3 rounded-xl ${order.status === 'Resulted' ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'}`}>
                        <Bone size={24}/>
                      </div>
                      <div>
                        <h4 className="font-bold text-slate-800">{order.type}</h4>
                        <p className="text-xs text-slate-500 mt-0.5">Patient: <span className="font-medium text-slate-700">{order.patient}</span> • Ordered: {order.date}</p>
                      </div>
                    </div>
                    <span className={`px-4 py-1.5 rounded-full text-xs font-bold border ${
                      order.status === 'Pending' ? 'bg-amber-50 text-amber-700 border-amber-200' : 
                      order.status === 'Scheduled' ? 'bg-blue-50 text-blue-700 border-blue-200' :
                      'bg-green-50 text-green-700 border-green-200'}`}>
                      {order.status}
                    </span>
                  </div>
                ))}
                {radiologyOrders.length === 0 && <p className="text-center text-slate-500 py-8">No imaging orders in the queue.</p>}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // --- MINOR MODULES: DIALYSIS UNIT ---
  const DialysisView = () => {
    return (
      <div className="animate-in fade-in duration-300">
         <h1 className="text-3xl font-bold text-slate-800 mb-2">Dialysis Unit Management</h1>
         <p className="text-slate-500 mb-8">Real-time monitoring of active dialysis stations and maintenance tracking.</p>

         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            
            {/* Active Station Card */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 relative overflow-hidden">
                <div className="absolute top-0 left-0 w-full h-1 bg-green-500"></div>
                <div className="flex justify-between items-start mb-6">
                    <div className="flex gap-4 items-center">
                        <div className="w-12 h-12 rounded-xl bg-teal-50 flex items-center justify-center text-teal-700 font-bold text-xl border border-teal-100 shadow-sm">JD</div>
                        <div>
                            <h4 className="font-bold text-slate-800">Station A-01</h4>
                            <p className="text-sm text-slate-500">John Doe</p>
                        </div>
                    </div>
                    <span className="text-[10px] font-bold bg-green-50 border border-green-200 text-green-700 px-2 py-1 rounded-full flex items-center gap-1.5 shadow-sm">
                        <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
                        ACTIVE
                    </span>
                </div>
                
                <div className="grid grid-cols-2 gap-4 mb-6">
                    <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
                        <p className="text-[10px] text-slate-500 uppercase font-bold tracking-wide">Blood Flow</p>
                        <p className="text-3xl font-extrabold text-slate-800 mt-1">350 <span className="text-xs font-medium text-slate-400">ml/min</span></p>
                    </div>
                    <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
                        <p className="text-[10px] text-slate-500 uppercase font-bold tracking-wide">UF Rate</p>
                        <p className="text-3xl font-extrabold text-slate-800 mt-1">800 <span className="text-xs font-medium text-slate-400">ml/hr</span></p>
                    </div>
                </div>

                <div className="bg-slate-50 p-5 rounded-xl border border-slate-100">
                    <div className="flex justify-between text-xs mb-3">
                        <span className="font-bold text-slate-700">Session Progress</span>
                        <span className="text-teal-600 font-bold">1h 45m left</span>
                    </div>
                    <div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden">
                        <div className="bg-teal-500 h-2 rounded-full relative" style={{width: '60%'}}>
                           <div className="absolute top-0 left-0 right-0 bottom-0 bg-white/20 animate-[pulse_2s_ease-in-out_infinite]"></div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Maintenance Station Card */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 relative overflow-hidden opacity-80">
                <div className="absolute top-0 left-0 w-full h-1 bg-amber-400"></div>
                <div className="flex justify-between items-start mb-6">
                    <div className="flex gap-4 items-center">
                        <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center text-amber-700 font-bold text-xl border border-amber-100">
                           <Droplets size={24}/>
                        </div>
                        <div>
                            <h4 className="font-bold text-slate-800">Station A-02</h4>
                            <p className="text-sm text-slate-500">Maintenance</p>
                        </div>
                    </div>
                    <span className="text-[10px] font-bold bg-amber-50 border border-amber-200 text-amber-700 px-2 py-1 rounded-full shadow-sm">
                        CLEANING
                    </span>
                </div>
                <div className="flex-1 flex flex-col items-center justify-center py-6">
                   <Activity size={32} className="text-amber-400 mb-3 animate-pulse" />
                   <p className="text-sm text-amber-600 font-bold bg-amber-50 px-4 py-2 rounded-lg border border-amber-100">Sterilization cycle in progress...</p>
                </div>
            </div>

            {/* Empty Station Card */}
             <div className="bg-slate-50 rounded-2xl border-2 border-dashed border-slate-300 p-6 flex flex-col items-center justify-center text-slate-400 min-h-[300px] hover:bg-slate-100 hover:border-teal-300 hover:text-teal-600 transition cursor-pointer group">
                <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm mb-4 group-hover:scale-110 transition-transform">
                    <Plus size={32} />
                </div>
                <p className="font-bold text-lg text-slate-600 group-hover:text-teal-700 transition-colors">Assign Patient</p>
                <p className="text-sm mt-1">Station B-01 is available</p>
            </div>
            
         </div>
      </div>
    );
  }

  // --- MAIN RENDER ---
  return (
    <div className="min-h-screen bg-slate-100 flex font-sans">
      <Sidebar />
      <main className="ml-64 flex-1 p-8 overflow-y-auto h-screen relative">
        {/* Top subtle fade effect */}
        <div className="fixed top-0 left-64 right-0 h-8 bg-gradient-to-b from-slate-100 to-transparent z-10 pointer-events-none"></div>
        <div className="max-w-7xl mx-auto pt-4 pb-20">
          {currentView === 'dashboard' && <DashboardView />}
          {currentView === 'patients' && <PatientsView />}
          {currentView === 'rx' && <PrescriptionView />}
          {currentView === 'radio' && <RadiologyView />}
          {currentView === 'dialysis' && <DialysisView />}
        </div>
      </main>
      
      {/* Global Style overrides for scrollbars within this component scope */}
      <style dangerouslySetInnerHTML={{__html: `
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
      `}} />
    </div>
  );
}