/* eslint-disable */
// Shared components: chrome, progress, image slots, controls.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ------------------------------------------------------------------
   TopBar
------------------------------------------------------------------ */
function TopBar({ route, progress, onGo, modules, currentModuleId, user }) {
  const showCrumb = route !== "landing";
  return (
    <header className="topbar">
      <div className="topbar-left">
        <div className="brand" onClick={() => onGo("landing")}>
          <span className="brand-mark"><img src="assets/brand/care_code_icon.png" alt="" /></span>
          <span>THE CARE CODE</span>
        </div>
        {showCrumb && (
          <CrumbTrail route={route} modules={modules} currentModuleId={currentModuleId} onGo={onGo} />
        )}
      </div>
      <div className="topbar-right">
        {route !== "landing" && (
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--fg-mute)" }}>
              PROGRESS · {progress}%
            </span>
            <div style={{ width: 120 }}>
              <div className="progress-rail">
                <div className="progress-fill" style={{ width: `${progress}%` }}></div>
              </div>
            </div>
          </div>
        )}
        <div className="user-chip">
          <span>{user.name}</span>
          <span className="avatar">{user.initials}</span>
        </div>
      </div>
    </header>
  );
}

function CrumbTrail({ route, modules, currentModuleId, onGo }) {
  const map = {
    landing: "Welcome",
    pretest: "Pre-Test",
    dashboard: "Curriculum",
    module: modules.find((m) => m.id === currentModuleId)?.title || "Module",
    posttest: "Post-Test",
    comparison: "Your Shift",
    completion: "Certificate",
  };
  return (
    <div className="crumb-trail">
      <span onClick={() => onGo("dashboard")} style={{ cursor: "pointer" }}>CURRICULUM</span>
      <span className="sep">/</span>
      <span className="active">{(map[route] || route).toUpperCase()}</span>
    </div>
  );
}

/* ------------------------------------------------------------------
   Image slot — drop-in placeholder
------------------------------------------------------------------ */
function ImgSlot({ label = "image", aspect = "16 / 9", className = "", children, style = {}, src, alt, objectPosition }) {
  const hasImg = !!src;
  return (
    <div
      className={`img-slot ${hasImg ? "img-slot-filled" : ""} ${className}`}
      style={{ aspectRatio: aspect, ...style }}
    >
      {hasImg ? (
        <img
          src={src}
          alt={alt || label}
          className="img-slot-img"
          style={objectPosition ? { objectPosition } : undefined}
        />
      ) : (
        <div className="label">▢ {label}</div>
      )}
      {children}
    </div>
  );
}

/* ------------------------------------------------------------------
   Stat blocks
------------------------------------------------------------------ */
function MetaStat({ label, value, sub }) {
  return (
    <div className="stack" style={{ gap: 6 }}>
      <span className="eyebrow eyebrow-dim">{label}</span>
      <span className="display display-sm" style={{ letterSpacing: "-0.02em" }}>{value}</span>
      {sub && <span className="body-sm mute">{sub}</span>}
    </div>
  );
}

/* ------------------------------------------------------------------
   Diagonal divider
------------------------------------------------------------------ */
function DiagDivider({ label }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "32px 0" }}>
      <div className="diag-strip" style={{ width: 40, height: 16 }}></div>
      <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-mute)" }}>
        {label}
      </span>
      <div style={{ flex: 1, height: 1, background: "var(--line)" }}></div>
    </div>
  );
}

/* ------------------------------------------------------------------
   Big numeric counter
------------------------------------------------------------------ */
function BigCounter({ value, target, suffix = "" }) {
  const [n, setN] = useState(value);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const from = n;
    const dur = 700;
    function tick(now) {
      const t = Math.min(1, (now - start) / dur);
      const e = 1 - Math.pow(1 - t, 3);
      setN(Math.round(from + (target - from) * e));
      if (t < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return <span className="tabular">{n}{suffix}</span>;
}

/* ------------------------------------------------------------------
   Step / progress badge for modules
------------------------------------------------------------------ */
function ModuleBadge({ num, status }) {
  // status: locked, current, done
  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "5px 10px",
        border: `1px solid ${status === "current" ? "var(--accent)" : "var(--line-2)"}`,
        borderRadius: 100,
        fontFamily: "var(--f-mono)",
        fontSize: 10,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: status === "done" ? "var(--accent)" : status === "locked" ? "var(--fg-mute)" : "var(--fg)",
      }}
    >
      <span style={{
        width: 6, height: 6, borderRadius: 6,
        background: status === "done" ? "var(--accent)" : status === "current" ? "var(--accent)" : "var(--line-strong)",
      }}></span>
      MODULE {num} · {status}
    </div>
  );
}

/* ------------------------------------------------------------------
   Helpers
------------------------------------------------------------------ */
function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }

function formatMinutes(m) {
  if (m < 60) return `${m} min`;
  const h = Math.floor(m / 60);
  const r = m % 60;
  return `${h}h ${r}m`;
}

/* expose */
Object.assign(window, {
  TopBar, ImgSlot, MetaStat, DiagDivider, BigCounter, ModuleBadge,
  clamp, formatMinutes,
});