/* ============================================================
   ZENITH — Authentication surfaces
   · LoginMain  : students & teachers (segmented toggle), root path
   · LoginAdmin : separate admin console, reached via #admin
   Pure front-end POC — any credentials sign you in.
   ============================================================ */

function BrandPanel({ lang }) {
  const t = (en, si) => tx(lang, en, si);
  const ticks = [
    t("Sit full A/L papers in a real exam-hall environment", "සැබෑ විභාග ශාලා පරිසරයක පත්‍ර ලියන්න"),
    t("Get a predicted Z-Score with island & district rank", "දිවයින් හා දිස්ත්‍රික් ශ්‍රේණිය සමඟ පුරෝකථන Z අගයක්"),
    t("Teacher-marked papers, released every Saturday", "ගුරු ලකුණු කළ පත්‍ර, සෑම සෙනසුරාදාම නිකුත් වේ"),
  ];
  return (
    <div className="auth__brand">
      <div className="auth__rings" aria-hidden="true">
        <span></span><span></span><span></span>
      </div>
      <div style={{ position: "relative", zIndex: 1 }}>
        <Logo size={30} />
      </div>
      <div style={{ position: "relative", zIndex: 1, marginTop: "auto" }}>
        <p className="eyebrow" style={{ color: "var(--cyan)" }}>{t("A/L mock-exam & Z-Score platform", "උ.පෙ මොක් විභාග හා Z අගය වේදිකාව")}</p>
        <h1 style={{ fontSize: 40, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.08, margin: "10px 0 16px", color: "#fff" }}>
          {t("Sit. Get marked.", "ලියන්න. ලකුණු ලබන්න.")}<br />{t("Know your Z-Score.", "ඔබේ Z අගය දැනගන්න.")}
        </h1>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 380 }}>
          {ticks.map((tk, i) => (
            <div key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
              <i className="ph ph-check-circle" style={{ fontSize: 21, color: "var(--green)", flexShrink: 0 }}></i>
              <span style={{ fontSize: 14.5, color: "#C9D6EC", lineHeight: 1.45 }}>{tk}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: "relative", zIndex: 1, marginTop: "auto", fontSize: 12.5, color: "#8FA2C4" }}>
        Open Ai Pvt Ltd · Colombo
      </div>
    </div>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="langtog">
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
      <button className={lang === "si" ? "on" : ""} onClick={() => setLang("si")}>සිංහල</button>
    </div>
  );
}

/* "or" divider */
function OrDivider({ label }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14, margin: "18px 0" }}>
      <div style={{ flex: 1, height: 1, background: "var(--border)" }}></div>
      <span style={{ fontSize: 12, color: "var(--fg-muted)", fontWeight: 600 }}>{label}</span>
      <div style={{ flex: 1, height: 1, background: "var(--border)" }}></div>
    </div>
  );
}

/* Google sign-in button (official multi-colour mark) */
function GoogleButton({ label, onClick }) {
  return (
    <button type="button" onClick={onClick}
      style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 12,
        border: "1.5px solid var(--border-strong)", background: "#fff", borderRadius: "var(--r-pill)",
        padding: "13px 20px", fontSize: 14.5, fontWeight: 600, color: "var(--fg)", cursor: "pointer", transition: ".14s" }}
      onMouseEnter={e => { e.currentTarget.style.background = "var(--grey-5)"; e.currentTarget.style.borderColor = "var(--navy)"; }}
      onMouseLeave={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.borderColor = "var(--border-strong)"; }}>
      <svg width="19" height="19" viewBox="0 0 48 48" aria-hidden="true">
        <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
        <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
        <path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/>
        <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/>
      </svg>
      {label}
    </button>
  );
}

function AuthField({ label, type = "text", value, onChange, placeholder, icon }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)", display: "block", marginBottom: 7 }}>{label}</span>
      <div style={{ position: "relative" }}>
        <i className={`ph ph-${icon}`} style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", fontSize: 19, color: "var(--fg-muted)" }}></i>
        <input type={type} value={value} onChange={onChange} placeholder={placeholder}
          style={{ width: "100%", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)", padding: "13px 14px 13px 42px", fontSize: 15, outline: "none", fontFamily: "var(--font)", transition: ".14s" }}
          onFocus={e => { e.target.style.borderColor = "var(--blue)"; e.target.style.boxShadow = "0 0 0 3px rgba(20,86,199,.14)"; }}
          onBlur={e => { e.target.style.borderColor = "var(--border)"; e.target.style.boxShadow = "none"; }} />
      </div>
    </label>
  );
}

