/* onboarding-app.jsx — Wizard root with step state + rail */

const OB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(OB_TWEAK_DEFAULTS);
  const [stepIdx, setStepIdx] = React.useState(0);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  // ── Wizard state (single source of truth)
  const [data, setData] = React.useState({
    base: OB_BASE_FULL,
    company: {
      legal: OB_PROSPECT.name + ' Lda.',
      nif:   OB_PROSPECT.nif,
      cae:   '55111 · Hotéis com restaurante',
      address: 'Rua da Praia 12 · 7570-337 Comporta',
    },
    address: {
      name: OB_PROSPECT.name,
      attn: 'Receção · Maria Antunes',
      street: OB_DELIVERY_DEFAULT.street,
      zip: OB_DELIVERY_DEFAULT.zip,
      country: OB_DELIVERY_DEFAULT.country,
    },
    contacts: [
      { role: 'Principal',  name: 'Maria Antunes',    email: 'maria@hotelsereno.pt',  phone: '+351 265 488 220' },
      { role: 'Faturação',  name: 'Carlos Penalva',   email: 'contas@hotelsereno.pt', phone: '+351 265 488 221' },
    ],
    sepa: {
      iban: '',
      bank: '',
      holder: OB_PROSPECT.name + ' Lda.',
      accepted: false,
    },
    signature: {
      name: '',
      agreeContract: false,
      agreeMandate: false,
      agreeRgpd: false,
    },
  });

  // Subhelper to set base
  const setBase = (newBase) => setData(d => ({ ...d, base: newBase }));

  const step = OB_STEPS[stepIdx];
  const isFirst = stepIdx === 0;
  const isLast  = stepIdx === OB_STEPS.length - 1;

  // Step-specific gating
  const canAdvance = () => {
    if (step.k === 'sepa') {
      return data.sepa.iban.replace(/\s/g,'').length >= 21 && data.sepa.bank && data.sepa.accepted;
    }
    if (step.k === 'review') {
      return data.signature.name && data.signature.agreeContract &&
             data.signature.agreeMandate && data.signature.agreeRgpd;
    }
    return true;
  };

  const next = () => setStepIdx(i => Math.min(OB_STEPS.length - 1, i + 1));
  const prev = () => setStepIdx(i => Math.max(0, i - 1));

  return (
    <div className="wizard">
      {/* ── Left rail ────────────────────────────────────── */}
      <div className="rail">
        <div>
          <div className="brand">RVDE</div>
          <div className="brand-sub">adesão · onboarding</div>
        </div>

        <div className="doc-ref">
          <div className="smallcaps">Proposta</div>
          <div className="name">{OB_PROSPECT.name}</div>
          <div className="meta">{OB_PROSPECT.refId} · {OB_PROSPECT.loc}</div>
        </div>

        <ol className="step-list">
          {OB_STEPS.map((s, i) => {
            const cls = i < stepIdx ? 'done' : i === stepIdx ? 'current' : '';
            return (
              <li key={s.k} className={cls} onClick={() => i <= stepIdx && setStepIdx(i)}>
                <div className="num">
                  {i < stepIdx ? <Icon k="check" size={11}/> : s.num}
                </div>
                <div className="lbl">
                  {s.label}
                  <span className="sub">{s.sub}</span>
                </div>
              </li>
            );
          })}
        </ol>

        <div className="rail-foot">
          <div className="rep">
            <div className="av">{OB_REP.avatar}</div>
            <div>
              <div style={{ color:'var(--bone)', fontWeight: 600, fontSize: 13 }}>{OB_REP.name}</div>
              <div style={{ color:'rgba(242,233,210,0.45)', fontSize: 11 }}>{OB_REP.role}</div>
            </div>
          </div>
          Dúvidas? <a href={'mailto:'+OB_REP.email} style={{ color:'var(--sand)' }}>{OB_REP.email}</a><br/>
          ou liga · <span className="mono">{OB_REP.phone}</span>
        </div>
      </div>

      {/* ── Canvas ──────────────────────────────────────── */}
      <div className="canvas">
        <div className="canvas-inner">
          {step.k === 'welcome'  && <StepWelcome onNext={next}/>}
          {step.k === 'proposal' && <StepProposal data={data}/>}
          {step.k === 'base'     && <StepBase data={data} setBase={setBase}/>}
          {step.k === 'company'  && <StepCompany data={data} setData={setData}/>}
          {step.k === 'contacts' && <StepContacts data={data} setData={setData}/>}
          {step.k === 'sepa'     && <StepSepa data={data} setData={setData}/>}
          {step.k === 'review'   && <StepReview data={data} setData={setData}/>}
          {step.k === 'done'     && <StepDone data={data}/>}
        </div>

        {/* Sticky footer */}
        {!isLast && step.k !== 'welcome' && (
          <div className="step-foot">
            <button className="btn outline lg" onClick={prev} disabled={isFirst}>
              ← Voltar
            </button>
            <div className="ml-auto row gap-3">
              <span className="ink-3" style={{ fontSize: 12 }}>
                Passo {stepIdx + 1} de {OB_STEPS.length}
              </span>
              {step.k === 'review' ? (
                <button className="btn clay lg" disabled={!canAdvance()} onClick={next}>
                  <Icon k="pen" size={14}/> Selar contrato
                </button>
              ) : (
                <button className="btn clay lg" disabled={!canAdvance()} onClick={next}>
                  Continuar →
                </button>
              )}
            </div>
          </div>
        )}
      </div>

      <TweaksPanel title="Tweaks · Adesão">
        <TweakSection label="Wizard"/>
        <TweakSelect
          label="Saltar para passo"
          value={String(stepIdx)}
          options={OB_STEPS.map((s, i) => ({ value: String(i), label: (i+1) + ' · ' + s.label }))}
          onChange={(v) => setStepIdx(parseInt(v, 10))}
        />
        <TweakSection label="Tema"/>
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[
            { value:'light', label:'Claro' },
            { value:'dark',  label:'Escuro' },
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);