// JammSanté Clinique — écrans équipe : personnel/paie, vacataires/rétrocession, comms
function ScreenPersonnel() {
  const [tab, setTab] = useState('Équipe');
  return <ScreenPad>
    <Tabs items={['Équipe','Gardes','Congés','Paie','Permissions']} active={tab} onChange={setTab} style={{ marginBottom:18 }} />
    {tab === 'Équipe' && <Card padding={0}>
      <Table cols={['Membre','Rôle','Contrat','Disponibilité','Activité (semaine)','Statut']} rows={C_STAFF.map(s => [
        <div style={{ display:'flex', alignItems:'center', gap:10 }}><Avatar name={s.name} size={30} color={s.color} /><span style={{ fontWeight:600, color:'var(--g-fg)' }}>{s.name}</span></div>,
        s.role, <Tag tone={s.type === 'Vacataire' ? 'violet' : 'neutral'}>{s.type}</Tag>, s.dispo,
        s.consult ? <span>{s.consult} consult./j · ponctualité <b style={{ color:'var(--g-fg)' }}>{s.ponctu}</b></span> : <span style={{ color:'var(--g-fg-faint)' }}>—</span>,
        <Badge tone={s.statut.includes('Absente') ? 'red' : s.statut.includes('Garde') ? 'violet' : 'green'} dot={false}>{s.statut}</Badge>,
      ])} />
    </Card>}
    {tab === 'Gardes' && <div>
      <SectionTitle icon="moon" right={<Button size="xs" icon="repeat">Rotation auto</Button>}>Planning des gardes de nuit</SectionTitle>
      <Card padding={18}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:10 }}>
          {C_GARDES_PLANNING[0].nuits.map(n => <div key={n.j} style={{ textAlign:'center', padding:'14px 8px', borderRadius:10, background: n.j === 'Lun' ? 'var(--g-accent-bg)' : 'var(--g-surface-2)', border: n.j === 'Lun' ? '1px solid var(--g-accent-bg-2)' : '1px solid transparent' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--g-fg-faint)', marginBottom:8 }}>{n.j}</div>
            <Avatar name={n.n} size={34} />
            <div style={{ fontSize:11.5, fontWeight:600, color:'var(--g-fg)', marginTop:7 }}>{n.n}</div>
          </div>)}
        </div>
        <div style={{ fontSize:11.5, color:'var(--g-fg-subtle)', marginTop:14 }}>Astreinte médicale : Dr I. Fall (sem. impaires) · Dr A. Ndiaye (sem. paires) · prime de garde : 15 000 F/nuit.</div>
      </Card>
    </div>}
    {tab === 'Congés' && <Card padding={0}>
      <Table cols={['Membre','Type','Du','Au','Statut','']} rows={C_CONGES.map(c => [
        <span style={{ fontWeight:600, color:'var(--g-fg)' }}>{c.name}</span>, c.type, c.du, c.au,
        <Badge tone={c.statut === 'En attente' ? 'amber' : 'green'} dot={false}>{c.statut}</Badge>,
        c.statut === 'En attente' ? <div style={{ display:'flex', gap:6 }}><Button size="xs" variant="secondary">Approuver</Button><Button size="xs" variant="ghost">Refuser</Button></div> : null,
      ])} />
    </Card>}
    {tab === 'Paie' && <div>
      <Card padding={0}>
        <Table cols={['Membre','Salaire de base','Primes','Total juin','Statut']} rows={C_PAIE.map(p => [
          <span style={{ fontWeight:600, color:'var(--g-fg)' }}>{p.name}</span>, fmtF(p.base), fmtF(p.primes),
          <span style={{ fontWeight:800, color:'var(--g-fg)' }}>{fmtF(p.base + p.primes)}</span>,
          <Badge tone="green" dot={false}>{p.statut}</Badge>])} />
      </Card>
      <div style={{ fontSize:11.5, color:'var(--g-fg-faint)', marginTop:10 }}>Paie simple, salaires et primes de garde. Les rétrocessions vacataires sont gérées dans leur module dédié.</div>
    </div>}
    {tab === 'Permissions' && <Card padding={0}>
      {C_PERMISSIONS.map((p, i) => <div key={p.role} style={{ display:'flex', alignItems:'center', gap:14, padding:'13px 18px', borderBottom: i < C_PERMISSIONS.length-1 ? '1px solid var(--g-surface-2)' : 'none' }}>
        <Badge tone={p.tone} dot={false}>{p.role}</Badge>
        <span style={{ fontSize:12.5, color:'var(--g-fg-muted)', flex:1 }}>{p.acces}</span>
        <Button size="xs" variant="ghost" icon="settings-2">Modifier</Button>
      </div>)}
      <div style={{ padding:'12px 18px', borderTop:'1px solid var(--g-border)', fontSize:11.5, color:'var(--g-fg-subtle)', display:'flex', alignItems:'center', gap:8 }}>
        <Icon name="key-round" size={13} /> La direction peut déléguer des droits, ex. donner « Rapports » au médecin-chef.
      </div>
    </Card>}
  </ScreenPad>;
}

