// screens.jsx — all 6 screens for Prompt Bank

const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

// ===================== ONBOARDING =====================
function OnboardScreen({ onNext, streak = 1 }) {
  if (streak > 1) {
    return (
      <div className="onboard fade-in">
        <div className="onboard-left">
          <span className="stamp">🔥 {streak}-р өдөр · Streak үргэлжилж байна</span>
          <h1 className="huge">
            Буцаж <span className="ital">ирлээ</span>,<br/>
            <span className="pop">{streak}-р өдөр</span> эхэллээ.
          </h1>
          <p className="lead">
            Тасралтгүй байх нь авьяас биш — зан чанар.<br/>
            Өнөөдрийн хариулт чамайг өчигдрөөс илүү тодорхой харуулна.
          </p>
          <div className="row" style={{gap: 14}}>
            <button className="btn btn-primary" onClick={onNext}>
              Үргэлжлүүлэх <span className="arrow">→</span>
            </button>
          </div>
        </div>
        <div className="onboard-right">
          <div className="collage">
            <div className="blob" />
            <div className="ring" />
            <div className="stamp1">{streak} ӨДӨР ДАРААЛАН</div>
            <div className="stamp2">STREAK ХАДГАЛАГДЛАА</div>
            <div className="quote">
              "Буцаж ирсэн хүн л өөрийгөө мэдэж авдаг. Чи өнөөдөр дахин ирлээ."
              <span className="who">— PROMPT BANK · MANIFESTO</span>
            </div>
            <div className="badge">{streak}<br/>өдрийн<br/>streak</div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="onboard fade-in">
      <div className="onboard-left">
        <span className="stamp">Өөрийгөө таних аялал</span>
        <h1 className="huge">
          Чиний <span className="ital">мөрөөдөл</span>,<br/>
          бидний <span className="pop" style={{ color: 'white' }}>зорилго</span>.
        </h1>
        <p className="lead">
          100 өдрийн турш бичсэн хариултуудаас чинь чиний өргөдөл үүснэ.
          Яг одоо эхлэцгээе.
        </p>
        <div className="row" style={{gap: 14}}>
          <button className="btn btn-primary" onClick={onNext}>
            Эхлэцгээе <span className="arrow">→</span>
          </button>
        </div>
      </div>
      <div className="onboard-right">
        <div className="collage">
          <div className="blob" />
          <div className="ring" />
          <div className="stamp1">CLASS OF 2030</div>
          <div className="stamp2">+40% fit lift</div>
          <div className="quote">
            "Өөрийгөө хэн гэж бодож байна гэдгийг бус — үнэндээ хэн болохыг харахад туслана."
            <span className="who">— PROMPT BANK · MANIFESTO</span>
          </div>
          <div className="badge">Dream<br/>School<br/>Engine</div>
        </div>
      </div>
    </div>
  );
}

// ===================== INTRO PROMPT (prompt001) =====================
function IntroPromptScreen({ onNext, userId, dreamSchool, setAnalysis }) {
  const [val, setVal] = useS("");
  const [saving, setSaving] = useS(false);
  const [saveError, setSaveError] = useS("");
  const [introPrompt, setIntroPrompt] = useS(null);

  useE(() => {
    window.api.getIntroPrompt()
      .then(setIntroPrompt)
      .catch(() => setIntroPrompt({ question: "Сайн уу, танилцъя! Өөрийнхөө талаар Prompt Bank-д хэлж өгөөрэй (нэр, мөрөөдлийн сургууль, хобби г.м.)." }));
  }, []);

  const minLen = 40;
  const ready = val.trim().length >= minLen;

  const handleSubmit = async () => {
    if (!ready || saving) return;
    setSaving(true);
    setSaveError("");
    try {
      const result = await window.api.submitIntroAnswer({ userId, answer: val, dreamSchool: dreamSchool || "" });
      setAnalysis(result);
      onNext();
    } catch (e) {
      setSaveError("Алдаа гарлаа, дахин оролдоно уу.");
      setSaving(false);
    }
  };

  const starters = [
    "Миний нэр … , би …-д сурдаг",
    "Миний мөрөөдлийн сургууль …",
    "Надад хамгийн их таалагддаг зүйл …",
  ];

  return (
    <div className="prompt-wrap fade-in" style={{ display: "flex", flexDirection: "column" }}>
      <div className="prompt-meta">
        <span className="tag tag-pop">PROMPT 001</span>
        <span className="tag">ТАНИЛЦАХ</span>
        <span className="tag" style={{marginLeft:"auto"}}>~2 МИН</span>
      </div>

      <div style={{ flex: 1, display: "flex", alignItems: "center", background: "#E8EDF5", borderRadius: 16, padding: "20px 24px", marginBottom: 24 }}>
        <div>
          {introPrompt?.context && (
            <p style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.6, color: "var(--ink)", margin: "0 0 12px" }}>
              {introPrompt.context}
            </p>
          )}
          <p style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.6, color: "var(--ink)", margin: 0 }}>
            {introPrompt?.question || "Уншиж байна..."}
          </p>
        </div>
      </div>

      <div className="prompt-input-wrap">
        <textarea
          className="prompt-input"
          value={val}
          onChange={(e) => setVal(e.target.value)}
          placeholder="Жишээ нь: Миний нэр Батаа. Би MIT-д компьютер шинжлэх ухаан чиглэлээр сурахыг мөрөөддөг. Би код бичих, робот-д дуртай…"
          autoFocus
        />
        <div className="prompt-foot">
          <div className="prompt-tools">
            <span className="word-count" style={{fontSize:13, color:"var(--mute)"}}>
              {val.trim().length} тэмдэгт {ready ? "· ✓" : `· дахиад ${minLen - val.trim().length}`}
            </span>
          </div>
          <div className="row" style={{gap: 12, alignItems: "center"}}>
            {saveError && (
              <span style={{color:"var(--hot)", fontFamily:"var(--font-mono)", fontSize:12}}>⚠ {saveError}</span>
            )}
            <button
              className={`btn ${ready && !saving ? "btn-pop" : "btn-ghost"}`}
              onClick={handleSubmit}
              disabled={!ready || saving}
              style={{ opacity: ready && !saving ? 1 : 0.6 }}
            >
              {saving ? "Түр хүлээнэ үү…" : <>Илгээх <span className="arrow">→</span></>}
            </button>
          </div>
        </div>
      </div>

      <div className="starter-chips">
        {starters.map((s, i) => (
          <button key={i} className="starter-chip" onClick={() => setVal(v => v + (v ? " " : "") + s)}>
            {s}
          </button>
        ))}
      </div>
    </div>
  );
}

