/* ============================================================
   Étapes du parcours + écran d'étape — État des lieux Verlaine
   ============================================================ */

const STEP_META = {
  materiel:      { icon:'box',    type:'photos', skippable:true },
  fenetre:       { icon:'window', type:'photos', count:'fenetres', etat:true, skippable:true },
  facade:        { icon:'facade', type:'photos', etat:true, skippable:true },
  porte:         { icon:'door',   type:'photos', count:'portes', etat:true, skippable:true },
  accessoires:   { icon:'plug',   type:'photos', etat:true, skippable:true },
  environnement: { icon:'tree',   type:'photos', skippable:true },
  reglement:     { icon:'card',   type:'reglement' },
  pv:            { icon:'file',   type:'pv' },
};
const FLOW = {
  avant: ['materiel','fenetre','facade','porte','accessoires','environnement'],
  apres: ['materiel','fenetre','facade','porte','accessoires','environnement','reglement','pv'],
};

/* validation d'une étape */
function canProceed(key, d){
  d = d || {};
  const m = STEP_META[key];
  if(m.skippable && d.skipped) return true;
  if(m.type==='photos'){
    if(!(d.photos && d.photos.length)) return false;
    if(m.count && !(d.count>=1)) return false;
    if(m.etat && d.etat==='mauvais'){
      if(!(d.defauts && d.defauts.length)) return false;
      const pbd = d.photosByDefaut || {};
      for(const def of d.defauts){ if(!(pbd[def] && pbd[def].length)) return false; }
    }
    return true;
  }
  if(m.type==='reglement'){
    if(!d.mode) return false;
    if(d.mode==='cheque') return !!(d.photoCheque && d.dateEncaissement);
    return true;
  }
  if(m.type==='pv') return !!(d.page1 && d.page2);
  return true;
}
function errMsg(key, d, lang){
  const m = STEP_META[key]; d=d||{};
  if(m.type==='photos'){
    if(!(d.photos && d.photos.length)) return t(lang,'err.photo');
    if(m.count && !(d.count>=1)) return t(lang,'err.count');
    if(m.etat && d.etat==='mauvais') return t(lang,'err.defaut');
  }
  if(m.type==='reglement') return t(lang,'err.cheque');
  if(m.type==='pv') return t(lang,'err.pv');
  return '';
}

/* ---------- Écran d'une étape ---------- */
function StepScreen({ stepKey, data, onChange, lang, index, total, onBack, onNext }){
  const m = STEP_META[stepKey];
  const d = data || {};
  const set = patch => onChange({ ...d, ...patch });
  const ok = canProceed(stepKey, d);
  const [err, setErr] = useState('');
  const tryNext = ()=>{ if(ok){ setErr(''); onNext(); } else { setErr(errMsg(stepKey,d,lang)); setTimeout(()=>setErr(''),2600); } };

  return (
    <>
      <AppBar
        kicker={t(lang,'step.of')+' '+(index+1)+'/'+total}
        title={t(lang,'step.'+stepKey)}
        lang={lang} onBack={onBack}
        progress={(index)/total} />
      <div className="screen screen-pad fade-in" key={stepKey}>
        <div className="step-head">
          <div className="step-num"><Glyph d={IC[m.icon]} w={24}/></div>
          <div className="sh-tx">
            <h1 className="h1" style={{fontSize:22,marginBottom:4}}>{t(lang,'step.'+stepKey)}</h1>
            <p className="lead" style={{margin:0,fontSize:14}}>{t(lang,'step.'+stepKey+'.desc')}</p>
          </div>
        </div>

        {d.skipped
          ? <div className="skip-note fade-in"><Glyph d={IC.skip} w={30}/>{t(lang,'step.skipped')}</div>
          : <>
        {/* compteur (fenêtres / portes) */}
        {m.count &&
          <div className="photo-block">
            <p className="section-label">{t(lang,'count.'+m.count)}</p>
            <Counter value={d.count||0} onChange={c=>set({count:c})} min={0}/>
          </div>}

        {/* photos */}
        {m.type==='photos' && <>
          <p className="section-label">{t(lang,'photo.take')} <span style={{color:'var(--red)'}}>*</span></p>
          <PhotoGrid photos={d.photos||[]} onChange={p=>set({photos:p})} lang={lang}/>
          {m.etat && <EtatBlock data={d} onChange={set} lang={lang}/>}
        </>}

        {/* règlement */}
        {m.type==='reglement' && <>
          <p className="section-label">{t(lang,'reglement.mode')} <span style={{color:'var(--red)'}}>*</span></p>
          <div className="seg">
            <button className={d.mode==='cheque'?'on-neutral':''} onClick={()=>set({mode:'cheque'})}>
              <Glyph d={IC.card} w={18}/>{t(lang,'reglement.cheque')}
            </button>
            <button className={d.mode==='virement'?'on-neutral':''} onClick={()=>set({mode:'virement'})}>
              <Glyph d={IC.arrow} w={18}/>{t(lang,'reglement.virement')}
            </button>
          </div>
          {d.mode==='cheque' &&
            <div className="req-box fade-in">
              <p className="section-label" style={{marginBottom:10}}>{t(lang,'reglement.photocheque')} <span style={{color:'var(--red)'}}>*</span></p>
              <PhotoSlot photo={d.photoCheque} onChange={p=>set({photoCheque:p})} label={t(lang,'photo.take')}/>
              <div className="field" style={{marginTop:16,marginBottom:0}}>
                <label>{t(lang,'reglement.dateencaissement')} <span style={{color:'var(--red)'}}>*</span></label>
                <input className="ctrl" type="date" value={d.dateEncaissement||''} onChange={e=>set({dateEncaissement:e.target.value})}/>
              </div>
            </div>}
        </>}

        {/* procès-verbal */}
        {m.type==='pv' && <>
          <p className="section-label">{t(lang,'step.pv')} <span style={{color:'var(--red)'}}>*</span></p>
          <div className="slot-pair">
            <PhotoSlot photo={d.page1} onChange={p=>set({page1:p})} label={t(lang,'pv.page1')} tag={t(lang,'pv.page1')}/>
            <PhotoSlot photo={d.page2} onChange={p=>set({page2:p})} label={t(lang,'pv.page2')} tag={t(lang,'pv.page2')}/>
          </div>
        </>}
          </>}

        {/* passer l'étape (non concerné) — EN BAS DE PAGE */}
        {m.skippable &&
          <button className={'skip-toggle'+(d.skipped?' on':'')} onClick={()=>set({skipped:!d.skipped})}>
            <span className="sk-box">{d.skipped && <Glyph d={IC.check} w={14}/>}</span>
            <span style={{flex:1,textAlign:'left'}}>{t(lang,'step.skip')}</span>
            <Glyph d={IC.skip} w={17}/>
          </button>}
      </div>

      <Toast msg={err}/>
      <ActionBar
        onBack={onBack}
        onNext={tryNext}
        nextDisabled={false}
        nextLabel={index===total-1 ? t(lang,'recap.review') : t(lang,'common.next')}/>
    </>
  );
}

Object.assign(window, { STEP_META, FLOW, canProceed, StepScreen });