/* formbuilder.jsx — Constructeur de formulaire + liste des formulaires */
const { useState } = React;

const fuid = () => "f" + Math.random().toString(36).slice(2, 8);

function fieldMock(f) {
  switch (f.type) {
    case "textarea": return <div className="fb-mock" style={{ minHeight:54 }}>{f.ph || "Saisie libre…"}</div>;
    case "select": return <div className="fb-mock" style={{ display:"flex", justifyContent:"space-between" }}><span>{(f.options&&f.options[0])||"Choisir…"}</span><Ic name="ChevDown" width={15} height={15}/></div>;
    case "checkbox": return <div style={{ display:"flex", gap:9, alignItems:"center", fontSize:13, color:"var(--text-2)" }}><span style={{ width:17, height:17, border:"1.5px solid var(--border-strong)", borderRadius:5 }} />{f.label}</div>;
    case "date": return <div className="fb-mock" style={{ display:"flex", justifyContent:"space-between" }}><span>jj / mm / aaaa</span><Ic name="Calendar" width={15} height={15}/></div>;
    case "file": return <div className="fb-mock" style={{ display:"flex", gap:9, alignItems:"center", borderStyle:"dashed" }}><Ic name="Download" width={15} height={15}/> Déposer un fichier</div>;
    case "iban": return <div className="fb-mock mono">FR76 •••• •••• •••• •••• •••• •••</div>;
    case "identity": return <div className="fb-mock" style={{ display:"flex", gap:10, alignItems:"center", background:"var(--primary-soft)", borderColor:"var(--primary)", color:"var(--primary-strong)" }}><Ic name="Face" width={18} height={18}/> <span>Bloc capture d'identité (PVID) — pré-rempli automatiquement</span></div>;
    default: return <div className="fb-mock">{f.ph || "Texte…"}</div>;
  }
}

