// JammSanté Clinique — écrans pilotage & flux : dashboard, accueil, agenda, patients
function ScreenDash({ go }) {
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14 }}>
      <Stat label="Patients aujourd'hui" value="47" hint="+12% vs lun. dernier" hintTone="green" icon="users" />
      <Stat label="Recettes du jour" value={fmtF(731500)} hint="3 caisses" hintTone="teal" icon="wallet" />
      <Stat label="Occupation des lits" value="5/8" hint="1 en nettoyage" hintTone="amber" icon="bed-double" />
      <Stat label="Attente moyenne" value="14 min" hint="objectif < 20" hintTone="green" icon="timer" />
    </div>
    <SectionTitle icon="sparkles" right={<Tag tone="teal">Jamm IA</Tag>}>Résumé intelligent du jour</SectionTitle>
    <Card padding={0}>
      {C_IA_BRIEF.map((b, i) => {
        const c = { red:'#B91C1C', amber:'#B45309', blue:'#1D4ED8', teal:'#0D9488' }[b.tone];
        const bg = { red:'var(--g-danger-bg)', amber:'var(--g-warn-bg)', blue:'var(--g-info-bg)', teal:'var(--g-accent-bg)' }[b.tone];
        return <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 18px', borderBottom: i < C_IA_BRIEF.length-1 ? '1px solid var(--g-surface-2)' : 'none' }}>
          <span style={{ width:32, height:32, borderRadius:9, background:bg, color:c, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon name={b.icon} size={16} /></span>
          <div style={{ fontSize:13, color:'var(--g-fg-muted)', flex:1 }}>{b.txt}</div>
          <Button size="xs" variant="ghost" iconRight="arrow-right">Agir</Button>
        </div>;
      })}
    </Card>
    <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14, marginTop:22 }}>
      <div>
        <SectionTitle icon="ticket" right={<Button size="xs" variant="ghost" onClick={() => go('accueil')} iconRight="arrow-right">File complète</Button>}>En salle d'attente</SectionTitle>
        <Card padding={0}>
          {C_QUEUE.slice(0, 4).map((q, i) => <div key={q.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'11px 16px', borderBottom: i < 3 ? '1px solid var(--g-surface-2)' : 'none' }}>
            <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:12, fontWeight:700, color:'#0D9488', background:'var(--g-accent-bg)', padding:'3px 8px', borderRadius:7 }}>{q.ticket}</span>
            <div style={{ flex:1 }}><div style={{ fontSize:13, fontWeight:600, color:'var(--g-fg)' }}>{q.name}</div><div style={{ fontSize:11, color:'var(--g-fg-subtle)' }}>{q.service} · attente {q.attente}</div></div>
            <TriageDot level={q.triage} /><Badge tone={q.statut === 'En consultation' ? 'teal' : q.statut === 'À la caisse' ? 'amber' : 'neutral'} dot={false}>{q.statut}</Badge>
          </div>)}
        </Card>
      </div>
      <div>
        <SectionTitle icon="stethoscope">Praticiens présents</SectionTitle>
        <Card padding={0}>
          {C_STAFF.slice(0, 5).map((s, i) => <div key={s.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 16px', borderBottom: i < 4 ? '1px solid var(--g-surface-2)' : 'none' }}>
            <Avatar name={s.name} size={30} color={s.color} />
            <div style={{ flex:1, minWidth:0 }}><div style={{ fontSize:12.5, fontWeight:600, color:'var(--g-fg)' }}>{s.name}</div><div style={{ fontSize:10.5, color:'var(--g-fg-subtle)' }}>{s.role}</div></div>
            <Badge tone={s.statut.includes('consultation') ? 'teal' : s.statut === 'Absente' ? 'red' : 'green'} dot={false}>{s.statut}</Badge>
          </div>)}
        </Card>
      </div>
    </div>
  </ScreenPad>;
}