/* ---------- Student & Teacher login ---------- */
function LoginMain({ lang, setLang, onLogin, onAdmin, onSignup }) {
  const t = (en, si) => tx(lang, en, si);
  const [role, setRole] = useState("student");
  const [id, setId] = useState("tharindu@email.com");
  const [pw, setPw] = useState("demo1234");

  const switchRole = r => { setRole(r); setId(r === "student" ? "tharindu@email.com" : "r.wijesinghe@openai.lk"); };

  return (
    <div className="auth">
      <BrandPanel lang={lang} />
      <div className="auth__form">
        <div style={{ position: "absolute", top: 24, right: 28 }}><LangToggle lang={lang} setLang={setLang} /></div>
        <div className="auth__formInner zfade">
          <div className="auth__logo-m"><Logo size={26} light={false} /></div>
          <h2 style={{ fontSize: 27, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 6px" }}>{t("Welcome back", "නැවත සාදරයෙන් පිළිගනිමු")}</h2>
          <p style={{ margin: "0 0 24px", color: "var(--fg-muted)", fontSize: 15 }}>{t("Sign in to continue your A/L preparation.", "ඔබේ උ.පෙ සූදානම දිගටම කරගෙන යාමට පිවිසෙන්න.")}</p>

          {/* role toggle */}
          <div className="auth__roles">
            <button className={role === "student" ? "on" : ""} onClick={() => switchRole("student")}>
              <i className="ph ph-student"></i>{t("Student", "සිසුවා")}
            </button>
            <button className={role === "teacher" ? "on" : ""} onClick={() => switchRole("teacher")}>
              <i className="ph ph-chalkboard-teacher"></i>{t("Teacher", "ගුරුවරයා")}
            </button>
          </div>

          <form onSubmit={e => { e.preventDefault(); onLogin(role, id); }} style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 22 }}>
            <AuthField
              label={t("Email address", "විද්‍යුත් තැපෑල")}
              icon="envelope-simple"
              value={id} onChange={e => setId(e.target.value)}
              placeholder={role === "student" ? "you@email.com" : "you@institute.lk"} />
            <AuthField label={t("Password", "මුරපදය")} icon="lock-simple" type="password"
              value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••" />

            <div className="between" style={{ marginTop: -4 }}>
              <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--fg-muted)", cursor: "pointer" }}>
                <input type="checkbox" defaultChecked style={{ width: 16, height: 16, accentColor: "var(--blue)" }} />{t("Remember me", "මතක තබාගන්න")}
              </label>
              <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 13.5, color: "var(--blue)", fontWeight: 600, textDecoration: "none" }}>{t("Forgot password?", "මුරපදය අමතකද?")}</a>
            </div>

            <Btn kind="primary" size="lg" iconRight="arrow-right" type="submit" style={{ width: "100%", marginTop: 4 }}>
              {t("Sign in", "පිවිසෙන්න")}
            </Btn>
          </form>

          <OrDivider label={t("or", "නැතහොත්")} />
          <GoogleButton label={t("Continue with Google", "Google සමඟ ඉදිරියට")} onClick={() => onLogin(role, id)} />

          <p style={{ fontSize: 12, color: "var(--fg-muted)", textAlign: "center", margin: "14px 0 0" }}>
            <i className="ph ph-info" style={{ verticalAlign: "-2px", marginRight: 5 }}></i>{t("Demo — any credentials work.", "ආදර්ශනය — ඕනෑම අක්තපත්‍රයක් ක්‍රියා කරයි.")}
          </p>

          <div style={{ borderTop: "1px solid var(--border)", margin: "22px 0 0", paddingTop: 18, display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 13.5, color: "var(--fg-muted)" }}>
              {t("New student?", "නව සිසුවෙක්ද?")} <button onClick={onSignup} style={{ border: "none", background: "none", color: "var(--blue)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", padding: 0 }}>{t("Create an account", "ගිණුමක් සාදන්න")}</button>
            </span>
            <button onClick={onAdmin} style={{ display: "inline-flex", alignItems: "center", gap: 7, border: "none", background: "none", color: "var(--navy)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", padding: 0 }}>
              <i className="ph ph-shield-check" style={{ fontSize: 17 }}></i>{t("Admin console", "පරිපාලක කොන්සෝලය")}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Admin console login (separate path) ---------- */