function FormBuilder({ initial, title="Bulletin d'adhésion", onSave, onClose }) {
  const D = window.DATA;
  const [fields, setFields] = useState(() => (initial && initial.length ? initial.map(f=>({...f})) : []));
  const [sel, setSel] = useState(initial && initial.length ? initial[0].id : null);
  const [preview, setPreview] = useState(false);
  const [fname, setFname] = useState(title);

  const selF = fields.find(f => f.id === sel);

  const add = (type) => {
    const ft = D.FIELD_TYPES.find(t => t.type===type);
    const f = { id:fuid(), type, label:ft.label, required:false, ph:"", options: type==="select"?["Option 1","Option 2"]:undefined };
    setFields(s => [...s, f]); setSel(f.id);
  };
  const patch = (id,p) => setFields(s => s.map(f => f.id===id?{...f,...p}:f));
  const del = (id) => { setFields(s => s.filter(f=>f.id!==id)); if (sel===id) setSel(null); };
  const move = (id,d) => setFields(s => { const i=s.findIndex(f=>f.id===id), j=i+d; if(j<0||j>=s.length) return s; const c=[...s]; [c[i],c[j]]=[c[j],c[i]]; return c; });

  return (
    <div style={{ position:"fixed", inset:0, zIndex:100, background:"var(--bg)", display:"flex", flexDirection:"column", animation:"fade .14s ease" }}>
      <div style={{ width:"100%", height:"100%", display:"flex", flexDirection:"column" }}>
        {/* header */}
        <div style={{ display:"flex", alignItems:"center", gap:14, padding:"14px 22px", borderBottom:"1px solid var(--border)", background:"var(--surface)" }}>
          <span className="kpi__ic" style={{ width:34, height:34 }}><Ic name="Form" width={18} height={18}/></span>
          <div style={{ flex:1 }}>
            <input value={fname} onChange={e=>setFname(e.target.value)} style={{ border:"none", background:"none", fontSize:16, fontWeight:600, width:"100%", padding:"2px 4px", borderRadius:6, color:"var(--text)" }} />
            <div className="muted" style={{ fontSize:12, paddingLeft:4 }}>Constructeur de formulaire · {fields.length} champ(s)</div>
          </div>
          <div className="seg">
            <button className={!preview?"is-active":""} onClick={()=>setPreview(false)}>Édition</button>
            <button className={preview?"is-active":""} onClick={()=>setPreview(true)}>Aperçu</button>
          </div>
          <button className="btn" onClick={onClose}>Fermer</button>
          <button className="btn btn--primary" onClick={()=>{ onSave && onSave(fields); onClose(); }}><Ic name="Check" /> Enregistrer</button>
        </div>

        <div style={{ flex:1, overflow:"auto", padding:"var(--pad)" }}>
          {preview ? (
            <div style={{ maxWidth:520, margin:"0 auto" }}>
              <div className="card" style={{ padding:28 }}>
                <h2 style={{ margin:"0 0 4px", fontSize:19 }}>{fname}</h2>
                <p className="muted" style={{ marginTop:0, fontSize:13 }}>Mutuelle Horizon · formulaire de saisie adhérent</p>
                <hr className="divider" style={{ margin:"16px 0 20px" }} />
                {fields.length===0 && <div className="empty"><Ic name="Form"/><div>Formulaire vide.</div></div>}
                {fields.map(f => (
                  <div key={f.id} className="field">
                    {f.type!=="checkbox" && <label>{f.label} {f.required && <span className="fb-field__req">*</span>}</label>}
                    {fieldMock(f)}
                  </div>
                ))}
                {fields.length>0 && <button className="btn btn--primary" style={{ width:"100%", marginTop:8 }}>Valider et continuer</button>}
              </div>
            </div>
          ) : (
            <div className="fb">
              {/* palette */}
              <div className="card" style={{ position:"sticky", top:0 }}>
                <div className="card__head"><div><h3 style={{ fontSize:13.5 }}>Champs</h3></div></div>
                <div className="card__body" style={{ display:"flex", flexDirection:"column", gap:7 }}>
                  {D.FIELD_TYPES.map(t => (
                    <button key={t.type} className="palette-item" style={{ padding:"8px 11px" }} onClick={()=>add(t.type)}>
                      <span className="svc-ic" style={{ width:28, height:28, borderRadius:7, background:"var(--surface-3)", color:"var(--text-2)" }}><Ic name={t.icon} width={15} height={15}/></span>
                      <span style={{ flex:1, fontSize:12.5, fontWeight:600 }}>{t.label}</span>
                      <Ic name="Plus" width={14} height={14} style={{ color:"var(--text-3)" }}/>
                    </button>
                  ))}
                </div>
              </div>

              {/* canvas */}
              <div className="fb-canvas">
                <h2 style={{ margin:"0 0 4px", fontSize:18 }}>{fname}</h2>
                <p className="muted" style={{ marginTop:0, marginBottom:20, fontSize:12.5 }}>Glissez ou cliquez un champ depuis la palette. Cliquez un champ pour l'éditer.</p>
                {fields.length===0 && (
                  <div className="empty" style={{ border:"1.5px dashed var(--border-strong)", borderRadius:10 }}>
                    <Ic name="Form" /><div>Aucun champ. Ajoutez-en depuis la palette de gauche.</div>
                  </div>
                )}
                {fields.map((f,i) => (
                  <div key={f.id} className={"fb-field" + (sel===f.id?" is-selected":"")} onClick={()=>setSel(f.id)}>
                    <div className="fb-field__acts" onClick={e=>e.stopPropagation()}>
                      <button className="btn btn--ghost btn--icon btn--sm" disabled={i===0} onClick={()=>move(f.id,-1)} style={{opacity:i===0?.35:1}}><Ic name="ArrowUp" width={13} height={13}/></button>
                      <button className="btn btn--ghost btn--icon btn--sm" disabled={i===fields.length-1} onClick={()=>move(f.id,1)} style={{opacity:i===fields.length-1?.35:1}}><Ic name="ArrowDown" width={13} height={13}/></button>
                      <button className="btn btn--ghost btn--icon btn--sm btn--danger" onClick={()=>del(f.id)}><Ic name="Trash" width={13} height={13}/></button>
                    </div>
                    {f.type!=="checkbox" && <div className="fb-field__label">{f.label||"Sans titre"} {f.required && <span className="fb-field__req">*</span>} <span className="tag" style={{ fontSize:10 }}>{f.type}</span></div>}
                    {fieldMock(f)}
                  </div>
                ))}
              </div>

              {/* properties */}
              <div className="card" style={{ position:"sticky", top:0 }}>
                <div className="card__head"><div><h3 style={{ fontSize:13.5 }}>Propriétés</h3></div></div>
                <div className="card__body">
                  {!selF ? (
                    <div className="muted" style={{ fontSize:12.5, textAlign:"center", padding:"20px 0" }}>Sélectionnez un champ pour le configurer.</div>
                  ) : (
                    <>
                      <div className="field"><label>Libellé</label><input className="input" value={selF.label} onChange={e=>patch(selF.id,{label:e.target.value})} /></div>
                      {["text","email","phone","textarea","iban"].includes(selF.type) &&
                        <div className="field"><label>Texte d'aide</label><input className="input" value={selF.ph||""} onChange={e=>patch(selF.id,{ph:e.target.value})} placeholder="ex : adresse@exemple.fr" /></div>}
                      {selF.type==="select" &&
                        <div className="field"><label>Options (une par ligne)</label>
                          <textarea className="textarea" value={(selF.options||[]).join("\n")} onChange={e=>patch(selF.id,{options:e.target.value.split("\n")})} /></div>}
                      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"10px 0", borderTop:"1px solid var(--border)" }}>
                        <div><div style={{ fontSize:12.5, fontWeight:600 }}>Champ obligatoire</div><div className="muted" style={{ fontSize:11.5 }}>Requis pour valider</div></div>
                        <button onClick={()=>patch(selF.id,{required:!selF.required})} style={{ width:42, height:24, borderRadius:20, border:"none", cursor:"pointer", background: selF.required?"var(--primary)":"var(--border-strong)", position:"relative", transition:"background .15s" }}>
                          <span style={{ position:"absolute", top:3, left: selF.required?21:3, width:18, height:18, borderRadius:"50%", background:"#fff", transition:"left .15s", boxShadow:"var(--shadow-sm)" }} />
                        </button>
                      </div>
                      <div className="tag" style={{ display:"block", textAlign:"center", padding:"6px" }}>type : {selF.type}</div>
                    </>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- LISTE DES FORMULAIRES ---------- */
function FormsView({ openBuilder }) {
  const D = window.DATA;
  // dérive les formulaires depuis les parcours
  const forms = [];
  D.JOURNEYS.forEach(j => j.steps.forEach(s => { if (s.kind==="form") forms.push({ ...s, journey:j.name }); }));
  forms.push({ label:"Questionnaire de santé", journey:"—", fields:Array(14).fill(0), standalone:true });

  return (
    <div className="page page--wide">
      <div className="page-head">
        <div className="page-head__txt">
          <h1>Formulaires</h1>
          <p>Les formulaires de collecte intégrés à vos parcours. Vos clients y saisissent leurs informations.</p>
        </div>
        <div className="page-head__actions">
          <button className="btn btn--primary" onClick={()=>openBuilder({ title:"Nouveau formulaire", fields:[] })}><Ic name="Plus" /> Nouveau formulaire</button>
        </div>
      </div>
      <div className="card">
        <table className="table">
          <thead><tr><th>Formulaire</th><th>Parcours associé</th><th style={{textAlign:"right"}}>Champs</th><th></th></tr></thead>
          <tbody>
            {forms.map((f,i) => (
              <tr key={i}>
                <td><div style={{ display:"flex", alignItems:"center", gap:11 }}><span className="svc-ic" style={{ width:32, height:32, background:"var(--surface-3)", color:"var(--text-2)" }}><Ic name="Form" width={16} height={16}/></span><span style={{ fontWeight:600 }}>{f.label}</span></div></td>
                <td className="muted">{f.journey}</td>
                <td className="num">{(f.fields||[]).length}</td>
                <td style={{ textAlign:"right" }}><button className="btn btn--sm" onClick={()=>openBuilder({ title:f.label, fields:(f.fields&&f.fields[0]&&f.fields[0].id)?f.fields:[] })}><Ic name="Edit" width={14} height={14}/> Éditer</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { FormBuilder, FormsView });