/* ============================================================
   Écrans — Accueil · Projet · Récap · Final
   ============================================================ */

/* Fiche client mockée — fallback démo/preview tant que l'endpoint CRM n'est pas branché */
const MOCK_CLIENTS = {
  'VRL-2026-0481': { prenom:'Marie',   nom:'Dupont',  adresse:'14 rue des Lilas, 77100 Meaux',        telephone:'06 12 34 56 78', email:'marie.dupont@email.fr',  date:'2026-06-24' },
  'VRL-2026-0517': { prenom:'Ahmet',   nom:'Yılmaz',  adresse:'3 avenue Jean Jaurès, 93200 St-Denis', telephone:'07 88 21 09 44', email:'a.yilmaz@email.fr',      date:'2026-06-26' },
  'VRL-2026-0533': { prenom:'Elena',   nom:'Popescu', adresse:'8 impasse du Moulin, 95100 Argenteuil', telephone:'06 55 70 18 902',email:'elena.popescu@email.fr', date:'2026-07-01' },
};

function todayISO(){ const d=new Date(); const p=n=>String(n).padStart(2,'0'); return d.getFullYear()+'-'+p(d.getMonth()+1)+'-'+p(d.getDate()); }

/* Récupère la fiche client depuis le CRM (async).
   - si window.EDL_CONFIG.clientEndpoint est défini → appel réel (erreur si dossier introuvable)
   - sinon → mock (preview/démo)
   - mode 'avant' → date de visite forcée à aujourd'hui */
async function lookupClient(id, mode){
  const cfg = window.EDL_CONFIG || {};
  let c;
  if(cfg.clientEndpoint){
    const u = cfg.clientEndpoint + (cfg.clientEndpoint.includes('?')?'&':'?')
      + 'k=' + encodeURIComponent(cfg.key||'')
      + '&id_project=' + encodeURIComponent((id||'').trim());
    const r = await fetch(u, { headers:{ 'Accept':'application/json' } });
    const j = await r.json().catch(()=>null);
    if(!r.ok || !j || !j.ok) throw new Error((j && j.error) || 'lookup_failed');
    c = { prenom:j.prenom||'', nom:j.nom||'', adresse:j.adresse||'', telephone:j.telephone||'', email:j.email||'', date:j.date||'' };
  } else {
    const key = (id||'').trim().toUpperCase();
    c = { ...(MOCK_CLIENTS[key] || { prenom:'Marie', nom:'Dupont', adresse:'14 rue des Lilas, 77100 Meaux', telephone:'06 12 34 56 78', email:'marie.dupont@email.fr', date:'2026-06-24' }) };
  }
  if(mode==='avant') c.date = todayISO();
  return c;
}

/* ---------- Accueil : langue + mode ---------- */
function HomeScreen({ lang, setLang, onPick }){
  return (
    <>
      <AppBar/>
      <div className="screen fade-in">
        <p className="eyebrow">{t(lang,'home.kicker')}</p>
        <h1 className="h1">{t(lang,'home.title')}</h1>

        <p className="section-label" style={{marginTop:22}}>{t(lang,'home.lang')}</p>
        <div className="langrow">
          {window.LANGS.map(L=>(
            <button key={L.code} className={'langbtn'+(lang===L.code?' active':'')} onClick={()=>setLang(L.code)}>
              <span className="flag">{L.flag}</span>
              <span className="lname">{L.name}</span>
            </button>
          ))}
        </div>

        <p className="section-label">{t(lang,'home.mode')}</p>
        <button className="modecard" onClick={()=>onPick('avant')}>
          <span className="modecard-ic"><Glyph d={IC.clipboard} w={28}/></span>
          <span className="modecard-tx">
            <b>{t(lang,'mode.avant')}</b>
            <span>{t(lang,'mode.avant.desc')}</span>
          </span>
          <span className="modecard-arrow"><Glyph d={IC.chevR} w={22}/></span>
        </button>
        <button className="modecard" onClick={()=>onPick('apres')}>
          <span className="modecard-ic after"><Glyph d={IC.homeCheck} w={28}/></span>
          <span className="modecard-tx">
            <b>{t(lang,'mode.apres')}</b>
            <span>{t(lang,'mode.apres.desc')}</span>
          </span>
          <span className="modecard-arrow"><Glyph d={IC.chevR} w={22}/></span>
        </button>
      </div>
    </>
  );
}