function LoginAdmin({ lang, setLang, onLogin, onBack }) {
  const t = (en, si) => tx(lang, en, si);
  const [email, setEmail] = useState("admin@openai.lk");
  const [pw, setPw] = useState("demo1234");
  const [code, setCode] = useState("");

  return (
    <div className="authadmin">
      <div className="authadmin__grid" aria-hidden="true"></div>
      <div style={{ position: "absolute", top: 24, right: 28, zIndex: 2 }}><LangToggle lang={lang} setLang={setLang} /></div>

      <div className="authadmin__card zfade">
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, background: "var(--grad-brand)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <i className="ph ph-shield-check" style={{ fontSize: 24, color: "#fff" }}></i>
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Logo size={22} />
            </div>
            <p style={{ margin: "3px 0 0", fontSize: 12.5, color: "var(--fg-on-dark-muted)", letterSpacing: ".02em" }}>{t("Administrator Console", "පරිපාලක කොන්සෝලය")}</p>
          </div>
        </div>

        <div style={{ height: 1, background: "rgba(255,255,255,.1)", margin: "20px 0 22px" }}></div>

        <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 4px", color: "#fff" }}>{t("Restricted sign-in", "සීමිත පිවිසුම")}</h2>
        <p style={{ margin: "0 0 22px", fontSize: 13.5, color: "var(--fg-on-dark-muted)" }}>{t("Open Ai Pvt Ltd · institute administrators only", "Open Ai Pvt Ltd · ආයතන පරිපාලකයින්ට පමණි")}</p>

        <form onSubmit={e => { e.preventDefault(); onLogin(); }} style={{ display: "flex", flexDirection: "column", gap: 15 }}>
          <AdminField label={t("Admin email", "පරිපාලක විද්‍යුත් තැපෑල")} icon="envelope-simple" value={email} onChange={e => setEmail(e.target.value)} />
          <AdminField label={t("Password", "මුරපදය")} icon="lock-simple" type="password" value={pw} onChange={e => setPw(e.target.value)} />
          <AdminField label={t("2FA access code", "2FA ප්‍රවේශ කේතය")} icon="device-mobile" value={code} onChange={e => setCode(e.target.value)} placeholder="123 456" />

          <button type="submit" className="btn btn--lg" style={{ width: "100%", marginTop: 6, background: "var(--grad-brand)", color: "#fff" }}>
            <i className="ph ph-sign-in"></i>{t("Sign in to console", "කොන්සෝලයට පිවිසෙන්න")}
          </button>
        </form>

        <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 18, fontSize: 12, color: "var(--fg-on-dark-muted)" }}>
          <i className="ph ph-warning" style={{ fontSize: 16, color: "var(--amber)" }}></i>
          {t("Restricted access. All activity is logged.", "සීමිත ප්‍රවේශය. සියලු ක්‍රියාකාරකම් සටහන් වේ.")}
        </div>

        <button onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: 7, border: "none", background: "none", color: "#C9D6EC", fontSize: 13.5, fontWeight: 600, cursor: "pointer", padding: 0, marginTop: 20 }}>
          <i className="ph ph-arrow-left" style={{ fontSize: 16 }}></i>{t("Student & teacher login", "සිසු හා ගුරු පිවිසුම")}
        </button>
      </div>
    </div>
  );
}

function AdminField({ label, type = "text", value, onChange, placeholder, icon }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-on-dark-muted)", display: "block", marginBottom: 6 }}>{label}</span>
      <div style={{ position: "relative" }}>
        <i className={`ph ph-${icon}`} style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", fontSize: 18, color: "#7d8db0" }}></i>
        <input type={type} value={value} onChange={onChange} placeholder={placeholder}
          style={{ width: "100%", border: "1.5px solid rgba(255,255,255,.16)", background: "rgba(255,255,255,.05)", color: "#fff", borderRadius: "var(--r-sm)", padding: "12px 14px 12px 40px", fontSize: 14.5, outline: "none", fontFamily: "var(--font)", transition: ".14s" }}
          onFocus={e => { e.target.style.borderColor = "var(--cyan)"; e.target.style.background = "rgba(255,255,255,.09)"; }}
          onBlur={e => { e.target.style.borderColor = "rgba(255,255,255,.16)"; e.target.style.background = "rgba(255,255,255,.05)"; }} />
      </div>
    </label>
  );
}

/* ---------- Student signup ----------
   Catalog-driven: streams/subjects/provinces/schools come from GET /api/catalog
   (admin-enabled entries only). Subjects unlock after a stream is picked and
   exactly 3 must be chosen. Creates a REAL student via POST /api/signup. */
