import React, { useState } from 'react';
import { 
  Activity, 
  Stethoscope, 
  Package, 
  Building2, 
  Plus, 
  Search, 
  ChevronRight, 
  Filter, 
  AlertCircle,
  Clock,
  Globe2,
  Tag,
  BriefcaseMedical,
  MapPin,
  Crosshair
} from 'lucide-react';
import { Card } from '../components/Common';
import { motion, AnimatePresence } from 'framer-motion';

type MasterTab = 'SYMPTOMS' | 'INCIDENTS' | 'INVENTORY' | 'HOSPITALS';

export const PatientClinical: React.FC = () => {
  const [activeTab, setActiveTab] = useState<MasterTab>('SYMPTOMS');
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div className="page-container" style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <h2 style={{ fontSize: '2.5rem', fontWeight: 900, background: 'linear-gradient(90deg, var(--accent-blue), var(--text-primary))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
            Platform Master Data
          </h2>
          <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginTop: '4px' }}>
            System-wide taxonomies, medical protocols, and entity masters.
          </p>
        </div>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
           <div className="glass" style={{ padding: '4px 8px', borderRadius: '12px', display: 'flex', background: 'rgba(0,0,0,0.03)' }}>
              {(['SYMPTOMS', 'INCIDENTS', 'INVENTORY', 'HOSPITALS'] as MasterTab[]).map(tab => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  style={{
                    padding: '8px 16px',
                    borderRadius: '8px',
                    border: 'none',
                    background: activeTab === tab ? 'var(--accent-cyan)' : 'transparent',
                    color: activeTab === tab ? '#fff' : 'var(--text-secondary)',
                    fontWeight: 700,
                    fontSize: '0.75rem',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease',
                    textTransform: 'uppercase',
                    letterSpacing: '0.05em'
                  }}
                >
                  {tab}
                </button>
              ))}
           </div>
        </div>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(250px, 300px) 1fr', gap: '32px' }}>
        {/* SIDEBAR FOR FILTERING / SEARCH */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
          <Card title="Query & Filter">
             <div style={{ position: 'relative', marginBottom: '16px' }}>
                <Search size={16} style={{ position: 'absolute', left: '12px', top: '12px', color: 'var(--text-secondary)' }} />
                <input 
                  type="text" 
                  placeholder={`Search ${activeTab.toLowerCase()}...`}
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  style={{ width: '100%', padding: '10px 10px 10px 36px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)' }}
                />
             </div>
             
             <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px' }}>Status Filter</div>
                <label style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.85rem', cursor: 'pointer' }}>
                   <input type="checkbox" defaultChecked style={{ accentColor: 'var(--accent-cyan)' }} /> Active Entities
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.85rem', cursor: 'pointer' }}>
                   <input type="checkbox" style={{ accentColor: 'var(--accent-cyan)' }} /> Deactivated
                </label>
             </div>
          </Card>

          <Card title="Quick Stats">
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                   <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Total {activeTab}</span>
                   <span className="mono" style={{ fontWeight: 700, color: 'var(--accent-cyan)' }}>
                      {activeTab === 'SYMPTOMS' ? '242' : activeTab === 'INCIDENTS' ? '12' : activeTab === 'INVENTORY' ? '1,204' : '45'}
                   </span>
                </div>
                <div style={{ height: '4px', background: 'rgba(0,0,0,0.02)', borderRadius: '2px' }}>
                   <div style={{ width: '65%', height: '100%', background: 'linear-gradient(90deg, var(--accent-cyan), var(--accent-green))', borderRadius: '2px' }}></div>
                </div>
                <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>
                   Last sync: Today at 10:45 AM
                </div>
             </div>
          </Card>
        </aside>

        {/* MAIN CONTENT AREA */}
        <main>
           <AnimatePresence mode="wait">
              {activeTab === 'SYMPTOMS' && <SymptomMaster key="symptoms" />}
              {activeTab === 'INCIDENTS' && <IncidentCategoryMaster key="incidents" />}
              {activeTab === 'INVENTORY' && <MedicalInventoryMaster key="inventory" />}
              {activeTab === 'HOSPITALS' && <HospitalReferralMaster key="hospitals" />}
           </AnimatePresence>
        </main>
      </div>
    </div>
  );
};

