// gp-screens.jsx — fully-built example modules: Murs hors sol & Fenestration
// ───────────────────────────────────────────────────────────────
const {
  Icon: SIcon, ModuleHeader: SHead, Steps: SSteps, SummaryAside: SAside,
  MURS_ROWS, MURS_OPEN, FEN_ROWS, SECTIONS: SECS,
  moduleById: sModById, toIn: sToIn, toFt: sToFt, fmt: sFmt, mursCalc, fenCalc,
} = window;

const M2 = 0.09290304;

// editable [ft,in] dimension — imperial pair or SI millimetres
function DimInput({ val, unit, onChange }) {
  if (unit === 'si') {
    const mm = Math.round(sToIn(val) * 25.4);
    return (
      <span className="dim">
        <input className="cell-in num" style={{ width:60 }} value={mm}
          onChange={(e) => {
            const inch = (Number(e.target.value) || 0) / 25.4;
            const ft = Math.floor(inch / 12);
            onChange([ft, +(inch - ft * 12).toFixed(1)]);
          }} />
        <span className="su">mm</span>
      </span>
    );
  }
  return (
    <span className="dim">
      <input className="cell-in num" value={val[0]}
        onChange={(e) => onChange([Number(e.target.value) || 0, val[1]])} />
      <span className="su">pi</span>
      <input className="cell-in num" value={val[1]}
        onChange={(e) => onChange([val[0], Number(e.target.value) || 0])} />
      <span className="su">po</span>
    </span>
  );
}

const sqOut = (pi2, unit) => unit === 'si'
  ? sFmt(pi2 * M2, 1) + ' m²'
  : sFmt(pi2, 0) + ' pi²';

