// CARTES & RECETTES
const Recettes = ({ user, etablissement }) => {
  const [activeTab, setActiveTab] = React.useState('carte');
  const [selectedRecette, setSelectedRecette] = React.useState(null);
  const [search, setSearch] = React.useState('');
  const [catFilter, setCatFilter] = React.useState('Tous');
  const perms = DEMO_DATA.permissions[user.role];
  const etabId = etablissement?.id || 'etab-1';

  // Chargement Supabase + Realtime (fallback localStorage si pas configuré)
  const [recettes, setRecettes] = React.useState([]);
  const [cartes, setCartes] = React.useState([]);

  React.useEffect(() => {
    if (!window.SB) {
      setRecettes(scRead('sc_recettes', DEMO_DATA.recettes));
      setCartes(scRead('sc_cartes', DEMO_DATA.cartes));
      return;
    }
    let unsubRec = null, unsubCart = null, mounted = true;

    (async () => {
      try {
        const [recs, crts] = await Promise.all([
          window.SB.db.listRecettes(etabId),
          window.SB.db.listCartes(etabId),
        ]);
        if (!mounted) return;
        setRecettes(recs);
        setCartes(crts);
      } catch (err) { console.error('[Recettes load]', err); }
    })();

    const refreshRec = async () => {
      try { const r = await window.SB.db.listRecettes(etabId); if (mounted) setRecettes(r); } catch(e) {}
    };
    const refreshCart = async () => {
      try { const c = await window.SB.db.listCartes(etabId); if (mounted) setCartes(c); } catch(e) {}
    };
    unsubRec = window.SB.realtime.subscribe('recettes', refreshRec);
    unsubCart = window.SB.realtime.subscribe('cartes', refreshCart);

    return () => {
      mounted = false;
      unsubRec && unsubRec();
      unsubCart && unsubCart();
    };
  }, [etabId]);

  const cats = ['Tous','Entrées','Plats','Desserts','Fromages'];

  // Filtrer par établissement courant (déjà filtré par Supabase mais on garde le filtre côté client pour le fallback)
  const recettesEtab = recettes.filter(r => (r.etablissementId || 'etab-1') === etabId);
  const cartesEtab = cartes.filter(c => (c.etablissementId || 'etab-1') === etabId);
  const carte = cartesEtab[0];

  const ALLERGENES_MAP = { gluten:'Gluten', lactose:'Lactose', oeufs:'Œufs', poissons:'Poissons', sulfites:'Sulfites', crustaces:'Crustacés', fruits_coque:'Fruits à coque' };

  const filteredPlats = (carte?.plats || []).filter(p =>
    (catFilter === 'Tous' || p.categorie === catFilter) &&
    (search === '' || p.nom.toLowerCase().includes(search.toLowerCase()))
  );

  const RecetteDetail = ({ recette, onBack }) => {
    const [portions, setPortions] = React.useState(recette.portions);
    const ratio = portions / recette.portions;
    const coutAdj = (recette.ingredients || []).reduce((s,i) => s + i.quantite * ratio * i.prixUnit, 0);

    return (
      <div style={rs.detailRoot}>
        <div style={{display:'flex',gap:8,marginBottom:16}} className='no-print'>
          <button style={rs.backBtn} onClick={onBack}>← Retour</button>
          <button style={rs.printBtn} onClick={() => PDFUtils.printElement('fiche-recette-print', 'Fiche recette — ' + recette.nom, { etablissement })}>🖨 Imprimer</button>
          <button style={rs.printBtn} onClick={() => PDFUtils.exportElementToPdf('fiche-recette-print', 'fiche-recette.pdf', { etablissement, title: 'Fiche recette — ' + recette.nom })}>⬇ Export PDF</button>
        </div>
        <div id='fiche-recette-print'>
        <div style={rs.detailHeader}>
          <div style={rs.backGhost}>← Retour</div>
          <div style={rs.detailMeta}>
            <div style={rs.detailTitle}>{recette.nom}</div>
            <div style={rs.detailSub}>v{recette.version} · Modifié le {recette.modifie} · {recette.categorie}</div>
            {(recette.tempsPreparation != null || recette.tempsCuisson != null || recette.tempsTotal != null) && (
              <div style={{display:'flex', gap:14, marginTop:8, fontSize:12, color:'var(--text2)'}}>
                {recette.tempsPreparation != null && <span>⏱ Prépa : <strong style={{color:'var(--text)'}}>{recette.tempsPreparation} min</strong></span>}
                {recette.tempsCuisson != null && <span>🔥 Cuisson : <strong style={{color:'var(--text)'}}>{recette.tempsCuisson} min</strong></span>}
                {recette.tempsTotal != null && <span>⏳ Total : <strong style={{color:'var(--accent)'}}>{recette.tempsTotal} min</strong></span>}
              </div>
            )}
          </div>
          <div style={rs.detailBadges}>
            <span style={{...rs.badge, background:'#dcfce7', color:'#15803d'}}>{recette.statut}</span>
            {recette.foodCost && <span style={{...rs.badge, background: recette.foodCost < 30 ? '#dcfce7' : recette.foodCost < 35 ? '#fef9c3' : '#fee2e2', color: recette.foodCost < 30 ? '#15803d' : recette.foodCost < 35 ? '#92400e' : '#dc2626'}}>FC {recette.foodCost.toFixed(1)}%</span>}
          </div>
        </div>

        <div style={rs.detailGrid}>
          {/* Ingrédients */}
          <div style={rs.detailCard}>
            <div style={rs.cardHeader}>
              <span style={rs.cardTitle}>Ingrédients</span>
              <div style={rs.portionsCtrl}>
                <span style={{fontSize:12, color:'var(--text2)'}}>Portions :</span>
                <button style={rs.portBtn} onClick={() => setPortions(Math.max(1, portions-1))}>−</button>
                <span style={{fontWeight:700, fontSize:15, minWidth:24, textAlign:'center'}}>{portions}</span>
                <button style={rs.portBtn} onClick={() => setPortions(portions+1)}>+</button>
                {ratio !== 1 && <span style={{fontSize:11, color:'var(--accent)', fontWeight:600}}>×{ratio.toFixed(2)}</span>}
              </div>
            </div>
            <div style={rs.ingTable}>
              <div style={rs.ingHead}><span>Ingrédient</span><span>Quantité</span><span>Unité</span>{user.role === 'consultant' && <span>Coût</span>}</div>
              {(recette.ingredients || []).map(i => (
                <div key={i.id} style={rs.ingRow}>
                  <span style={rs.ingName}>{i.nom}</span>
                  <span style={rs.ingQty}>{(i.quantite * ratio % 1 === 0 ? (i.quantite * ratio).toFixed(0) : (i.quantite * ratio).toFixed(1))}</span>
                  <span style={{fontSize:13, color:'var(--text2)'}}>{i.unite}</span>
                  {user.role === 'consultant' && <span style={{fontSize:12, color:'var(--text2)'}}>CHF {(i.quantite * ratio * i.prixUnit).toFixed(2)}</span>}
                </div>
              ))}
              {user.role === 'consultant' && (
                <div style={{...rs.ingRow, background:'var(--bg)', fontWeight:700}}>
                  <span>Total pour {portions} portions</span><span></span><span></span>
                  <span style={{color:'var(--accent)'}}>CHF {coutAdj.toFixed(2)}</span>
                </div>
              )}
            </div>
          </div>

          {/* Droite */}
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {/* KPIs consultant */}
            {user.role === 'consultant' && (
              <div style={rs.detailCard}>
                <div style={rs.cardHeader}><span style={rs.cardTitle}>Analyse économique</span></div>
                <div style={rs.kpiGrid}>
                  <div style={rs.kpiItem}><span style={rs.kpiLabel}>Coût matière / portion</span><strong style={{color:'var(--accent)'}}>CHF {(coutAdj/portions).toFixed(2)}</strong></div>
                  <div style={rs.kpiItem}><span style={rs.kpiLabel}>Prix de vente</span><strong>CHF {(recette.prixVente || 0).toFixed(2)}</strong></div>
                  <div style={rs.kpiItem}><span style={rs.kpiLabel}>Food cost %</span><strong style={{color: recette.foodCost == null ? 'var(--text2)' : recette.foodCost < 30 ? '#16a34a' : recette.foodCost < 35 ? '#d97706' : '#dc2626'}}>{recette.foodCost != null ? recette.foodCost.toFixed(1) + ' %' : '—'}</strong></div>
                  <div style={rs.kpiItem}><span style={rs.kpiLabel}>Marge brute</span><strong>CHF {((recette.prixVente || 0) - coutAdj/portions).toFixed(2)}</strong></div>
                </div>
              </div>
            )}

            {/* Allergènes */}
            <div style={rs.detailCard}>
              <div style={rs.cardHeader}><span style={rs.cardTitle}>Allergènes</span></div>
              <div style={{padding:'12px 16px', display:'flex', flexWrap:'wrap', gap:6}}>
                {(recette.allergenesIds || []).map(a => (
                  <span key={a} style={{...rs.badge, background:'#fef3c7', color:'#92400e'}}>{ALLERGENES_MAP[a] || a}</span>
                ))}
              </div>
            </div>

            {/* Notes consultant */}
            {recette.notesConsultant && (
              <div style={{...rs.detailCard, borderLeft:'3px solid var(--accent)'}}>
                <div style={rs.cardHeader}><span style={rs.cardTitle}>✦ Notes consultant</span></div>
                <div style={{padding:'12px 16px', fontSize:13, color:'var(--text)', lineHeight:1.6}}>{recette.notesConsultant}</div>
              </div>
            )}
          </div>

          {/* Étapes */}
          <div style={{...rs.detailCard, gridColumn:'1/-1'}}>
            <div style={rs.cardHeader}><span style={rs.cardTitle}>Préparation</span></div>
            <div style={{padding:'16px'}}>
              {(recette.etapes || []).map((e,i) => (
                <div key={i} style={rs.etapeRow}>
                  <div style={rs.etapeNum}>{i+1}</div>
                  <div style={rs.etapeTxt}>{e}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Dressage + Conservation */}
          {recette.dressage && (
            <div style={rs.detailCard}>
              <div style={rs.cardHeader}><span style={rs.cardTitle}>Dressage</span></div>
              <div style={{padding:'12px 16px', fontSize:13, color:'var(--text)', lineHeight:1.6}}>{recette.dressage}</div>
            </div>
          )}
          {recette.conservation && (
            <div style={rs.detailCard}>
              <div style={rs.cardHeader}><span style={rs.cardTitle}>Conservation</span></div>
              <div style={{padding:'12px 16px', fontSize:13, color:'var(--text)', lineHeight:1.6}}>{recette.conservation}</div>
            </div>
          )}
        </div>
        </div>
      </div>
    );
  };

  if (selectedRecette) return <RecetteDetail recette={selectedRecette} onBack={() => setSelectedRecette(null)}/>;

  return (
    <div style={rs.root}>
      {/* Tabs */}
      <div style={rs.tabs}>
        {[{id:'carte',label:'Carte active'},{id:'recettes',label:'Bibliothèque recettes'}].map(t => (
          <button key={t.id} style={{...rs.tab, ...(activeTab===t.id?rs.tabActive:{})}} onClick={() => setActiveTab(t.id)}>{t.label}</button>
        ))}
        <div style={{flex:1}}/>
        <input style={rs.search} placeholder="Rechercher…" value={search} onChange={e=>setSearch(e.target.value)}/>
        {/* Le bouton "+ Nouveau plat" a été retiré : la création de plats passe par Outils consultant */}
      </div>

      {activeTab === 'carte' ? (
        !carte ? (
          <div style={{padding:40, textAlign:'center', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12}}>
            <div style={{fontSize:40, opacity:0.4}}>🍽</div>
            <div style={{fontSize:16, fontWeight:600, marginTop:10, fontFamily:'var(--font-serif)'}}>Aucune carte pour cet établissement</div>
            <div style={{fontSize:13, color:'var(--text2)', marginTop:8}}>Les cartes se créent via le module Outils consultant.</div>
          </div>
        ) : (
        <div style={rs.carteWrap}>
          {/* Carte header */}
          <div style={rs.carteHeader}>
            <div>
              <div style={rs.carteName}>{carte.nom}</div>
              <div style={{fontSize:13, color:'var(--text2)'}}>Du {carte.dateDebut} au {carte.dateFin}</div>
            </div>
            <span style={{...rs.badge, background:'#dcfce7', color:'#15803d', padding:'6px 16px', fontSize:12}}>● Active</span>
          </div>

          {/* Cat filter */}
          <div style={rs.catFilter}>
            {cats.map(c => <button key={c} style={{...rs.catBtn, ...(catFilter===c?rs.catActive:{})}} onClick={()=>setCatFilter(c)}>{c}</button>)}
          </div>

          {/* Plats by category */}
          {cats.filter(c => c !== 'Tous').map(cat => {
            const plats = filteredPlats.filter(p => p.categorie === cat);
            if (!plats.length) return null;
            return (
              <div key={cat} style={rs.catSection}>
                <div style={rs.catTitle}>{cat}</div>
                <div style={rs.platGrid}>
                  {plats.map(plat => {
                    const recette = plat.recetteId ? recettesEtab.find(r => r.id === plat.recetteId) : null;
                    return (
                      <div key={plat.id} style={rs.platCard}>
                        <div style={rs.platImgZone}>
                          <div style={rs.platImgPlaceholder}>
                            <span style={{color:'rgba(255,255,255,0.3)', fontSize:11, fontFamily:'monospace'}}>photo plat</span>
                          </div>
                        </div>
                        <div style={rs.platBody}>
                          <div style={rs.platName}>{plat.nom}</div>
                          <div style={rs.platAllergenes}>
                            {(plat.allergenes||[]).map(a => <span key={a} style={rs.allergeneDot} title={ALLERGENES_MAP[a]||a}>{(ALLERGENES_MAP[a]||a).slice(0,2)}</span>)}
                          </div>
                          <div style={rs.platFooter}>
                            <div style={rs.platPrix}>CHF {plat.prix.toFixed(2)}</div>
                            {recette && (
                              <button style={rs.recetteLink} onClick={() => setSelectedRecette(recette)}>
                                Voir recette →
                              </button>
                            )}
                          </div>
                          {user.role === 'consultant' && recette && recette.foodCost != null && (
                            <div style={rs.fcLine}>FC : <strong style={{color: recette.foodCost < 30 ? '#15803d' : recette.foodCost < 35 ? '#d97706' : '#dc2626'}}>{recette.foodCost.toFixed(1)}%</strong></div>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
        )
      ) : (
        <div style={rs.recettesWrap}>
          {recettesEtab.length === 0 && (
            <div style={{padding:24, textAlign:'center', color:'var(--text2)', fontSize:13}}>Aucune recette pour cet établissement. Créez-en depuis "Outils consultant".</div>
          )}
          {recettesEtab.filter(r => search === '' || r.nom.toLowerCase().includes(search.toLowerCase())).map(r => (
            <div key={r.id} style={rs.recetteRow} onClick={() => setSelectedRecette(r)}>
              <div style={rs.recetteInfo}>
                <div style={rs.recetteName}>{r.nom}</div>
                <div style={rs.recetteMeta}>{r.categorie} · {r.portions} portions · v{r.version} · modifié {r.modifie}</div>
              </div>
              <div style={rs.recetteBadges}>
                {(r.allergenesIds||[]).map(a => <span key={a} style={rs.allergeneDot} title={ALLERGENES_MAP[a]||a}>{(ALLERGENES_MAP[a]||a).slice(0,2)}</span>)}
              </div>
              {user.role === 'consultant' && (
                <div style={rs.recetteKpis}>
                  <div style={rs.recetteKpi}><span>Coût/portion</span><strong>CHF {(r.coutPortion != null ? r.coutPortion : 0).toFixed(2)}</strong></div>
                  <div style={rs.recetteKpi}><span>Food cost</span><strong style={{color: r.foodCost == null ? 'var(--text2)' : r.foodCost < 30 ? '#16a34a' : r.foodCost < 35 ? '#d97706' : '#dc2626'}}>{r.foodCost != null ? r.foodCost.toFixed(1) + '%' : '—'}</strong></div>
                </div>
              )}
              <span style={{...rs.badge, background:'#dcfce7', color:'#15803d'}}>{r.statut}</span>
              <span style={{color:'var(--text2)', fontSize:18}}>›</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const rs = {
  root: {display:'flex',flexDirection:'column',gap:16},
  tabs: {display:'flex',gap:4,alignItems:'center'},
  tab: {padding:'8px 18px',border:'1px solid var(--border)',borderRadius:8,background:'var(--surface)',color:'var(--text2)',fontSize:13,fontWeight:500,cursor:'pointer',fontFamily:'var(--font)'},
  tabActive: {background:'var(--nav)',color:'#fff',borderColor:'var(--nav)'},
  search: {padding:'8px 14px',border:'1px solid var(--border)',borderRadius:8,fontSize:13,color:'var(--text)',background:'var(--surface)',outline:'none',fontFamily:'var(--font)',width:180},
  addBtn: {padding:'8px 16px',background:'var(--accent)',color:'#fff',border:'none',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'},
  carteWrap: {display:'flex',flexDirection:'column',gap:20},
  carteHeader: {background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,padding:'18px 22px',display:'flex',alignItems:'center',justifyContent:'space-between'},
  carteName: {fontSize:18,fontWeight:700,fontFamily:'var(--font-serif)',color:'var(--text)'},
  catFilter: {display:'flex',gap:6},
  catBtn: {padding:'6px 16px',border:'1px solid var(--border)',borderRadius:20,background:'var(--surface)',color:'var(--text2)',fontSize:12,fontWeight:500,cursor:'pointer',fontFamily:'var(--font)'},
  catActive: {background:'var(--nav)',color:'#fff',borderColor:'var(--nav)'},
  catSection: {display:'flex',flexDirection:'column',gap:12},
  catTitle: {fontSize:12,fontWeight:700,color:'var(--text2)',textTransform:'uppercase',letterSpacing:0.6,paddingLeft:2},
  platGrid: {display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))',gap:14},
  platCard: {background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,overflow:'hidden'},
  platImgZone: {height:110,overflow:'hidden'},
  platImgPlaceholder: {height:'100%',background:'linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%)',display:'flex',alignItems:'center',justifyContent:'center'},
  platBody: {padding:'12px'},
  platName: {fontSize:13,fontWeight:700,color:'var(--text)',lineHeight:1.3,marginBottom:6},
  platAllergenes: {display:'flex',gap:4,marginBottom:8,flexWrap:'wrap'},
  allergeneDot: {fontSize:10,fontWeight:700,background:'#fef3c7',color:'#92400e',padding:'2px 5px',borderRadius:4},
  platFooter: {display:'flex',alignItems:'center',justifyContent:'space-between'},
  platPrix: {fontSize:16,fontWeight:700,color:'var(--text)',fontFamily:'var(--font-serif)'},
  recetteLink: {background:'none',border:'none',color:'var(--accent)',fontSize:11,fontWeight:600,cursor:'pointer',padding:0,fontFamily:'var(--font)'},
  printBtn:{padding:'8px 14px',background:'var(--surface)',border:'1px solid var(--border)',color:'var(--text2)',borderRadius:8,fontSize:13,cursor:'pointer',fontFamily:'var(--font)'},
  backGhost:{padding:'8px 14px',background:'none',border:'1px solid transparent',color:'var(--text2)',borderRadius:8,fontSize:13,fontFamily:'var(--font)'},
  fcLine: {fontSize:11,color:'var(--text2)',marginTop:6},
  badge: {display:'inline-flex',alignItems:'center',padding:'3px 10px',borderRadius:12,fontSize:11,fontWeight:600},
  // Recettes list
  recettesWrap: {display:'flex',flexDirection:'column',gap:2,background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,overflow:'hidden'},
  recetteRow: {display:'flex',alignItems:'center',gap:14,padding:'14px 18px',borderBottom:'1px solid var(--border)',cursor:'pointer',transition:'background .12s'},
  recetteInfo: {flex:1,minWidth:0},
  recetteName: {fontSize:14,fontWeight:600,color:'var(--text)'},
  recetteMeta: {fontSize:11,color:'var(--text2)',marginTop:2},
  recetteBadges: {display:'flex',gap:4},
  recetteKpis: {display:'flex',gap:16},
  recetteKpi: {display:'flex',flexDirection:'column',gap:2,fontSize:12,color:'var(--text2)',textAlign:'right'},
  // Detail
  detailRoot: {display:'flex',flexDirection:'column',gap:18},
  detailHeader: {display:'flex',alignItems:'center',gap:16,background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,padding:'16px 20px'},
  backBtn: {background:'none',border:'1px solid var(--border)',borderRadius:7,padding:'6px 12px',cursor:'pointer',fontSize:12,color:'var(--text2)',fontFamily:'var(--font)',flexShrink:0},
  detailMeta: {flex:1},
  detailTitle: {fontSize:20,fontWeight:700,color:'var(--text)',fontFamily:'var(--font-serif)'},
  detailSub: {fontSize:12,color:'var(--text2)',marginTop:3},
  detailBadges: {display:'flex',gap:6,flexShrink:0},
  detailGrid: {display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:16},
  detailCard: {background:'var(--surface)',border:'1px solid var(--border)',borderRadius:10,overflow:'hidden'},
  cardHeader: {display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 16px',borderBottom:'1px solid var(--border)',background:'var(--bg)'},
  cardTitle: {fontSize:12,fontWeight:700,color:'var(--text)',textTransform:'uppercase',letterSpacing:0.4},
  portionsCtrl: {display:'flex',alignItems:'center',gap:8},
  portBtn: {width:24,height:24,borderRadius:6,border:'1px solid var(--border)',background:'var(--surface)',cursor:'pointer',fontSize:14,display:'flex',alignItems:'center',justifyContent:'center'},
  ingTable: {display:'flex',flexDirection:'column'},
  ingHead: {display:'grid',gridTemplateColumns:'1fr 80px 60px 80px',padding:'8px 16px',background:'var(--bg)',fontSize:10,fontWeight:700,color:'var(--text2)',textTransform:'uppercase',letterSpacing:0.4,borderBottom:'1px solid var(--border)',gap:8},
  ingRow: {display:'grid',gridTemplateColumns:'1fr 80px 60px 80px',padding:'9px 16px',borderBottom:'1px solid var(--border)',gap:8,alignItems:'center'},
  ingName: {fontSize:13,color:'var(--text)'},
  ingQty: {fontSize:13,fontWeight:600,color:'var(--text)'},
  kpiGrid: {display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,padding:'14px 16px'},
  kpiItem: {display:'flex',flexDirection:'column',gap:4},
  kpiLabel: {fontSize:11,color:'var(--text2)',fontWeight:500},
  etapeRow: {display:'flex',gap:14,marginBottom:12,alignItems:'flex-start'},
  etapeNum: {width:24,height:24,borderRadius:'50%',background:'var(--accent)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,fontWeight:700,flexShrink:0,marginTop:1},
  etapeTxt: {fontSize:13,color:'var(--text)',lineHeight:1.6},
};

Object.assign(window, { Recettes });