// JammSanté Dentiste — écrans
const fmtCFA = (n) => (n<0?'−':'') + Math.abs(n).toLocaleString('fr-FR') + ' F';

// ---------- Bandeau alertes médicales bloquantes ----------
function MedicalAlerts({ patient, compact }) {
  const crit = (patient.alertes||[]).filter(a => a.t==='crit');
  const warn = (patient.alertes||[]).filter(a => a.t==='warn');
  if (!patient.alertes || !patient.alertes.length) return null;
  return <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
    {[...crit, ...warn].map((a,i) => {
      const isC = a.t==='crit';
      return <div key={i} style={{ display:'flex', gap:11, padding:'11px 14px', borderRadius:11, background: isC?'var(--d-danger-bg)':'var(--d-warn-bg)', border:'1px solid '+(isC?'var(--d-danger-border)':'transparent'), alignItems:'flex-start' }}>
        <Icon name={isC?'shield-alert':'alert-triangle'} size={17} color={isC?'#B91C1C':'#B45309'} style={{ marginTop:1, flexShrink:0 }} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:13, fontWeight:700, color: isC?'#B91C1C':'#B45309' }}>{a.label}{isC && <span style={{ marginLeft:8, fontSize:10, background:'#B91C1C', color:'#fff', padding:'1px 7px', borderRadius:999 }}>BLOQUANT</span>}</div>
          {!compact && <div style={{ fontSize:12, color:'var(--d-fg-muted)', marginTop:3, lineHeight:1.45 }}>{a.detail}</div>}
          {!compact && a.act && <div style={{ fontSize:12, color:'var(--d-fg)', marginTop:4, fontWeight:600 }}>→ {a.act}</div>}
        </div>
      </div>;
    })}
  </div>;
}