// ===================== PROMPT =====================
const PROMPTS = [
  "Чиний хамгийн том мөрөөдөлд дүн болон мөнгө саад болохгүй байсан бол чи юу хийх байсан бэ?",
  "Хамгийн сүүлд цаг алдан хийсэн зүйл чинь юу байсан бэ — хэн ч хэлж амжаагүй мөртлөө?",
  "Чи юунд бухимдсан бичил хэрэгцээг анзаарсан бэ? Хэн нь шийдэх ёстой вэ?",
];
const STARTERS = [
  "Хүүхэд байхдаа би...",
  "Намайг нэг зүйл л үнэхээр уурлуулдаг — тэр нь...",
  "Хэрэв 5 жилийн дараа сонин надаас ярилцлага авна гэвэл...",
];

function PromptScreen({
  onSubmit,
  mobile,
  school,
  userId,
  setAnalysis,
  todayPrompt,
  setTodayPrompt,
}) {
  const [val, setVal] = useS("");
  const [submitting, setSubmitting] = useS(false);
  const [submitError, setSubmitError] = useS("");

  useE(() => {
    async function loadPrompt() {
      const prompt = await window.api.getTodayPrompt();
      setTodayPrompt(prompt);
    }

    if (!todayPrompt) {
      loadPrompt();
    }
  }, []);

  const minLen = 80;
  const ready = val.trim().length >= minLen;
  const wc = val.trim().split(/\s+/).filter(Boolean).length;

  return (
    <div className="prompt-wrap fade-in">
      <div className="prompt-meta">
        <span className="tag tag-pop">DAY 14</span>
        <span className="tag">DEEP SELF-DISCOVERY</span>
        <span className="tag" style={{marginLeft:"auto"}}>~3 МИН</span>
      </div>

      <h1 className="prompt-q">
        <span className="underline">{todayPrompt?.question || "Уншиж байна..."}</span>
      </h1>

      <div className="prompt-input-wrap">
        <textarea
          className="prompt-input"
          value={val}
          onChange={(e) => setVal(e.target.value)}
          placeholder="Зүгээр л бичээд эхлээрэй. Хэн нэгэн харахгүй бас зөв буруу гэсэн зүйл байхгүй гэдгийг мартуузай. Энэ орон зай бол чинийх."
          autoFocus
        />
        <div className="prompt-foot">
          <div className="prompt-tools">
            <button className="tool-btn" title="Дуу хураах">●</button>
            <button className="tool-btn" title="Хавсаргах">+</button>
            <button className="tool-btn" title="Засах">✎</button>
          </div>
          <div className="row">
            <span className="word-count">
              {wc} ҮГ &nbsp;·&nbsp; {ready ? "✓" : `дахиад ${Math.max(0, minLen - val.trim().length)} үсэг`}
            </span>
            {submitError && (
              <span style={{color:"var(--hot)", fontFamily:"var(--font-mono)", fontSize:12}}>
                ⚠ {submitError}
              </span>
            )}
            <button className={`btn ${ready && todayPrompt && !submitting ? "btn-pop" : "btn-ghost"}`}
              onClick={async () => {
                if (!ready || !todayPrompt || submitting) return;
                setSubmitting(true);
                setSubmitError("");
                try {
                  const result = await window.api.submitAnswer({
                    promptId: todayPrompt.id,
                    answer: val,
                    dreamSchool: school,
                    userId,
                  });
                  setAnalysis(result);
                  onSubmit();
                } catch (e) {
                  setSubmitError("Алдаа гарлаа, дахин оролдоно уу.");
                  console.error("submitAnswer failed:", e);
                } finally {
                  setSubmitting(false);
                }
              }}
              disabled={!ready || !todayPrompt || submitting}
              style={{ opacity: ready && todayPrompt && !submitting ? 1 : 0.6 }}>
              {submitting ? "Илгээж байна…" : <>Илгээх <span className="arrow">↗</span></>}
            </button>
          </div>
        </div>
      </div>

      <div className="starter-chips">
        {STARTERS.map((s, i) => (
          <button key={i} className="starter-chip" onClick={() => setVal(v => v + (v ? " " : "") + s + " ")}>
            {s}
          </button>
        ))}
      </div>

      {!mobile && (
        <div className="prompt-side">
          <div className="card-soft">
            <div className="eyebrow" style={{marginBottom: 8}}>Яагаад энэ асуулт?</div>
            <div style={{fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)"}}>
              MIT-н admissions team чиний "<i>intrinsic motivation</i>"-г ил гаргахыг хайдаг.
              Энэ асуулт чамайг гаднын шалгуураас сална.
            </div>
          </div>
          <div className="card-soft">
            <div className="eyebrow" style={{marginBottom: 8}}>Чиний хариулт хадгалагдах нь</div>
            <div style={{fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)"}}>
              90 өдрийн турш цуглуулсан хариултууд чинь зөвхөн чамд харагдана. Анализ нь өргөдлийн essays-нд хувирна.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ===================== ANALYZING =====================
function AnalyzeScreen({ onDone }) {
  const steps = [
    "Prompt bank чиний хариултыг уншиж байна…",
    "Гол шинж чанаруудыг чинь тодорхойлж байна…",
    "Мөрөөдлийн сургуулийн чинь шалгуурт харьцуулж байна…",
    "Чамд тохирсон оноо өгч байна…",
  ];
  const [i, setI] = useS(0);
  useE(() => {
    if (i >= steps.length) { setTimeout(onDone, 600); return; }
    const t = setTimeout(() => setI(i + 1), 900);
    return () => clearTimeout(t);
  }, [i]);

  return (
    <div className="analyze fade-in">
      <div className="analyze-orb" />
      <h2>Чиний хариултыг шинжилж байна…</h2>
      <p>Чиний бичсэн үгс өнөөдөр чамайг илүү тодорхой харуулна.</p>
      <div className="analyze-steps">
        {steps.map((s, idx) => (
          <div key={idx} className={`an-step ${idx === i ? "active" : ""} ${idx < i ? "done" : ""}`}>
            <div className="ico">{idx < i ? "✓" : String(idx + 1).padStart(2, "0")}</div>
            <div>{s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===================== MIRROR =====================

function MirrorScreen({ onNext, mobile, analysis }) {
  const fitScore = analysis?.score ?? 0;

  if (!analysis) {
    return (
      <div className="fade-in" style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "60vh", textAlign: "center" }}>
        <div>
          <h2>Промптонд хариулаагүй байна.</h2>
          <p></p>
        </div>
      </div>
    );
  }

  const keywords      = analysis.keywords      ?? [];
  const weaknesses    = analysis.weaknesses    ?? [];
  const traits        = analysis.traits        ?? [];
  const personalityType = analysis.personalityType ?? null;

  return (
    <div className="fade-in" style={{ display: "flex", flexDirection: "column", alignItems: "center", minHeight: "60vh", gap: 28, textAlign: "center", paddingBottom: 40 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em", color: "var(--mute)", textTransform: "uppercase" }}>
        Мөрөөдлийн сургуульд тохирох оноо
      </div>

      <div style={{ position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <svg width={mobile ? 200 : 260} height={mobile ? 200 : 260} viewBox="0 0 280 280">
          <circle cx="140" cy="140" r="120" fill="none" stroke="var(--line)" strokeWidth="12" />
          <circle cx="140" cy="140" r="120" fill="none" stroke="var(--pop)" strokeWidth="12"
            strokeDasharray={`${2 * Math.PI * 120 * fitScore / 100} ${2 * Math.PI * 120 * (1 - fitScore / 100)}`}
            strokeDashoffset={2 * Math.PI * 120 * 0.25}
            strokeLinecap="round" />
        </svg>
        <div style={{ position: "absolute", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: mobile ? 52 : 64, fontWeight: 700, lineHeight: 1, color: "var(--ink)" }}>{fitScore}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--mute)" }}>/ 100</span>
        </div>
      </div>

      <div style={{ maxWidth: 420 }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px,3vw,28px)", fontWeight: 700, marginBottom: 8 }}>
          {fitScore >= 75 ? "Өөрийгөө маш сайн танин мэдсэн байна!" : fitScore >= 50 ? "Өөрийгөө таних аялал чинь дуусаагүй байна л гэсэн үг шүү!" : "Энэ бол чиний өөрийгөө таних аяллын дөнгөж эхлэл нь юм шүү!"}
        </h2>
        <p style={{ color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
          {fitScore >= 75
            ? "Чи мөрөөдлийн сургуулийнхаа хайдаг сурагч мөн гэдэгт Prompt bank итгэлтэй байна."
            : "Өөрийгөө илүү таньж мэдэх шаардлагатай байгаа тул маргааш дахин ирэхээ мартуузай."}
        </p>
      </div>

      <div style={{ width: "100%", maxWidth: 560, display: "flex", flexDirection: "column", gap: 16, textAlign: "left" }}>

        {personalityType && (
          <div className="card-soft" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--mute)", textTransform: "uppercase", whiteSpace: "nowrap" }}>Зан чанарын төрөл</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, color: "var(--pop)" }}>{personalityType}</div>
          </div>
        )}

        {keywords.length > 0 && (
          <div className="card-soft">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--mute)", textTransform: "uppercase", marginBottom: 10 }}>Түлхүүр үгс</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {keywords.map((kw, i) => (
                <span key={i} style={{ fontFamily: "var(--font-mono)", fontSize: 12, padding: "4px 10px", borderRadius: 20, background: "var(--bg-alt)", border: "1px solid var(--line)", color: "var(--ink)" }}>{kw}</span>
              ))}
            </div>
          </div>
        )}

        {traits.length > 0 && (
          <div className="card-soft">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--mute)", textTransform: "uppercase", marginBottom: 10 }}>Шинж чанарууд</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {traits.map((tr, i) => (
                <span key={i} style={{ fontFamily: "var(--font-mono)", fontSize: 12, padding: "4px 10px", borderRadius: 20, background: "var(--bg-alt)", border: "1px solid var(--pop)", color: "var(--pop)" }}>{tr}</span>
              ))}
            </div>
          </div>
        )}

        {weaknesses.length > 0 && (
          <div className="card-soft">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--mute)", textTransform: "uppercase", marginBottom: 10 }}>Хөгжүүлэх талууд</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {weaknesses.map((w, i) => (
                <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.5 }}>
                  <span style={{ color: "var(--hot)", fontFamily: "var(--font-mono)", fontSize: 11, marginTop: 2, flexShrink: 0 }}>△</span>
                  {w}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--mute)", letterSpacing: "0.06em", margin: 0 }}>
          ЧИ ӨНӨӨДРИЙН ПРОМПТДОО АМЖИЛТТАЙ ХАРИУЛЛАА!
        </p>
        <button className="btn btn-pop" onClick={onNext}>
          Дуусгах <span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

// ===================== DONE =====================
function DoneScreen() {
  return (
    <div className="fade-in" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "60vh", gap: 24, textAlign: "center" }}>
      <div style={{ fontSize: 64, color: "var(--pop)" }}>✓</div>
      <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px,4vw,40px)", fontWeight: 700, letterSpacing: "-0.02em" }}>
        Чиний өнөөдрийн хариулт амжилттай хадгалагдлаа.
      </h1>
      <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.6, maxWidth: 360 }}>
        Маргааш шинэ промптоор чиний өөрийгөө таних аялал үргэлжлэнэ.<br/>Буцаж ирэхээ мартуузай.
      </p>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--mute)", marginTop: 4 }}>
        STREAK ҮРГЭЛЖИЛЖ БАЙНА
      </div>
    </div>
  );
}

