// app.jsx — Prompt Bank main shell

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#ffffff", "#0A2540", "#1E5EFF", "#4A90E2"],
  "typeset": "bricolage",
  "device": "desktop"
}/*EDITMODE-END*/;

// Palette options: [bg, ink, pop, hot]
const PALETTES = [
  ["#ffffff", "#0A2540", "#1E5EFF", "#4A90E2"], // Blue (default)
  ["#F7F9FC", "#07203a", "#1E5EFF", "#3A7BD5"], // Soft cobalt
  ["#ffffff", "#0A2540", "#4A90E2", "#1E5EFF"], // Inverted blues
  ["#F7F9FC", "#082441", "#2A6FFF", "#4A90E2"], // Bright slate
];

const TYPESETS = {
  bricolage: {
    display: '"Bricolage Grotesque", system-ui, sans-serif',
    body:    '"Space Grotesk", system-ui, sans-serif',
    mono:    '"JetBrains Mono", monospace',
    label:   "Bricolage · Space"
  },
  editorial: {
    display: '"Instrument Serif", Georgia, serif',
    body:    '"Space Grotesk", system-ui, sans-serif',
    mono:    '"JetBrains Mono", monospace',
    label:   "Editorial Serif"
  },
  bold: {
    display: '"Boldonse", "Bricolage Grotesque", sans-serif',
    body:    '"Space Grotesk", system-ui, sans-serif',
    mono:    '"JetBrains Mono", monospace',
    label:   "Boldonse · big"
  },
};

function getOrUpdateStreak() {
  try {
    const today = new Date().toISOString().slice(0, 10);
    const stored = JSON.parse(localStorage.getItem("pb_streak") || "{}");
    if (stored.date === today) return stored.count || 1;
    const yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10);
    const count = stored.date === yesterday ? (stored.count || 1) + 1 : 1;
    localStorage.setItem("pb_streak", JSON.stringify({ date: today, count }));
    return count;
  } catch { return 1; }
}

// Decode a JWT and return { userId, dreamSchool, userName, userGrade, userCountry } or null on failure/expiry.
function readStoredAuth() {
  try {
    const token = localStorage.getItem("pb_token");
    if (!token) return null;
    const raw = token.split(".")[1];
    const base64 = raw.replace(/-/g, "+").replace(/_/g, "/");
    const padded = base64 + "===".slice(0, (4 - base64.length % 4) % 4);
    const p = JSON.parse(atob(padded));
    if (p.exp && Date.now() / 1000 > p.exp) {
      localStorage.removeItem("pb_token");
      return null;
    }
    return {
      userId: p.sub || p.userId || p.id || null,
      dreamSchool: p.dreamSchool || "",
      userName: p.name || "",
      userGrade: p.grade || "",
      userCountry: p.country || "",
    };
  } catch { return null; }
}

function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

// Lazy-initialise from localStorage so no flash on refresh.
const [storedAuth] = React.useState(() => readStoredAuth());
const [step, setStep] = React.useState(() => {
  if (!storedAuth) return -1;
  const saved = parseInt(localStorage.getItem("pb_step") || "0", 10);
  return isNaN(saved) ? 0 : saved;
});
const [streak, setStreak] = React.useState(() => storedAuth ? getOrUpdateStreak() : 1);
const [userId, setUserId] = React.useState(storedAuth?.userId || null);
const [dreamSchool, setDreamSchool] = React.useState(storedAuth?.dreamSchool || "");
const [userName, setUserName] = React.useState(storedAuth?.userName || "");
const [userGrade, setUserGrade] = React.useState(storedAuth?.userGrade || "");
const [userCountry, setUserCountry] = React.useState(storedAuth?.userCountry || "");
const [completed, setCompleted] = React.useState(new Set());
const [todayPrompt, setTodayPrompt] = React.useState(null);
const [analysis, setAnalysis] = React.useState(() => {
  try { return JSON.parse(localStorage.getItem("pb_analysis") || "null"); } catch { return null; }
});
const [introProfile, setIntroProfile] = React.useState(null);

const handleAuth = ({ userId: uid, dreamSchool: school, userName: name, userGrade: grade, userCountry: country }) => {
  const tokenPayload = {
    sub: uid,
    dreamSchool: school,
    name,
    grade,
    country,
    exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 7 // 7 days
  };

  // encode fake JWT (same format your readStoredAuth expects)
  const base64 = btoa(JSON.stringify(tokenPayload));
  const fakeJWT = `header.${base64}.signature`;

  localStorage.setItem("pb_token", fakeJWT);

  setUserId(uid);
  setDreamSchool(school);
  setUserName(name || "");
  setUserGrade(grade || "");
  setUserCountry(country || "");
  setStreak(getOrUpdateStreak());
  setStep(0);
};

