import React, { useState, useEffect } from 'react';
import { 
  Building2, 
  Activity, 
  Truck, 
  PhoneCall, 
  FileText, 
  Settings, 
  Plus, 
  Search, 
  MapPin, 
  Clock, 
  ShieldAlert, 
  CheckCircle2, 
  XCircle, 
  ChevronRight,
  ChevronDown,
  HeartPulse,
  Share2,
  AlertTriangle,
  Monitor,
  Users,
  LayoutDashboard,
  TrendingUp,
  Printer,
  Download,
  Filter,
  Map as MapIcon,
  Video,
  Mic,
  MoreVertical,
  ExternalLink,
  Save,
  Bell,
  Navigation,
  Calendar,
  AlertCircle,
  Heart,
  Wind,
  Thermometer,
  Zap,
  Database,
  Lock,
  Stethoscope,
  Phone,
  Trash2,
  Timer,
  CheckCircle,
  Menu,
  X,
  Eye,
  EyeOff
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Card, StatCard } from '../components/Common';
import { authApi } from '../api/auth';
import './HospitalConsole.css';

type ConsoleModule = 'ED_MONITOR' | 'BOOKINGS' | 'FLEET' | 'TELELINK' | 'EPCR' | 'HISTORY' | 'REPORTS' | 'SETUP' | 'REFERRALS';