// 5.5.1 Symptom Master
const SymptomMaster = () => {
  const symptoms = [
    { name: 'Chest Pain / Cardiac Arrest', severity: 'Immediate', color: '#ff3b3b', languages: ['EN', 'HI', 'TA', 'ML'], instructions: 'Keep patient calm, check pulse, start CPR if unconscious.' },
    { name: 'Breathing Difficulty / Asthma', severity: 'Immediate', color: '#ff3b3b', languages: ['EN', 'HI', 'TA'], instructions: 'Ensure open airway, assist with inhaler if available.' },
    { name: 'Uncontrolled Bleeding', severity: 'Immediate', color: '#ff3b3b', languages: ['EN', 'HI'], instructions: 'Apply direct pressure to wound using clean cloth.' },
    { name: 'High Fever / Convulsions', severity: 'Urgent', color: '#ffb800', languages: ['EN', 'HI', 'TA', 'KN'], instructions: 'Cool down patient, do not restrain during seizure.' },
    { name: 'Minor Fracture / Sprain', severity: 'Minor', color: '#00ff88', languages: ['EN', 'TA'], instructions: 'Immobilize affected limb, apply cold compress.' },
  ];

  return (
    <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <h3 style={{ fontSize: '1.25rem', display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 700 }}>
            <Stethoscope size={24} color="var(--accent-cyan)" /> Symptom & Protocol Master
         </h3>
         <button className="glass" style={{ padding: '8px 16px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', borderRadius: '6px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
            <Plus size={16} /> ADD SYMPTOM
         </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
         {symptoms.map((s, i) => (
           <Card key={i} className="hover-glow" style={{ padding: '0', overflow: 'hidden' }}>
              <div style={{ display: 'flex', minHeight: '100px' }}>
                 <div style={{ width: '8px', background: s.color }}></div>
                 <div style={{ flex: 1, padding: '16px', display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                       <div style={{ fontWeight: 700, fontSize: '1.1rem' }}>{s.name}</div>
                       <div style={{ display: 'flex', gap: '8px', marginTop: '6px' }}>
                          {s.languages.map(l => (
                            <span key={l} style={{ fontSize: '0.6rem', padding: '2px 6px', background: 'rgba(0,0,0,0.02)', borderRadius: '4px', color: 'var(--text-secondary)', border: '1px solid var(--card-border)' }}>{l}</span>
                          ))}
                       </div>
                    </div>
                    <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '6px' }}>
                       <div style={{ fontSize: '0.7rem', fontWeight: 800, color: s.color, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.severity}</div>
                       <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '4px', justifyContent: 'flex-end' }}>
                          <Clock size={12} /> Auto-escalation: 5m
                       </div>
                    </div>
                 </div>
                 <div style={{ width: '300px', background: 'rgba(0,0,0,0.02)', padding: '16px', fontSize: '0.75rem', borderLeft: '1px solid var(--card-border)', display: 'flex', flexDirection: 'column' }}>
                    <div style={{ color: 'var(--accent-cyan)', fontWeight: 700, marginBottom: '4px', fontSize: '0.65rem', textTransform: 'uppercase' }}>First-Aid Instructions</div>
                    <p style={{ margin: 0, color: 'var(--text-secondary)', lineHeight: '1.4' }}>{s.instructions}</p>
                 </div>
                 <div style={{ width: '60px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderLeft: '1px solid var(--card-border)', cursor: 'pointer', background: 'rgba(0,0,0,0.01)' }}>
                    <ChevronRight size={20} color="var(--text-secondary)" />
                 </div>
              </div>
           </Card>
         ))}
      </div>
    </motion.div>
  );
};

// 5.5.2 Incident Category Master
const IncidentCategoryMaster = () => {
  const categories = [
    { name: 'Red — Immediate', code: 'IMMEDIATE', level: 'Life Threatening', color: '#ff3b3b', description: 'Immediate threat to life or limb.' },
    { name: 'Orange — Urgent', code: 'URGENT', level: 'Critical but Stable', color: '#ffb800', description: 'Needs prompt medical attention.' },
    { name: 'Green — Minor', code: 'MINOR', level: 'Walking Wounded', color: '#00ff88', description: 'Non-life threatening injuries.' },
    { name: 'White — Non-Emergency', code: 'NON_EMG', level: 'Transport / Checkup', color: '#ffffff', description: 'Planned medical transport.' },
    { name: 'Black — Dead', code: 'DEAD', level: 'Deceased', color: '#555555', description: 'Confirmed DOA or expired on site.' },
    { name: 'Blue — IFT', code: 'IFT', level: 'Inter Facility Transfer', color: '#3B82F6', description: 'Hospital to hospital transfer.' },
  ];

  return (
    <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <h3 style={{ fontSize: '1.25rem', display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 700 }}>
            <Activity size={24} color="var(--accent-cyan)" /> Incident Category Master
         </h3>
         <button className="glass" style={{ padding: '8px 16px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', borderRadius: '6px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
            <Plus size={16} /> NEW CATEGORY
         </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: '20px' }}>
         {categories.map((c, i) => (
           <Card key={i} style={{ borderLeft: `6px solid ${c.color}`, transition: 'all 0.3s ease' }} className="hover-glow">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                 <div>
                    <div style={{ fontWeight: 800, fontSize: '1.1rem', color: c.color }}>{c.name}</div>
                    <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{c.level}</div>
                 </div>
                 <div className="mono" style={{ fontSize: '0.7rem', padding: '2px 8px', background: 'rgba(0,0,0,0.02)', borderRadius: '4px', border: '1px solid var(--card-border)' }}>{c.code}</div>
              </div>
              <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginTop: '16px', lineHeight: '1.6' }}>
                 {c.description}
              </p>
              <div style={{ marginTop: '20px', paddingTop: '16px', borderTop: '1px solid var(--card-border)', display: 'flex', gap: '20px' }}>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                    <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>Auto-Dispatch</div>
                    <div style={{ color: 'var(--accent-green)', fontWeight: 700, fontSize: '0.75rem' }}>ENABLED</div>
                 </div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                    <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>Escalation</div>
                    <div style={{ color: 'var(--warning-amber)', fontWeight: 700, fontSize: '0.75rem' }}>T+2 MINS</div>
                 </div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                    <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>Priority</div>
                    <div style={{ color: 'var(--accent-cyan)', fontWeight: 700, fontSize: '0.75rem' }}>LEVEL {categories.length - i}</div>
                 </div>
              </div>
           </Card>
         ))}
      </div>
    </motion.div>
  );
};

// 5.5.3 Medical Inventory Master
const MedicalInventoryMaster = () => {
  const inventory = [
    { name: 'Adrenaline (Epinephrine) Injection', category: 'Drug', stock: 450, min: 100, unit: 'Ampoules', hsn: '30049099' },
    { name: 'Defibrillator Pads (Pediatric)', category: 'Disposable', stock: 24, min: 50, alert: true, unit: 'Pairs', hsn: '90189099' },
    { name: 'Oxygen Cylinder (Type D)', category: 'Medical Device', stock: 12, min: 5, unit: 'Cylinders', hsn: '73110010' },
    { name: 'Sterile Gauze 4x4', category: 'Disposable', stock: 2400, min: 1000, unit: 'Packets', hsn: '30059040' },
    { name: 'Portable Ventilator V1', category: 'Medical Device', stock: 8, min: 2, unit: 'Units', hsn: '90192000' },
  ];

  return (
    <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <h3 style={{ fontSize: '1.25rem', display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 700 }}>
            <Package size={24} color="var(--accent-cyan)" /> Medical Inventory Master
         </h3>
         <div style={{ display: 'flex', gap: '12px' }}>
            <button className="glass" style={{ padding: '8px 16px', background: 'rgba(0,0,0,0.02)', color: 'var(--text-primary)', border: '1px solid var(--card-border)', borderRadius: '6px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '0.8rem' }}>
               <BriefcaseMedical size={16} /> BATCH TRACKER
            </button>
            <button className="glass" style={{ padding: '8px 16px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', borderRadius: '6px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '0.8rem' }}>
               <Plus size={16} /> NEW ITEM
            </button>
         </div>
      </div>

      <Card>
         <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
               <thead>
                  <tr style={{ background: 'rgba(0,0,0,0.02)', textAlign: 'left' }}>
                     <th style={{ padding: '16px' }}>Item Details</th>
                     <th style={{ padding: '16px' }}>Category</th>
                     <th style={{ padding: '16px' }}>Stock Level</th>
                     <th style={{ padding: '16px' }}>HSN Code</th>
                     <th style={{ padding: '16px', textAlign: 'right' }}>Actions</th>
                  </tr>
               </thead>
               <tbody>
                  {inventory.map((item, i) => (
                    <tr key={i} style={{ borderBottom: '1px solid rgba(0,0,0,0.02)' }}>
                       <td style={{ padding: '16px' }}>
                          <div style={{ fontWeight: 700 }}>{item.name}</div>
                          <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>ID: #INV-{1000 + i}</div>
                       </td>
                       <td style={{ padding: '16px' }}>
                          <span style={{ padding: '4px 8px', background: 'rgba(59, 130, 246, 0.1)', color: 'var(--accent-cyan)', fontSize: '0.7rem', borderRadius: '4px', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
                             {item.category}
                          </span>
                       </td>
                       <td style={{ padding: '16px' }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                             <div style={{ flex: 1, minWidth: '80px', maxWidth: '120px', height: '6px', background: 'rgba(0,0,0,0.03)', borderRadius: '3px' }}>
                                <div style={{ width: `${Math.min(100, (item.stock / (item.min * 2)) * 100)}%`, height: '100%', background: item.alert ? 'var(--alert-red)' : 'var(--accent-green)', borderRadius: '3px', boxShadow: item.alert ? '0 0 10px rgba(255, 59, 59, 0.2)' : 'none' }}></div>
                             </div>
                             <div className="mono" style={{ fontWeight: 700, color: item.alert ? 'var(--alert-red)' : 'inherit' }}>
                                {item.stock} <span style={{ fontSize: '0.7rem', fontWeight: 400, color: 'var(--text-secondary)' }}>/ {item.unit}</span>
                             </div>
                             {item.alert && <AlertCircle size={14} color="var(--alert-red)" />}
                          </div>
                       </td>
                       <td style={{ padding: '16px' }} className="mono">{item.hsn}</td>
                       <td style={{ padding: '16px', textAlign: 'right' }}>
                          <button style={{ background: 'transparent', border: '1px solid var(--card-border)', color: 'var(--text-secondary)', padding: '6px 12px', borderRadius: '4px', cursor: 'pointer', fontSize: '0.75rem', fontWeight: 600 }}>EDIT</button>
                       </td>
                    </tr>
                  ))}
               </tbody>
            </table>
         </div>
      </Card>
    </motion.div>
  );
};

// 5.5.4 Hospital & Referral Master
const HospitalReferralMaster = () => {
  const hospitals = [
    { name: 'RGGGH (General Hospital)', type: 'Government', district: 'Chennai', coordinates: '13.0827, 80.2707', specialties: ['Trauma', 'Burns', 'General Medicine'], bedCap: '500+', accreditation: 'NABH' },
    { name: 'Apollo Main Hospital', type: 'Private', district: 'Chennai', coordinates: '13.0655, 80.2505', specialties: ['Cardiac', 'Neurology', 'Orthopedics'], bedCap: '350', accreditation: 'JCI/NABH' },
    { name: 'Stanley Medical College', type: 'Government', district: 'Chennai', coordinates: '13.1026, 80.2845', specialties: ['Pediatrics', 'Obstetrics'], bedCap: '420', accreditation: 'NABH' },
    { name: 'Madura Medical Centre', type: 'Private', district: 'Madurai', coordinates: '9.9252, 78.1198', specialties: ['Gastroenterology'], bedCap: '120', accreditation: 'State Board' },
  ];

  return (
    <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <h3 style={{ fontSize: '1.25rem', display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 700 }}>
            <Building2 size={24} color="var(--accent-cyan)" /> Hospital & Referral Network
         </h3>
         <button className="glass" style={{ padding: '8px 16px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', borderRadius: '6px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
            <Plus size={16} /> REGISTER FACILITY
         </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: '20px' }}>
         {hospitals.map((h, i) => (
           <Card key={i} className="hover-glow" style={{ position: 'relative', overflow: 'hidden' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '16px' }}>
                 <div>
                    <div style={{ fontWeight: 800, fontSize: '1.1rem' }}>{h.name}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '4px' }}>
                       <span style={{ fontSize: '0.7rem', color: 'var(--accent-cyan)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 700 }}>{h.type} Facility</span>
                       <span style={{ fontSize: '0.6rem', padding: '1px 6px', background: 'rgba(0,0,0,0.02)', borderRadius: '4px', color: 'var(--text-secondary)' }}>{h.accreditation}</span>
                    </div>
                 </div>
                 <div style={{ textAlign: 'right' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.75rem', color: 'var(--text-secondary)', fontWeight: 600 }}>
                       <MapPin size={14} color="var(--accent-cyan)" /> {h.district}
                    </div>
                 </div>
              </div>
              
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '20px' }}>
                 {h.specialties.map(s => (
                   <span key={s} style={{ fontSize: '0.65rem', padding: '3px 10px', background: 'rgba(0, 255, 136, 0.05)', border: '1px solid rgba(0, 255, 136, 0.2)', color: 'var(--accent-green)', borderRadius: '100px', fontWeight: 600 }}>{s}</span>
                 ))}
                         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginTop: 'auto' }}>
                 <div style={{ background: 'rgba(0,0,0,0.02)', padding: '12px', borderRadius: '8px', border: '1px solid var(--card-border)' }}>
                    <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', textTransform: 'uppercase', marginBottom: '4px' }}>GPS Location</div>
                    <div className="mono" style={{ fontSize: '0.75rem' }}>{h.coordinates}</div>
                 </div>
                 <div style={{ background: 'rgba(0,0,0,0.02)', padding: '12px', borderRadius: '8px', border: '1px solid var(--card-border)' }}>
                    <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', textTransform: 'uppercase', marginBottom: '4px' }}>Bed Capacity</div>
                    <div className="mono" style={{ fontSize: '0.75rem', color: 'var(--accent-cyan)', fontWeight: 700 }}>{h.bedCap} UNITS</div>
                 </div>
              </div>      </div>

              <button style={{ width: '100%', marginTop: '16px', background: 'transparent', border: '1px dashed var(--card-border)', color: 'var(--text-secondary)', padding: '8px', borderRadius: '6px', fontSize: '0.75rem', fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s ease' }}>
                CONFIGURE ROUTING RULES
              </button>
           </Card>
         ))}
      </div>
    </motion.div>
  );
};
