// FOOTPASS v2 · Onboarding shell : machine à étapes, progression en 3 actes, persistance
// Philosophie : « paiement d'abord, le Pass ID comme objet à conquérir »

const OB_FLOW_DEFS = {
  // Audit R-01 · étape « wait » : l'attente KYC réelle devient productive au lieu d'être morte
  self: {
    steps: ['welcome', 'account', 'code', 'role', 'plan', 'pay', 'verify', 'photo', 'wait', 'reveal'],
    acts: { account: 0, code: 0, role: 1, plan: 1, pay: 1, verify: 2, photo: 2, wait: 2, reveal: 2 },
    labels: ['LE COMPTE', 'LE PASS', 'CERTIFICATION'],
  },
  invite: {
    steps: ['welcome', 'invite', 'account', 'code', 'verify', 'photo', 'wait', 'reveal'],
    acts: { invite: 0, account: 1, code: 1, verify: 2, photo: 2, wait: 2, reveal: 2 },
    labels: ['INVITATION', 'LE COMPTE', 'CERTIFICATION'],
  },
};

const OB_STORE_KEY = 'fp_onb_v2';

function OnboardingFlow({ entry = 'self', dark = true, onFinish }) {
  const [flow, setFlow] = React.useState(() => {
    try {
      const s = JSON.parse(localStorage.getItem(OB_STORE_KEY) || 'null');
      if (s && OB_FLOW_DEFS[s.flow]) return s.flow;
    } catch (e) { /* ignore */ }
    return entry;
  });
  const def = OB_FLOW_DEFS[flow] || OB_FLOW_DEFS.self;
  const [idx, setIdx] = React.useState(() => {
    try {
      const s = JSON.parse(localStorage.getItem(OB_STORE_KEY) || 'null');
      const d2 = s && OB_FLOW_DEFS[s.flow];
      if (d2 && s.idx > 0 && s.idx < d2.steps.length) return s.idx;
    } catch (e) { /* ignore */ }
    return 0;
  });
  const [d, setD] = React.useState({
    role: 'joueur', roleChosen: false, plan: 'pro', billing: 'annual',
    name: 'Alexandre Da Costa', email: 'a.dacosta@gmail.com', org: null, paidBy: null,
  });
  const [exiting, setExiting] = React.useState(false);
  const [portal, setPortal] = React.useState(false);

  const persist = (f, i) => {
    try { localStorage.setItem(OB_STORE_KEY, JSON.stringify({ flow: f, idx: i })); } catch (e) { /* ignore */ }
  };
  const go = (i) => { setIdx(i); persist(flow, i); };
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  const ctx = {
    d, set, entry: flow, dark,
    next: () => go(Math.min(idx + 1, def.steps.length - 1)),
    back: () => go(Math.max(idx - 1, 0)),
    choose: (f) => { setFlow(f); setIdx(1); persist(f, 1); },
    finish: () => { setExiting(true); setTimeout(() => onFinish && onFinish(), 470); },
    openPortal: () => setPortal(true),
  };

  const step = def.steps[idx];
  const curAct = def.acts[step];

  // Progression par acte : étapes franchies / étapes de l'acte
  const doneSteps = def.steps.slice(0, idx);
  const fills = [0, 1, 2].map((a) => {
    const total = def.steps.filter((s) => def.acts[s] === a).length;
    const done = doneSteps.filter((s) => def.acts[s] === a).length;
    if (curAct === undefined) return 0;
    if (a < curAct) return 1;
    if (a > curAct) return 0;
    return Math.min(1, (done + 0.45) / total);
  });

  const showHeader = step !== 'welcome';
  const canBack = step !== 'welcome' && step !== 'reveal' && step !== 'wait' && step !== 'photo';

  const stepEl = (() => {
    switch (step) {
      case 'welcome': return <ObStepWelcome ctx={ctx} key="welcome" />;
      case 'invite': return <ObStepInvite ctx={ctx} key="invite" />;
      case 'role': return <ObStepRole ctx={ctx} key="role" />;
      case 'plan': return <ObStepPlan ctx={ctx} key="plan" />;
      case 'pay': return <ObStepPay ctx={ctx} key="pay" />;
      case 'account': return <ObStepAccount ctx={ctx} key="account" />;
      case 'code': return <ObStepCode ctx={ctx} key="code" />;
      case 'org': return <ObStepOrg ctx={ctx} key="org" />;
      case 'verify': return <ObStepVerify ctx={ctx} key="verify" />;
      case 'photo': return <ObStepPhoto ctx={ctx} key="photo" />;
      case 'wait': return <ObStepWait ctx={ctx} key="wait" />;
      case 'reveal': return <ObStepReveal ctx={ctx} key="reveal" />;
      default: return null;
    }
  })();

  return (
    <div className={`ob ${dark ? '' : 'light'} ${exiting ? 'ob-exit' : ''}`}>
      <FPStatusBar light={dark} time="9:41" />
      {showHeader && !portal ? (
        <div className="ob-top">
          <button className={`ob-back ${canBack ? '' : 'hidden'}`} onClick={ctx.back} aria-label="Retour">
            <FPIcon.Back c="currentColor" />
          </button>
          <div className="ob-segs">
            {fills.map((f, i) => (
              <span key={i} className="ob-seg"><i style={{ width: `${Math.round(f * 100)}%` }}></i></span>
            ))}
          </div>
          <span className="ob-actlabel">{`0${(curAct ?? 0) + 1} · ${TX(def.labels[curAct ?? 0])}`}</span>
        </div>
      ) : null}
      {stepEl}
      {portal ? (
        <FPWelcomeGate
          mode="verify"
          name={d.name}
          role={d.roleCustom || OB_ROLE_LABEL[d.role]}
          org={d.org ? d.org.name : null}
          photo={d.passPhoto || d.photo}
          onDone={() => { setPortal(false); ctx.finish(); }}
        />
      ) : null}
    </div>
  );
}

Object.assign(window, { OnboardingFlow, OB_FLOW_DEFS });