// PERTES
const Pertes = ({ user, etablissement }) => {
  const etabId = etablissement?.id || 'etab-1';
  const todayStr = new Date().toISOString().slice(0, 10);
  const [pertes, setPertes] = React.useState(() => window.SB ? [] : scRead('sc_pertes', DEMO_DATA.pertes));
  const [showForm, setShowForm] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const [motifFilter, setMotifFilter] = React.useState('Tous');
  const [form, setForm] = React.useState({ date: todayStr, produit:'', quantite:'', unite:'kg', valeurUnit:'', motif:'DLC dépassée', categorie:'Légumes', commentaire:'' });
  const perms = DEMO_DATA.permissions[user.role];

  // ═══ Load Supabase + Realtime ═══
  React.useEffect(() => {
    if (!window.SB) return;
    let unsub = null, mounted = true;
    (async () => {
      try {
        const ps = await window.SB.db.listPertes(etabId);
        if (mounted) setPertes(ps);
      } catch (err) { console.error('[Pertes load]', err); }
    })();
    unsub = window.SB.realtime.subscribe('pertes', async () => {
      try { const ps = await window.SB.db.listPertes(etabId); if (mounted) setPertes(ps); } catch(e) {}
    });
    return () => { mounted = false; unsub && unsub(); };
  }, [etabId]);

  React.useEffect(() => { DEMO_DATA.pertes = pertes; if (!window.SB) scWrite('sc_pertes', pertes); }, [pertes]);

  const canManage = user.role==='consultant'||user.role==='patron'||user.role==='resp_cuisine';

  const supprimer = async (id) => {
    if (!canManage || !window.confirm('Supprimer cette perte ?')) return;
    if (window.SB) {
      try { await window.SB.db.deletePerte(id); }
      catch (err) { alert('Erreur : ' + err.message); return; }
    }
    setPertes(prev => prev.filter(p => p.id !== id));
  };

  const MOTIFS = ['Tous','DLC dépassée','Surproduction','Erreur de préparation','Erreur de commande','Retour client','Casse','Autre'];
  const CATS = ['Viandes','Poissons','Légumes','Fruits','Épicerie sèche','Produits laitiers','Préparations','Fonds & sauces','Vins & alcools','Autres'];
  const UNITES = ['kg','g','L','ml','portions','pièces','bottes','unités'];

  // Filtrer par établissement courant
  const pertesEtab = pertes.filter(p => (p.etablissementId || 'etab-1') === etabId);

  const filtered = pertesEtab.filter(p =>
    (motifFilter === 'Tous' || p.motif === motifFilter) &&
    (search === '' || p.produit.toLowerCase().includes(search.toLowerCase()))
  );

  const totalValeur = filtered.reduce((s,p) => s + p.quantite * p.valeurUnit, 0);
  const parCategorie = pertesEtab.reduce((acc,p) => {
    const k = p.categorie; const v = p.quantite * p.valeurUnit;
    acc[k] = (acc[k]||0) + v; return acc;
  }, {});

  const handleSubmit = async () => {
    if (!form.produit || !form.quantite || !form.valeurUnit) { alert('Veuillez remplir tous les champs obligatoires.'); return; }
    const newPerte = { id:`pt${Date.now()}`, ...form, etablissementId: etabId, quantite:parseFloat(form.quantite), valeurUnit:parseFloat(form.valeurUnit), declarePar:user.id, valide:false };
    if (window.SB) {
      try { await window.SB.db.upsertPerte(newPerte); }
      catch (err) { alert('Erreur : ' + err.message); return; }
    }
    setPertes([newPerte, ...pertes]);
    setShowForm(false);
    setForm({ date: todayStr, produit:'', quantite:'', unite:'kg', valeurUnit:'', motif:'DLC dépassée', categorie:'Légumes', commentaire:'' });
  };

  const valider = async (id) => {
    const p = pertes.find(x => x.id === id);
    if (!p) return;
    const updated = { ...p, valide: true, validePar: user.id };
    if (window.SB) {
      try { await window.SB.db.upsertPerte(updated); }
      catch (err) { alert('Erreur : ' + err.message); return; }
    }
    setPertes(pertes.map(x => x.id===id ? updated : x));
  };

  return (
    <div style={pts.root}>
      {/* Header */}
      <div style={pts.header}>
        <div style={pts.headerLeft}>
          <input style={pts.search} placeholder="Rechercher un produit…" value={search} onChange={e=>setSearch(e.target.value)}/>
          <div style={pts.motifTabs}>
            {MOTIFS.slice(0,5).map(m => (
              <button key={m} style={{...pts.motifBtn, ...(motifFilter===m?pts.motifActive:{})}} onClick={()=>setMotifFilter(m)}>
                {m}
              </button>
            ))}
          </div>
        </div>
        <div style={pts.headerRight}>
          {perms.pertes && <button style={pts.addBtn} onClick={() => setShowForm(true)}>+ Déclarer une perte</button>}
          <button style={pts.exportBtn} onClick={() => PDFUtils.printElement('pertes-print','Registre des pertes', { etablissement })}>🖨 Imprimer</button>
          <button style={pts.exportBtn} onClick={() => PDFUtils.exportElementToPdf('pertes-print','pertes.pdf', { etablissement, title: 'Registre des pertes' })}>⬇ Export</button>
        </div>
      </div>

      {/* KPI bar */}
      <div style={pts.kpiBar}>
        <div style={pts.kpiCard}>
          <div style={pts.kpiLabel}>Valeur totale pertes (période)</div>
          <div style={{...pts.kpiVal, color:'#dc2626'}}>−CHF {totalValeur.toFixed(2)}</div>
        </div>
        <div style={pts.kpiCard}>
          <div style={pts.kpiLabel}>Déclarations</div>
          <div style={pts.kpiVal}>{filtered.length}</div>
        </div>
        <div style={pts.kpiCard}>
          <div style={pts.kpiLabel}>Non validées</div>
          <div style={{...pts.kpiVal, color:'#d97706'}}>{pertesEtab.filter(p=>!p.valide).length}</div>
        </div>
        {/* Top catégorie */}
        {Object.entries(parCategorie).sort((a,b)=>b[1]-a[1]).slice(0,1).map(([k,v]) => (
          <div key={k} style={pts.kpiCard}>
            <div style={pts.kpiLabel}>1ère catégorie de perte</div>
            <div style={pts.kpiVal}>{k}</div>
            <div style={{fontSize:12,color:'#dc2626',fontWeight:600,marginTop:2}}>CHF {v.toFixed(2)}</div>
          </div>
        ))}
      </div>

      {/* Liste */}
      <div style={pts.tableWrap} id="pertes-print">
        <div style={pts.tableHead}>
          <span>Date</span>
          <span style={{flex:2}}>Produit</span>
          <span>Motif</span>
          <span>Catégorie</span>
          <span style={{textAlign:'right'}}>Quantité</span>
          <span style={{textAlign:'right'}}>Valeur</span>
          <span>Déclaré par</span>
          <span>Statut</span>
          {canManage && <span/>}
          {canManage && <span/>}
        </div>
        {filtered.length === 0 && <div style={{padding:'20px 18px', color:'var(--text2)', fontSize:13}}>Aucune perte pour ces critères.</div>}
        {filtered.map(p => {
          const emp = DEMO_DATA.utilisateurs.find(u=>u.id===p.declarePar);
          const role = emp ? DEMO_DATA.roles[emp.role] : null;
          const valeur = (p.quantite * p.valeurUnit).toFixed(2);
          const canVal = canManage && !p.valide;
          return (
            <div key={p.id} style={pts.tableRow}>
              <span style={pts.cell}>{p.date}</span>
              <span style={{...pts.cellBold, flex:2}}>
                {p.produit}
                {p.commentaire && <div style={{fontSize:11,color:'var(--text2)',fontWeight:400,marginTop:1}}>{p.commentaire}</div>}
              </span>
              <span style={pts.cell}><span style={pts.motifTag}>{p.motif}</span></span>
              <span style={pts.cell}>{p.categorie}</span>
              <span style={{...pts.cell,textAlign:'right'}}>{p.quantite} {p.unite}</span>
              <span style={{...pts.cell,textAlign:'right',color:'#dc2626',fontWeight:600}}>−CHF {valeur}</span>
              <span style={pts.cell}>
                <div style={{display:'flex',alignItems:'center',gap:6}}>
                  <div style={{...pts.empDot, background:role?.couleur}}>{emp?.avatar}</div>
                  <span style={{fontSize:12}}>{emp?.prenom}</span>
                </div>
              </span>
              <span style={pts.cell}>
                <span style={{...pts.badge, background:p.valide?'#dcfce7':'#fef9c3', color:p.valide?'#15803d':'#92400e'}}>
                  {p.valide ? '✓ Validé' : '⏳ À valider'}
                </span>
              </span>
              <span>
                {canVal ? <button style={pts.valBtn} onClick={()=>valider(p.id)}>Valider</button> : canManage ? <span/> : null}
              </span>
              <span>
                {canManage ? <button style={pts.deleteBtn} onClick={()=>supprimer(p.id)}>Supprimer</button> : null}
              </span>
            </div>
          );
        })}
      </div>

      {/* Répartition par catégorie */}
      <div style={pts.chartCard}>
        <div style={pts.chartTitle}>Répartition par catégorie</div>
        <div style={pts.chartBars}>
          {Object.entries(parCategorie).sort((a,b)=>b[1]-a[1]).map(([cat,val]) => {
            const pct = Math.round(val / totalValeur * 100);
            return (
              <div key={cat} style={pts.barRow}>
                <span style={pts.barLabel}>{cat}</span>
                <div style={pts.barTrack}>
                  <div style={{...pts.barFill, width:`${pct}%`}}/>
                </div>
                <span style={pts.barVal}>CHF {val.toFixed(2)}</span>
                <span style={pts.barPct}>{pct}%</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* Modal saisie perte */}
      {showForm && (
        <div style={pts.overlay} onClick={() => setShowForm(false)}>
          <div style={pts.modal} onClick={e=>e.stopPropagation()}>
            <div style={pts.modalHeader}>
              <div style={{fontWeight:700,fontSize:16,fontFamily:'var(--font-serif)'}}>Déclarer une perte</div>
              <button style={pts.closeBtn} onClick={()=>setShowForm(false)}>✕</button>
            </div>
            <div style={pts.modalBody}>
              <div style={pts.formGrid}>
                <div style={pts.field}>
                  <label style={pts.fieldLabel}>Date *</label>
                  <input type="date" style={pts.fieldInput} value={form.date} onChange={e=>setForm({...form,date:e.target.value})}/>
                </div>
                <div style={pts.field}>
                  <label style={pts.fieldLabel}>Motif *</label>
                  <select style={pts.fieldInput} value={form.motif} onChange={e=>setForm({...form,motif:e.target.value})}>
                    {MOTIFS.slice(1).map(m => <option key={m}>{m}</option>)}
                  </select>
                </div>
                <div style={{...pts.field, gridColumn:'1/-1'}}>
                  <label style={pts.fieldLabel}>Produit *</label>
                  <input style={pts.fieldInput} placeholder="Nom du produit" value={form.produit} onChange={e=>setForm({...form,produit:e.target.value})}/>
                </div>
                <div style={pts.field}>
                  <label style={pts.fieldLabel}>Quantité *</label>
                  <input type="number" style={pts.fieldInput} placeholder="0" value={form.quantite} onChange={e=>setForm({...form,quantite:e.target.value})}/>
                </div>
                <div style={pts.field}>
                  <label style={pts.fieldLabel}>Unité</label>
                  <select style={pts.fieldInput} value={form.unite} onChange={e=>setForm({...form,unite:e.target.value})}>
                    {UNITES.map(u => <option key={u}>{u}</option>)}
                  </select>
                </div>
                <div style={pts.field}>
                  <label style={pts.fieldLabel}>Valeur unitaire (CHF) *</label>
                  <input type="number" step="0.01" style={pts.fieldInput} placeholder="0.00" value={form.valeurUnit} onChange={e=>setForm({...form,valeurUnit:e.target.value})}/>
                </div>
                <div style={pts.field}>
                  <label style={pts.fieldLabel}>Catégorie</label>
                  <select style={pts.fieldInput} value={form.categorie} onChange={e=>setForm({...form,categorie:e.target.value})}>
                    {CATS.map(c => <option key={c}>{c}</option>)}
                  </select>
                </div>
                <div style={{...pts.field, gridColumn:'1/-1'}}>
                  <label style={pts.fieldLabel}>Commentaire</label>
                  <textarea style={{...pts.fieldInput, resize:'vertical', minHeight:70}} value={form.commentaire} onChange={e=>setForm({...form,commentaire:e.target.value})} placeholder="Précisions éventuelles…"/>
                </div>
              </div>
              {form.quantite && form.valeurUnit && (
                <div style={pts.previewVal}>
                  Valeur estimée : <strong style={{color:'#dc2626'}}>−CHF {(parseFloat(form.quantite||0)*parseFloat(form.valeurUnit||0)).toFixed(2)}</strong>
                </div>
              )}
              <div style={{display:'flex',gap:10,justifyContent:'flex-end',marginTop:16}}>
                <button style={pts.exportBtn} onClick={()=>setShowForm(false)}>Annuler</button>
                <button style={pts.addBtn} onClick={handleSubmit}>Enregistrer la perte</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const pts = {
  root:{display:'flex',flexDirection:'column',gap:16},
  header:{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,flexWrap:'wrap'},
  headerLeft:{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'},
  headerRight:{display:'flex',gap:8},
  search:{padding:'7px 14px',border:'1px solid var(--border)',borderRadius:8,fontSize:13,color:'var(--text)',background:'var(--surface)',outline:'none',fontFamily:'var(--font)',width:180},
  motifTabs:{display:'flex',gap:4,flexWrap:'wrap'},
  motifBtn:{padding:'5px 12px',border:'1px solid var(--border)',borderRadius:20,background:'var(--surface)',color:'var(--text2)',fontSize:11,cursor:'pointer',fontFamily:'var(--font)'},
  motifActive:{background:'var(--nav)',color:'#fff',borderColor:'var(--nav)'},
  addBtn:{padding:'8px 16px',background:'var(--accent)',color:'#fff',border:'none',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'},
  exportBtn:{padding:'8px 16px',background:'var(--surface)',border:'1px solid var(--border)',color:'var(--text2)',borderRadius:8,fontSize:13,cursor:'pointer',fontFamily:'var(--font)'},
  kpiBar:{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:12},
  kpiCard:{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,padding:'14px 16px'},
  kpiLabel:{fontSize:11,fontWeight:600,color:'var(--text2)',textTransform:'uppercase',letterSpacing:0.4,marginBottom:6},
  kpiVal:{fontSize:22,fontWeight:700,fontFamily:'var(--font-serif)',color:'var(--text)'},
  tableWrap:{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,overflow:'hidden'},
  tableHead:{display:'grid',gridTemplateColumns:'90px 2fr 1.2fr 1fr 90px 100px 100px 90px 80px',padding:'9px 18px',background:'var(--bg)',fontSize:10,fontWeight:700,color:'var(--text2)',textTransform:'uppercase',letterSpacing:0.4,borderBottom:'1px solid var(--border)',gap:10},
  tableRow:{display:'grid',gridTemplateColumns:'90px 2fr 1.2fr 1fr 90px 100px 100px 90px 80px',padding:'12px 18px',borderBottom:'1px solid var(--border)',gap:10,alignItems:'center'},
  cell:{fontSize:13,color:'var(--text)'},
  cellBold:{fontSize:13,fontWeight:600,color:'var(--text)'},
  badge:{display:'inline-block',padding:'3px 9px',borderRadius:12,fontSize:11,fontWeight:600},
  motifTag:{fontSize:11,background:'#f1f5f9',color:'var(--text2)',padding:'2px 8px',borderRadius:8,fontWeight:500},
  empDot:{width:22,height:22,borderRadius:5,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:9,flexShrink:0},
  valBtn:{background:'none',border:'1px solid #15803d',color:'#15803d',borderRadius:6,padding:'4px 10px',fontSize:11,fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'},
  deleteBtn:{background:'none',border:'1px solid #fca5a5',color:'#dc2626',borderRadius:6,padding:'4px 10px',fontSize:11,fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'},
  chartCard:{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,padding:'18px 20px'},
  chartTitle:{fontSize:12,fontWeight:700,color:'var(--text)',textTransform:'uppercase',letterSpacing:0.4,marginBottom:14},
  chartBars:{display:'flex',flexDirection:'column',gap:10},
  barRow:{display:'grid',gridTemplateColumns:'130px 1fr 90px 40px',gap:12,alignItems:'center'},
  barLabel:{fontSize:12,color:'var(--text)',fontWeight:500},
  barTrack:{height:8,background:'var(--bg)',borderRadius:4,overflow:'hidden',border:'1px solid var(--border)'},
  barFill:{height:'100%',background:'var(--accent)',borderRadius:4,transition:'width .4s'},
  barVal:{fontSize:12,color:'#dc2626',fontWeight:600,textAlign:'right'},
  barPct:{fontSize:11,color:'var(--text2)',textAlign:'right'},
  overlay:{position:'fixed',inset:0,background:'rgba(0,0,0,0.4)',display:'flex',alignItems:'center',justifyContent:'center',zIndex:1000},
  modal:{background:'var(--surface)',borderRadius:14,width:520,maxWidth:'90vw',boxShadow:'0 20px 60px rgba(0,0,0,0.2)'},
  modalHeader:{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'18px 22px',borderBottom:'1px solid var(--border)'},
  closeBtn:{background:'none',border:'none',fontSize:18,cursor:'pointer',color:'var(--text2)'},
  modalBody:{padding:'22px'},
  formGrid:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14},
  field:{display:'flex',flexDirection:'column',gap:6},
  fieldLabel:{fontSize:11,fontWeight:600,color:'var(--text2)',textTransform:'uppercase',letterSpacing:0.4},
  fieldInput:{padding:'9px 12px',border:'1px solid var(--border)',borderRadius:8,fontSize:13,color:'var(--text)',background:'var(--bg)',fontFamily:'var(--font)',outline:'none'},
  previewVal:{background:'#fef2f2',border:'1px solid #fca5a5',borderRadius:8,padding:'10px 14px',fontSize:13,color:'var(--text)',marginTop:8},
};

Object.assign(window, { Pertes });