function ScreenAccueil() {
  const [showReg, setShowReg] = useState(false);
  const steps = ['Enregistrée','En attente','En consultation','À la caisse','Parti'];
  return <ScreenPad>
    <div style={{ display:'flex', gap:14, marginBottom:18 }}>
      <Card padding={16} style={{ flex:1 }}><div style={{ fontSize:11, color:'var(--g-fg-subtle)', fontWeight:600 }}>Numéro appelé - MG</div><div style={{ fontSize:30, fontWeight:800, color:'#0D9488', fontFamily:'JetBrains Mono, monospace' }}>A-014</div></Card>
      <Card padding={16} style={{ flex:1 }}><div style={{ fontSize:11, color:'var(--g-fg-subtle)', fontWeight:600 }}>Pédiatrie</div><div style={{ fontSize:30, fontWeight:800, color:'#0EA5E9', fontFamily:'JetBrains Mono, monospace' }}>B-005</div></Card>
      <Card padding={16} style={{ flex:1 }}><div style={{ fontSize:11, color:'var(--g-fg-subtle)', fontWeight:600 }}>Labo</div><div style={{ fontSize:30, fontWeight:800, color:'#F97316', fontFamily:'JetBrains Mono, monospace' }}>C-001</div></Card>
      <Card padding={16} style={{ flex:1.2, display:'flex', flexDirection:'column', justifyContent:'center', gap:8 }}>
        <Button icon="user-plus" onClick={() => setShowReg(true)}>Enregistrer un patient</Button>
        <Button variant="outline" icon="monitor" size="sm">Écran salle d'attente</Button>
      </Card>
    </div>
    <SectionTitle icon="ticket" right={<Segmented items={['Tous','MG','Pédiatrie','Gynéco','Labo']} active="Tous" onChange={() => {}} />}>File d'attente en temps réel</SectionTitle>
    <Card padding={0}>
      <Table cols={['Ticket','Patient','Service','Arrivée','Attente','Triage','Parcours']} rows={C_QUEUE.map(q => [
        <span style={{ fontFamily:'JetBrains Mono, monospace', fontWeight:700, color:'#0D9488' }}>{q.ticket}</span>,
        <span><span style={{ fontWeight:600, color:'var(--g-fg)' }}>{q.name}</span> <span style={{ color:'var(--g-fg-faint)' }}>· {q.age} ans</span></span>,
        q.service, q.arrivee, q.attente, <TriageDot level={q.triage} />,
        <div style={{ display:'flex', gap:4 }}>{steps.map(s => <span key={s} title={s} style={{ width:22, height:6, borderRadius:99, background: steps.indexOf(s) <= steps.indexOf(q.statut) ? '#0D9488' : 'var(--g-surface-2)' }} />)}</div>,
      ])} />
    </Card>
    {showReg && <Modal onClose={() => setShowReg(false)} width={480}>
      <div style={{ padding:24 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}><h3 style={{ fontSize:16, fontWeight:800, color:'var(--g-fg)' }}>Enregistrement rapide</h3><IconButton icon="x" onClick={() => setShowReg(false)} /></div>
        <div style={{ display:'grid', gap:14 }}>
          <Field label="Nom complet"><Input placeholder="Prénom et nom" /></Field>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
            <Field label="Téléphone"><Input placeholder="+221 77 …" /></Field>
            <Field label="N° CNI (optionnel)"><Input placeholder="1 234 5678 …" /></Field>
          </div>
          <Field label="Service demandé"><Input placeholder="Médecine générale" /></Field>
          <Field label="Triage infirmier"><Segmented items={['Normal','Urgent']} active="Normal" onChange={() => {}} /></Field>
          <Button icon="ticket">Créer le ticket A-018</Button>
        </div>
      </div>
    </Modal>}
  </ScreenPad>;
}

function ScreenAgenda() {
  const hours = ['09:00','09:30','10:00','10:30','11:00','11:30'];
  return <ScreenPad>
    <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
      <Segmented items={['Jour','Semaine']} active="Jour" onChange={() => {}} />
      <div style={{ fontSize:13, fontWeight:700, color:'var(--g-fg)' }}>Lundi 13 juillet 2026</div>
      <div style={{ flex:1 }} />
      <Button size="sm" icon="plus">Nouveau RDV</Button>
    </div>
    <Card padding={0} style={{ overflowX:'auto' }}>
      <div style={{ display:'grid', gridTemplateColumns:`64px repeat(${C_AGENDA.length}, minmax(180px, 1fr))`, minWidth:820 }}>
        <div style={{ borderBottom:'1px solid var(--g-border)' }} />
        {C_AGENDA.map(d => <div key={d.doc} style={{ padding:'12px 14px', borderBottom:'1px solid var(--g-border)', borderLeft:'1px solid var(--g-surface-2)', display:'flex', alignItems:'center', gap:8 }}>
          <span style={{ width:9, height:9, borderRadius:'50%', background:d.color }} /><span style={{ fontSize:12.5, fontWeight:700, color:'var(--g-fg)' }}>{d.doc}</span>
        </div>)}
        {hours.map((h, hi) => <React.Fragment key={h}>
          <div style={{ padding:'14px 10px', fontSize:11, color:'var(--g-fg-faint)', fontFamily:'JetBrains Mono, monospace', borderBottom:'1px solid var(--g-surface-2)' }}>{h}</div>
          {C_AGENDA.map(d => { const s = d.slots[hi]; const free = s.p === '—';
            return <div key={d.doc + h} style={{ padding:6, borderLeft:'1px solid var(--g-surface-2)', borderBottom:'1px solid var(--g-surface-2)' }}>
              {free ? <div style={{ height:'100%', minHeight:38, borderRadius:8, border:'1.5px dashed var(--g-border)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10.5, color:'var(--g-fg-faint)' }}>libre</div>
                : <div style={{ borderRadius:8, padding:'7px 10px', background:`${d.color}14`, borderLeft:`3px solid ${d.color}` }}>
                  <div style={{ fontSize:12, fontWeight:700, color:'var(--g-fg)' }}>{s.p}</div><div style={{ fontSize:10.5, color:'var(--g-fg-subtle)' }}>{s.t}</div>
                </div>}
            </div>; })}
        </React.Fragment>)}
      </div>
    </Card>
  </ScreenPad>;
}

function ScreenPatients() {
  const [q, setQ] = useState('');
  const rows = C_PATIENTS.filter(p => p.name.toLowerCase().includes(q.toLowerCase()));
  return <ScreenPad>
    <div style={{ display:'flex', gap:12, marginBottom:16 }}>
      <SearchInput placeholder="Rechercher un patient (nom, téléphone)…" value={q} onChange={e => setQ(e.target.value)} style={{ flex:1, maxWidth:420 }} />
      <div style={{ flex:1 }} /><Button size="sm" icon="user-plus">Nouveau patient</Button>
    </div>
    <Card padding={0}>
      <Table cols={['Patient','Téléphone','Assurance','Vu par','Dernière visite','Solde dû','']} rows={rows.map(p => [
        <div style={{ display:'flex', alignItems:'center', gap:10 }}><Avatar name={p.name} size={30} /><span><span style={{ fontWeight:600, color:'var(--g-fg)' }}>{p.name}</span> <span style={{ color:'var(--g-fg-faint)' }}>· {p.age} ans</span></span></div>,
        <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11.5 }}>{p.tel}</span>,
        p.assurance === '—' ? <Tag>Sans assurance</Tag> : <Tag tone="teal">{p.assurance}</Tag>,
        <span style={{ fontSize:12 }}>{p.vus}</span>,
        p.derniere.startsWith('Hospitalis') ? <Badge tone="violet" dot={false}>{p.derniere}</Badge> : p.derniere,
        p.solde > 0 ? <span style={{ fontWeight:700, color:'#B45309' }}>{fmtF(p.solde)}</span> : <span style={{ color:'#059669', fontWeight:600 }}>Soldé</span>,
        <Button size="xs" variant="ghost" iconRight="arrow-right">Dossier</Button>,
      ])} />
    </Card>
    <div style={{ marginTop:14 }}><GatedNote> · le détail médical reste chez le praticien traitant</GatedNote></div>
  </ScreenPad>;
}
Object.assign(window, { ScreenDash, ScreenAccueil, ScreenAgenda, ScreenPatients });