export const HospitalConsole: React.FC = () => {
  const [hospitals, setHospitals] = useState<any[]>([]);
  const [isLoadingHospitals, setIsLoadingHospitals] = useState(true);
  const [selectedHospital, setSelectedHospital] = useState<any>(null);
  const [editingHospital, setEditingHospital] = useState<any>(null);
  const [isUpdating, setIsUpdating] = useState(false);
  const [activeModule, setActiveModule] = useState<ConsoleModule>('ED_MONITOR');
  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
  const [successMessage, setSuccessMessage] = useState<string>('');
  const [setupSubTab, setSetupSubTab] = useState('PROFILE');
  const [departments, setDepartments] = useState<any[]>([]);
  const [isDeptModalOpen, setIsDeptModalOpen] = useState(false);
  const [deptFormData, setDeptFormData] = useState({
    name: '',
    headOfDepartment: '',
    totalBedsCapacity: 0,
    contactPhone: '',
    isActive: true
  });
  const [newBedUnit, setNewBedUnit] = useState({ dept: '', total: 10, occupied: 0 });
  const [isAddingBed, setIsAddingBed] = useState(false);
  const [bedUnits, setBedUnits] = useState([
    { id: 1, dept: 'Emergency Room', total: 12, occupied: 8, status: 'LIVE' },
    { id: 2, dept: 'ICU - Level 1', total: 8, occupied: 7, status: 'LIVE' },
    { id: 3, dept: 'Trauma Unit', total: 4, occupied: 2, status: 'MANUAL' }
  ]);
  const [incomingPatients] = useState([
    { id: 'T-9821', name: 'Rajesh Khanna', age: 45, gender: 'M', triage: 'RED', complaint: 'Cardiac Arrest', eta: '4m', reg: 'KA-01-EF-2291', ambulanceId: 'CURE-ALS-01', vitals: { hr: '124', spo2: '88', bp: '90/60', temp: '98.6' }, location: 'Electronic City' },
    { id: 'T-9825', name: 'Sunita Rao', age: 32, gender: 'F', triage: 'YELLOW', complaint: 'Respiratory Distress', eta: '7m', reg: 'KA-05-MN-8832', ambulanceId: 'CURE-BLS-09', vitals: { hr: '98', spo2: '94', bp: '130/85', temp: '101.2' }, location: 'HSR Layout' },
    { id: 'T-9830', name: 'Unknown Male', age: 28, gender: 'M', triage: 'RED', complaint: 'Multiple Trauma', eta: '2m', reg: 'KA-03-GH-1102', ambulanceId: 'CURE-ALS-04', vitals: { hr: '142', spo2: '82', bp: '70/40', temp: '97.4' }, location: 'Koramangala' },
    { id: 'T-9835', name: 'Amit Shah', age: 58, gender: 'M', triage: 'GREEN', complaint: 'Fracture - Tibia', eta: '12m', reg: 'KA-02-KL-4451', ambulanceId: 'CURE-PTS-12', vitals: { hr: '82', spo2: '98', bp: '120/80', temp: '98.8' }, location: 'Indiranagar' }
  ]);
  const [tripsData, setTripsData] = useState([
    { id: 'TR-4022', patient: 'Anil Kapur', mrn: 'MRN-9022', type: 'IFT-CRITICAL', origin: 'District Hospital', destination: 'Apollo Main', vehicle: 'ALS-04', crew: 'Dr. Arjun, EMT Som', status: 'IN TRANSIT', eta: '6m', urgency: 'RED', step: 2 },
    { id: 'TR-4025', patient: 'Priya Verma', mrn: 'MRN-1102', type: 'EMERGENCY', origin: 'Indiranagar', destination: 'Apollo Main', vehicle: 'BLS-12', crew: 'EMT Suman, Pilot Ravi', status: 'ARRIVED', eta: '0m', urgency: 'YELLOW', step: 3 },
    { id: 'TR-4030', patient: 'Sarah Khan', mrn: 'MRN-4451', type: 'IFT', origin: 'Apollo Main', destination: 'Narayana Health', vehicle: 'ALS-09', crew: 'EMT Kiran, Pilot Dev', status: 'DISPATCHED', eta: '15m', urgency: 'GREEN', step: 1 },
  ]);
  const [isAddingDept, setIsAddingDept] = useState(false);
  const [newDeptName, setNewDeptName] = useState('');
  const [allUsers, setAllUsers] = useState<any[]>([]);
  const [userSearchTerm, setUserSearchTerm] = useState('');
  const [isStaffModalOpen, setIsStaffModalOpen] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [staffFormData, setStaffFormData] = useState({
    name: '',
    email: '',
    phone: '',
    username: '',
    password: '',
    role: 'ED_DOCTOR',
    department: '',
    specialization: '',
    license: '',
    designation: '',
    shift: 'General'
  });

  const [user, setUser] = useState<any>(null);
  const [rolesList, setRolesList] = useState<any[]>([]);
  const [showPassword, setShowPassword] = useState(false);

  useEffect(() => {
    const userData = localStorage.getItem('teleems_user');
    if (userData) {
      setUser(JSON.parse(userData));
    }
  }, []);

  useEffect(() => {
    const loadRoles = async () => {
      try {
        const token = localStorage.getItem('teleems_token') || '';
        if (!token) return;
        const res = await authApi.getRoles(token);
        if (res.data && res.data.data) {
          setRolesList(res.data.data);
        }
      } catch (err) {
        console.error('Failed to fetch roles:', err);
      }
    };
    loadRoles();
  }, []);

  useEffect(() => {
    const fetchDepartments = async () => {
      const token = localStorage.getItem('teleems_token');
      if (token && selectedHospital) {
        try {
          const res = await authApi.getDepartments(token);
          if (res.data) {
            const hospId = selectedHospital.rawUser?.hospitalId || selectedHospital.id;
            setDepartments(res.data.filter((d: any) => d.hospitalId === hospId));
          }
        } catch(err) {
          console.error('Failed to fetch departments:', err);
        }
      }
    };
    fetchDepartments();
  }, [selectedHospital]);

  const userRoles = user?.roles?.map((r: any) => String(r).toUpperCase()) || [];
  const isAdmin = userRoles.includes('ADMIN') || userRoles.includes('HOSPITAL_ADMIN') || userRoles.includes('CURESELECT_ADMIN');

  useEffect(() => {
    const fetchHospitals = async () => {
      const token = localStorage.getItem('teleems_token');
      if (!token) {
        setIsLoadingHospitals(false);
        return;
      }

      try {
        const response = await authApi.getUsers(token);
        if (response.status === 200 || response.status === 201) {
          const users = response.data || [];
          setAllUsers(users);

          const admins = users.filter((u: any) => {
            const roles = Array.isArray(u.roles) ? u.roles.map((r: any) => String(r).toUpperCase()) : [];
            return roles.includes('HOSPITAL ADMIN') || roles.includes('HOSPITAL_ADMIN');
          });

          const mappedHospitals = admins.map((u: any) => {
            const h = u.metadata?.hospital || {};
            const org = u.metadata?.organization || {};
            return {
              id: u.id,
              name: h.name || org.company_name || u.name || u.username || "Unknown Hospital",
              type: h.specialization || h.type || "General Care",
              address: h.city || org.city || "Bangalore",
              floor: h.floor || 0,
              lat: h.lat || 13.0827,
              lon: h.lon || 80.2707,
              status: u.status === 'ACTIVE' ? 'Active' : 'Occupied',
              beds: h.beds || "12/50",
              icon: <Building2 />,
              specialty: h.specialization ? [h.specialization] : ['General'],
              admin: u.name,
              email: u.email,
              phone: u.phone,
              rawUser: u
            };
          });

          setHospitals(mappedHospitals);
        }
      } catch (error) {
        console.error("Failed to fetch hospitals:", error);
        setHospitals([
          {
            id: 'hosp-001',
            name: 'Apollo Main Hospital',
            type: 'Multispecialty',
            address: 'Greams Road, Chennai',
            status: 'Active',
            beds: '42/150',
            admin: 'Dr. Ramesh R.',
            rawUser: { id: 'hosp-001', metadata: { hospital: { id: 'hosp-001' } } }
          }
        ]);
      } finally {
        setIsLoadingHospitals(false);
      }
    };

    fetchHospitals();
  }, [isUpdating]);

  const handleUpdateInternal = async () => {
    if (!selectedHospital) return;
    
    setIsUpdating(true);
    try {
      const token = localStorage.getItem('teleems_token');
      if (!token) throw new Error('Not authenticated');

      const u = selectedHospital.rawUser || selectedHospital.raw;
      if (!u) throw new Error('Hospital metadata missing');

      const payload = {
        ...u,
        name: selectedHospital.name,
        metadata: {
          ...u.metadata,
          hospital: {
            ...u.metadata.hospital,
            name: selectedHospital.name,
            city: selectedHospital.address,
            specialization: selectedHospital.type,
            floor: parseInt(selectedHospital.floor) || 0,
            lat: parseFloat(selectedHospital.lat) || 0,
            lon: parseFloat(selectedHospital.lon) || 0
          }
        }
      };

      const result = await authApi.updateUser(u.id, payload, token);
      if (result.status === 200 || result.status === 201 || !result.error) {
        setSuccessMessage('Configuration Updated!');
        setTimeout(() => setSuccessMessage(''), 3000);
      } else {
        alert(result.message || 'Update failed');
      }
    } catch (err: any) {
      alert(err.message);
    } finally {
      setIsUpdating(false);
    }
  };

  const handleUpdateHospital = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingHospital) return;
    
    setIsUpdating(true);
    const token = localStorage.getItem('teleems_token');
    if (!token) return;

    try {
      const u = editingHospital.rawUser;
      const payload = {
        ...u,
        name: editingHospital.name,
        metadata: {
          ...u.metadata,
          hospital: {
            ...u.metadata.hospital,
            name: editingHospital.name,
            city: editingHospital.address,
            specialization: editingHospital.type,
            floor: parseInt(editingHospital.floor) || 0,
            lat: parseFloat(editingHospital.lat) || 0,
            lon: parseFloat(editingHospital.lon) || 0
          }
        }
      };

      const result = await authApi.updateUser(u.id, payload, token);
      if (result.status === 200 || result.status === 201 || !result.error) {
        setSuccessMessage('Node updated successfully!');
        setTimeout(() => setSuccessMessage(''), 3000);
        setEditingHospital(null);
      } else {
        alert(result.message || 'Update failed');
      }
    } catch (error) {
      console.error('Update failed:', error);
    } finally {
      setIsUpdating(false);
    }
  };

  const telelinkQueue = [
    { id: 'TL-9921', patient: 'TR-1082', triage: 'RED', wait: '1:45', complaint: 'Cardiac Arrest', symptoms: 'Ongoing CPR, 2 shocks delivered' },
    { id: 'TL-9925', patient: 'TR-1089', triage: 'RED', wait: '0:30', complaint: 'Potential Stroke', symptoms: 'GCS 12, unilateral weakness' },
  ];

  const fleetDataList = [
    { id: 'AMB-01', type: 'ALS', status: 'RUNNING', patient: 'TR-1082', fuel: '75%', crew: 'EMT Arjun, Driver Som', eta: '4m', coords: [12.9716, 77.5946] },
    { id: 'AMB-02', type: 'BLS', status: 'IDLE', patient: null, fuel: '92%', crew: 'EMT Suman, Driver Ravi', eta: '-', coords: [12.9350, 77.6245] },
    { id: 'AMB-03', type: 'Transport', status: 'BREAKDOWN', patient: null, fuel: '15%', crew: 'None', eta: '-', coords: [12.9500, 77.6000], alert: 'Engine Overheat' },
  ];

  const epcrs = [
    { id: 'PCR-7721', date: '2026-04-16', ambulance: 'KA-01-AM-22', patient: 'Anil Kapur', triage: 'RED', status: 'PENDING_SIGN' },
    { id: 'PCR-7718', date: '2026-04-16', ambulance: 'KA-05-BX-44', patient: 'Priya Verma', triage: 'YELLOW', status: 'RECEIVED' },
  ];

  const renderModule = () => {
    switch (activeModule) {
      case 'ED_MONITOR':
        return (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="module-content">
            <div className="ed-grid-modern">
               <div className="triage-feed-container">
                 <div className="module-header-modern">
                    <div className="title-wrap">
                       <h3>REAL-TIME TRIAGE BOARD</h3>
                       <div className="live-pill"><span className="pulse"></span> 4 CRITICAL • 2 ENROUTE</div>
                    </div>
                    <div className="header-filters">
                       <div className="search-mini">
                          <Search size={16} color="var(--accent-cyan)" />
                          <input type="text" placeholder="Search by name, ambulance..." />
                       </div>
                    </div>
                 </div>

                 <motion.div layout className="triage-scroll-area no-scrollbar">
                    {incomingPatients.map((patient, idx) => (
                      <motion.div 
                        key={patient.id} 
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: idx * 0.1 }}
                        className="patient-alert-card premium"
                      >
                         <div className={`triage-accent ${patient.triage}`}></div>
                         <div className="alert-grid">
                            <div className="unit-info">
                               <div className="ambulance-badge">{patient.ambulanceId || patient.reg}</div>
                               <div className="eta-container">
                                  <div className="eta-value">{patient.eta}</div>
                                  <div className="eta-label">ARRIVAL</div>
                               </div>
                            </div>

                            <div className="patient-details">
                               <h4>{patient.name}</h4>
                               <div className="p-sub">{patient.age}Y · {patient.gender} · {patient.id}</div>
                               <div className={`t-status ${patient.triage}`}>
                                  <AlertCircle size={14} /> {patient.triage} · {patient.complaint}
                                </div>
                            </div>

                            <div className="vital-telemetry-grid">
                               <div className={`vital-cell ${parseInt(patient.vitals.hr) > 110 ? 'critical' : ''}`}>
                                  <Activity size={16} color="#00D1FF" style={{ flexShrink: 0 }} />
                                  <div className="v-data" style={{ display: 'flex', flexDirection: 'column' }}>
                                     <span className="v-val">{patient.vitals.hr}</span>
                                     <span className="v-label">HR / BPM</span>
                                  </div>
                               </div>
                               <div className={`vital-cell ${parseInt(patient.vitals.spo2) < 90 ? 'critical' : ''}`}>
                                   <Wind size={16} color="#00E272" style={{ flexShrink: 0 }} />
                                   <div className="v-data" style={{ display: 'flex', flexDirection: 'column' }}>
                                      <span className="v-val">{patient.vitals.spo2}</span>
                                      <span className="v-label">SpO2 / %</span>
                                   </div>
                               </div>
                               <div className="vital-cell">
                                   <Heart size={16} color="#FF4B4B" style={{ flexShrink: 0 }} />
                                   <div className="v-data" style={{ display: 'flex', flexDirection: 'column' }}>
                                      <span className="v-val">{patient.vitals.bp}</span>
                                      <span className="v-label">BP / mmHg</span>
                                   </div>
                               </div>
                               <div className="vital-cell">
                                   <Thermometer size={16} color="#FFB800" style={{ flexShrink: 0 }} />
                                   <div className="v-data" style={{ display: 'flex', flexDirection: 'column' }}>
                                      <span className="v-val">{patient.vitals.temp}</span>
                                      <span className="v-label">TEMP / °F</span>
                                   </div>
                               </div>
                            </div>

                            <div className="card-actions-area">
                               <button className="telelink-btn-premium" onClick={() => setActiveModule('TELELINK')}>
                                  <Video size={16} /> VIDEO LINK
                               </button>
                               <button className="assign-btn-premium" onClick={() => setIsBookingModalOpen(true)}>
                                  <Plus size={16} /> ADMIT UNIT
                               </button>
                             </div>
                         </div>
                      </motion.div>
                    ))}
                 </motion.div>
               </div>

               <div className="ed-ops-side-panel">
                 <div className="hub-card premium-ops">
                    <h4>EMERGENCY RESPONSE HUB</h4>
                    <p className="hub-desc">Broadcast high-priority emergency alerts throughout hospital network nodes.</p>
                    <div className="codes-stack">
                       <button className="code-btn-modern red">
                          <div className="c-info"><strong>CODE RED</strong><span>Cardiac Arrest</span></div>
                          <Zap size={24} />
                       </button>
                       <button className="code-btn-modern blue">
                          <div className="c-info"><strong>CODE BLUE</strong><span>Medical Emergency</span></div>
                          <Activity size={24} />
                       </button>
                       <button className="code-btn-modern trauma">
                          <div className="c-info"><strong>CODE TRAUMA</strong><span>Severe Surgical</span></div>
                          <ShieldAlert size={24} />
                       </button>
                    </div>
                 </div>

                 <Card title="Bed Inventory Control" className="inventory-card">
                    <div className="inventory-stats">
                       <div className="inv-item" style={{ marginBottom: '24px' }}>
                          <div className="inv-label" style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 800, fontSize: '0.85rem', marginBottom: '8px' }}>
                             <span>EMERGENCY BAY</span> 
                             <span style={{ color: 'var(--accent-cyan)' }}>{selectedHospital?.beds || '4/12'}</span>
                          </div>
                          <div className="inv-bar" style={{ height: '8px', background: 'rgba(0,0,0,0.03)', borderRadius: '4px', overflow: 'hidden' }}>
                             <div style={{ width: '33%', height: '100%', background: 'var(--accent-cyan)' }}></div>
                          </div>
                       </div>
                       <div className="inv-item">
                          <div className="inv-label" style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 800, fontSize: '0.85rem', marginBottom: '8px' }}>
                             <span>ICU - LEVEL 1</span> 
                             <span style={{ color: 'var(--alert-red)' }}>1/8</span>
                          </div>
                          <div className="inv-bar" style={{ height: '8px', background: 'rgba(0,0,0,0.03)', borderRadius: '4px', overflow: 'hidden' }}>
                             <div style={{ width: '87%', height: '100%', background: 'var(--alert-red)' }}></div>
                          </div>
                       </div>
                    </div>
                    <button className="sync-btn-modern">
                       <Database size={14} style={{ marginRight: '8px' }} /> REFRESH FROM HMS
                    </button>
                 </Card>

                 <div className="operational-clock-card">
                    <div className="o-time">14:55:02</div>
                    <div className="o-status"><span className="pulse status-sync"></span> NODE STATUS: SYNCED</div>
                 </div>
              </div>
            </div>
          </motion.div>
        );

       case 'BOOKINGS':
        return (
          <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} className="module-content">
            <div className="module-header-modern">
               <div className="title-wrap">
                  <h3>LIVE TRIP MANAGEMENT</h3>
                  <div className="live-pill"><span className="pulse"></span> 8 ACTIVE TRANSPORTS</div>
               </div>
               <div className="action-area-header">
                  <div className="search-mini">
                     <Search size={14} />
                     <input type="text" placeholder="Search Patient, MRN..." />
                  </div>
                  <button onClick={() => setIsBookingModalOpen(true)} className="register-staff-btn-premium">
                     <Plus size={18} /> <span className="hide-mobile">NEW DISPATCH</span>
                  </button>
               </div>
            </div>

            <div className="stats-strip stats-grid-responsive">
               <div className="stat-card-premium">
                  <span className="stat-label">Active Trips</span>
                  <div className="stat-value">{tripsData.length}</div>
                  <div className="stat-trend up"><TrendingUp size={12} /> 25% vs last hour</div>
               </div>
               <div className="stat-card-premium">
                  <span className="stat-label">Avg Arrival E.T.A</span>
                  <div className="stat-value">9.4m</div>
                  <div className="stat-trend down"><Clock size={12} /> 10% vs last hour</div>
               </div>
               <div className="stat-card-premium">
                  <span className="stat-label">I.F.T Pending Nodes</span>
                  <div className="stat-value">03</div>
                  <div className="stat-trend" style={{ color: 'var(--text-secondary)' }}>Status: Operational</div>
               </div>
            </div>

            <div className="trip-mgmt-table-container">
               <table className="staff-table-premium">
                  <thead>
                     <tr>
                        <th>Accession & Patient</th>
                        <th>Trip Parameters</th>
                        <th>Fleet Asset</th>
                        <th>Live Progress Timeline</th>
                        <th>Operational Actions</th>
                     </tr>
                  </thead>
                  <tbody>
                     {tripsData.map((t, idx) => (
                        <tr key={t.id}>
                           <td>
                              <div className="trip-patient-ident">
                                 <div className="trip-patient-main">{t.patient}</div>
                                 <div className="trip-id-mono">{t.id} · MRNID: {t.mrn}</div>
                              </div>
                           </td>
                           <td>
                              <div className="route-cell" style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontWeight: 700 }}>
                                 <div className="r-point"><MapPin size={12} /> {t.origin}</div>
                                 <div className="route-line" style={{ height: '20px', borderLeft: '2px dashed var(--card-border)', margin: '4px 5px' }}></div>
                                 <div className="r-point"><Navigation size={12} /> {t.destination}</div>
                              </div>
                           </td>
                           <td>
                              <div className="vehicle-crew-stack">
                                 <div className="vc-unit" style={{ fontWeight: 900, color: 'var(--text-primary)' }}><Truck size={14} /> {t.vehicle}</div>
                                 <div className="vc-crew" style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>{t.crew}</div>
                              </div>
                           </td>
                           <td>
                              <div className="progress-cell" style={{ width: '240px' }}>
                                 <div className="eta-container" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                                    <span className={`v-status ${t.status.replace(' ', '') === 'ARRIVED' ? 'RUNNING' : 'IDLE'}`} style={{ fontSize: '0.65rem' }}>{t.status}</span>
                                    <span style={{ fontSize: '0.7rem', fontWeight: 900, color: 'var(--accent-cyan)' }}>{t.eta} REMAINING</span>
                                 </div>
                                 <div className="trip-status-timeline">
                                    <div className={`ts-step ${t.step >= 1 ? 'completed' : ''}`}></div>
                                    <div className={`ts-line ${t.step >= 2 ? 'active' : ''}`}></div>
                                    <div className={`ts-step ${t.step >= 2 ? 'completed' : t.step === 1 ? 'active' : ''}`}></div>
                                    <div className={`ts-line ${t.step >= 3 ? 'active' : ''}`}></div>
                                    <div className={`ts-step ${t.step >= 3 ? 'completed' : t.step === 2 ? 'active' : ''}`}></div>
                                 </div>
                              </div>
                           </td>
                           <td>
                              <div className="trip-action-group" style={{ display: 'flex', gap: '8px' }}>
                                 <button className="tag-btn"><Video size={14} /></button>
                                 <button className="tag-btn"><FileText size={14} /></button>
                                 <button className="tag-btn" onClick={() => setTripsData(tripsData.filter(item => item.id !== t.id))} style={{ color: 'var(--alert-red)' }}><XCircle size={14} /></button>
                              </div>
                           </td>
                        </tr>
                     ))}
                  </tbody>
               </table>
            </div>
          </motion.div>
        );
      case 'FLEET':
        return (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="module-content">
             <div className="fleet-dashboard-layout">
                <div className="fleet-map-container">
                   <div className="mock-map-view"></div>
                </div>

                <div className="fleet-sidebar">
                   <div className="fleet-list no-scrollbar">
                      {fleetDataList.map(v => (
                         <div key={v.id} className={`fleet-item ${v.status}`}>
                            <div className="f-header">
                               <div className="v-info">
                                  <span className="v-tag">{v.id}</span>
                                  <span className="v-type">{v.type}</span>
                               </div>
                               <span className={`v-status ${v.status}`}>{v.status}</span>
                            </div>
                            <div className="f-body">{v.crew}</div>
                         </div>
                      ))}
                   </div>
                </div>
             </div>
          </motion.div>
        );

      case 'TELELINK':
        return (
          <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} className="module-content">
            <div className="telelink-workspace">
               <div className="telelink-queues">
                  <div className="queue-section" style={{ marginTop: '40px' }}>
                     <div className="q-title">ACTIVE INBOUND <span className="q-count">2 PENDING</span></div>
                     <div className="queue-list-items">
                        {telelinkQueue.map(q => (
                           <div key={q.id} className={`q-card ${q.triage}`}>
                              <div className="q-patient-info">
                                 <div className="q-name">{q.patient}</div>
                                 <div className="q-desc">EMT: Arjun</div>
                              </div>
                              <button className="telelink-btn-premium">ACCEPT UPLINK</button>
                           </div>
                        ))}
                     </div>
                  </div>
               </div>

               <div className="video-central-hub shadow-premium">
                  <div className="remote-feed">
                     <div className="placeholder-video">
                        <Video size={80} color="rgba(255,255,255,0.05)" />
                     </div>
                  </div>
               </div>
            </div>
          </motion.div>
        );
      case 'EPCR':
        return (
          <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} className="module-content">
             <div className="module-header-modern"><h3>CLINICAL RECORDS (ePCR)</h3></div>
             <div className="trip-mgmt-table-container">
                <table className="staff-table-premium">
                   <thead><tr><th>Record ID</th><th>Patient</th><th>Status</th><th>Action</th></tr></thead>
                   <tbody>
                      {epcrs.map(e => (
                         <tr key={e.id}><td>{e.id}</td><td>{e.patient}</td><td>{e.status}</td><td><button className="tag-btn">VIEW</button></td></tr>
                      ))}
                   </tbody>
                </table>
             </div>
          </motion.div>
        );

      case 'HISTORY':
        return (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="module-content">
             <div className="module-header-modern"><h3>PATIENT ARCHIVE</h3></div>
             <div className="archive-table-container">
                <table className="staff-table-premium">
                   <thead><tr><th>Date</th><th>Patient</th><th>Triage</th><th>Status</th></tr></thead>
                   <tbody>
                      {[
                        { date: '16 Apr 2026', patient: 'Meera Jain', triage: 'RED', status: 'ADMITTED' }
                      ].map((item, i) => (
                        <tr key={i}><td>{item.date}</td><td>{item.patient}</td><td>{item.triage}</td><td>{item.status}</td></tr>
                      ))}
                   </tbody>
                </table>
             </div>
          </motion.div>
        );

      case 'REPORTS':
        return (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="module-content">
             <div className="module-header-modern"><h3>ANALYTICS</h3></div>
             <div className="stats-strip stats-grid-responsive">
                <div className="stat-card-premium"><span className="stat-label">Admissions</span><span className="stat-value">1,284</span></div>
             </div>
          </motion.div>
        );

      case 'SETUP':
        return (
          <motion.div initial={{ opacity: 0, scale: 0.99 }} animate={{ opacity: 1, scale: 1 }} className="module-content">
             <div className="setup-layout">
                <aside className="setup-nav">
                   <button className={`setup-nav-item ${setupSubTab === 'PROFILE' ? 'active' : ''}`} onClick={() => setSetupSubTab('PROFILE')}>
                      <Building2 size={18} /> <span>Profile</span>
                   </button>
                   <button className={`setup-nav-item ${setupSubTab === 'USERS' ? 'active' : ''}`} onClick={() => setSetupSubTab('USERS')}>
                      <Users size={18} /> <span>Users</span>
                   </button>
                   <button className={`setup-nav-item ${setupSubTab === 'DEPTS' ? 'active' : ''}`} onClick={() => setSetupSubTab('DEPTS')}>
                      <LayoutDashboard size={18} /> <span>Departments</span>
                   </button>
                   <button className={`setup-nav-item ${setupSubTab === 'BEDS' ? 'active' : ''}`} onClick={() => setSetupSubTab('BEDS')}>
                      <Stethoscope size={18} /> <span>Bed Management</span>
                   </button>
                </aside>

                <div className="setup-content-modern no-scrollbar">
                   {setupSubTab === 'PROFILE' && (
                      <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }}>
                         <Card title="Hospital Profile">
                            <div className="setup-form-modern">
                               <div className="form-group-premium">
                                  <label>Institution Name</label>
                                  <input 
                                     type="text" 
                                     className="setup-input-premium"
                                     value={selectedHospital?.name} 
                                     onChange={(e) => setSelectedHospital({...selectedHospital, name: e.target.value})} 
                                  />
                               </div>
                               <div className="form-group-premium">
                                  <label>Operational Status</label>
                                  <div className="setup-input-premium" style={{ color: 'var(--accent-green)', fontWeight: 800 }}>ACTIVE • FULLY OPERATIONAL</div>
                               </div>
                               <button className="setup-confirm-btn" onClick={handleUpdateInternal}>
                                  SAVE CONFIGURATION
                               </button>
                            </div>
                         </Card>
                      </motion.div>
                   )}

                   {setupSubTab === 'USERS' && (
                      <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }}>
                         <Card title="Personnel Registry">
                            <div className="setup-actions-bar">
                               <div className="search-mini">
                                  <Search size={16} />
                                  <input type="text" placeholder="Filter by name or role..." />
                               </div>
                               <button className="register-staff-btn-premium" onClick={() => setIsStaffModalOpen(true)}>
                                  <Plus size={16} /> REGISTER NEW STAFF
                               </button>
                            </div>
                            <table className="staff-table-premium">
                               <thead>
                                  <tr>
                                     <th>Operator Name</th>
                                     <th>Designation</th>
                                     <th>Node Alignment</th>
                                     <th>Auth Status</th>
                                  </tr>
                               </thead>
                               <tbody>
                                  {allUsers.filter(u => u.hospitalId === selectedHospital?.rawUser?.hospitalId || u.organisationId === selectedHospital?.rawUser?.organisationId).map((u, i) => (
                                     <tr key={i}>
                                        <td style={{ fontWeight: 800 }}>{u.name || u.username}</td>
                                        <td><span className="v-status IDLE" style={{ fontSize: '0.6rem' }}>{u.roles[0]?.replace('_', ' ')}</span></td>
                                        <td style={{ opacity: 0.7 }}>{selectedHospital?.name}</td>
                                        <td><span className="node-status-text ON">AUTHORIZED</span></td>
                                     </tr>
                                  ))}
                               </tbody>
                            </table>
                         </Card>
                      </motion.div>
                   )}

                   {setupSubTab === 'DEPTS' && (
                      <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }}>
                         <Card title="Emergency Departments">
                            <div className="setup-actions-bar">
                               <p style={{ margin: 0, color: 'var(--text-secondary)', fontWeight: 600 }}>Active Departments: {departments.length}</p>
                               <button className="register-staff-btn-premium" onClick={() => setIsDeptModalOpen(true)}>
                                  <Plus size={16} /> ADD DEPARTMENT
                               </button>
                            </div>
                            <div className="dept-service-grid">
                               {departments.map((d, i) => (
                                  <div key={i} className={`service-node-card ${d.isActive ? 'active' : 'inactive'}`}>
                                     <div className="node-info-text">
                                        <strong>{d.name}</strong>
                                        <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
                                           Head: {d.headOfDepartment} <br/>
                                           Beds: {d.totalBedsCapacity} | Tel: {d.contactPhone}
                                        </div>
                                        <span className={`node-status-text ${d.isActive ? 'ON' : 'OFF'}`}>
                                           {d.isActive ? '• OPERATIONAL' : '• OFFLINE'}
                                        </span>
                                     </div>
                                     <button 
                                        className={`toggle-btn-modern ${d.isActive ? 'disable' : 'enable'}`}
                                        onClick={() => {
                                           // Local toggle preview for now, normally would PATCH to API
                                           const n = [...departments];
                                           n[i].isActive = !n[i].isActive;
                                           setDepartments(n);
                                        }}
                                     >
                                        {d.isActive ? 'OFFLINE' : 'ONLINE'}
                                     </button>
                                  </div>
                               ))}
                            </div>
                         </Card>
                      </motion.div>
                   )}

                   {setupSubTab === 'BEDS' && (
                      <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }}>
                         <Card title="Inventory & Capacity Management">
                            <div className="setup-actions-bar">
                               <p style={{ margin: 0, color: 'var(--text-secondary)', fontWeight: 600 }}>Active Care Units: {departments.length}</p>
                               <button className="register-staff-btn-premium"><Plus size={16} /> ADD UNIT</button>
                            </div>
                            <table className="staff-table-premium">
                               <thead>
                                  <tr>
                                     <th>Care Unit / Dept</th>
                                     <th>Total Capacity</th>
                                     <th>Occupied</th>
                                     <th>Availability</th>
                                  </tr>
                               </thead>
                               <tbody>
                                  {departments.map((b, i) => {
                                     const occ = b.occupiedBeds || 0; // Fallback if API hasn't mapped occupied yet
                                     const tot = b.totalBedsCapacity || 1; // Prevent division by zero
                                     return (
                                     <tr key={i}>
                                        <td style={{ fontWeight: 800 }}>{b.name}</td>
                                        <td>{b.totalBedsCapacity} Units</td>
                                        <td style={{ color: 'var(--accent-cyan)', fontWeight: 700 }}>{occ}</td>
                                        <td>
                                           <div className="bed-progress" style={{ width: '100px', marginBottom: 0 }}>
                                              <div className="progress-fill" style={{ width: `${(occ/tot)*100}%` }}></div>
                                           </div>
                                        </td>
                                     </tr>
                                  )})}
                               </tbody>
                            </table>
                         </Card>
                      </motion.div>
                   )}
                </div>
             </div>
          </motion.div>
        );

      case 'REFERRALS':
         return (
           <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="module-content">
              <div className="module-header-modern"><h3>Referral Network</h3></div>
              <Card title="Active Outgoing Referrals">
                 <p>No active outgoing referrals at this time.</p>
              </Card>
           </motion.div>
         );

      default:
        return <div>Module Under Development</div>;
    }
  };

  if (!selectedHospital) {
    return (
      <div className="hospital-selection-overlay">
        <div className="selection-background">
          <div className="glow-sphere top-left" />
          <div className="glow-sphere bottom-right" />
        </div>
        
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="selection-content"
        >
          <div className="selection-header">
            <div className="brand-logo large">
              <Activity size={48} className="pulse-aura" />
              CURESELECT <span style={{ fontWeight: 400, color: 'var(--text-secondary)' }}>EMS</span>
            </div>
            <h1>Command Node Protocol</h1>
            <p className="selection-subtitle">Regional Emergency Service Network · Authorized Node Access Only</p>
            <div className="security-scan-line"></div>
          </div>

          <div className="hospital-grid">
            {isLoadingHospitals ? (
              <div className="loading-hospitals">
                 <motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 1, ease: "linear" }}>
                    <Activity size={48} color="var(--accent-cyan)" />
                 </motion.div>
                 <p style={{ letterSpacing: '0.2em', fontWeight: 800 }}>ESTABLISHING SECURE UPLINK...</p>
              </div>
            ) : hospitals.length === 0 ? (
               <div className="no-hospitals">
                  <AlertTriangle size={48} color="var(--alert-amber)" />
                  <p>No active hospital nodes detected within the regional network grid.</p>
                  <button className="select-hospital-btn" onClick={() => window.location.reload()}>RESCAN NETWORK</button>
               </div>
            ) : hospitals.map((h, idx) => (
              <motion.div 
                key={h.id}
                initial={{ opacity: 0, scale: 0.9, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ delay: idx * 0.1, duration: 0.5 }}
                whileHover={{ y: -12, scale: 1.02 }}
                className="hospital-select-card"
                onClick={() => setSelectedHospital(h)}
              >
                <div className="h-icon-bg">
                  <Building2 size={40} />
                </div>
                <h3>{h.name}</h3>
                <div className="h-meta">
                  <span className="h-type">{h.type} Node</span>
                  <span className={`h-status-pulse ${h.status.replace(' ', '-')}`}>{h.status}</span>
                </div>
                <div className="h-beds">
                    <div className="bed-info">
                       <Users size={16} color="var(--accent-cyan)" />
                       <span>Admin: {h.admin || 'Dr. Admin'}</span>
                    </div>
                    <div className="bed-progress">
                       <div className="progress-fill" style={{ width: (parseInt(h.beds) / parseInt(h.beds.split('/')[1] || '100') * 100) + '%' }}></div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem', fontWeight: 700, opacity: 0.7 }}>
                       <span>BED CAPACITY</span>
                       <span>{h.beds} AVAIL</span>
                    </div>
                </div>
                <button className="select-hospital-btn">SECURE ACCESS <ChevronRight size={18} /></button>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="hospital-console-container">
      <header className="console-header premium">
        <div className="header-left" onClick={() => setSelectedHospital(null)} style={{ cursor: 'pointer' }}>
           <div className="hospital-brand">
              <div className="hospital-info-stack">
                 <h2 className="hospital-name">{selectedHospital?.name}</h2>
                 <span className="status-badge online">OPERATIONAL</span>
              </div>
           </div>
        </div>

         {/* ── CENTER: All nav tabs in their own grid column ── */}
         <nav className={`console-nav-modern ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
            <button className="mobile-close-btn show-mobile" onClick={() => setIsMobileMenuOpen(false)}><X size={22} /></button>
            <div className="nav-tab-container">
               <button title="ED Monitor" className={`nav-tab ${activeModule === 'ED_MONITOR' ? 'active' : ''}`} onClick={() => { setActiveModule('ED_MONITOR'); setIsMobileMenuOpen(false); }}><Monitor size={16} /> <span>ED MONITOR</span></button>
               <button title="Trips" className={`nav-tab ${activeModule === 'BOOKINGS' ? 'active' : ''}`} onClick={() => { setActiveModule('BOOKINGS'); setIsMobileMenuOpen(false); }}><Activity size={16} /> <span>TRIPS</span></button>
               <button title="Fleet" className={`nav-tab ${activeModule === 'FLEET' ? 'active' : ''}`} onClick={() => { setActiveModule('FLEET'); setIsMobileMenuOpen(false); }}><Truck size={16} /> <span>FLEET</span></button>
               <button title="TeleLink" className={`nav-tab ${activeModule === 'TELELINK' ? 'active' : ''}`} onClick={() => { setActiveModule('TELELINK'); setIsMobileMenuOpen(false); }}><Video size={16} /> <span>TELELINK</span></button>
               <button title="ePCR Records" className={`nav-tab ${activeModule === 'EPCR' ? 'active' : ''}`} onClick={() => { setActiveModule('EPCR'); setIsMobileMenuOpen(false); }}><FileText size={16} /> <span>ePCR</span></button>
               <button title="Archive" className={`nav-tab ${activeModule === 'HISTORY' ? 'active' : ''}`} onClick={() => { setActiveModule('HISTORY'); setIsMobileMenuOpen(false); }}><Database size={16} /> <span>ARCHIVE</span></button>
               <div className="nav-divider"></div>
               <button title="Reports & Analytics" className={`nav-tab ${activeModule === 'REPORTS' ? 'active' : ''}`} onClick={() => { setActiveModule('REPORTS'); setIsMobileMenuOpen(false); }}><TrendingUp size={16} /> <span>REPORTS</span></button>
               <button title="Setup & Configuration" className={`nav-tab ${activeModule === 'SETUP' ? 'active' : ''}`} onClick={() => { setActiveModule('SETUP'); setIsMobileMenuOpen(false); }}><Settings size={16} /> <span>SETUP</span></button>
            </div>
         </nav>

         {/* ── RIGHT: Actions (hamburger on mobile) ── */}
         <div className="header-actions">
            <button className="mobile-menu-toggle show-mobile" onClick={() => setIsMobileMenuOpen(true)}>
               <Menu size={22} />
            </button>
         </div>
       </header>

      {successMessage && <div className="success-toast-premium"><CheckCircle2 size={18} /> {successMessage}</div>}

      <main className="console-main">
         <AnimatePresence mode="wait">{renderModule()}</AnimatePresence>
      </main>

      <AnimatePresence>
         {isStaffModalOpen && (
            <div className="premium-modal-overlay">
               <motion.div initial={{ scale: 0.95, opacity: 0, y: 20 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.95, opacity: 0, y: 20 }} className="premium-modal-container">
                  <div className="modal-header-premium">
                     <h3>New Staff Registration</h3>
                     <button className="modal-close-btn" onClick={() => setIsStaffModalOpen(false)}><X size={18} /></button>
                  </div>
                  
                  <div className="setup-form-modern">
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                         <div className="form-group-premium">
                            <label>Full Name</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.name} onChange={e => setStaffFormData({...staffFormData, name: e.target.value})} placeholder="e.g. Dr. John Smith" />
                         </div>
                         <div className="form-group-premium">
                            <label>Organizational Role</label>
                            <select className="setup-input-premium" value={staffFormData.role} onChange={e => setStaffFormData({...staffFormData, role: e.target.value})}>
                               {rolesList.map((r: any) => (
                                  <option key={r.id} value={r.name}>{r.name}</option>
                               ))}
                            </select>
                         </div>
                         <div className="form-group-premium">
                            <label>Username</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.username} onChange={e => setStaffFormData({...staffFormData, username: e.target.value})} placeholder="e.g. jsmith" autoComplete="new-password" />
                         </div>
                         <div className="form-group-premium">
                            <label>Temporary Password</label>
                            <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
                               <input type={showPassword ? "text" : "password"} className="setup-input-premium" style={{ width: '100%', paddingRight: '40px' }} value={staffFormData.password} onChange={e => setStaffFormData({...staffFormData, password: e.target.value})} placeholder="Password" autoComplete="new-password" />
                               <button type="button" onClick={() => setShowPassword(!showPassword)} style={{ position: 'absolute', right: '14px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer', padding: 0, display: 'flex' }}>
                                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                               </button>
                            </div>
                         </div>
                         <div className="form-group-premium">
                            <label>Email Address</label>
                            <input type="email" className="setup-input-premium" value={staffFormData.email} onChange={e => setStaffFormData({...staffFormData, email: e.target.value})} placeholder="e.g. jsmith@hospital.com" />
                         </div>
                         <div className="form-group-premium">
                            <label>Phone Number</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.phone} onChange={e => setStaffFormData({...staffFormData, phone: e.target.value})} placeholder="e.g. +91 9876543210" />
                         </div>
                         <div className="form-group-premium">
                            <label>Department</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.department} onChange={e => setStaffFormData({...staffFormData, department: e.target.value})} placeholder="Emergency" />
                         </div>
                         <div className="form-group-premium">
                            <label>Specialization</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.specialization} onChange={e => setStaffFormData({...staffFormData, specialization: e.target.value})} placeholder="Trauma" />
                         </div>
                         <div className="form-group-premium">
                            <label>Designation</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.designation} onChange={e => setStaffFormData({...staffFormData, designation: e.target.value})} placeholder="Resident" />
                         </div>
                         <div className="form-group-premium">
                            <label>License Number</label>
                            <input type="text" className="setup-input-premium" value={staffFormData.license} onChange={e => setStaffFormData({...staffFormData, license: e.target.value})} placeholder="MC-12345" />
                         </div>
                     </div>
                  </div>

                  <div className="modal-footer-premium">
                     <button className="btn-secondary-glass" onClick={() => setIsStaffModalOpen(false)}>CANCEL</button>
                     <button className="btn-primary-glass" onClick={async () => {
                         try {
                             const token = localStorage.getItem('teleems_token');
                             const payload = {
                                 phone: staffFormData.phone,
                                 email: staffFormData.email,
                                 name: staffFormData.name,
                                 username: staffFormData.username,
                                 password: staffFormData.password,
                                 role: staffFormData.role,
                                 org_id: selectedHospital?.rawUser?.organisationId,
                                 metadata: {
                                    specialization: staffFormData.specialization,
                                    license_number: staffFormData.license,
                                    department: staffFormData.department,
                                    designation: staffFormData.designation,
                                    shift: staffFormData.shift
                                 }
                             };
                             const res = await authApi.registerUser(payload, token || '');
                             if (res.status === 201 || res.status === 200) {
                                 setSuccessMessage('Staff registered successfully.');
                                 setIsStaffModalOpen(false);
                                 setAllUsers(prev => [{ ...payload, roles: [payload.role], hospitalId: selectedHospital?.rawUser?.hospitalId }, ...prev]);
                             }
                         } catch (e) { alert('Failed'); }
                     }}>REGISTER PERSONNEL</button>
                  </div>
               </motion.div>
            </div>
         )}
         {isDeptModalOpen && (
            <div className="premium-modal-overlay">
               <motion.div initial={{ scale: 0.95, opacity: 0, y: 20 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.95, opacity: 0, y: 20 }} className="premium-modal-container">
                  <div className="modal-header-premium">
                     <h3>Add Department</h3>
                     <button className="modal-close-btn" onClick={() => setIsDeptModalOpen(false)}><X size={18} /></button>
                  </div>

                  <div className="setup-form-modern">
                     <div className="form-group-premium">
                        <label>Department Name</label>
                        <input type="text" className="setup-input-premium" value={deptFormData.name} onChange={e => setDeptFormData({...deptFormData, name: e.target.value})} placeholder="e.g. Emergency & Trauma" />
                     </div>
                     <div className="form-group-premium">
                        <label>Head of Department</label>
                        <div className="custom-select-wrapper" style={{ position: 'relative' }}>
                           <select 
                              className="setup-input-premium custom-select" 
                              value={deptFormData.headOfDepartment} 
                              onChange={e => setDeptFormData({...deptFormData, headOfDepartment: e.target.value})}
                              style={{ width: '100%', appearance: 'none' }}
                           >
                              <option value="" disabled>Select Head of Department</option>
                              {allUsers
                                 .filter(u => u.hospitalId === (selectedHospital?.rawUser?.hospitalId || selectedHospital?.id) || u.organisationId === selectedHospital?.rawUser?.organisationId)
                                 .map((u, i) => (
                                    <option key={i} value={u.name || u.username}>{u.name || u.username} ({u.roles[0]?.replace('_', ' ')})</option>
                                 ))
                              }
                           </select>
                           <ChevronDown size={14} style={{ position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-secondary)', pointerEvents: 'none' }} />
                        </div>
                     </div>
                     <div className="form-group-premium" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                        <div>
                           <label>Capacity (Beds)</label>
                           <input type="number" className="setup-input-premium" style={{ width: '100%', marginTop: '10px' }} value={deptFormData.totalBedsCapacity} onChange={e => setDeptFormData({...deptFormData, totalBedsCapacity: parseInt(e.target.value) || 0})} />
                        </div>
                        <div>
                           <label>Contact Phone</label>
                           <input type="text" className="setup-input-premium" style={{ width: '100%', marginTop: '10px' }} value={deptFormData.contactPhone} onChange={e => setDeptFormData({...deptFormData, contactPhone: e.target.value})} placeholder="+91-..." />
                        </div>
                     </div>
                  </div>

                  <div className="modal-footer-premium">
                     <button className="btn-secondary-glass" onClick={() => setIsDeptModalOpen(false)}>CANCEL</button>
                     <button className="btn-primary-glass" onClick={async () => {
                         try {
                             const token = localStorage.getItem('teleems_token');
                             const payload = {
                                 name: deptFormData.name,
                                 headOfDepartment: deptFormData.headOfDepartment,
                                 totalBedsCapacity: deptFormData.totalBedsCapacity,
                                 contactPhone: deptFormData.contactPhone,
                                 hospitalId: selectedHospital?.rawUser?.hospitalId || selectedHospital?.id,
                                 isActive: true
                             };
                             const res = await authApi.createDepartment(payload, token || '');
                             if (res.status === 200 || res.status === 201) {
                                 setSuccessMessage('Department verified and registered.');
                                 setIsDeptModalOpen(false);
                                 // Refresh list
                                 const updatedRes = await authApi.getDepartments(token || '');
                                 if (updatedRes.data) {
                                   const hospId = selectedHospital?.rawUser?.hospitalId || selectedHospital?.id;
                                   setDepartments(updatedRes.data.filter((d: any) => d.hospitalId === hospId));
                                 }
                             } else {
                                 alert('Failed to register department. Code: ' + res.status);
                             }
                         } catch (e) { alert('Exception: ' + e); }
                     }}>ADD DEPARTMENT</button>
                  </div>
               </motion.div>
            </div>
         )}
      </AnimatePresence>
    </div>
  );
};
export default HospitalConsole;
