/* global React, ReactDOM, JOURNEYS, JOURNEY_ORDER, Phone, Backstage, Ic, progressPercent */
const { useState, useEffect, useCallback, useRef } = React;

const STANDARD_SUBS = [
  { key: "standard-low", label: "Low risk", sub: "Frictionless" },
  { key: "standard-medium", label: "Medium risk", sub: "+ Proof of address" },
  { key: "standard-pep", label: "PEP", sub: "+ EDD" },
];

function TopBar({ journeyKey, setJourney, present, togglePresent }) {
  const [openStd, setOpenStd] = useState(false);
  const isStd = journeyKey.startsWith("standard");
  const stdLabel = STANDARD_SUBS.find(s => s.key === journeyKey)?.label;
  const wrapRef = useRef(null);

  useEffect(() => {
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpenStd(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  const tab = (k, label) => (
    <button key={k} className={"tab" + (journeyKey === k ? " active" : "")} onClick={() => setJourney(k)}>
      {label}
    </button>
  );
  return (
    <div className="topbar">
      <div className="brand">
        <img src="assets/fnb-logo.png" alt=""/>
        <div>
          <div className="name">FNB Mozambique</div>
          <div className="sub">Digital onboarding · Prototype</div>
        </div>
      </div>
      <div className="tabs">
        {tab("entry", "Entry flow")}
        {tab("wallet", "Wallet")}
        {tab("basic", "Basic")}
        <div className="tab-wrap" ref={wrapRef}>
          <button className={"tab has-menu" + (isStd ? " active" : "")} onClick={() => setOpenStd(v => !v)}>
            Standard{isStd ? ` · ${stdLabel}` : ""} <span className="chev"><Ic.chev/></span>
          </button>
          {openStd && (
            <div className="submenu">
              {STANDARD_SUBS.map(s => (
                <button key={s.key} className={"item" + (journeyKey === s.key ? " active" : "")}
                  onClick={() => { setJourney(s.key); setOpenStd(false); }}>
                  <span>Standard — {s.label}</span><small>{s.sub}</small>
                </button>
              ))}
            </div>
          )}
        </div>
        {tab("sme", "Business Lite")}
        {tab("resume", "Resume")}
      </div>
      <button className={"present-btn" + (present ? " on" : "")} onClick={togglePresent} title="Toggle present mode">
        <Ic.eye/>
        <span>{present ? "Exit present" : "Present"}</span>
      </button>
    </div>
  );
}

function App() {
  const [journeyKey, setJourneyKey] = useState(() => localStorage.getItem("fnb.journey") || "entry");
  const [stepIdx, setStepIdx] = useState(() => parseInt(localStorage.getItem("fnb.step") || "0", 10));
  const [opsState, setOpsState] = useState(() => localStorage.getItem("fnb.ops") || "target");
  const [present, setPresent] = useState(() => localStorage.getItem("fnb.present") === "1");
  const [entryCtx, setEntryCtx] = useState({ customerType: "individual", pillars: {} });

  useEffect(() => { localStorage.setItem("fnb.journey", journeyKey); }, [journeyKey]);
  useEffect(() => { localStorage.setItem("fnb.step", String(stepIdx)); }, [stepIdx]);
  useEffect(() => { localStorage.setItem("fnb.ops", opsState); }, [opsState]);
  useEffect(() => { localStorage.setItem("fnb.present", present ? "1" : "0"); }, [present]);

  const journey = JOURNEYS[journeyKey];
  const safeIdx = Math.min(stepIdx, journey.steps.length - 1);
  const step = journey.steps[safeIdx];

  const setJourney = useCallback((k) => {
    setJourneyKey(k);
    setStepIdx(0);
  }, []);

  const next = useCallback(() => {
    setStepIdx(i => Math.min(i + 1, journey.steps.length - 1));
  }, [journey.steps.length]);
  const prev = useCallback(() => {
    setStepIdx(i => Math.max(i - 1, 0));
  }, []);

  // Keyboard nav
  useEffect(() => {
    const onKey = (e) => {
      if (e.target && ["INPUT","TEXTAREA"].includes(e.target.tagName)) return;
      if (e.key === "ArrowRight") next();
      else if (e.key === "ArrowLeft") prev();
      else if (e.key === "Escape" && present) setPresent(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [next, prev, present]);

  // Build ctx passed into phone screens
  const ctx = {
    journey,
    stepIdx: safeIdx,
    progress: progressPercent(journey, safeIdx),
    next,
    prev,
    setCtx: (patch) => setEntryCtx(c => ({ ...c, ...patch })),
    customerType: entryCtx.customerType,
    pillars: entryCtx.pillars,
    cardChoice: entryCtx.cardChoice,
    pickupBranch: entryCtx.pickupBranch,
    opsState,
    jumpToJourney: (k) => { setJourneyKey(k); setStepIdx(0); },
  };

  return (
    <div className={"app" + (present ? " present" : "")}>
      <TopBar journeyKey={journeyKey} setJourney={setJourney} present={present} togglePresent={() => setPresent(v => !v)}/>

      <div className="body-split">
        <div className="stage">
          <div className="stage-inner">
            <div className="journey-label">
              <span className="dot"/>
              <span>{journey.name}</span>
              <span style={{ opacity: .5 }}>·</span>
              <span>Step {safeIdx + 1} of {journey.steps.length}</span>
            </div>

            <Phone screenKey={step.screen} ctx={ctx} large={present}/>

            <div className="nav">
              <button className="arrow" onClick={prev} disabled={safeIdx === 0} aria-label="Previous"><Ic.arrowL/></button>
              <div className="dots">
                {journey.steps.map((s, i) => (
                  <button key={s.key} className={"dot-btn" + (i === safeIdx ? " active" : "")}
                    onClick={() => setStepIdx(i)} aria-label={s.label}>
                    <span className="tip">{s.label}</span>
                  </button>
                ))}
              </div>
              <button className="arrow" onClick={next} disabled={safeIdx === journey.steps.length - 1} aria-label="Next"><Ic.arrow/></button>
            </div>
            <div className="step-label">{step.label}</div>
          </div>
        </div>

        <Backstage step={step} opsState={opsState} setOpsState={setOpsState} collapsed={present}/>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);