/* ============================================================
   Récapitulatif (TOUJOURS EN FRANÇAIS) + signature
   ============================================================ */

function StateBadge({ d }){
  if(!d || !d.etat) return null;
  const bad = d.etat==='mauvais';
  return <span className={'badge-state '+(bad?'bad':'good')}>
    <Glyph d={bad?IC.alert:IC.check} w={12}/>{tf(bad?'etat.bad':'etat.good')}
  </span>;
}

function RecapStep({ stepKey, d }){
  const m = STEP_META[stepKey];
  d = d || {};
  const allPhotos = [].concat(d.photos||[], Object.values(d.photosByDefaut||{}).reduce((a,b)=>a.concat(b||[]),[]));
  if(d.skipped){
    return (
      <div className="recap-sec">
        <div className="recap-sec-h">
          <Glyph d={IC[m.icon]} w={18}/>
          <b>{tf('step.'+stepKey)}</b>
          <span className="badge-state skip"><Glyph d={IC.skip} w={12}/>{tf('recap.skipped')}</span>
        </div>
      </div>
    );
  }
  return (
    <div className="recap-sec">
      <div className="recap-sec-h">
        <Glyph d={IC[m.icon]} w={18}/>
        <b>{tf('step.'+stepKey)}</b>
        {m.etat && <StateBadge d={d}/>}
      </div>
      <div className="recap-sec-body">
        {m.count!=null && <div className="recap-line"><span className="rk">{tf('count.'+m.count)}</span><span className="rv">{d.count||0}</span></div>}
        {m.type==='reglement' && <>
          <div className="recap-line"><span className="rk">{tf('reglement.mode')}</span><span className="rv">{d.mode? tf('reglement.'+d.mode) : '—'}</span></div>
          {d.mode==='cheque' && <div className="recap-line"><span className="rk">{tf('reglement.dateencaissement')}</span><span className="rv">{d.dateEncaissement? fmtDate(d.dateEncaissement,'fr') : '—'}</span></div>}
        </>}
        {m.etat && d.etat==='mauvais' && (d.defauts||[]).length>0 &&
          <div className="recap-line"><span className="rk">{tf('etat.defauts')}</span><span className="rv">{d.defauts.map(x=>tf('etat.'+x)).join(', ')}</span></div>}

        {/* miniatures */}
        {(()=>{
          let thumbs = [];
          if(m.type==='photos') thumbs = allPhotos;
          else if(m.type==='reglement') thumbs = d.photoCheque? [d.photoCheque] : [];
          else if(m.type==='pv') thumbs = [d.page1,d.page2].filter(Boolean);
          if(!thumbs.length) return <div className="recap-line"><span className="rk">{tf('recap.photos')}</span><span className="rv">0</span></div>;
          return <>
            <div className="recap-line"><span className="rk">{tf('recap.photos')}</span><span className="rv">{thumbs.length}</span></div>
            <div className="recap-thumbs">{thumbs.map((p,i)=><img key={i} src={p.url} alt=""/>)}</div>
          </>;
        })()}
      </div>
    </div>
  );
}

function RecapScreen({ lang, mode, project, steps, signature, setSignature, onBack, onValidate }){
  const [certified, setCertified] = useState(false);
  const [err, setErr] = useState('');
  const flow = FLOW[mode];
  const c = project.client || {};
  const ready = !!signature && certified;
  const tryValidate = ()=>{
    if(!signature){ setErr(t(lang,'err.signature')); setTimeout(()=>setErr(''),2600); return; }
    if(!certified){ setErr(t(lang,'err.certify')); setTimeout(()=>setErr(''),2600); return; }
    onValidate();
  };

  // libellés du bandeau dans la langue choisie, contenu en FR
  return (
    <>
      <AppBar kicker={t(lang,'recap.title')} title={t(lang,'recap.review')} lang={lang} onBack={onBack} progress={1}/>
      <div className="screen screen-pad fade-in">
        <div className="recap-note"><Glyph d={IC.globe} w={16}/>{tf('recap.fr')}</div>

        <h1 className="h1" style={{fontSize:22,marginBottom:4}}>Récapitulatif</h1>
        <p className="lead" style={{marginBottom:18}}>
          {tf('recap.mode.'+(mode==='avant'?'avant':'apres'))} · {project.id||'—'}
        </p>

        {/* client */}
        <div className="recap-sec">
          <div className="recap-sec-h"><Glyph d={IC.user} w={18}/><b>{tf('recap.client')}</b></div>
          <div className="recap-sec-body">
            <div className="recap-line"><span className="rk">Nom</span><span className="rv">{c.prenom} {c.nom}</span></div>
            <div className="recap-line"><span className="rk">Adresse</span><span className="rv">{c.adresse||'—'}</span></div>
            <div className="recap-line"><span className="rk">Téléphone</span><span className="rv">{c.telephone||'—'}</span></div>
            <div className="recap-line"><span className="rk">E-mail</span><span className="rv">{c.email||'—'}</span></div>
            <div className="recap-line"><span className="rk">Date d'intervention</span><span className="rv">{c.date? fmtDate(c.date,'fr') : '—'}</span></div>
          </div>
        </div>

        {/* constats */}
        <p className="section-label" style={{marginTop:6}}>{tf('recap.constat')}</p>
        {flow.map(k=> <RecapStep key={k} stepKey={k} d={steps[k]}/>)}

        {/* signature */}
        <p className="section-label" style={{marginTop:18}}>{t(lang,'recap.signature')}</p>
        <SignaturePad onChange={setSignature} clearLabel={t(lang,'recap.clear')}/>
        <p className="hint" style={{marginTop:8,color:'var(--faint)',fontSize:12.5}}>{t(lang,'recap.sign.hint')}</p>

        <div className="certify">
          <input type="checkbox" id="certify" checked={certified} onChange={e=>setCertified(e.target.checked)}/>
          <label htmlFor="certify">{t(lang,'recap.certify')}</label>
        </div>
      </div>

      <Toast msg={err}/>
      <ActionBar onBack={onBack} onNext={tryValidate} nextIcon={false}
        nextDisabled={false}
        nextLabel={t(lang,'recap.validate')}/>
    </>
  );
}

Object.assign(window, { RecapScreen });