// ===================== AUTOFILL =====================
const ESSAY_CHUNKS = [
  { text: "Зургаан настайдаа би өвөөгийн хуучин радио задалж үзсэн нь " },
  { text: "одоо хүртэл буцаагаад угсарч чадаагүй", className: "hl-soft" },
  { text: ". Гэхдээ тэр өдөр л би ойлгосон — " },
  { text: "юм нурахдаа л өөрийгөө илчилдэг", className: "hl" },
  { text: ".\n\nХоёр жилийн өмнө манай сум 14 цаг цахилгаангүй болоход ээж минь хүнсний агуулахаа алдсан. Тэр шөнө би " },
  { text: "ESP32 + LM35-аар хэт хямд температур мэдрэгч", className: "hl" },
  { text: " угсарч, утсан дээр sms явуулдаг болгож өгсөн. Хоёр сарын дотор сумын 11 өрх ашиглаж эхэлсэн.\n\nMIT надад чухал нь " },
  { text: "энэ зөв шийдэл байсан гэж зааж өгөх биш", className: "hl-soft" },
  { text: " — миний дараагийн алдаа аль чигт байхыг хамт олж харах хүмүүс байгаа учраас юм." },
];

function AutoFillScreen({ onNext, mobile }) {
  const [phase, setPhase] = useS(0); // 0..4
  const [essayDone, setEssayDone] = useS(false);

  // simple sequence
  useE(() => {
    if (phase >= 4) return;
    const delays = [600, 700, 700, 1200];
    const t = setTimeout(() => setPhase(phase + 1), delays[phase]);
    return () => clearTimeout(t);
  }, [phase]);

  return (
    <div className="autofill fade-in">
      <div className="application-doc">
        <div className="doc-head">
          <div>
            <div className="doc-title">MIT Undergraduate Application</div>
            <div className="doc-sub">2026 EARLY ACTION · DRAFT v3</div>
          </div>
          <span className="tag tag-pop">● AUTO-FILLING</span>
        </div>

        <div className="doc-section">
          <div className="field-label">
            ҮНДСЭН МЭДЭЭЛЭЛ <span className="ai">AI</span>
          </div>
          <div className="field-value">
            Boloryn Bolor-Erdene · 12-р анги · School #23, Ulaanbaatar, Mongolia · GPA 3.94
          </div>
        </div>

        <div className="doc-section">
          <div className="field-label">
            INTENDED MAJOR <span className="ai">AI ANGLE</span>
          </div>
          <div className="field-value">
            6-3: Computer Science &amp; Engineering — <span className="hl-soft">Embedded systems for resource-constrained communities</span>
          </div>
        </div>

        <div className="doc-section">
          <div className="field-label">
            EXTRACURRICULARS — TOP 5 <span className="ai">RE-ORDERED BY AI</span>
          </div>
          <div className="field-value" style={{fontSize: 15}}>
            <div>1. <span className="hl">"Сум-ын Сэрвэр"</span> — DIY температур мэдрэгч, 11 өрх (2024–)</div>
            <div>2. School robotics club, captain (2023–)</div>
            <div>3. Open-source contributor — Tasker MN, 4.1k stars</div>
            <div>4. Mongolian National Olympiad in Informatics — bronze 2024</div>
            <div>5. Volunteer code tutor, 6 children, 8 months</div>
          </div>
        </div>

        <div className={`doc-section ${phase >= 3 && !essayDone ? "typing" : ""}`}>
          <div className="field-label">
            ESSAY · 250 ҮГ <span className="ai">DRAFTING NOW</span>
          </div>
          <div className="field-value" style={{whiteSpace: "pre-wrap", fontFamily:"Instrument Serif, serif", fontSize: 17, lineHeight: 1.55}}>
            {phase >= 3 ? (
              <Typewriter chunks={ESSAY_CHUNKS} speed={mobile ? 14 : 12} onDone={() => setEssayDone(true)} />
            ) : <span style={{color:"var(--mute)"}}>—</span>}
          </div>
        </div>

        {essayDone && (
          <div className="row fade-in" style={{marginTop: 24, justifyContent:"flex-end", gap: 12}}>
            <button className="btn btn-ghost">Хянах <span className="arrow">⌕</span></button>
            <button className="btn btn-pop" onClick={onNext}>Дашбоард руу <span className="arrow">→</span></button>
          </div>
        )}
      </div>

      <div className="angle-card">
        <div className="eyebrow">★ STRATEGIC ANGLE</div>
        <h3>Strategic Builder</h3>
        <div className="angle-name">"The kid who fixes the village."</div>
        <p>
          MIT 30,000+ өргөдлөөс чамайг ялгахын тулд бид <b>"orphaned use case"</b> өнцгөөр явъя:
          том техникийг жижиг хүн тус болж байгаа газарт шилжүүлэх.
        </p>
        <div className="angle-list">
          <div className="angle-item">
            <span className="num">01</span>
            <div>Радио задалсан түүхийг гол нээлт болгож, тэр л instinct өнөөг болтол үргэлжилж буйг харуулна.</div>
          </div>
          <div className="angle-item">
            <span className="num">02</span>
            <div>"Сум-ын Сэрвэр"-г №1 болгож, 11 өрхийн тоог тодотгоно — scale биш, real impact чухал.</div>
          </div>
          <div className="angle-item">
            <span className="num">03</span>
            <div>Lead-ийн дутагдлыг "хамт олныг олох хэрэгтэй" гэсэн openness-р эргүүлэх.</div>
          </div>
        </div>
        <div className="angle-progress">
          <span>Бөглөгдсөн</span>
          <span><b>83%</b> · 12-н 14</span>
        </div>
      </div>
    </div>
  );
}