function SignupStudent({ lang, setLang, onCreate, onBack, onboarding }) {
  const t = (en, si) => tx(lang, en, si);
  const [cat, setCat] = useState(null);       // catalog payload
  const [catErr, setCatErr] = useState(false);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);       // bilingual submit error text
  const [f, setF] = useState({
    name: "", email: "", school: "", schoolOther: "", province: "western",
    stream: "", subjects: [], medium: "English", pw: "", confirm: "", terms: true,
  });
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));

  const loadCatalog = () => {
    setCatErr(false);
    window.ZAPI.getCatalog()
      .then(c => setCat(c))
      .catch(e => { console.error("[islandrank] catalog load failed", e); setCatErr(true); });
  };
  useEffect(loadCatalog, []);

  const streamObj = cat && cat.streams.find(s => s.code === f.stream);
  const toggleSubject = code => {
    setErr(null);
    setF(prev => {
      const has = prev.subjects.includes(code);
      if (!has && prev.subjects.length >= 3) return prev;   // hard cap at 3
      return { ...prev, subjects: has ? prev.subjects.filter(c => c !== code) : [...prev.subjects, code] };
    });
  };

  const DETAIL_MSG = {
    email_exists: ["This email is already registered.", "මෙම විද්‍යුත් තැපෑල දැනටමත් ලියාපදිංචියි."],
    valid_email_required: ["Enter a valid email address.", "වලංගු විද්‍යුත් තැපෑලක් ඇතුළත් කරන්න."],
    full_name_required: ["Enter your full name.", "ඔබේ සම්පූර්ණ නම ඇතුළත් කරන්න."],
    school_required: ["Enter your school name.", "ඔබේ පාසලේ නම ඇතුළත් කරන්න."],
    province_unknown: ["Select your province.", "ඔබේ පළාත තෝරන්න."],
    stream_disabled_or_unknown: ["This stream is not available.", "මෙම විෂය ධාරාව ලබාගත නොහැක."],
    exactly_3_subjects_required: ["Pick exactly 3 subjects.", "විෂයයන් 3ක්ම තෝරන්න."],
    subjects_not_available_in_stream: ["One of the subjects is not available in this stream.", "තෝරාගත් විෂයයක් මෙම ධාරාවේ නොමැත."],
  };

  const submit = async e => {
    e.preventDefault();
    setErr(null);
    if (f.subjects.length !== 3) { setErr(t("Pick exactly 3 subjects.", "විෂයයන් 3ක්ම තෝරන්න.")); return; }
    if (!onboarding) {
      if (f.pw !== f.confirm) { setErr(t("Passwords do not match.", "මුරපද නොගැලපේ.")); return; }
      if (!f.terms) { setErr(t("Please agree to the terms to continue.", "ඉදිරියට යාමට නියමයන්ට එකඟ වන්න.")); return; }
    }
    setBusy(true);
    try {
      const profile = { school: f.school, schoolOther: f.schoolOther || null,
        province: f.province, stream: f.stream, subjects: f.subjects, medium: f.medium };
      if (onboarding) {
        await window.ZAPI.completeProfile(profile);       // account already exists (via Google)
        onCreate();
      } else {
        const res = await window.ZAPI.signup({ fullName: f.name, email: f.email, password: f.pw, ...profile });
        onCreate(res.systemId);
      }
    } catch (ex) {
      const m = DETAIL_MSG[ex.detail];
      setErr(m ? t(m[0], m[1]) : t("Registration failed — please try again.", "ලියාපදිංචිය අසාර්ථකයි — නැවත උත්සාහ කරන්න."));
      setBusy(false);
    }
  };

  const canSubmit = cat && f.school && (f.school !== "Other" || f.schoolOther.trim()) &&
    f.stream && f.subjects.length === 3 && !busy &&
    (onboarding || (f.name.trim() && f.email.trim() && f.pw && f.pw === f.confirm && f.terms));

  return (
    <div className="auth">
      <BrandPanel lang={lang} />
      <div className="auth__form">
        <div style={{ position: "absolute", top: 24, right: 28 }}><LangToggle lang={lang} setLang={setLang} /></div>
        <div className="auth__formInner zfade" style={{ maxWidth: 460 }}>
          <div className="auth__logo-m"><Logo size={26} light={false} /></div>
          <h2 style={{ fontSize: 27, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 6px" }}>{onboarding ? t("Complete your profile", "ඔබේ පැතිකඩ සම්පූර්ණ කරන්න") : t("Create your account", "ඔබේ ගිණුම සාදන්න")}</h2>
          <p style={{ margin: "0 0 22px", color: "var(--fg-muted)", fontSize: 15 }}>{onboarding ? t("Pick your stream and subjects to see the right papers.", "නිවැරදි පත්‍ර දැකීමට ඔබේ විෂය ධාරාව හා විෂයයන් තෝරන්න.") : t("Register as an A/L student to start sitting papers.", "පත්‍ර ලිවීම ඇරඹීමට උ.පෙ සිසුවෙකු ලෙස ලියාපදිංචි වන්න.")}</p>

          {!cat && !catErr && (
            <p style={{ color: "var(--fg-muted)", fontSize: 14, textAlign: "center", padding: "28px 0" }}>
              <i className="ph ph-circle-notch" style={{ verticalAlign: "-3px", marginRight: 7 }}></i>
              {t("Loading registration options…", "ලියාපදිංචි විකල්ප පූරණය වෙමින්…")}
            </p>
          )}
          {catErr && (
            <div style={{ background: "var(--red-soft, #FDECEC)", border: "1px solid #F3C2C2", borderRadius: "var(--r-sm)", padding: "13px 15px", fontSize: 13.5, color: "#8a2323" }}>
              {t("Could not load registration options — is the server up?", "ලියාපදිංචි විකල්ප පූරණය අසාර්ථකයි — සේවාදායකය ක්‍රියාත්මකද?")}
              {" "}<button onClick={loadCatalog} style={{ border: "none", background: "none", color: "var(--blue)", fontWeight: 600, cursor: "pointer", padding: 0 }}>{t("Retry", "නැවත")}</button>
            </div>
          )}

          {cat && (
          <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 15 }}>
            {!onboarding && <AuthField label={t("Full name", "සම්පූර්ණ නම")} icon="user" value={f.name} onChange={e => set("name", e.target.value)} placeholder={t("e.g. Tharindu Perera", "උදා. තරිඳු පෙරේරා")} />}
            {!onboarding && <AuthField label={t("Email address", "විද්‍යුත් තැපෑල")} icon="envelope-simple" value={f.email} onChange={e => set("email", e.target.value)} placeholder="you@email.com" />}

            <SearchableSelect lang={lang} label={t("School", "පාසල")} icon="buildings" value={f.school} onChange={e => set("school", e.target.value)}
              placeholder={t("Search your school…", "ඔබේ පාසල සොයන්න…")}
              options={[...cat.schools.map(s => ({ v: s, label: s })), { v: "Other", label: t("Other (type below)", "වෙනත් (පහත ලියන්න)") }]} />
            {f.school === "Other" && (
              <AuthField label={t("School name", "පාසලේ නම")} icon="pencil-simple" value={f.schoolOther}
                onChange={e => set("schoolOther", e.target.value)} placeholder={t("Type your school name", "ඔබේ පාසලේ නම ලියන්න")} />
            )}

            <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <AuthSelectKV label={t("Province", "පළාත")} icon="map-pin" value={f.province} onChange={e => set("province", e.target.value)}
                options={cat.provinces.map(p => ({ v: p.code, label: tx(lang, p.name, p.nameSi || p.name) }))} />
              <AuthSelectKV label={t("Medium", "මාධ්‍යය")} icon="translate" value={f.medium} onChange={e => set("medium", e.target.value)}
                options={cat.mediums.map(m => ({ v: m, label: m }))} />
            </div>

            <AuthSelectKV label={t("Stream", "විෂය ධාරාව")} icon="path" value={f.stream}
              onChange={e => { setErr(null); setF(prev => ({ ...prev, stream: e.target.value, subjects: [] })); }}
              placeholder={t("Select your stream…", "ඔබේ විෂය ධාරාව තෝරන්න…")}
              options={cat.streams.map(s => ({ v: s.code, label: tx(lang, s.name, s.nameSi || s.name) }))} />

            {/* subjects unlock only after a stream is picked; exactly 3 required */}
            <div>
              <span style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)", display: "block", marginBottom: 7 }}>
                {t("Your 3 subjects", "ඔබේ විෂයයන් 3")}
                {streamObj && <span style={{ float: "right", color: f.subjects.length === 3 ? "var(--green)" : "var(--fg-muted)" }}>{f.subjects.length} / 3</span>}
              </span>
              {!streamObj ? (
                <div style={{ border: "1.5px dashed var(--border)", borderRadius: "var(--r-sm)", padding: "13px 14px", fontSize: 13.5, color: "var(--fg-muted)" }}>
                  <i className="ph ph-arrow-up" style={{ verticalAlign: "-2px", marginRight: 6 }}></i>
                  {t("Select a stream first to choose subjects.", "විෂයයන් තේරීමට පළමුව විෂය ධාරාවක් තෝරන්න.")}
                </div>
              ) : (
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {streamObj.subjects.map(sub => {
                    const on = f.subjects.includes(sub.code);
                    const full = !on && f.subjects.length >= 3;
                    return (
                      <button key={sub.code} type="button" onClick={() => toggleSubject(sub.code)}
                        style={{
                          border: on ? "1.5px solid var(--blue)" : "1.5px solid var(--border)",
                          background: on ? "var(--blue-soft)" : "#fff",
                          color: on ? "var(--blue-dark)" : full ? "var(--fg-muted)" : "var(--fg)",
                          opacity: full ? 0.55 : 1, cursor: full ? "not-allowed" : "pointer",
                          borderRadius: "var(--r-pill)", padding: "8px 14px", fontSize: 13.5,
                          fontWeight: 600, fontFamily: "var(--font)", transition: ".14s",
                        }}>
                        {on && <i className="ph ph-check" style={{ verticalAlign: "-2px", marginRight: 6 }}></i>}
                        {tx(lang, sub.name, sub.nameSi || sub.name)}
                      </button>
                    );
                  })}
                </div>
              )}
            </div>

            {!onboarding && (
            <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <AuthField label={t("Password", "මුරපදය")} icon="lock-simple" type="password" value={f.pw} onChange={e => set("pw", e.target.value)} placeholder="••••••••" />
              <AuthField label={t("Confirm", "තහවුරු කරන්න")} icon="lock-simple" type="password" value={f.confirm} onChange={e => set("confirm", e.target.value)} placeholder="••••••••" />
            </div>
            )}

            {/* the student number is issued instantly on registration */}
            {!onboarding && (
            <div style={{ display: "flex", gap: 11, alignItems: "flex-start", background: "var(--blue-soft)", border: "1px solid #C7DBF7", borderRadius: "var(--r-sm)", padding: "11px 14px" }}>
              <i className="ph ph-identification-card" style={{ fontSize: 19, color: "var(--blue-dark)", flexShrink: 0, marginTop: 1 }}></i>
              <span style={{ fontSize: 12.5, color: "#1b3a6b", lineHeight: 1.45 }}>
                {t("Your student number (SX-…) is issued as soon as you register.", "ලියාපදිංචි වූ විගස ඔබේ සිසු අංකය (SX-…) නිකුත් වේ.")}
              </span>
            </div>
            )}

            {err && (
              <div style={{ background: "#FDECEC", border: "1px solid #F3C2C2", borderRadius: "var(--r-sm)", padding: "11px 14px", fontSize: 13.5, color: "#8a2323" }}>
                <i className="ph ph-warning-circle" style={{ verticalAlign: "-2px", marginRight: 6 }}></i>{err}
              </div>
            )}

            {!onboarding && (
            <label style={{ display: "flex", alignItems: "flex-start", gap: 9, fontSize: 13, color: "var(--fg-muted)", cursor: "pointer", lineHeight: 1.45 }}>
              <input type="checkbox" checked={f.terms} onChange={e => set("terms", e.target.checked)} style={{ width: 16, height: 16, accentColor: "var(--blue)", marginTop: 2, flexShrink: 0 }} />
              {t("I agree to the terms of use and exam-integrity policy.", "මම භාවිත නියම හා විභාග අඛණ්ඩතා ප්‍රතිපත්තියට එකඟ වෙමි.")}
            </label>
            )}
            <Btn kind="primary" size="lg" iconRight="arrow-right" type="submit" disabled={!canSubmit} style={{ width: "100%", marginTop: 2, opacity: canSubmit ? 1 : 0.6 }}>
              {onboarding ? (busy ? t("Saving…", "සුරකිමින්…") : t("Continue", "ඉදිරියට"))
                          : (busy ? t("Creating account…", "ගිණුම සාදමින්…") : t("Create account", "ගිණුම සාදන්න"))}
            </Btn>
          </form>
          )}

          {!onboarding && (
          <div style={{ borderTop: "1px solid var(--border)", margin: "20px 0 0", paddingTop: 16, textAlign: "center" }}>
            <span style={{ fontSize: 13.5, color: "var(--fg-muted)" }}>
              {t("Already have an account?", "දැනටමත් ගිණුමක් තිබේද?")} <button onClick={onBack} style={{ border: "none", background: "none", color: "var(--blue)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", padding: 0 }}>{t("Sign in", "පිවිසෙන්න")}</button>
            </span>
          </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* select with distinct value/label pairs (streams/provinces carry codes) */
function AuthSelectKV({ label, value, onChange, options, icon, placeholder }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)", display: "block", marginBottom: 7 }}>{label}</span>
      <div style={{ position: "relative" }}>
        <i className={`ph ph-${icon}`} style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", fontSize: 19, color: "var(--fg-muted)", pointerEvents: "none" }}></i>
        <select value={value} onChange={onChange}
          style={{ width: "100%", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)", padding: "13px 14px 13px 42px", fontSize: 15, outline: "none", fontFamily: "var(--font)", background: "#fff", appearance: "none" }}>
          {placeholder !== undefined && <option value="" disabled>{placeholder}</option>}
          {options.map(o => <option key={o.v} value={o.v}>{o.label}</option>)}
        </select>
      </div>
    </label>
  );
}

/* searchable combobox (long option lists, e.g. schools) — type to filter, click to pick.
   Same {v,label} option shape + onChange({target:{value}}) contract as AuthSelectKV. */
function SearchableSelect({ label, value, onChange, options, icon, placeholder, lang }) {
  const t = (en, si) => tx(lang, en, si);   // lang via prop — login screens render outside AppCtx
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const wrapRef = useRef(null);
  useEffect(() => {
    const onDoc = e => { if (wrapRef.current && !wrapRef.current.contains(e.target)) { setOpen(false); setQuery(""); } };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const selected = options.find(o => o.v === value);
  const q = query.trim().toLowerCase();
  const filtered = q ? options.filter(o => o.label.toLowerCase().includes(q)) : options;
  const pick = o => { onChange({ target: { value: o.v } }); setOpen(false); setQuery(""); };
  return (
    <div style={{ display: "block", position: "relative" }} ref={wrapRef}>
      <span style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)", display: "block", marginBottom: 7 }}>{label}</span>
      <div style={{ position: "relative" }}>
        <i className={`ph ph-${icon}`} style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", fontSize: 19, color: "var(--fg-muted)", pointerEvents: "none" }}></i>
        <input
          value={open ? query : (selected ? selected.label : "")}
          onChange={e => { setQuery(e.target.value); setOpen(true); }}
          onFocus={() => { setOpen(true); setQuery(""); }}
          placeholder={selected ? selected.label : placeholder}
          style={{ width: "100%", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)", padding: "13px 40px 13px 42px", fontSize: 15, outline: "none", fontFamily: "var(--font)", background: "#fff" }} />
        <i className={`ph ph-${open ? "magnifying-glass" : "caret-down"}`} style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--fg-muted)", pointerEvents: "none" }}></i>
        {open && (
          <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, background: "#fff", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)", boxShadow: "var(--sh-md)", maxHeight: 240, overflowY: "auto", zIndex: 50 }}>
            {filtered.length === 0 ? (
              <div style={{ padding: "12px 14px", fontSize: 14, color: "var(--fg-muted)" }}>{t("No matching school", "ගැලපෙන පාසලක් නැත")}</div>
            ) : filtered.map(o => (
              <div key={o.v} onClick={() => pick(o)}
                style={{ padding: "10px 14px", fontSize: 14.5, cursor: "pointer",
                  background: o.v === value ? "var(--blue-soft)" : "#fff",
                  color: o.v === value ? "var(--blue-dark)" : "var(--fg)", fontWeight: o.v === value ? 600 : 400 }}
                onMouseEnter={e => { if (o.v !== value) e.currentTarget.style.background = "var(--grey-5)"; }}
                onMouseLeave={e => { if (o.v !== value) e.currentTarget.style.background = "#fff"; }}>
                {o.label}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* select styled like AuthField */
function AuthSelect({ label, value, onChange, options, icon }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)", display: "block", marginBottom: 7 }}>{label}</span>
      <div style={{ position: "relative" }}>
        <i className={`ph ph-${icon}`} style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", fontSize: 19, color: "var(--fg-muted)", pointerEvents: "none" }}></i>
        <select value={value} onChange={onChange}
          style={{ width: "100%", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)", padding: "13px 14px 13px 42px", fontSize: 15, outline: "none", fontFamily: "var(--font)", background: "#fff", appearance: "none" }}>
          {options.map(o => <option key={o}>{o}</option>)}
        </select>
      </div>
    </label>
  );
}

/* Google Identity Services button — loads the GIS script, renders Google's official
   button, and hands the returned ID-token credential up to the parent. */
function GoogleSignIn({ clientId, onCredential }) {
  const ref = useRef(null);
  useEffect(() => {
    let cancelled = false;
    const render = () => {
      if (cancelled || !window.google || !window.google.accounts || !ref.current) return;
      window.google.accounts.id.initialize({ client_id: clientId, callback: r => onCredential(r.credential) });
      ref.current.innerHTML = "";
      window.google.accounts.id.renderButton(ref.current,
        { theme: "outline", size: "large", text: "continue_with", shape: "pill", width: 300 });
    };
    if (window.google && window.google.accounts) { render(); return () => { cancelled = true; }; }
    let s = document.getElementById("gis-script");
    if (!s) {
      s = document.createElement("script");
      s.src = "https://accounts.google.com/gsi/client";
      s.async = true; s.defer = true; s.id = "gis-script";
      document.head.appendChild(s);
    }
    s.addEventListener("load", render);
    return () => { cancelled = true; s && s.removeEventListener("load", render); };
  }, [clientId]);
  return <div ref={ref} style={{ display: "flex", justifyContent: "center", minHeight: 44 }}></div>;
}

/* Real (Google-only) login surface — used when the backend auth mode is "google". */
function LoginGoogle({ lang, setLang, clientId, onCredential, error, busy }) {
  const t = (en, si) => tx(lang, en, si);
  return (
    <div className="auth">
      <BrandPanel lang={lang} />
      <div className="auth__form">
        <div style={{ position: "absolute", top: 24, right: 28 }}><LangToggle lang={lang} setLang={setLang} /></div>
        <div className="auth__formInner zfade">
          <div className="auth__logo-m"><Logo size={26} light={false} /></div>
          <h2 style={{ fontSize: 27, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 6px" }}>{t("Welcome", "සාදරයෙන් පිළිගනිමු")}</h2>
          <p style={{ margin: "0 0 24px", color: "var(--fg-muted)", fontSize: 15 }}>{t("Sign in with your Google account to continue.", "ඉදිරියට යාමට ඔබේ Google ගිණුමෙන් පිවිසෙන්න.")}</p>
          {busy
            ? <p style={{ color: "var(--fg-muted)", textAlign: "center", padding: "20px 0" }}><i className="ph ph-circle-notch" style={{ verticalAlign: "-2px", marginRight: 7 }}></i>{t("Signing in…", "පිවිසෙමින්…")}</p>
            : <GoogleSignIn clientId={clientId} onCredential={onCredential} />}
          {error && (
            <div style={{ marginTop: 16, background: "#FDECEC", border: "1px solid #F3C2C2", borderRadius: "var(--r-sm)", padding: "11px 14px", fontSize: 13.5, color: "#8a2323" }}>
              <i className="ph ph-warning-circle" style={{ verticalAlign: "-2px", marginRight: 6 }}></i>{error}
            </div>
          )}
          {/* first-time students are onboarded (stream + subjects) right after this button */}
          <div style={{ display: "flex", gap: 10, alignItems: "flex-start", marginTop: 18, background: "var(--blue-soft)",
            border: "1px solid #C7DBF7", borderRadius: "var(--r-sm)", padding: "12px 14px" }}>
            <i className="ph ph-graduation-cap" style={{ fontSize: 19, color: "var(--blue-dark)", flexShrink: 0, marginTop: 1 }}></i>
            <span style={{ fontSize: 12.5, color: "#1b3a6b", lineHeight: 1.5 }}>
              {t("New student? Just continue with Google — you'll choose your stream and 3 subjects right after. Already registered? You'll go straight in.",
                 "නව සිසුවෙක්ද? Google සමඟ ඉදිරියට යන්න — ඉන්පසු ඔබේ විෂය ධාරාව හා විෂයයන් 3 තෝරන්න. දැනටමත් ලියාපදිංචිද? ඔබ කෙලින්ම ඇතුළු වේ.")}
            </span>
          </div>
          <p style={{ fontSize: 12, color: "var(--fg-muted)", textAlign: "center", margin: "14px 0 0", lineHeight: 1.5 }}>
            {t("Teacher & admin access is granted by the institute.", "ගුරු හා පරිපාලක ප්‍රවේශය ආයතනය විසින් ලබා දේ.")}
          </p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginMain, LoginAdmin, SignupStudent, AuthSelectKV, SearchableSelect, GoogleSignIn, LoginGoogle });