/* ---------- Projet : ID + fiche client ---------- */
function ProjectScreen({ lang, mode, project, setProject, onBack, onNext }){
  const [id, setId] = useState(project.id||'');
  const [client, setClient] = useState(project.client||null);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');
  const load = async ()=>{
    if(!id.trim() || loading) return;
    setLoading(true); setErr('');
    try{
      const c = await lookupClient(id, mode);
      setClient(c);
      setProject({ id:id.trim().toUpperCase(), client:c });
    }catch(e){
      setClient(null);
      setErr(t(lang,'project.error'));
      setTimeout(()=>setErr(''), 3200);
    }
    setLoading(false);
  };
  const rows = client ? [
    { ic:IC.user,  k:t(lang,'field.prenom')+' '+t(lang,'field.nom'), v:client.prenom+' '+client.nom },
    { ic:IC.pin,   k:t(lang,'field.adresse'),   v:client.adresse },
    { ic:IC.phone, k:t(lang,'field.telephone'), v:client.telephone },
    { ic:IC.mail,  k:t(lang,'field.email'),     v:client.email },
    { ic:IC.cal,   k:t(lang,'field.date'),      v:fmtDate(client.date,lang) },
  ] : [];
  return (
    <>
      <AppBar kicker={t(lang,'project.kicker')} title={t(lang,mode==='avant'?'mode.avant':'mode.apres')} lang={lang} onBack={onBack}/>
      <div className="screen screen-pad fade-in">
        <h1 className="h1" style={{fontSize:22}}>{t(lang,'project.title')}</h1>
        <p className="lead">{t(lang,'project.lead')}</p>

        <div className="field">
          <label>{t(lang,'project.idlabel')}</label>
          <div className="input-icon">
            <Glyph d={IC.box} w={19}/>
            <input className="ctrl" value={id} onChange={e=>setId(e.target.value)} placeholder={t(lang,'project.idplaceholder')}
              inputMode="numeric" pattern="[0-9]*" autoComplete="off"
              onKeyDown={e=>{ if(e.key==='Enter') load(); }}/>
          </div>
        </div>
        <button className="btn btn-dark" onClick={load} disabled={loading} style={{marginBottom:24,opacity:loading?.6:1}}>
          <Glyph d={IC.arrow} w={20}/>{loading ? t(lang,'project.loading') : t(lang,'project.load')}
        </button>

        {client && <div className="fade-in">
          <div className="prefill"><Glyph d={IC.check} w={14}/>{t(lang,'project.prefilled')}</div>
          <p className="section-label">{t(lang,'project.clientinfo')}</p>
          <div className="client-card">
            {rows.map((r,i)=>(
              <div className="client-row" key={i}>
                <Glyph d={r.ic} w={19}/>
                <div className="cr-tx"><div className="cr-k">{r.k}</div><div className="cr-v">{r.v}</div></div>
              </div>
            ))}
          </div>
        </div>}
      </div>
      <Toast msg={err}/>
      <ActionBar onBack={onBack} onNext={client?onNext:null} nextDisabled={!client}
        nextLabel={t(lang,'common.start')}/>
    </>
  );
}

function fmtDate(iso, lang){
  if(!iso) return '—';
  const loc = lang==='tr'?'tr-TR':lang==='ro'?'ro-RO':'fr-FR';
  try{ return new Date(iso+'T00:00:00').toLocaleDateString(loc,{day:'2-digit',month:'long',year:'numeric'}); }
  catch(e){ return iso; }
}

/* ---------- Sending overlay ---------- */
function SendingOverlay({ lang, done }){
  return (
    <div className="overlay">
      <div className="sheet">
        {done ? <>
          <div className="sheet-ic ok"><Glyph d={IC.check} w={38}/></div>
          <h3>{t(lang,'send.ok.title')}</h3>
          <p>{t(lang,'send.ok.desc')}</p>
        </> : <>
          <div className="spinner"></div>
          <h3 style={{fontSize:18}}>{t(lang,'send.sending')}</h3>
        </>}
      </div>
    </div>
  );
}

/* ---------- Final : langue choisie + WhatsApp ---------- */
function FinalScreen({ lang, project, ref_, onWhatsapp, onNew }){
  return (
    <div className="final fade-in">
      <div className="final-ic"><Glyph d={IC.check} w={50}/></div>
      <h1>{t(lang,'final.title')}</h1>
      <p>{t(lang,'final.desc')}</p>
      <div className="final-card">
        <div className="fc-k">{t(lang,'final.ref')}</div>
        <div className="fc-v">{ref_}</div>
        {project.client && <div style={{marginTop:12}}>
          <div className="fc-k">{t(lang,'recap.client')}</div>
          <div className="fc-v">{project.client.prenom} {project.client.nom}</div>
        </div>}
      </div>
      <div className="final-actions">
        <button className="btn btn-wa" onClick={onWhatsapp}><Glyph d={IC.wa} w={22}/>{t(lang,'final.whatsapp')}</button>
        <div className="final-note"><Glyph d={IC.globe} w={15}/>{t(lang,'final.note')}</div>
        <button className="btn btn-text" onClick={onNew}>{t(lang,'final.new')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, ProjectScreen, SendingOverlay, FinalScreen, lookupClient, fmtDate, MOCK_CLIENTS });