import React, { useState, useEffect, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Search,
  UserCheck,
  Clock,
  Building2,
  AlertCircle,
  CheckCircle2,
  LogOut,
  RefreshCw,
  X,
  ChevronRight,
  Activity,
  BedDouble,
} from 'lucide-react';
import { hospitalApi } from '../../api/hospital';

interface AdmissionsBoardProps {
  onRefresh?: () => void;
}

export const AdmissionsBoard: React.FC<AdmissionsBoardProps> = ({ onRefresh }) => {
  const [admissions, setAdmissions] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [dischargingId, setDischargingId] = useState<string | null>(null);
  const [confirmDischargeId, setConfirmDischargeId] = useState<string | null>(null);
  const [apiStats, setApiStats] = useState({ total: 0, admitted: 0, discharged: 0 });
  const [successMsg, setSuccessMsg] = useState('');

  const loadAdmissions = async (filter = statusFilter) => {
    setIsLoading(true);
    try {
      const token = localStorage.getItem('teleems_token') || '';
      if (!token) return;
      const res = await hospitalApi.getAdmissions(token, 1, 50, filter);
      console.log('[Admissions] API Response:', res);

      let items: any[] = [];
      const data = res?.data || res;
      
      if (data?.items && Array.isArray(data.items)) {
        items = data.items;
      } else if (Array.isArray(data)) {
        items = data;
      }

      setAdmissions(items);
      
      if (data?.stats) {
        setApiStats(data.stats);
      }
    } catch (err) {
      console.error('Failed to fetch admissions:', err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    loadAdmissions();
    const interval = setInterval(() => loadAdmissions(), 20000);
    return () => clearInterval(interval);
  }, [statusFilter]);

  const handleDischarge = async (admissionId: string) => {
    setDischargingId(admissionId);
    try {
      const token = localStorage.getItem('teleems_token') || '';
      const res = await hospitalApi.dischargePatient(admissionId, token);
      console.log('[Admissions] Discharge Response:', res);

      if (res?.error) {
        alert('Discharge failed: ' + (res.error.message || 'Unknown error'));
      } else {
        setSuccessMsg('Patient discharged successfully');
        setTimeout(() => setSuccessMsg(''), 3000);
        setConfirmDischargeId(null);
        loadAdmissions();
        if (onRefresh) onRefresh();
      }
    } catch (err: any) {
      alert('Error discharging patient: ' + err.message);
    } finally {
      setDischargingId(null);
    }
  };

  const stats = useMemo(() => ({
    total: apiStats.total,
    admitted: apiStats.admitted,
    discharged: apiStats.discharged,
  }), [apiStats]);

  const filteredAdmissions = useMemo(() => {
    return admissions.filter(admission => {
      const patientName = admission.patient?.name || '';
      const deptName = admission.department?.name || '';
      const matchesSearch =
        patientName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        deptName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        admission.patient_id?.toLowerCase().includes(searchQuery.toLowerCase());
      
      // The API already filters by status if not 'ALL', 
      // but we keep this for consistency and safety.
      const matchesStatus = statusFilter === 'ALL' || admission.status === statusFilter;
      return matchesSearch && matchesStatus;
    });
  }, [admissions, searchQuery, statusFilter]);

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return '--';
    const d = new Date(dateStr);
    return d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' }) +
      ' ' + d.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' });
  };

  const getTimeSince = (dateStr: string | null) => {
    if (!dateStr) return '--';
    const diff = Date.now() - new Date(dateStr).getTime();
    const hours = Math.floor(diff / 3600000);
    const mins = Math.floor((diff % 3600000) / 60000);
    if (hours > 24) return Math.floor(hours / 24) + 'd ' + (hours % 24) + 'h';
    if (hours > 0) return hours + 'h ' + mins + 'm';
    return mins + 'm';
  };

  const statuses = ['ALL', 'ADMITTED', 'DISCHARGED'];

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="module-content"
      style={{ background: 'var(--tactical-bg)', minHeight: '100%', padding: '24px' }}
    >
      {/* Success Toast */}
      {successMsg && (
        <div style={{
          position: 'fixed', top: 30, left: '50%', transform: 'translateX(-50%)', zIndex: 9999,
          background: '#10b981', color: '#fff', padding: '12px 24px', borderRadius: '12px',
          fontWeight: 800, fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '8px',
          boxShadow: '0 8px 24px rgba(16, 185, 129, 0.3)',
        }}>
          <CheckCircle2 size={18} /> {successMsg}
        </div>
      )}

      {/* Metrics Row */}
      <div className="metrics-row-modern">
        {[
          { label: 'Total Records', count: stats.total, icon: <Activity size={20} />, color: '#0ea5e9' },
          { label: 'Currently Admitted', count: stats.admitted, icon: <BedDouble size={20} />, color: '#8b5cf6' },
          { label: 'Discharged', count: stats.discharged, icon: <CheckCircle2 size={20} />, color: '#10b981' },
        ].map((m, i) => (
          <div key={i} className="metric-card-premium">
            <div className="metric-icon-wrap" style={{ color: m.color }}>
              {m.icon}
            </div>
            <div>
              <div style={{ fontSize: '1.5rem', fontWeight: 800, color: '#0f172a', lineHeight: 1 }}>{m.count}</div>
              <div style={{ fontSize: '0.7rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '4px' }}>{m.label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Header & Filters */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', marginTop: '8px' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#8b5cf6', fontWeight: 700, fontSize: '0.75rem', letterSpacing: '0.05em' }}>
            <UserCheck size={14} /> ADMISSIONS REGISTRY
          </div>
          <h2 style={{ margin: '8px 0 0 0', fontSize: '1.5rem', fontWeight: 700, color: '#1e293b', letterSpacing: '-0.02em' }}>Ward Management</h2>
        </div>

        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <div className="search-mini" style={{ width: '280px', background: '#f1f5f9', border: '1px solid #e2e8f0' }}>
            <Search size={16} color="#64748b" />
            <input
              type="text"
              placeholder="Search patient, department..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              style={{ fontWeight: 600 }}
            />
          </div>

          <div className="setup-nav" style={{ background: '#f1f5f9', padding: '4px', borderRadius: '12px' }}>
            {statuses.map(status => (
              <button
                key={status}
                className={`setup-nav-item ${statusFilter === status ? 'active' : ''}`}
                onClick={() => setStatusFilter(status)}
                style={{ fontSize: '0.7rem', fontWeight: 700, padding: '6px 14px' }}
              >
                {status.replace('_', ' ')}
              </button>
            ))}
          </div>

          <button
            onClick={loadAdmissions}
            style={{
              width: '40px', height: '40px', borderRadius: '12px', border: '1px solid #e2e8f0',
              background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', transition: 'all 0.2s',
            }}
            title="Refresh"
          >
            <RefreshCw size={16} color="#64748b" className={isLoading ? 'spin' : ''} />
          </button>
        </div>
      </div>

      {/* Content */}
      {isLoading && admissions.length === 0 ? (
        <div style={{ padding: '80px 40px', textAlign: 'center' }}>
          <div className="spin" style={{ width: 32, height: 32, border: '3px solid #e2e8f0', borderTop: '3px solid #8b5cf6', borderRadius: '50%', margin: '0 auto 16px auto' }} />
          <p style={{ color: '#64748b', fontWeight: 600 }}>Loading admissions...</p>
        </div>
      ) : filteredAdmissions.length === 0 ? (
        <div style={{ padding: '80px 40px', textAlign: 'center', background: '#f8fafc', borderRadius: '32px', border: '2px dashed #e2e8f0' }}>
          <div style={{ width: 80, height: 80, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px auto', boxShadow: '0 10px 25px rgba(0,0,0,0.05)' }}>
            <BedDouble size={32} color="#94a3b8" />
          </div>
          <h3 style={{ color: '#1e293b', margin: '0 0 8px 0', fontWeight: 800 }}>No Admissions Found</h3>
          <p style={{ color: '#64748b', fontSize: '0.9rem', maxWidth: '300px', margin: '8px auto 0 auto' }}>
            {searchQuery || statusFilter !== 'ALL' ? 'No records match your current filters.' : 'No patients have been admitted yet.'}
          </p>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <AnimatePresence mode="popLayout">
            {filteredAdmissions.map((admission) => (
              <motion.div
                key={admission.id}
                layout
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95 }}
                style={{
                  background: '#fff',
                  borderRadius: '20px',
                  border: '1px solid #e2e8f0',
                  overflow: 'hidden',
                  transition: 'all 0.2s',
                  position: 'relative',
                }}
              >
                {/* Status indicator bar */}
                <div style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0, width: '4px',
                  background: admission.status === 'ADMITTED' ? '#8b5cf6' : '#10b981',
                  borderRadius: '20px 0 0 20px',
                }} />

                <div style={{
                  padding: '24px 24px 24px 28px',
                  display: 'grid',
                  gridTemplateColumns: '1fr 1fr 1fr auto',
                  gap: '24px',
                  alignItems: 'center',
                }}>
                  {/* Patient Info */}
                  <div>
                    <div style={{ fontSize: '0.6rem', fontWeight: 900, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '8px' }}>Patient</div>
                    <div style={{ fontSize: '1.05rem', fontWeight: 800, color: '#1e293b' }}>
                      {admission.patient?.name || 'Unknown'}
                    </div>
                    <div style={{ display: 'flex', gap: '8px', marginTop: '6px', flexWrap: 'wrap' }}>
                      <span style={{
                        background: admission.patient?.triage_code === 'RED' ? 'hsla(0, 84%, 60%, 0.1)' : 'hsla(38, 92%, 50%, 0.1)',
                        color: admission.patient?.triage_code === 'RED' ? '#ef4444' : '#f59e0b',
                        padding: '2px 8px', borderRadius: '6px', fontSize: '0.65rem', fontWeight: 800,
                      }}>
                        {admission.patient?.triage_code || '--'}
                      </span>
                      <span style={{ color: '#64748b', fontSize: '0.75rem', fontWeight: 600 }}>
                        {admission.patient?.age || '--'}Y • {admission.patient?.gender || '--'}
                      </span>
                    </div>
                    {admission.patient?.chief_complaint && (
                      <div style={{ marginTop: '6px', fontSize: '0.75rem', color: '#64748b', fontWeight: 600 }}>
                        {admission.patient.chief_complaint}
                      </div>
                    )}
                  </div>

                  {/* Department Info */}
                  <div>
                    <div style={{ fontSize: '0.6rem', fontWeight: 900, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '8px' }}>Department</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <Building2 size={16} color="#8b5cf6" />
                      <span style={{ fontSize: '0.95rem', fontWeight: 700, color: '#1e293b' }}>
                        {admission.department?.name || '--'}
                      </span>
                    </div>
                    <div style={{ fontSize: '0.75rem', color: '#64748b', fontWeight: 600, marginTop: '6px' }}>
                      HOD: {admission.department?.headOfDepartment || '--'}
                    </div>
                    <div style={{ display: 'flex', gap: '12px', marginTop: '6px' }}>
                      <span style={{ fontSize: '0.7rem', color: '#64748b' }}>
                        Beds: <strong style={{ color: '#1e293b' }}>{admission.department?.occupiedBeds || 0}/{admission.department?.totalBedsCapacity || 0}</strong>
                      </span>
                      {admission.bed_type && (
                        <span style={{ fontSize: '0.7rem', background: '#f1f5f9', padding: '1px 6px', borderRadius: '4px', color: '#475569', fontWeight: 700 }}>
                          {admission.bed_type}
                        </span>
                      )}
                    </div>
                  </div>

                  {/* Timeline */}
                  <div>
                    <div style={{ fontSize: '0.6rem', fontWeight: 900, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '8px' }}>Timeline</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
                      <Clock size={14} color="#8b5cf6" />
                      <span style={{ fontSize: '0.8rem', fontWeight: 700, color: '#1e293b' }}>
                        Admitted {formatDate(admission.admitted_at)}
                      </span>
                    </div>
                    <div style={{ fontSize: '0.75rem', color: '#64748b', fontWeight: 600 }}>
                      Duration: <strong style={{ color: '#8b5cf6' }}>{getTimeSince(admission.admitted_at)}</strong>
                    </div>
                    {admission.discharged_at && (
                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
                        <CheckCircle2 size={14} color="#10b981" />
                        <span style={{ fontSize: '0.75rem', fontWeight: 700, color: '#10b981' }}>
                          Discharged {formatDate(admission.discharged_at)}
                        </span>
                      </div>
                    )}
                  </div>

                  {/* Actions */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'flex-end' }}>
                    <span style={{
                      padding: '4px 12px', borderRadius: '8px', fontSize: '0.7rem', fontWeight: 800,
                      background: admission.status === 'ADMITTED' ? 'hsla(262, 83%, 58%, 0.1)' : 'hsla(152, 69%, 40%, 0.1)',
                      color: admission.status === 'ADMITTED' ? '#8b5cf6' : '#10b981',
                    }}>
                      {admission.status}
                    </span>

                    {admission.status === 'ADMITTED' && (
                      <button
                        onClick={() => setConfirmDischargeId(admission.id)}
                        style={{
                          display: 'flex', alignItems: 'center', gap: '6px',
                          padding: '8px 16px', borderRadius: '10px',
                          border: '1px solid #e2e8f0', background: '#fff',
                          color: '#ef4444', fontWeight: 700, fontSize: '0.8rem',
                          cursor: 'pointer', transition: 'all 0.2s',
                        }}
                        onMouseEnter={(e) => { e.currentTarget.style.background = '#fef2f2'; e.currentTarget.style.borderColor = '#fecaca'; }}
                        onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = '#e2e8f0'; }}
                      >
                        <LogOut size={14} /> Discharge
                      </button>
                    )}
                  </div>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      )}

      {/* Discharge Confirmation Modal */}
      {createPortal(
        <AnimatePresence>
          {confirmDischargeId && (
            <div style={{ position: 'fixed', inset: 0, zIndex: 10001, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' }}>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                onClick={() => setConfirmDischargeId(null)}
                style={{ position: 'absolute', inset: 0, background: 'rgba(15, 23, 42, 0.4)', backdropFilter: 'blur(2px)' }}
              />
              <motion.div
                initial={{ opacity: 0, scale: 0.95, y: 10 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 10 }}
                style={{
                  position: 'relative', background: '#fff', borderRadius: '20px',
                  width: '100%', maxWidth: '420px', overflow: 'hidden',
                  boxShadow: '0 20px 40px rgba(0,0,0,0.2)',
                }}
              >
                <div style={{ padding: '24px', borderBottom: '1px solid #f1f5f9', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fef2f2' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <div style={{ width: 40, height: 40, borderRadius: '12px', background: '#fee2e2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <AlertCircle size={20} color="#ef4444" />
                    </div>
                    <h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 800, color: '#1e293b' }}>Confirm Discharge</h3>
                  </div>
                  <button
                    onClick={() => setConfirmDischargeId(null)}
                    style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: '#94a3b8' }}
                  >
                    <X size={20} />
                  </button>
                </div>

                <div style={{ padding: '24px' }}>
                  {(() => {
                    const adm = admissions.find(a => a.id === confirmDischargeId);
                    return (
                      <div>
                        <p style={{ color: '#64748b', fontSize: '0.9rem', lineHeight: 1.5, margin: '0 0 20px 0' }}>
                          You are about to discharge the following patient. This action cannot be undone.
                        </p>
                        <div style={{ background: '#f8fafc', borderRadius: '12px', padding: '16px', border: '1px solid #e2e8f0' }}>
                          <div style={{ fontSize: '1rem', fontWeight: 800, color: '#1e293b' }}>{adm?.patient?.name || 'Unknown'}</div>
                          <div style={{ fontSize: '0.8rem', color: '#64748b', marginTop: '4px' }}>
                            {adm?.department?.name || '--'} • Admitted {formatDate(adm?.admitted_at)}
                          </div>
                        </div>
                      </div>
                    );
                  })()}
                </div>

                <div style={{ padding: '16px 24px', borderTop: '1px solid #f1f5f9', display: 'flex', justifyContent: 'flex-end', gap: '12px', background: '#f8fafc' }}>
                  <button
                    onClick={() => setConfirmDischargeId(null)}
                    style={{
                      padding: '10px 20px', borderRadius: '10px', border: '1px solid #e2e8f0',
                      background: '#fff', fontWeight: 700, fontSize: '0.85rem', cursor: 'pointer',
                    }}
                  >
                    Cancel
                  </button>
                  <button
                    onClick={() => handleDischarge(confirmDischargeId!)}
                    disabled={!!dischargingId}
                    style={{
                      padding: '10px 24px', borderRadius: '10px', border: 'none',
                      background: '#ef4444', color: '#fff', fontWeight: 700, fontSize: '0.85rem',
                      cursor: dischargingId ? 'not-allowed' : 'pointer', opacity: dischargingId ? 0.7 : 1,
                      display: 'flex', alignItems: 'center', gap: '8px',
                    }}
                  >
                    {dischargingId ? (
                      <>
                        <div className="spin" style={{ width: 14, height: 14, border: '2px solid rgba(255,255,255,0.3)', borderTop: '2px solid #fff', borderRadius: '50%' }} />
                        Discharging...
                      </>
                    ) : (
                      <>
                        <LogOut size={14} /> Confirm Discharge
                      </>
                    )}
                  </button>
                </div>
              </motion.div>
            </div>
          )}
        </AnimatePresence>,
        document.body
      )}
    </motion.div>
  );
};
