// PatientPanel.jsx — Left sidebar
import { Upload, User, AlertCircle } from 'lucide-react';

const RISK_COLOR = { critical: 'var(--red-critical)', moderate: 'var(--amber-warning)', stable: 'var(--green-safe)' };
const RISK_DOT = { critical: 'badge-critical', moderate: 'badge-moderate', stable: 'badge-stable' };

export function PatientCard({ patient, selected, onClick }) {
  const risk = patient.risk_level || 'stable';
  return (
    <div
      onClick={() => onClick(patient)}
      style={{
        padding: '12px 14px', borderRadius: 10, cursor: 'pointer', marginBottom: 6,
        background: selected ? 'rgba(10,132,255,0.12)' : 'var(--bg-surface)',
        border: `1px solid ${selected ? 'rgba(10,132,255,0.4)' : 'var(--border-subtle)'}`,
        transition: 'all 0.15s',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
        <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--text-primary)' }}>
          {patient.display_name}
        </span>
        <span className={`badge ${RISK_DOT[risk] || 'badge-unknown'}`} style={{ fontSize: 10 }}>
          {risk}
        </span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', gap: 10 }}>
        <span>{patient.age}y {patient.gender}</span>
        <span>·</span>
        <span style={{ color: RISK_COLOR[risk] }}>{(patient.conditions || []).join(', ') || 'No conditions'}</span>
      </div>
      <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 3 }}>
        {patient.allergy_count} allergies · {patient.med_count} meds
      </div>
    </div>
  );
}

export function PatientPanel({ patients, selected, onSelect, onUpload, loading }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>
            Patients
          </span>
          <span style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{patients.length} loaded</span>
        </div>
        <label style={{ cursor: 'pointer', display: 'block', margin: '10px 0 4px 0' }}>
          <input type="file" multiple accept=".json,.pdf,.txt,.png,.jpg" style={{ display: 'none' }} onChange={onUpload} />
          <div style={{ 
            width: '100%', padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center', 
            justifyContent: 'center', border: '1px dashed var(--border-subtle)', borderRadius: '12px',
            background: 'var(--bg-surface)', transition: 'all 0.2s', color: 'var(--text-secondary)'
          }}
          onMouseOver={(e) => { e.currentTarget.style.borderColor = 'rgba(10,132,255,0.6)'; e.currentTarget.style.background = 'rgba(10,132,255,0.05)'; e.currentTarget.style.color = 'var(--text-primary)'; }}
          onMouseOut={(e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.background = 'var(--bg-surface)'; e.currentTarget.style.color = 'var(--text-secondary)'; }}>
            <Upload size={20} style={{ marginBottom: '6px' }} />
            <span style={{ fontSize: 12, fontWeight: 600 }}>Upload Patient Record</span>
            <span style={{ fontSize: 10, opacity: 0.6, marginTop: '2px' }}>PDF, Doc, Image, JSON</span>
          </div>
        </label>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 12px' }}>
        {loading && <div style={{ textAlign: 'center', padding: 20, color: 'var(--text-tertiary)', fontSize: 12 }}>Loading...</div>}
        {!loading && patients.length === 0 && (
          <div style={{ textAlign: 'center', padding: 20, color: 'var(--text-tertiary)', fontSize: 12 }}>
            <AlertCircle size={24} style={{ margin: '0 auto 8px', display: 'block' }} />
            No patients loaded
          </div>
        )}
        {patients.map(p => (
          <PatientCard key={p.id} patient={p} selected={selected?.id === p.id} onClick={onSelect} />
        ))}
      </div>
    </div>
  );
}