const handleLogout = () => {
  localStorage.removeItem("pb_token");
  localStorage.removeItem("pb_step");
  localStorage.removeItem("pb_analysis");
  setUserId(null);
  setDreamSchool("");
  setUserName("");
  setUserGrade("");
  setUserCountry("");
  setAnalysis(null);
  setCompleted(new Set());
  setStep(-1);
};

  const advance = () => {
    setCompleted(prev => new Set([...prev, step]));
    setStep(s => Math.min(s + 1, 4));
  };
  const jump = (n) => setStep(n);

  React.useEffect(() => {
    if (step >= 0) localStorage.setItem("pb_step", step);
  }, [step]);

  React.useEffect(() => {
    if (analysis) localStorage.setItem("pb_analysis", JSON.stringify(analysis));
  }, [analysis]);

  // Apply palette + typeset to CSS vars
  React.useEffect(() => {
    const r = document.documentElement.style;
    const [bg, ink, pop, hot] = t.palette;
    r.setProperty("--bg", bg);
    // bg-alt = subtle shift
    r.setProperty("--bg-alt", shift(bg, ink, 0.08));
    r.setProperty("--ink", ink);
    r.setProperty("--ink-soft", shift(ink, bg, 0.15));
    r.setProperty("--mute", shift(ink, bg, 0.45));
    r.setProperty("--line", shift(bg, ink, 0.18));
    r.setProperty("--pop", pop);
    r.setProperty("--hot", hot);

    const ts = TYPESETS[t.typeset];
    r.setProperty("--font-display", ts.display);
    r.setProperty("--font-body", ts.body);
    r.setProperty("--font-mono", ts.mono);
  }, [t.palette, t.typeset]);

  const mobile = t.device === "mobile";

  const screen = (() => {
    switch (step) {
      case -1: return <AuthScreen onAuth={handleAuth} />;
      case 0: return <OnboardScreen onNext={advance} streak={streak} />;
      case 1: return <IntroPromptScreen onNext={advance} userId={userId} dreamSchool={dreamSchool} setAnalysis={setAnalysis} />;
      case 2: return <AnalyzeScreen analysis={analysis} onDone={advance} />;
      case 3:
  return (
    <MirrorScreen
      onNext={advance}
      mobile={mobile}
      analysis={analysis}
    />
  );
      case 4: return <DoneScreen />;
      default: return null;
    }
  })();

  const crumb = step === -1
    ? "НЭВТРЭХ"
    : ["WELCOME", "ТАНИЛЦАХ", "ШИНЖИЛЖ БАЙНА…", "ФИТ ОНОО", "ДУУСЛАА"][step];

  const main = (
    <div className={`main ${mobile ? "m" : ""}`} key={step /* re-mount for fade-in */}>
      <AppHeader crumb={crumb} schoolLabel={dreamSchool ? dreamSchool.toUpperCase() : "PROMPT BANK"} streak={streak} />
      {screen}
    </div>
  );

  return (
    <>
      {mobile ? (
        <PhoneFrame>{main}</PhoneFrame>
      ) : (
        <div className="app-shell" style={step === -1 ? { gridTemplateColumns: "1fr" } : {}}>
          {step >= 0 && <Sidebar step={step} onJump={jump} completed={completed} userName={userName} userGrade={userGrade} userCountry={userCountry} streak={streak} onLogout={handleLogout} />}
          {main}
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Палитр" />
        <TweakColor label="Өнгөний багц"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Типографи" />
        <TweakRadio label="Pairing"
          value={t.typeset}
          options={["bricolage", "editorial", "bold"]}
          onChange={(v) => setTweak('typeset', v)} />

        <TweakSection label="Төхөөрөмж" />
        <TweakRadio label="View"
          value={t.device}
          options={["desktop", "mobile"]}
          onChange={(v) => setTweak('device', v)} />

        <TweakSection label="Алхам шалгах" />
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap: 5}}>
            {["01","02","03","04","05"].map((n, i) => (
              <button key={i}
                onClick={() => jump(i)}
                style={{
                  appearance:"none",
                  border:"1px solid var(--line)",
                  background: step === i ? t.palette[1] : "transparent",
                  color: step === i ? t.palette[2] : "var(--ink-soft)",
                  fontFamily: "JetBrains Mono, monospace",
                  fontSize: 11,
                  padding: "8px 0",
                  borderRadius: 8,
                  cursor: "default",
                }}>{n}</button>
            ))}
          </div>
      </TweaksPanel>
    </>
  );
}

// helper: linear-mix two hex colors by t (0..1)
function shift(a, b, t) {
  const A = hex(a), B = hex(b);
  const r = Math.round(A[0] * (1 - t) + B[0] * t);
  const g = Math.round(A[1] * (1 - t) + B[1] * t);
  const bl = Math.round(A[2] * (1 - t) + B[2] * t);
  return `rgb(${r},${g},${bl})`;
}
function hex(h) {
  const s = h.replace("#", "");
  return [parseInt(s.slice(0,2),16), parseInt(s.slice(2,4),16), parseInt(s.slice(4,6),16)];
}

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