// DASHBOARD
const Dashboard = ({ user, etablissement }) => {
  const today = new Date().toISOString().slice(0, 10);
  const etabId = etablissement?.id || 'etab-1';
  const perms = DEMO_DATA.permissions[user.role] || {};

  // Filtrer toutes les données par établissement
  const planningEtab = DEMO_DATA.planning.filter(s => (s.etablissementId || 'etab-1') === etabId);
  const pertesEtab = DEMO_DATA.pertes.filter(p => (p.etablissementId || 'etab-1') === etabId);
  const recettesEtab = DEMO_DATA.recettes.filter(r => (r.etablissementId || 'etab-1') === etabId);
  const inventairesEtab = DEMO_DATA.inventaires.filter(i => (i.etablissementId || 'etab-1') === etabId);

  const todayShifts = planningEtab.filter(s => s.date === today);
  const activePointages = todayShifts.filter(s => s.pointageDebut && !s.pointageFin);
  const manquants = todayShifts.filter(s => !s.pointageDebut);
  const pertesNonVal = pertesEtab.filter(p => !p.valide);
  const pertesTotal7j = pertesEtab.reduce((s,p) => s + p.quantite * p.valeurUnit, 0);
  const inv = inventairesEtab[0];
  const recentes = recettesEtab.slice(0,3);

  const dateLabel = new Date().toLocaleDateString('fr-CH', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

  const KPICard = ({ label, value, sub, accent, onClick }) => (
    <div style={{...ds.kpiCard, cursor: onClick ? 'pointer' : 'default'}} onClick={onClick}>
      <div style={ds.kpiLabel}>{label}</div>
      <div style={{...ds.kpiValue, color: accent || 'var(--text)'}}>{value}</div>
      {sub && <div style={ds.kpiSub}>{sub}</div>}
    </div>
  );

  const Section = ({ title, children, action, actionLabel }) => (
    <div style={ds.section}>
      <div style={ds.sectionHeader}>
        <div style={ds.sectionTitle}>{title}</div>
        {action && <button style={ds.sectionAction} onClick={action}>{actionLabel}</button>}
      </div>
      {children}
    </div>
  );

  return (
    <div style={ds.root}>
      {/* Greeting */}
      <div style={ds.greeting}>
        <div style={ds.greetingText}>Bonjour, <strong>{user.prenom}</strong> — {dateLabel}</div>
        {pertesNonVal.length > 0 && (
          <div style={ds.alertBanner}>
            ⚠ {pertesNonVal.length} perte{pertesNonVal.length > 1 ? 's' : ''} en attente de validation
          </div>
        )}
      </div>

      {/* KPI row */}
      <div style={ds.kpiRow}>
        <KPICard label="Effectif du jour" value={`${todayShifts.length} pers.`} sub={`${activePointages.length} en poste`} accent="var(--text)"/>
        <KPICard label="Pointages manquants" value={manquants.length} sub="aujourd'hui" accent={manquants.length > 0 ? '#d97706' : '#16a34a'}/>
        {perms.recettes && <KPICard label="Recettes actives" value={recettesEtab.filter(r=>r.statut==='active').length} sub="carte printemps"/>}
        {perms.inventaire && <KPICard label="Inventaire avril" value={inv ? `CHF ${inv.valeurTotale.toLocaleString('fr-CH')}` : '—'} sub={inv?.statut || ''} accent="var(--text)"/>}
        {perms.pertes && <KPICard label="Pertes (7 jours)" value={`CHF ${pertesTotal7j.toFixed(2)}`} sub={`${pertesEtab.length} déclarations`} accent={pertesTotal7j > 100 ? '#dc2626' : '#d97706'}/>}
      </div>

      <div style={ds.grid}>
        {/* Planning du jour */}
        <Section title="Planning du jour">
          <div style={ds.planList}>
            {todayShifts.length === 0 && <div style={ds.empty}>Aucun horaire planifié aujourd'hui.</div>}
            {todayShifts.map(shift => {
              const emp = DEMO_DATA.utilisateurs.find(u => u.id === shift.userId);
              const role = emp ? DEMO_DATA.roles[emp.role] : null;
              const enPoste = shift.pointageDebut && !shift.pointageFin;
              return (
                <div key={shift.id} style={ds.planItem}>
                  <div style={{...ds.planAvatar, background: role?.couleur || '#888'}}>{emp?.avatar || '?'}</div>
                  <div style={ds.planInfo}>
                    <div style={ds.planName}>{emp ? `${emp.prenom} ${emp.nom}` : '—'}</div>
                    <div style={ds.planPoste}>{shift.poste}</div>
                  </div>
                  <div style={ds.planRight}>
                    <div style={ds.planHeure}>{shift.debut} – {shift.fin}</div>
                    <div style={{...ds.planBadge, background: enPoste ? '#dcfce7' : shift.pointageDebut ? '#f3f4f6' : '#fef9c3', color: enPoste ? '#15803d' : shift.pointageDebut ? '#6b7280' : '#92400e'}}>
                      {enPoste ? 'En poste' : shift.pointageDebut ? 'Terminé' : 'Pas pointé'}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Section>

        {/* Pertes récentes */}
        {perms.pertes && (
          <Section title="Dernières pertes déclarées">
            <div style={ds.planList}>
              {pertesEtab.slice(0,4).map(p => (
                <div key={p.id} style={ds.planItem}>
                  <div style={{...ds.lossIcon, background: p.valide ? '#fef3c7' : '#fee2e2'}}>
                    {p.valide ? '✓' : '!'}
                  </div>
                  <div style={ds.planInfo}>
                    <div style={ds.planName}>{p.produit}</div>
                    <div style={ds.planPoste}>{p.motif} · {p.date}</div>
                  </div>
                  <div style={ds.lossVal}>
                    <span style={{color:'#dc2626', fontWeight:600}}>−CHF {(p.quantite * p.valeurUnit).toFixed(2)}</span>
                    {!p.valide && <div style={{fontSize:10, color:'#d97706', fontWeight:600}}>À valider</div>}
                  </div>
                </div>
              ))}
            </div>
          </Section>
        )}

        {/* Recettes récentes */}
        {perms.recettes && (
          <Section title="Recettes récemment modifiées">
            <div style={ds.planList}>
              {recentes.map(r => (
                <div key={r.id} style={ds.planItem}>
                  <div style={ds.recipeDot}/>
                  <div style={ds.planInfo}>
                    <div style={ds.planName}>{r.nom}</div>
                    <div style={ds.planPoste}>{r.categorie} · v{r.version} · {r.modifie}</div>
                  </div>
                  <div style={ds.recipeFC}>
                    {r.foodCost && <div style={{...ds.fcBadge, background: r.foodCost < 30 ? '#dcfce7' : r.foodCost < 35 ? '#fef9c3' : '#fee2e2', color: r.foodCost < 30 ? '#15803d' : r.foodCost < 35 ? '#92400e' : '#dc2626'}}>{r.foodCost.toFixed(1)}% FC</div>}
                  </div>
                </div>
              ))}
            </div>
          </Section>
        )}

        {/* Inventaire */}
        {perms.inventaire && inv && (
          <Section title="Inventaire mensuel — Écarts significatifs">
            <div style={ds.planList}>
              {inv.lignes.filter(l => l.ecart < 0).slice(0,5).map(l => (
                <div key={l.id} style={ds.planItem}>
                  <div style={ds.planInfo}>
                    <div style={ds.planName}>{l.produit}</div>
                    <div style={ds.planPoste}>{l.categorie}</div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:13, fontWeight:600, color:'#dc2626'}}>{l.ecart > 0 ? '+' : ''}{l.ecart} {l.unite}</div>
                    <div style={{fontSize:11, color:'var(--text2)'}}>CHF {Math.abs(l.ecartValeur).toFixed(2)}</div>
                  </div>
                </div>
              ))}
            </div>
          </Section>
        )}
      </div>
    </div>
  );
};

const ds = {
  root: { display:'flex', flexDirection:'column', gap:24 },
  greeting: { display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap' },
  greetingText: { fontSize:15, color:'var(--text2)' },
  alertBanner: { background:'#fef3c7', border:'1px solid #fde68a', color:'#92400e', padding:'7px 14px', borderRadius:8, fontSize:13, fontWeight:500 },
  kpiRow: { display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))', gap:14 },
  kpiCard: { background:'var(--surface)', border:'1px solid var(--border)', borderRadius:10, padding:'18px 20px', transition:'box-shadow .15s' },
  kpiLabel: { fontSize:11, fontWeight:600, color:'var(--text2)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:8 },
  kpiValue: { fontSize:26, fontWeight:700, fontFamily:'var(--font-serif)', lineHeight:1 },
  kpiSub: { fontSize:12, color:'var(--text2)', marginTop:5 },
  grid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 },
  section: { background:'var(--surface)', border:'1px solid var(--border)', borderRadius:10, overflow:'hidden' },
  sectionHeader: { display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 18px', borderBottom:'1px solid var(--border)' },
  sectionTitle: { fontSize:13, fontWeight:700, color:'var(--text)', letterSpacing:0.2 },
  sectionAction: { background:'none', border:'none', color:'var(--accent)', fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'var(--font)' },
  planList: { display:'flex', flexDirection:'column' },
  planItem: { display:'flex', alignItems:'center', gap:12, padding:'11px 18px', borderBottom:'1px solid var(--border)', lastChild:{borderBottom:'none'} },
  planAvatar: { width:32, height:32, borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:11, flexShrink:0 },
  planInfo: { flex:1, minWidth:0 },
  planName: { fontSize:13, fontWeight:600, color:'var(--text)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' },
  planPoste: { fontSize:11, color:'var(--text2)', marginTop:1 },
  planRight: { display:'flex', flexDirection:'column', alignItems:'flex-end', gap:3 },
  planHeure: { fontSize:12, color:'var(--text)', fontWeight:500 },
  planBadge: { fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:10 },
  lossIcon: { width:32, height:32, borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:14, flexShrink:0 },
  lossVal: { textAlign:'right', fontSize:13 },
  recipeDot: { width:8, height:8, borderRadius:'50%', background:'var(--accent)', flexShrink:0 },
  recipeFC: { flexShrink:0 },
  fcBadge: { fontSize:11, fontWeight:600, padding:'3px 8px', borderRadius:10 },
  empty: { padding:'16px 18px', color:'var(--text2)', fontSize:13 },
};

Object.assign(window, { Dashboard });