// ---------- Accueil ----------
function DAccueil({ onNavigate, onOpenPatient }) {
  return <div>
    <SectionTitle eyebrow="Vendredi · 26 juin 2026" title="Bonjour, Dr. Faye" sub="9 rendez-vous · 1 urgence walk-in · 2 alertes médicales bloquantes aujourd'hui"
      right={<><Button variant="outline" icon="user-plus">Nouveau patient</Button><Button variant="primary" icon="mic" onClick={()=>onNavigate('consultation')}>Consultation</Button></>} />
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:20 }}>
      <Stat label="RDV aujourd'hui" value="9" hint="3 fauteuils" icon="calendar" />
      <Stat label="Urgences" value="1" hint="pulpite 36" hintTone="red" icon="siren" />
      <Stat label="Devis en attente" value="4" hint="620 000 F" hintTone="sky" icon="file-text" />
      <Stat label="Impayés" value="3" hint="165 000 F" hintTone="amber" icon="wallet" />
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 350px', gap:20 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        <Card padding={0}>
          <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--d-border)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <div><h3 style={{ margin:0, fontSize:15, fontWeight:600, color:'var(--d-fg)' }}>Patients du jour</h3><div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginTop:2 }}>Fauteuil 1 · Dr. Faye</div></div>
            <Button variant="ghost" size="sm" iconRight="arrow-right" onClick={()=>onNavigate('agenda')}>Agenda</Button>
          </div>
          {D_PATIENTS.map((p,i,arr) => (
            <div key={p.id} onClick={()=>onOpenPatient(p)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
              style={{ display:'grid', gridTemplateColumns:'54px 1.4fr 1.3fr 120px 22px', alignItems:'center', gap:12, padding:'12px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', cursor:'pointer', transition:'background 120ms' }}>
              <span style={{ fontSize:12.5, fontWeight:600, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg-subtle)' }}>{p.heure}</span>
              <div style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}>
                <Avatar name={p.name} size={34} />
                <div style={{ minWidth:0 }}><div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{p.name}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{p.age} ans · {p.dmn}</div></div>
              </div>
              <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.motif}</div>
              <div style={{ display:'flex', gap:5, flexWrap:'wrap' }}>{p.statut==='urgence' && <Badge tone="red">Urgence</Badge>}{(p.alertes||[]).some(a=>a.t==='crit') && <Badge tone="amber" dot={false}>⚠ Alerte</Badge>}</div>
              <Icon name="chevron-right" size={15} color="var(--d-fg-faint)" />
            </div>
          ))}
        </Card>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        <Card style={{ borderColor:'var(--d-danger-border)', background:'linear-gradient(135deg, var(--d-danger-bg-2), var(--d-surface))' }}>
          <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
            <div style={{ width:36, height:36, borderRadius:10, background:'var(--d-danger-bg)', color:'#B91C1C', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon name="shield-alert" size={18} /></div>
            <div><div style={{ fontSize:11, fontWeight:700, color:'#B91C1C', letterSpacing:'0.1em', textTransform:'uppercase' }}>Alerte médicale</div>
              <div style={{ fontSize:14, fontWeight:600, marginTop:4, color:'var(--d-fg)' }}>Fatou Sow, sous anticoagulant (AVK)</div>
              <div style={{ fontSize:12.5, color:'var(--d-fg-subtle)', marginTop:4, lineHeight:1.5 }}>Avulsion 48 prévue. INR 2,8 le 14/06, à recontrôler avant tout geste sanglant.</div>
              <Button variant="danger" size="sm" style={{ marginTop:12 }} onClick={()=>onOpenPatient(D_PATIENTS[0])}>Ouvrir le dossier</Button>
            </div>
          </div>
        </Card>
        <Card style={{ background:'linear-gradient(135deg,#0D9488,#2DD4BF)', color:'#fff', borderColor:'transparent', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', right:-26, top:-26, opacity:0.15 }}><Icon name="sparkles" size={140} color="#fff" strokeWidth={1} /></div>
          <div style={{ position:'relative' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.12em' }}>JAMM IA · SYNTHÈSE DU JOUR</div>
            <div style={{ fontSize:15, fontWeight:700, marginTop:8, lineHeight:1.4 }}>2 patients à risque hémorragique, 1 pédo drépanocytaire.</div>
            <div style={{ fontSize:12.5, opacity:0.92, marginTop:6, lineHeight:1.5 }}>Antécédents et interactions vérifiés avant vos gestes du jour.</div>
            <button onClick={()=>onNavigate('consultation')} style={{ marginTop:14, background:'#fff', color:'#0D9488', border:'none', padding:'8px 14px', borderRadius:9, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit', display:'inline-flex', alignItems:'center', gap:6 }}>Démarrer <Icon name="arrow-right" size={14} /></button>
          </div>
        </Card>
        <Card>
          <h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Stérilisation - aujourd'hui</h3>
          {[['Cycle A · 09:12','Bowie-Dick OK','green'],['Cycle B · 11:40','Intégrateur validé','green'],['Cycle C · 14:00','En cours','amber']].map(([t,s,c],i,arr)=>(
            <div key={i} style={{ display:'flex', gap:10, alignItems:'center', padding:'9px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
              <Icon name={c==='green'?'check-circle':'loader'} size={15} color={c==='green'?'#059669':'#B45309'} />
              <div style={{ flex:1 }}><div style={{ fontSize:12.5, fontWeight:600, color:'var(--d-fg)' }}>{t}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)' }}>{s}</div></div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  </div>;
}

// ---------- Liste patients ----------
function DPatients({ onOpenPatient }) {
  const [q, setQ] = useState('');
  const list = D_PATIENTS.filter(p => p.name.toLowerCase().includes(q.toLowerCase()));
  return <div>
    <SectionTitle eyebrow="Fichier" title="Patients" sub={D_PATIENTS.length+' dossiers actifs'} right={<Button variant="primary" icon="user-plus">Nouveau patient</Button>} />
    <Card padding={0}>
      <div style={{ padding:14, borderBottom:'1px solid var(--d-border)' }}><SearchInput placeholder="Rechercher un patient, un numéro DMN…" value={q} onChange={e=>setQ(e.target.value)} /></div>
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr 100px 22px', gap:12, padding:'10px 20px', borderBottom:'1px solid var(--d-border)', fontSize:10.5, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--d-fg-faint)' }}>
        <span>Patient</span><span>Motif</span><span>Assurance</span><span>Solde</span><span>Alertes</span><span/></div>
      {list.map((p,i,arr) => (
        <div key={p.id} onClick={()=>onOpenPatient(p)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
          style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr 100px 22px', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', cursor:'pointer', transition:'background 120ms' }}>
          <div style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}><Avatar name={p.name} size={36} /><div style={{ minWidth:0 }}><div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{p.name}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{p.age} ans · {p.dmn}</div></div></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.motif}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{p.assurance}</div>
          <div style={{ fontSize:12.5, fontWeight:600, fontFamily:'JetBrains Mono, monospace', color: p.solde<0?'#B91C1C':'var(--d-fg-muted)' }}>{fmtCFA(p.solde)}</div>
          <div>{(p.alertes||[]).some(a=>a.t==='crit') ? <Badge tone="red" dot={false}>⚠ {p.alertes.filter(a=>a.t==='crit').length}</Badge> : <span style={{ fontSize:12, color:'var(--d-fg-faint)' }}>—</span>}</div>
          <Icon name="chevron-right" size={15} color="var(--d-fg-faint)" />
        </div>
      ))}
    </Card>
  </div>;
}

// ---------- Charting parodontal ----------
function PerioChart() {
  const P = D_PERIO;
  const cell = (v, danger) => <div style={{ width:20, textAlign:'center', fontSize:11, fontFamily:'JetBrains Mono, monospace', fontWeight:600, color: danger?'#B91C1C':'var(--d-fg-muted)' }}>{v}</div>;
  return <div style={{ overflowX:'auto' }}>
    <div style={{ display:'inline-flex', flexDirection:'column', gap:2, minWidth:'100%' }}>
      <div style={{ display:'flex', gap:2, alignItems:'flex-end', paddingLeft:78 }}>
        {P.teeth.map(t => <div key={t} style={{ width:64, textAlign:'center', fontSize:11, fontWeight:700, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg-subtle)' }}>{t}</div>)}
      </div>
      {[['Poche (PP)','pp'],['Récession','rec'],['Saignement','bop']].map(([lab,key]) => (
        <div key={key} style={{ display:'flex', gap:2, alignItems:'center', padding:'4px 0', borderTop:'1px solid var(--d-border)' }}>
          <div style={{ width:76, fontSize:10.5, fontWeight:700, color:'var(--d-fg-subtle)', textTransform:'uppercase', letterSpacing:'0.04em' }}>{lab}</div>
          {P.teeth.map(t => <div key={t} style={{ width:64, display:'flex', justifyContent:'center', gap:1 }}>
            {P.rows[t][key].map((v,si) => key==='bop'
              ? <div key={si} style={{ width:20, display:'flex', justifyContent:'center' }}><span style={{ width:7, height:7, borderRadius:'50%', background: v?'#EF4444':'var(--d-border-strong)' }} /></div>
              : cell(v, key==='pp' && v>=5))}
          </div>)}
        </div>
      ))}
      <div style={{ display:'flex', gap:2, alignItems:'center', padding:'4px 0', borderTop:'1px solid var(--d-border)' }}>
        <div style={{ width:76, fontSize:10.5, fontWeight:700, color:'var(--d-fg-subtle)', textTransform:'uppercase' }}>Mobilité</div>
        {P.teeth.map(t => <div key={t} style={{ width:64, textAlign:'center', fontSize:11, fontFamily:'JetBrains Mono, monospace', fontWeight:600, color: P.rows[t].mob>=2?'#B91C1C':P.rows[t].mob===1?'#B45309':'var(--d-fg-faint)' }}>{P.rows[t].mob||'—'}</div>)}
      </div>
    </div>
  </div>;
}

Object.assign(window, { fmtCFA, MedicalAlerts, DAccueil, DPatients, PerioChart });