function ScreenVacataires() {
  const [sel, setSel] = useState(C_VACATAIRES[0]);
  return <ScreenPad>
    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16, padding:'11px 16px', borderRadius:10, background:'var(--g-accent-bg)' }}>
      <Icon name="handshake" size={15} color="#0D9488" />
      <span style={{ fontSize:12.5, color:'var(--g-fg-muted)' }}>Chaque vacataire a <b>son propre accord</b>, fixé par la direction : pourcentage, montant fixe par acte, ou mixte selon l'acte. Décompte automatique en fin de mois.</span>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'320px 1fr', gap:14 }}>
      <div style={{ display:'grid', gap:10, alignContent:'start' }}>
        {C_VACATAIRES.map(v => <Card key={v.id} padding={14} hoverable onClick={() => setSel(v)} style={{ border: sel.id === v.id ? '1.5px solid #0D9488' : '1px solid var(--g-border)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <Avatar name={v.name} size={34} />
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:700, color:'var(--g-fg)' }}>{v.name}</div>
              <div style={{ fontSize:11, color:'var(--g-fg-subtle)' }}>{v.spec} · {v.jours}</div>
            </div>
            <Badge tone={v.statut === 'Payé' ? 'green' : v.statut === 'Validé' ? 'teal' : 'amber'} dot={false}>{v.statut}</Badge>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop:10, paddingTop:10, borderTop:'1px solid var(--g-surface-2)', fontSize:11.5 }}>
            <span style={{ color:'var(--g-fg-subtle)' }}>{v.modele} · {v.taux}</span><b style={{ color:'var(--g-fg)' }}>{fmtF(v.brut)}</b>
          </div>
        </Card>)}
      </div>
      <div>
        <SectionTitle icon="file-text" right={<div style={{ display:'flex', gap:8 }}><Button size="xs" variant="outline" icon="download">Relevé PDF</Button>{sel.statut === 'À valider' && <Button size="xs" icon="check">Valider le décompte</Button>}</div>}>Relevé de rétrocession - {sel.name} · juillet 2026</SectionTitle>
        <Card padding={0}>
          <Table cols={['Acte','Tarif','Nb','Brut','Répartition']} rows={sel.actes.map(a => [
            <span style={{ fontWeight:600, color:'var(--g-fg)' }}>{a.acte}</span>, fmtF(a.tarif), a.nb,
            <span style={{ fontWeight:700 }}>{fmtF(a.tarif * a.nb)}</span>, <Tag tone="violet">{a.mode}</Tag>])} />
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', borderTop:'1px solid var(--g-border)' }}>
            <div style={{ padding:'14px 18px' }}><div style={{ fontSize:10.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--g-fg-faint)' }}>Brut facturé</div><div style={{ fontSize:17, fontWeight:800, color:'var(--g-fg)', marginTop:3 }}>{fmtF(sel.brut)}</div></div>
            <div style={{ padding:'14px 18px', borderLeft:'1px solid var(--g-surface-2)' }}><div style={{ fontSize:10.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.08em', color:'#0D9488' }}>Part médecin</div><div style={{ fontSize:17, fontWeight:800, color:'#0D9488', marginTop:3 }}>{fmtF(sel.medecin)}</div></div>
            <div style={{ padding:'14px 18px', borderLeft:'1px solid var(--g-surface-2)' }}><div style={{ fontSize:10.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--g-fg-faint)' }}>Part clinique</div><div style={{ fontSize:17, fontWeight:800, color:'var(--g-fg)', marginTop:3 }}>{fmtF(sel.clinique)}</div></div>
          </div>
        </Card>
        <SectionTitle icon="settings-2">Accord de {sel.name.split(' ').slice(-1)[0]}</SectionTitle>
        <Card padding={16}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            <Field label="Modèle de partage"><Input value={sel.modele} onChange={() => {}} /></Field>
            <Field label="Taux / montant"><Input value={sel.taux} onChange={() => {}} /></Field>
            <Field label="Jours de présence"><Input value={sel.jours} onChange={() => {}} /></Field>
            <Field label="Règlement"><Input value="Virement le 5 du mois" onChange={() => {}} /></Field>
          </div>
          <div style={{ fontSize:11.5, color:'var(--g-fg-faint)', marginTop:12 }}>Modifiable uniquement par la direction · les patients ne peuvent réserver que sur ses jours de présence.</div>
        </Card>
      </div>
    </div>
  </ScreenPad>;
}

function ScreenComms() {
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:14 }}>
      <div>
        <SectionTitle icon="message-circle" right={<Button size="xs" icon="plus">Nouveau message</Button>}>Messages automatiques</SectionTitle>
        <Card padding={0}>
          {C_COMMS.map((m, i) => <div key={m.id} style={{ display:'flex', gap:12, padding:'13px 18px', borderBottom: i < C_COMMS.length-1 ? '1px solid var(--g-surface-2)' : 'none' }}>
            <span style={{ width:34, height:34, borderRadius:9, flexShrink:0, background: m.canal === 'WhatsApp' ? 'var(--g-success-bg)' : 'var(--g-info-bg)', color: m.canal === 'WhatsApp' ? '#059669' : '#1D4ED8', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={m.canal === 'WhatsApp' ? 'message-circle' : 'smartphone'} size={16} /></span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ fontSize:12.5, fontWeight:700, color:'var(--g-fg)' }}>{m.type}</span><Tag tone={m.tone}>{m.canal}</Tag>
                <span style={{ flex:1 }} /><span style={{ fontSize:10.5, color:'var(--g-fg-faint)' }}>{m.statut}</span>
              </div>
              <div style={{ fontSize:12, color:'var(--g-fg-subtle)', marginTop:3 }}>À : <b style={{ color:'var(--g-fg-muted)' }}>{m.dest}</b> - « {m.msg} »</div>
            </div>
          </div>)}
        </Card>
        <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:14, padding:'11px 16px', borderRadius:10, background:'var(--g-accent-bg)' }}>
          <Icon name="sparkles" size={15} color="#0D9488" />
          <span style={{ fontSize:12.5, color:'var(--g-fg-muted)' }}><b>Jamm IA :</b> les rappels WhatsApp réduisent les absences de 31%, activer aussi pour le labo ?</span>
          <span style={{ flex:1 }} /><Switch on={false} onChange={() => {}} />
        </div>
      </div>
      <div>
        <SectionTitle icon="star">Satisfaction patients</SectionTitle>
        <Card padding={18}>
          <div style={{ display:'flex', alignItems:'center', gap:16 }}>
            <Ring value={C_SATISFACTION.score} max={5} size={72} label="/ 5" />
            <div>
              <div style={{ fontSize:13, fontWeight:700, color:'var(--g-fg)' }}>{C_SATISFACTION.reponses} avis ce mois</div>
              <div style={{ fontSize:11.5, color:'#059669', fontWeight:600 }}>+0,2 vs juin</div>
            </div>
          </div>
          <div style={{ marginTop:14, paddingTop:12, borderTop:'1px solid var(--g-surface-2)' }}>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--g-fg-faint)', marginBottom:8 }}>Points remontés</div>
            {C_SATISFACTION.plaintes.map(p => <div key={p} style={{ display:'flex', gap:8, fontSize:12, color:'var(--g-fg-muted)', marginBottom:6 }}><Icon name="corner-down-right" size={13} color="var(--g-fg-faint)" />{p}</div>)}
          </div>
        </Card>
        <SectionTitle icon="send">Envois programmés</SectionTitle>
        <Card padding={16}>
          {[['Rappels RDV du lendemain','17h00 · quotidien',true],['Résultats labo prêts','dès validation',true],['Enquête satisfaction','2 h après la sortie',true],['Vœux Tabaski / fêtes','manuel',false]].map((r, i) => <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 0', borderBottom: i < 3 ? '1px solid var(--g-surface-2)' : 'none' }}>
            <div style={{ flex:1 }}><div style={{ fontSize:12.5, fontWeight:600, color:'var(--g-fg)' }}>{r[0]}</div><div style={{ fontSize:10.5, color:'var(--g-fg-faint)' }}>{r[1]}</div></div>
            <Switch on={r[2]} onChange={() => {}} />
          </div>)}
        </Card>
      </div>
    </div>
  </ScreenPad>;
}
Object.assign(window, { ScreenPersonnel, ScreenVacataires, ScreenComms });