// ===================== DASHBOARD =====================
function DashboardScreen({ onPrompt, mobile, analysis, userName }) {
  const safeAnalysis = {
    generalReadinessScore: analysis?.generalReadinessScore ?? 50,
    dreamSchoolFitScore:   analysis?.dreamSchoolFitScore   ?? 45,
  };

  const rings = [
    { label: "Build",       sub: "Хэт сайн",   pct: analysis?.radarScores?.Build       ?? 92, hot: false },
    { label: "Vision",      sub: "Тогтвортой",  pct: analysis?.radarScores?.Vision      ?? 88, hot: false },
    { label: "Lead",        sub: "Анзаарал",    pct: analysis?.radarScores?.Lead        ?? 58, hot: (analysis?.radarScores?.Lead ?? 58) < 70 },
    { label: "Discipline",  sub: "Сайн",        pct: analysis?.radarScores?.Discipline  ?? 82, hot: false },
  ];
  const [added, setAdded] = useS(new Set());
  const toggle = (id) => setAdded(prev => {
    const n = new Set(prev);
    n.has(id) ? n.delete(id) : n.add(id);
    return n;
  });

  const ecs = [
    { id: "code4good", lvl: "high", em: "⚒", name: "Code for Good · Орон нутгийн tutor", meta: "+18% MIT fit · 2 цаг/долоо хоног · Ulaanbaatar" },
    { id: "summit",    lvl: "high", em: "▲", name: "MIT Launch Summer Pre-Application", meta: "+12% MIT fit · 4 долоо хоног · онлайн" },
    { id: "iot",       lvl: "med",  em: "◉", name: "Сумын IoT Project · v2 хувилбар", meta: "+9% impact angle · 3 сар · open-source" },
    { id: "writing",   lvl: "med",  em: "✎", name: "Долоо хоног бүр essays драфт", meta: "+7% narrative фит · 1 цаг/долоо" },
    { id: "speak",     lvl: "low",  em: "ø", name: "School TEDx talk нэр өгөх", meta: "+4% lead тал · нэг удаа" },
  ];

  const day = new Date().getDay();
  const week = ["Д","М","Л","Х","Б","Б","Н"];

  return (
    <div className="dash fade-in">
      <div>
        <h1 className="greet">Сайн уу, <span className="ital">{userName || "—"}</span>.</h1>
        <p className="dash-sub">Өнөөдөр чамайг 1 промпт + 2 жижиг алхам хүлээж байна.</p>

        <div className="dash-hero">
          <div>
            <div className="label">● ӨНӨӨДРИЙН ПРОМПТ · 5 МИН</div>
            <h2>"Чи хамгийн сүүлд юу хийхдээ цаг алдсанаа мэдэрсэнгүй?"</h2>
            <p>Энэ хариулт чиний essays-ийн оршил болж магадгүй.</p>
          </div>
          <button className="btn btn-pop cta" onClick={onPrompt}>
            Хариулах <span className="arrow">→</span>
          </button>
        </div>

        <div className="metrics">
          <div className="metric">
            <div className="lbl">MIT FIT SCORE</div>
            <div className="val">{safeAnalysis.dreamSchoolFitScore}<small style={{fontSize:18, color:"var(--mute)"}}>%</small></div>
            <div className="delta up">▲ +12% сүүлийн 14 өдөрт</div>
          </div>
          <div className="metric">
            <div className="lbl">ESSAY DRAFTS</div>
            <div className="val">3<small style={{fontSize:18, color:"var(--mute)"}}>/5</small></div>
            <div className="delta">2 хүлээгдэж байна</div>
          </div>
          <div className="metric">
            <div className="lbl">ҮГИЙН САН</div>
            <div className="val">2,341</div>
            <div className="delta">14 хариулт · ~167 үг/өдөр</div>
          </div>
        </div>

        <div className="dash-list">
          <h3>
            Зөвлөж буй үйл ажиллагаа
            <span className="more">CV-Г 5 АЛХМААР ӨӨРЧЛӨХ</span>
          </h3>
          {ecs.map(e => (
            <div key={e.id} className={`ec-row ${e.lvl}`}>
              <div className="ico">{e.em}</div>
              <div>
                <div className="name">{e.name}</div>
                <div className="meta">
                  <span className="lift">{e.meta.split(" · ")[0]}</span>
                  &nbsp;·&nbsp; {e.meta.split(" · ").slice(1).join(" · ")}
                </div>
              </div>
              <button className={`add ${added.has(e.id) ? "added" : ""}`} onClick={() => toggle(e.id)}>
                {added.has(e.id) ? "✓" : "+"}
              </button>
            </div>
          ))}
        </div>
      </div>

      <div className="dash-side">
        <div className="school-progress">
          <div className="hd">
            <div className="crest">M</div>
            <div>
              <div className="who">MIT</div>
              <div className="where">CAMBRIDGE, MA · 6-3 CS &amp; ENG</div>
            </div>
          </div>
          <div className="progress-rings">
            {rings.map(r => <RingItem key={r.label} pct={r.pct} label={r.label} sub={r.sub} hot={r.hot} />)}
          </div>
          <div className="fit-overall">
            <span className="lbl">ОВЕРАЛЛ ФИТ</span>
            <span className="num">{safeAnalysis.generalReadinessScore}<small>/100</small></span>
          </div>
        </div>

        <div className="streak-card">
          <div className="lbl">СТРИК</div>
          <div className="num">14<small> өдөр дараалан</small></div>
          <div className="streak-week">
            {week.map((d, i) => (
              <div key={i} className={`day ${i < day ? "on" : ""} ${i === day ? "today" : ""}`}>{d}</div>
            ))}
          </div>
        </div>

        <div className="card-soft">
          <div className="eyebrow" style={{marginBottom:6}}>★ Чиний цитат · Day 9-өөс</div>
          <div style={{fontFamily:"Instrument Serif, serif", fontStyle:"italic", fontSize: 19, lineHeight: 1.35}}>
            "Хамгийн их зүтгэдэг үе чинь юм нурдаг үе биш — нөгөө хүнд тусалж байгаагаа л мэдэрсэн үе."
          </div>
          <div style={{fontFamily:"var(--font-mono)", fontSize: 11, color: "var(--mute)", marginTop: 10}}>
            ESSAY MATERIAL · USE IT
          </div>
        </div>
      </div>
    </div>
  );
}

