import React from 'react';
import { motion } from 'framer-motion';
import {
  Activity,
  Building2,
  Users,
  ChevronRight,
  AlertTriangle,
} from 'lucide-react';

interface HospitalSelectorProps {
  hospitals: any[];
  isLoading: boolean;
  onSelect: (hospital: any) => void;
}

export const HospitalSelector: React.FC<HospitalSelectorProps> = ({
  hospitals,
  isLoading,
  onSelect,
}) => {
  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 className="hospital-grid">
          {isLoading ? (
            <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.95, y: 30 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ 
                  delay: idx * 0.08, 
                  duration: 0.6,
                  ease: [0.16, 1, 0.3, 1]
                }}
                whileHover={{ y: -8, boxShadow: '0 20px 40px hsla(215, 32%, 17%, 0.12)' }}
                className="hospital-select-card-premium"
                onClick={() => onSelect(h)}
              >
                <div className="card-top-accent" />
                <div className="h-icon-cluster">
                  <div className="h-icon-orb">
                    <Building2 size={32} />
                  </div>
                  <div className="h-status-indicator pulse-slow" data-status={h.status.toLowerCase().replace(' ', '-')} />
                </div>

                <div className="h-card-content">
                  <span className="h-type-tag">{h.type.toUpperCase()} NODE</span>
                  <h3 className="h-name-premium">{h.name}</h3>
                  
                  <div className="h-meta-grid">
                    <div className="h-meta-item">
                      <Users size={14} />
                      <span>{h.admin || 'Dr. Admin'}</span>
                    </div>
                    <div className="h-meta-item">
                      <Activity size={14} />
                      <span>{h.status}</span>
                    </div>
                  </div>

                  <div className="capacity-section">
                    <div className="capacity-header">
                      <span>LOAD CAPACITY</span>
                      <span className="capacity-val">{h.beds}</span>
                    </div>
                    <div className="capacity-track">
                      <motion.div
                        className="capacity-fill"
                        initial={{ width: 0 }}
                        animate={{ 
                          width: (parseInt(h.beds) / parseInt(h.beds.split('/')[1] || '100')) * 100 + '%' 
                        }}
                        transition={{ delay: 0.5 + idx * 0.1, duration: 1 }}
                      />
                    </div>
                  </div>
                </div>

                <button className="h-access-btn">
                  INITIALIZE SESSION <ChevronRight size={16} />
                </button>
              </motion.div>
            ))
          )}
        </div>
      </motion.div>
    </div>
  );
};
