/* eslint-disable */
// Root app — routing, state, persistence, tweaks wiring.

const { useState: aUseState, useEffect: aUseEffect, useMemo: aUseMemo } = React;

const STORAGE_KEY = "carecode-state-v1";

function loadState() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch (e) { return null; }
}

function saveState(s) {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch (e) {}
}

function App() {
  const data = window.CARE_CODE_DATA;
  const initial = loadState() || {};

  const [route, setRoute] = aUseState(initial.route || "landing");
  const [currentModuleId, setCurrentModuleId] = aUseState(initial.currentModuleId || data.modules[0].id);
  const [completion, setCompletionState] = aUseState(initial.completion || {
    modules: {}, checks: {}, pretest: null, posttest: null,
  });
  const [user, setUser] = aUseState(initial.user || null);
  const [activeSeconds, setActiveSeconds] = aUseState(initial.activeSeconds || 0);
  const setCompletion = (updater) => {
    setCompletionState((prev) => {
      const next = typeof updater === "function" ? updater(prev) : updater;
      return next;
    });
  };

  const tweaks = useTweaks(window.__TWEAK_DEFAULTS || { theme: "dark", hero: "split", nav: "topbar" });
  const t = tweaks.t;

  // Persist locally (instant — survives reload)
  aUseEffect(() => {
    saveState({ route, currentModuleId, completion, user, activeSeconds });
  }, [route, currentModuleId, completion, user, activeSeconds]);

  // Mirror to central server (debounced — survives device change & feeds admin)
  const pushToServer = aUseMemo(
    () =>
      window.CareCodeAPI
        ? window.CareCodeAPI.debounce((empNo, payload) => {
            window.CareCodeAPI.saveResults(empNo, payload);
          }, 600)
        : () => {},
    []
  );

  aUseEffect(() => {
    if (!user || !user.employeeNumber || !window.CareCodeAPI) return;
    const allModulesDone =
      Object.values(completion.modules || {}).filter(Boolean).length ===
      modules.length;
    // Resolve commitment index → actual text for the admin view
    const commitIdx = Number(localStorage.getItem("cc-commitment"));
    const commitment =
      Number.isFinite(commitIdx) && data.commitments[commitIdx]
        ? data.commitments[commitIdx]
        : null;
    pushToServer(user.employeeNumber, {
      pretest: completion.pretest || null,
      posttest: completion.posttest || null,
      modules: completion.modules || {},
      commitment,
      completed: !!(completion.posttest && allModulesDone),
      active_seconds: activeSeconds,
    });
  }, [completion, user, pushToServer, activeSeconds]);

  // Track active time spent in the training platform.
  // We only count time while the page is visible and the browser tab is focused.
  aUseEffect(() => {
    if (!user || !user.employeeNumber) return;
    const tickSeconds = 15;
    const timer = setInterval(() => {
      if (document.visibilityState === "visible" && document.hasFocus()) {
        setActiveSeconds((prev) => prev + tickSeconds);
      }
    }, tickSeconds * 1000);
    return () => clearInterval(timer);
  }, [user]);

  // Theme
  aUseEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  function go(nextRoute, modId) {
    if (modId) setCurrentModuleId(modId);
    setRoute(nextRoute);
    window.scrollTo({ top: 0, behavior: "instant" });
  }

  const modules = data.modules;
  const currentModule = modules.find((m) => m.id === currentModuleId);

  // Login gate — must sign in before seeing anything else
  if (!user) {
    return (
      <div className={`app theme-${t.theme}`}>
        <LoginGate onSignIn={setUser} />
      </div>
    );
  }

  // Progress %
  const stepsTotal = modules.length + 2; // modules + pre + post
  const stepsDone =
    Object.values(completion.modules || {}).filter(Boolean).length +
    (completion.pretest ? 1 : 0) +
    (completion.posttest ? 1 : 0);
  const progressPct = Math.round((stepsDone / stepsTotal) * 100);

  function markModuleDone(id) {
    setCompletion((p) => ({ ...p, modules: { ...p.modules, [id]: true } }));
    // Auto-advance: next module, post-test, or completion
    const idx = modules.findIndex((m) => m.id === id);
    if (idx < modules.length - 1) {
      go("module", modules[idx + 1].id);
    } else if (!completion.posttest) {
      go("posttest");
    } else {
      go("completion");
    }
  }

  return (
    <div className={`app theme-${t.theme} nav-${t.nav}`}>
      <TopBar
        route={route}
        progress={progressPct}
        onGo={go}
        modules={modules}
        currentModuleId={currentModuleId}
        user={user}
      />

      {t.nav === "sidebar" && route !== "landing" && (
        <SideNav modules={modules} completion={completion} onGo={go} currentRoute={route} currentModuleId={currentModuleId} />
      )}

      <main className={`app-main nav-${t.nav}`}>
        {route === "landing" && <LandingScreen onGo={go} hero={t.hero} completion={completion} />}
        {route === "pretest" && (
          <TestScreen kind="pretest" onGo={go} completion={completion} setCompletion={setCompletion} />
        )}
        {route === "posttest" && (
          <TestScreen kind="posttest" onGo={go} completion={completion} setCompletion={setCompletion} />
        )}
        {route === "dashboard" && (
          <DashboardScreen onGo={go} completion={completion} modules={modules} nav={t.nav} user={user} />
        )}
        {route === "module" && currentModule && (
          <ModuleReader
            module={currentModule}
            onComplete={() => markModuleDone(currentModule.id)}
            onBack={() => go("dashboard")}
            completion={completion}
            setCompletion={setCompletion}
          />
        )}
        {route === "comparison" && (
          <ComparisonScreen
            pretest={completion.pretest}
            posttest={completion.posttest}
            onGo={go}
          />
        )}
        {route === "completion" && <CompletionScreen onGo={go} />}
      </main>

      {tweaks.panel}
      <DebugReset onReset={() => {
        if (confirm("Reset all progress and answers?")) {
          localStorage.removeItem(STORAGE_KEY);
          localStorage.removeItem("cc-commitment");
          localStorage.removeItem("cc-name");
          localStorage.removeItem("cc-signed");
          location.reload();
        }
      }} />
    </div>
  );
}