function RingItem({ pct, label, sub, hot }) {
  const r = 18, c = 2 * Math.PI * r;
  const dash = c * (pct / 100);
  return (
    <div className="ring-item">
      <svg width="44" height="44" viewBox="0 0 44 44">
        <circle cx="22" cy="22" r={r} fill="none" stroke="var(--line)" strokeWidth="4" />
        <circle cx="22" cy="22" r={r} fill="none"
          stroke={hot ? "var(--hot)" : "var(--ink)"} strokeWidth="4"
          strokeDasharray={`${dash} ${c - dash}`}
          strokeDashoffset={c * 0.25}
          strokeLinecap="round"
          transform="rotate(-90 22 22)" />
        <text x="22" y="25" textAnchor="middle"
          fontFamily="JetBrains Mono, monospace" fontSize="11" fontWeight="700"
          fill={hot ? "var(--hot)" : "var(--ink)"}>{pct}</text>
      </svg>
      <div className="label">
        <b>{label}</b>
        <span className="sub">{sub}</span>
      </div>
    </div>
  );
}

// ===================== AUTH =====================
function AuthScreen({ onAuth }) {
  const [mode, setMode] = useS("login"); // "login" | "register"
  const [name, setName] = useS("");
  const [email, setEmail] = useS("");
  const [password, setPassword] = useS("");
  const [dreamSchool, setDreamSchool] = useS("");
  const [loading, setLoading] = useS(false);
  const [error, setError] = useS("");

  const switchMode = (m) => { setMode(m); setError(""); };

  const handleSubmit = async () => {
    if (loading) return;
    setError("");
    setLoading(true);
    const isReg = mode === "register";
    try {
      const data = isReg
        ? await window.api.register({ name, email, password, dreamSchool })
        : await window.api.login({ email, password });

      const token = data.access_token || data.token;
      const raw = token.split(".")[1];
      const base64 = raw.replace(/-/g, "+").replace(/_/g, "/");
      const padded = base64 + "===".slice(0, (4 - base64.length % 4) % 4);
      const payload = JSON.parse(atob(padded));

      const userId = payload.sub || payload.userId || payload.id || null;
      const school = payload.dreamSchool || (isReg ? dreamSchool : "");

      localStorage.setItem("pb_token", token);
      onAuth({ token, userId, dreamSchool: school, userName: payload.name || "", userGrade: payload.grade || "", userCountry: payload.country || "" });
    } catch (e) {
      setError(e.message || "Алдаа гарлаа, дахин оролдоно уу.");
    } finally {
      setLoading(false);
    }
  };

  const isReg = mode === "register";
  const canSubmit = isReg
    ? name && email && password && dreamSchool
    : email && password;

  return (
    <div className="auth-wrap fade-in">
      <div className="auth-card">
        <div style={{ textAlign: "center", marginBottom: 4 }}>
          <img src="Promptbank.png" alt="Promptbank logo" style={{ height: 64, objectFit: "contain" }} />
          <p style={{ margin: "10px 0 0", fontSize: 14, color: "var(--mute)", fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>
            100 ӨДРИЙН АЯЛАЛ ЭХЛЭХ
          </p>
        </div>

        <div className="auth-toggle">
          <button className={`auth-tab ${mode === "login" ? "active" : ""}`} onClick={() => switchMode("login")}>
            Нэвтрэх
          </button>
          <button className={`auth-tab ${mode === "register" ? "active" : ""}`} onClick={() => switchMode("register")}>
            Бүртгүүлэх
          </button>
        </div>

        <div className="auth-fields">
          {isReg && (
            <div className="auth-field">
              <label className="auth-label">Нэр</label>
              <input className="auth-input" type="text" value={name}
                onChange={e => setName(e.target.value)}
                placeholder="Болор-Эрдэнэ" autoFocus />
            </div>
          )}
          <div className="auth-field">
            <label className="auth-label">И-мэйл</label>
            <input className="auth-input" type="email" value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder="bolod@example.com"
              autoFocus={!isReg} />
          </div>
          <div className="auth-field">
            <label className="auth-label">Нууц үг</label>
            <input className="auth-input" type="password" value={password}
              onChange={e => setPassword(e.target.value)}
              placeholder="••••••••" />
          </div>
          {isReg && (
            <div className="auth-field">
              <label className="auth-label">Мөрөөдлийн сургууль</label>
              <input className="auth-input" type="text" value={dreamSchool}
                onChange={e => setDreamSchool(e.target.value)}
                placeholder="mit, stanford, harvard…" />
            </div>
          )}
        </div>

        {error && <div className="auth-error">{error}</div>}

        <button
          className={`btn ${canSubmit && !loading ? "btn-primary" : "btn-ghost"}`}
          onClick={handleSubmit}
          disabled={!canSubmit || loading}
          style={{ width: "100%", justifyContent: "center", opacity: canSubmit && !loading ? 1 : 0.6 }}
        >
          {loading
            ? "Уншиж байна…"
            : isReg
              ? <>Бүртгүүлэх <span className="arrow">→</span></>
              : <>Нэвтрэх <span className="arrow">→</span></>}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { IntroPromptScreen, OnboardScreen, PromptScreen, AnalyzeScreen, MirrorScreen, AutoFillScreen, DashboardScreen, AuthScreen, DoneScreen });