// ═══════════════════════ MURS HORS SOL ═══════════════════════
function MursModule({ unit, onMesure }) {
  const mod = sModById('murs');
  const [step, setStep] = React.useState(1);
  const [rows, setRows] = React.useState(MURS_ROWS);
  const [opens, setOpens] = React.useState(MURS_OPEN);
  const [buffer, setBuffer] = React.useState(8);
  const [showEp, setShowEp] = React.useState(true);
  const dragIx = React.useRef(null);

  const calc = mursCalc(rows, opens);
  const ep = 5.5;

  const setRow = (id, patch) => setRows(rs => rs.map(r => r.id === id ? { ...r, ...patch } : r));
  const delRow = (id) => setRows(rs => rs.filter(r => r.id !== id));
  const dupRow = (id) => setRows(rs => {
    const i = rs.findIndex(r => r.id === id);
    const c = { ...rs[i], id: 'm' + Date.now() };
    return [...rs.slice(0, i + 1), c, ...rs.slice(i + 1)];
  });
  const addRow = (sec) => setRows(rs => [...rs, { id:'m'+Date.now(), ident:'Nouveau mur', sec, qte:1, l:[0,0], h:[8,0], plan:false }]);
  const onDrop = (i) => { const f = dragIx.current; if (f==null||f===i) return;
    setRows(rs => { const a=[...rs]; const [x]=a.splice(f,1); a.splice(i,0,x); return a; }); dragIx.current=null; };

  const setOpen = (id, patch) => setOpens(os => os.map(o => o.id === id ? { ...o, ...patch } : o));

  const steps = ['Configuration', 'Relevé des murs', 'Ouvertures', 'Matériaux'];

  // sections present
  const secList = SECS.filter(s => rows.some(r => r.sec === s));

  const aside = (
    <SAside
      heroLabel="Surface nette à isoler"
      heroVal={unit==='si' ? sFmt(calc.net*M2,0) : sFmt(calc.net,0)}
      heroUnit={unit==='si' ? 'm²' : 'pi²'}
      heroRows={[
        { k:'Surface brute', v: sqOut(calc.surfBrute, unit) },
        { k:'Ouvertures', v:'– ' + sqOut(calc.surfOpen, unit) },
      ]}
      title="Détail par section"
      rows={secList.map(s => ({ n:s, s:`${rows.filter(r=>r.sec===s).length} relevés`, v: sqOut(calc.bySec[s]||0, unit).split(' ')[0], u: unit==='si'?'m²':'pi²' }))}
      buffer={buffer} onBuffer={setBuffer}
      accentNote={<>Cellulose haute densité ({ep}″, {sFmt(4,1)} lb/pi³) — <b>{sFmt(Math.ceil(calc.net/32*(1+buffer/100)),0)} sacs</b> estimés avec surplus.</>}
    />
  );

  return (
    <div className="fade-in">
      <SHead mod={mod} status="prog">
        {onMesure && <button className="btn" onClick={onMesure}><SIcon n="ruler" /> Mesure sur plan</button>}
        <button className="btn"><SIcon n="copy" /> Dupliquer</button>
      </SHead>
      <SSteps steps={steps} active={step} onChange={setStep} />

      <div className="grid-2">
        <div className="col">

          {step === 0 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">1</span><span className="card-t">Paramètres des murs</span></div>
                <span className="card-hint">défauts appliqués à chaque relevé</span></div>
              <div className="fgrid">
                <div className="fcell"><label className="lbl">Assemblage</label>
                  <select className="field"><option>Ossature 2×6 @ 16″</option><option>Ossature 2×8 @ 24″</option><option>Double ossature</option></select></div>
                <div className="fcell"><label className="lbl">Hauteur des murs</label>
                  <input className="field mono" defaultValue={unit==='si'?'2 438 mm':'8′ 0″'} /></div>
                <div className="fcell"><label className="lbl">Épaisseur isolant ({unit==='si'?'mm':'po'})</label>
                  <input className="field mono" defaultValue={unit==='si'?'140':'5.5'} /></div>
                <div className="fcell"><label className="lbl">Valeur R cible</label>
                  <input className="field mono" defaultValue="R-24" /></div>
                <div className="fcell full"><label className="lbl">Densité de soufflage (lb/pi³)</label>
                  <input type="range" className="ctl-slider" min="3" max="5" step="0.1" defaultValue="4" /></div>
              </div>
              <div className="note" style={{ marginTop:14 }}><b>Astuce.</b> Ces valeurs servent de défaut ; chaque ligne du relevé peut être ajustée individuellement.</div>
            </div>
          )}

          {step === 1 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">2</span><span className="card-t">Relevé des murs</span></div>
                <span className="card-hint">{rows.length} lignes · {secList.length} sections</span></div>

              <div className="secbar">
                {secList.map(s => <span className="secchip" key={s}>{s}<button className="x">×</button></span>)}
                <button className="secadd">+ Section</button>
              </div>

              <div className="coltoggle">
                <span className="l">Colonnes</span>
                <label><input type="checkbox" checked readOnly /> Surface</label>
                <label><input type="checkbox" checked={showEp} onChange={e=>setShowEp(e.target.checked)} /> Épaisseur</label>
              </div>

              <div className="tbl-wrap" style={{ marginTop:8 }}>
                <table>
                  <thead><tr>
                    <th style={{ width:52 }}></th>
                    <th>Identification</th>
                    <th style={{ width:120 }}>Section</th>
                    <th style={{ width:46 }} className="num">Qté</th>
                    <th>Longueur <span className="u">{unit==='si'?'mm':'pi · po'}</span></th>
                    <th>Hauteur <span className="u">{unit==='si'?'mm':'pi · po'}</span></th>
                    {showEp && <th className="num">Épais. <span className="u">{unit==='si'?'mm':'po'}</span></th>}
                    <th className="num">Surface <span className="u">{unit==='si'?'m²':'pi²'}</span></th>
                    <th style={{ width:36 }}></th>
                  </tr></thead>
                  <tbody>
                    {rows.map((r, i) => {
                      const s = (Number(r.qte)||0)*sToFt(r.l)*sToFt(r.h);
                      return (
                        <tr key={r.id} draggable
                            onDragStart={() => dragIx.current = i}
                            onDragOver={(e) => e.preventDefault()}
                            onDrop={() => onDrop(i)}>
                          <td><div className="row-flex" style={{ gap:2 }}>
                            <span className="grip">⠿</span>
                            <button className="row-x" title="Dupliquer" onClick={()=>dupRow(r.id)}><SIcon n="copy" /></button>
                          </div></td>
                          <td><div className="row-flex">
                            <input className="cell-in" value={r.ident} onChange={e=>setRow(r.id,{ident:e.target.value})} style={{ fontStyle:'italic', minWidth:108 }} />
                            {r.plan && <span className="tag plan"><SIcon n="ruler" />plan</span>}
                          </div></td>
                          <td><select className="cell-in" value={r.sec} onChange={e=>setRow(r.id,{sec:e.target.value})} style={{ minWidth:108 }}>
                            {SECS.map(x=><option key={x}>{x}</option>)}</select></td>
                          <td className="num"><input className="cell-in num" value={r.qte} onChange={e=>setRow(r.id,{qte:Number(e.target.value)||0})} /></td>
                          <td><DimInput val={r.l} unit={unit} onChange={v=>setRow(r.id,{l:v})} /></td>
                          <td><DimInput val={r.h} unit={unit} onChange={v=>setRow(r.id,{h:v})} /></td>
                          {showEp && <td className="cell-ro">{unit==='si'?'140':'5.5'}</td>}
                          <td className="cell-ro">{sqOut(s, unit).split(' ')[0]}</td>
                          <td><div className="row-flex" style={{ justifyContent:'flex-end' }}>
                            <button className="row-x" title="Supprimer" onClick={()=>delRow(r.id)}><SIcon n="trash" /></button>
                          </div></td>
                        </tr>
                      );
                    })}
                  </tbody>
                  <tfoot><tr className="tfoot">
                    <td colSpan={showEp?6:5}>Sous-total — surface brute</td>
                    <td className="cell-ro">{sqOut(calc.surfBrute, unit).split(' ')[0]}</td>
                    <td></td>
                  </tr></tfoot>
                </table>
              </div>
              <button className="addrow" onClick={()=>addRow(secList[0]||SECS[0])}><SIcon n="plus" /> Ajouter une ligne</button>
            </div>
          )}

          {step === 2 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">3</span><span className="card-t">Ouvertures à retrancher</span></div>
                <span className="card-hint">portes & fenêtres déduites de la surface</span></div>
              <div className="note">La surface à retrancher correspond aux dimensions de l’ouverture. Importez automatiquement depuis le module <b>Fenestration</b> ou ajoutez manuellement.</div>
              <div className="tbl-wrap" style={{ marginTop:10 }}>
                <table>
                  <thead><tr>
                    <th>Identification</th>
                    <th style={{ width:120 }}>Section</th>
                    <th style={{ width:46 }} className="num">Qté</th>
                    <th>Largeur <span className="u">{unit==='si'?'mm':'pi · po'}</span></th>
                    <th>Hauteur <span className="u">{unit==='si'?'mm':'pi · po'}</span></th>
                    <th className="num">Surface <span className="u">{unit==='si'?'m²':'pi²'}</span></th>
                  </tr></thead>
                  <tbody>
                    {opens.map(o => {
                      const s = (Number(o.qte)||0)*sToFt(o.w)*sToFt(o.h);
                      return (
                        <tr key={o.id}>
                          <td><input className="cell-in" value={o.ident} onChange={e=>setOpen(o.id,{ident:e.target.value})} style={{ fontStyle:'italic', minWidth:110 }} /></td>
                          <td><select className="cell-in" value={o.sec} onChange={e=>setOpen(o.id,{sec:e.target.value})} style={{ minWidth:108 }}>{SECS.map(x=><option key={x}>{x}</option>)}</select></td>
                          <td className="num"><input className="cell-in num" value={o.qte} onChange={e=>setOpen(o.id,{qte:Number(e.target.value)||0})} /></td>
                          <td><DimInput val={o.w} unit={unit} onChange={v=>setOpen(o.id,{w:v})} /></td>
                          <td><DimInput val={o.h} unit={unit} onChange={v=>setOpen(o.id,{h:v})} /></td>
                          <td className="cell-ro">– {sqOut(s, unit).split(' ')[0]}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                  <tfoot><tr className="tfoot">
                    <td colSpan="5">Sous-total — à retrancher</td>
                    <td className="cell-ro">– {sqOut(calc.surfOpen, unit).split(' ')[0]}</td>
                  </tr></tfoot>
                </table>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">4</span><span className="card-t">Matériaux & quantités</span></div></div>
              <div className="fgrid" style={{ gridTemplateColumns:'repeat(3,1fr)' }}>
                {[
                  { l:'Cellulose haute densité', v: sFmt(Math.ceil(calc.net/32*(1+buffer/100)),0), u:'sacs' },
                  { l:'Membrane pare-air', v: sFmt(Math.ceil(calc.net*1.1),0), u:'pi²' },
                  { l:'Fourrures 1×3', v: sFmt(Math.ceil(calc.net/16),0), u:'pi lin.' },
                ].map((m,i)=>(
                  <div className="card" key={i} style={{ boxShadow:'none', background:'var(--surface-2)' }}>
                    <div className="lbl">{m.l}</div>
                    <div className="kpi-v" style={{ fontSize:24 }}>{m.v}</div>
                    <div className="kpi-s">{m.u} · surplus {buffer}%</div>
                  </div>
                ))}
              </div>
              <div className="note" style={{ marginTop:14 }}>Quantités calculées sur la surface nette de <b>{sqOut(calc.net, unit)}</b>, surplus de <b>{buffer}%</b> inclus.</div>
            </div>
          )}

        </div>
        <aside className="aside">{aside}</aside>
      </div>
    </div>
  );
}

// ═══════════════════════ FENESTRATION ═══════════════════════
function FenestrationModule({ unit, onMesure }) {
  const mod = sModById('fenestration');
  const [step, setStep] = React.useState(1);
  const [rows, setRows] = React.useState(FEN_ROWS);
  const [buffer, setBuffer] = React.useState(0);

  const calc = fenCalc(rows);
  const setRow = (id, patch) => setRows(rs => rs.map(r => r.id === id ? { ...r, ...patch } : r));
  const delRow = (id) => setRows(rs => rs.filter(r => r.id !== id));
  const dupRow = (id) => setRows(rs => { const i=rs.findIndex(r=>r.id===id); const c={...rs[i],id:'f'+Date.now()}; return [...rs.slice(0,i+1),c,...rs.slice(i+1)]; });
  const addRow = () => setRows(rs => [...rs, { id:'f'+Date.now(), code:'F-'+String(rs.length+1).padStart(2,'0'), loc:'—', qte:1, w:[3,0], h:[4,0], type:'Battant', frame:'Bois' }]);

  const TYPES = ['Battant','Fixe','Battant + fixe','Coulissante','Porte pleine','Auvent'];
  const steps = ['Configuration', 'Bordereau', 'Récapitulatif'];

  const aside = (
    <SAside
      heroLabel="Unités de fenestration"
      heroVal={sFmt(calc.units,0)} heroUnit="unités"
      heroRows={[
        { k:'Surface vitrée', v: unit==='si' ? sFmt(calc.glaze*M2,1)+' m²' : sFmt(calc.glaze,0)+' pi²' },
        { k:'Périmètre (rubans)', v: unit==='si' ? sFmt(calc.perim*0.3048,0)+' m' : sFmt(calc.perim,0)+' pi' },
      ]}
      title="Répartition par type"
      rows={Object.entries(calc.byType).map(([t,n])=>({ n:t, v:String(n), u:'u' }))}
      buffer={null}
      accentNote={<>Le périmètre total sert au calcul des <b>rubans d’étanchéité</b> du module Membranes.</>}
    />
  );

  return (
    <div className="fade-in">
      <SHead mod={mod} status="prog">
        {onMesure && <button className="btn" onClick={onMesure}><SIcon n="ruler" /> Mesure sur plan</button>}
        <button className="btn"><SIcon n="download" /> Importer cédule</button>
      </SHead>
      <SSteps steps={steps} active={step} onChange={setStep} />

      <div className="grid-2">
        <div className="col">

          {step === 0 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">1</span><span className="card-t">Paramètres de fenestration</span></div></div>
              <div className="fgrid">
                <div className="fcell"><label className="lbl">Type de cadre par défaut</label>
                  <select className="field"><option>Bois</option><option>PVC</option><option>Hybride bois/alu</option></select></div>
                <div className="fcell"><label className="lbl">Facteur U cible</label>
                  <input className="field mono" defaultValue="≤ 1.20" /></div>
                <div className="fcell"><label className="lbl">Jeu d’installation (po)</label>
                  <input className="field mono" defaultValue="0.5" /></div>
                <div className="fcell"><label className="lbl">Préfixe codes</label>
                  <input className="field mono" defaultValue="F-" /></div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">2</span><span className="card-t">Bordereau des ouvertures</span></div>
                <span className="card-hint">{rows.length} codes · {sFmt(calc.units,0)} unités</span></div>
              <div className="tbl-wrap">
                <table>
                  <thead><tr>
                    <th style={{ width:36 }}></th>
                    <th style={{ width:70 }}>Code</th>
                    <th>Emplacement</th>
                    <th style={{ width:42 }} className="num">Qté</th>
                    <th>Largeur <span className="u">{unit==='si'?'mm':'pi · po'}</span></th>
                    <th>Hauteur <span className="u">{unit==='si'?'mm':'pi · po'}</span></th>
                    <th style={{ width:150 }}>Type</th>
                    <th className="num">Surf. <span className="u">{unit==='si'?'m²':'pi²'}</span></th>
                    <th style={{ width:36 }}></th>
                  </tr></thead>
                  <tbody>
                    {rows.map(r => {
                      const a = (Number(r.qte)||0)*sToFt(r.w)*sToFt(r.h);
                      return (
                        <tr key={r.id}>
                          <td><button className="row-x" title="Dupliquer" onClick={()=>dupRow(r.id)}><SIcon n="copy" /></button></td>
                          <td><input className="cell-in mono" value={r.code} onChange={e=>setRow(r.id,{code:e.target.value})} style={{ fontWeight:600 }} /></td>
                          <td><input className="cell-in" value={r.loc} onChange={e=>setRow(r.id,{loc:e.target.value})} style={{ minWidth:96 }} /></td>
                          <td className="num"><input className="cell-in num" value={r.qte} onChange={e=>setRow(r.id,{qte:Number(e.target.value)||0})} /></td>
                          <td><DimInput val={r.w} unit={unit} onChange={v=>setRow(r.id,{w:v})} /></td>
                          <td><DimInput val={r.h} unit={unit} onChange={v=>setRow(r.id,{h:v})} /></td>
                          <td><select className="cell-in" value={r.type} onChange={e=>setRow(r.id,{type:e.target.value})}>{TYPES.map(t=><option key={t}>{t}</option>)}</select></td>
                          <td className="cell-ro">{unit==='si'?sFmt(a*M2,1):sFmt(a,1)}</td>
                          <td><div className="row-flex" style={{ justifyContent:'flex-end' }}>
                            <button className="row-x" title="Supprimer" onClick={()=>delRow(r.id)}><SIcon n="trash" /></button>
                          </div></td>
                        </tr>
                      );
                    })}
                  </tbody>
                  <tfoot><tr className="tfoot">
                    <td colSpan="3">Total</td>
                    <td className="num">{sFmt(calc.units,0)}</td>
                    <td colSpan="3"></td>
                    <td className="cell-ro">{unit==='si'?sFmt(calc.glaze*M2,1):sFmt(calc.glaze,0)}</td>
                    <td></td>
                  </tr></tfoot>
                </table>
              </div>
              <button className="addrow" onClick={addRow}><SIcon n="plus" /> Ajouter une ouverture</button>
            </div>
          )}

          {step === 2 && (
            <div className="card">
              <div className="card-h"><div className="card-h-l"><span className="badge-n">3</span><span className="card-t">Récapitulatif</span></div></div>
              <div className="fgrid" style={{ gridTemplateColumns:'repeat(3,1fr)' }}>
                {[
                  { l:'Unités totales', v:sFmt(calc.units,0), u:'fenêtres + portes' },
                  { l:'Surface vitrée', v: unit==='si'?sFmt(calc.glaze*M2,0):sFmt(calc.glaze,0), u: unit==='si'?'m²':'pi²' },
                  { l:'Périmètre total', v: unit==='si'?sFmt(calc.perim*0.3048,0):sFmt(calc.perim,0), u: (unit==='si'?'m':'pi')+' · rubans' },
                ].map((m,i)=>(
                  <div className="card" key={i} style={{ boxShadow:'none', background:'var(--surface-2)' }}>
                    <div className="lbl">{m.l}</div>
                    <div className="kpi-v" style={{ fontSize:24 }}>{m.v}</div>
                    <div className="kpi-s">{m.u}</div>
                  </div>
                ))}
              </div>
              <div className="note" style={{ marginTop:14 }}>Répartition : {Object.entries(calc.byType).map(([t,n])=>`${n} × ${t}`).join(' · ')}.</div>
            </div>
          )}

        </div>
        <aside className="aside">{aside}</aside>
      </div>
    </div>
  );
}

Object.assign(window, { MursModule, FenestrationModule });