/* ==================================================================
   Login gate
================================================================== */
function LoginGate({ onSignIn }) {
  const [name, setName] = aUseState("");
  const [surname, setSurname] = aUseState("");
  const [empNo, setEmpNo] = aUseState("");
  const [dept, setDept] = aUseState("");

  const departments = [
    "Customer Service",
    "Sales",
    "Operations",
    "Retail",
    "Security",
    "Support",
    "Maintenance",
    "Cleaning",
    "Other",
  ];

  const valid =
    name.trim().length >= 2 &&
    surname.trim().length >= 2 &&
    empNo.trim().length >= 2 &&
    dept.length > 0;

  function submit(e) {
    e.preventDefault();
    if (!valid) return;
    const first = name.trim();
    const last = surname.trim();
    const u = {
      name: `${first} ${last}`,
      firstName: first,
      surname: last,
      initials: ((first[0] || "") + (last[0] || "")).toUpperCase(),
      employeeNumber: empNo.trim(),
      department: dept,
    };
    // Best-effort register with the central server (non-blocking).
    if (window.CareCodeAPI) {
      window.CareCodeAPI.signIn(u);
    }
    onSignIn(u);
  }

  return (
    <div className="login-gate">
      <div className="login-aurora" aria-hidden></div>
      <div className="login-grid" aria-hidden></div>

      <header className="login-topbar">
        <div className="brand">
          <span className="brand-mark"><img src="assets/brand/care_code_icon.png" alt="" /></span>
          <span>THE CARE CODE</span>
        </div>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-mute)" }}>
          FRONTLINE TRAINING · INTERNAL
        </span>
      </header>

      <main className="login-main">
        <div className="login-left">
          <span className="eyebrow fade-up">SIGN IN · COLLEAGUE</span>
          <h1 className="display fade-up d1" style={{ fontSize: "clamp(64px, 9vw, 132px)", lineHeight: 0.88, letterSpacing: "-0.04em", marginTop: 20 }}>
            BEFORE WE<br />
            BEGIN<span style={{ color: "var(--accent)" }}>.</span>
          </h1>
          <p className="lead fade-up d2" style={{ maxWidth: 460, marginTop: 28 }}>
            This training is yours. Your name and your commitment will go on the certificate at the end.
            Sign in so we can save your progress as you work through the seven modules.
          </p>
          <div className="login-mindsets fade-up d4" style={{ marginTop: 40 }}>
            <span className="eyebrow eyebrow-dim">ALIGNED WITH</span>
            <div className="mindset-row">
              <span>Lead with Generosity</span>
              <span className="sep">·</span>
              <span>Create Moments that Matter</span>
              <span className="sep">·</span>
              <span>Work as One Team</span>
            </div>
          </div>
        </div>

        <form className="login-card fade-up d2" onSubmit={submit}>
          <div className="login-card-head">
            <span className="mono num">01</span>
            <span className="eyebrow">COLLEAGUE LOG-IN</span>
          </div>

          <div className="login-row">
            <label className="login-field">
              <span className="login-label">FIRST NAME</span>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="e.g. Sara"
                autoFocus
              />
            </label>
            <label className="login-field">
              <span className="login-label">SURNAME</span>
              <input
                type="text"
                value={surname}
                onChange={(e) => setSurname(e.target.value)}
                placeholder="e.g. Nasr"
              />
            </label>
          </div>

          <label className="login-field">
            <span className="login-label">EMPLOYEE NUMBER</span>
            <input
              type="text"
              value={empNo}
              onChange={(e) => setEmpNo(e.target.value.replace(/[^0-9A-Za-z-]/g, ""))}
              placeholder="e.g. 0048213"
            />
          </label>

          <label className="login-field">
            <span className="login-label">DEPARTMENT</span>
            <div className="login-select-wrap">
              <select value={dept} onChange={(e) => setDept(e.target.value)}>
                <option value="">— Select your department —</option>
                {departments.map((d) => (
                  <option key={d} value={d}>{d}</option>
                ))}
              </select>
              <span className="login-select-caret mono">▾</span>
            </div>
          </label>

          <button
            type="submit"
            className="btn btn-primary btn-lg"
            disabled={!valid}
            style={{ marginTop: 8, width: "100%", justifyContent: "center" }}
          >
            SIGN IN & BEGIN <span className="arr">→</span>
          </button>

          <p className="login-foot mono">
            BY SIGNING IN YOU CONFIRM THIS DEVICE IS YOURS FOR THE NEXT ~2 HOURS.
          </p>
        </form>
      </main>

      <footer className="login-bottom">
        <span className="mono mute" style={{ fontSize: 11, letterSpacing: "0.22em" }}>
          v1.0 · {new Date().getFullYear()} · FRONTLINE TRAINING
        </span>
        <span className="mono mute" style={{ fontSize: 11, letterSpacing: "0.22em" }}>
          ~115 MIN · 7 MODULES · 1 COMMITMENT
        </span>
      </footer>
    </div>
  );
}

/* ==================================================================
   Sidebar nav (optional)
================================================================== */
function SideNav({ modules, completion, onGo, currentRoute, currentModuleId }) {
  return (
    <aside className="sidenav">
      <span className="eyebrow eyebrow-dim">CURRICULUM</span>
      <button
        className={`sidenav-item ${currentRoute === "dashboard" ? "active" : ""}`}
        onClick={() => onGo("dashboard")}
      >
        <span className="mono">·</span> Overview
      </button>
      <button
        className={`sidenav-item ${currentRoute === "pretest" ? "active" : ""} ${completion.pretest ? "done" : ""}`}
        onClick={() => onGo("pretest")}
      >
        <span className="mono">·</span> Pre-Test {completion.pretest && "✓"}
      </button>
      <div className="sidenav-sep"></div>
      {modules.map((m) => {
        const done = completion.modules?.[m.id];
        const active = currentRoute === "module" && currentModuleId === m.id;
        return (
          <button
            key={m.id}
            className={`sidenav-item ${active ? "active" : ""} ${done ? "done" : ""}`}
            onClick={() => onGo("module", m.id)}
          >
            <span className="mono">{m.num}</span> {m.title} {done && "✓"}
          </button>
        );
      })}
      <div className="sidenav-sep"></div>
      <button
        className={`sidenav-item ${currentRoute === "posttest" ? "active" : ""} ${completion.posttest ? "done" : ""}`}
        onClick={() => onGo("posttest")}
      >
        <span className="mono">·</span> Post-Test {completion.posttest && "✓"}
      </button>
      <button
        className={`sidenav-item ${currentRoute === "comparison" ? "active" : ""}`}
        onClick={() => onGo("comparison")}
      >
        <span className="mono">·</span> Before · After
      </button>
      <button
        className={`sidenav-item ${currentRoute === "completion" ? "active" : ""}`}
        onClick={() => onGo("completion")}
      >
        <span className="mono">·</span> Certificate
      </button>
    </aside>
  );
}

/* ==================================================================
   Tweaks
================================================================== */
function useTweaks(defaults) {
  const [t, setTState] = aUseState(defaults);
  const [open, setOpen] = aUseState(false);

  aUseEffect(() => {
    function onMsg(e) {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode") setOpen(true);
      if (d.type === "__deactivate_edit_mode") setOpen(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  function setTweak(key, val) {
    setTState((p) => {
      const next = typeof key === "object" ? { ...p, ...key } : { ...p, [key]: val };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: typeof key === "object" ? key : { [key]: val } }, "*");
      return next;
    });
  }

  function close() {
    setOpen(false);
    window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
  }

  const panel = open ? (
    <TweaksPanel onClose={close} title="Tweaks">
      <TweakSection title="Palette">
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={[
            { value: "dark", label: "Dark" },
            { value: "warm", label: "Warm" },
            { value: "light", label: "Light" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio
          label="Treatment"
          value={t.hero}
          options={[
            { value: "split", label: "Split" },
            { value: "type-only", label: "Type" },
            { value: "full-bleed", label: "Image" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
      </TweakSection>
      <TweakSection title="Navigation">
        <TweakRadio
          label="Style"
          value={t.nav}
          options={[
            { value: "topbar", label: "Top bar" },
            { value: "sidebar", label: "Sidebar" },
            { value: "minimal", label: "Minimal" },
          ]}
          onChange={(v) => setTweak("nav", v)}
        />
      </TweakSection>
    </TweaksPanel>
  ) : null;

  return { t, panel, setTweak };
}

/* ==================================================================
   Tiny floating reset (corner)
================================================================== */
function DebugReset({ onReset }) {
  return (
    <button
      onClick={onReset}
      title="Reset training progress"
      style={{
        position: "fixed",
        bottom: 16,
        left: 16,
        zIndex: 40,
        fontFamily: "var(--f-mono)",
        fontSize: 10,
        letterSpacing: "0.18em",
        color: "var(--fg-mute)",
        padding: "6px 10px",
        border: "1px solid var(--line)",
        background: "var(--bg-1)",
        borderRadius: 100,
        textTransform: "uppercase",
        cursor: "pointer",
      }}
    >
      ↺ Reset
    </button>
  );
}

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