// Login screen — Discord OAuth + email fallback
const LoginScreen = ({ onLogin, tweaks }) => {
  const [mode, setMode] = useState("discord");
  const [step, setStep] = useState("idle"); // idle | connecting | success
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");

  const handleDiscord = async () => {
    setStep("connecting");
    const { error } = await window.db.auth.signInWithOAuth({
      provider: "discord",
      options: { redirectTo: window.location.origin + "/" },
    });
    if (error) { console.error("Discord login feil:", error.message); setStep("idle"); }
  };
  const handleEmail = (e) => {
    e.preventDefault();
    setStep("connecting");
    setTimeout(() => onLogin(), 800);
  };

  return (
    <div className="login-screen">
      <div className="login-bg-grid" />
      <div className="login-bg-scan" />

      {/* Top corner: serial + barcode */}
      <div className="login-corner login-corner-tl">
        <div className="corner-stamp">CLASSIFIED // OPS-RECRUIT</div>
        <div className="corner-serial">FORM-7740-NO / REV.04</div>
      </div>
      <div className="login-corner login-corner-tr">
        {tweaks.norwegianFlag && <div className="flag-strip">
          <span style={{background:"#ba0c2f"}} /><span style={{background:"#fff"}} />
          <span style={{background:"#00205b"}} /><span style={{background:"#fff"}} />
          <span style={{background:"#ba0c2f"}} />
        </div>}
        <div className="corner-serial">SECTOR: KONGERIKET NORGE</div>
      </div>
      <div className="login-corner login-corner-bl">
        <div className="corner-coords">N 59°54'52" · E 10°44'14"</div>
        <div className="corner-coords">ALT 28M · OSLO COMMAND</div>
      </div>
      <div className="login-corner login-corner-br">
        <div className="corner-serial">v2026.05.11 · BUILD a47e3</div>
      </div>

      <div className="login-card">
        <div className="login-card-header">
          <LogoMark size={72} accent={tweaks.accent} />
          <div>
            <div className="login-eyebrow">AUTORISERING PÅKREVD</div>
            <h1 className="login-title">WZN<span style={{color: tweaks.accent}}>·</span>LEAGUE</h1>
            <div className="login-sub">Norges råeste Warzone-liga · sesong 05</div>
          </div>
        </div>

        <div className="login-mode-tabs">
          <button className={`mode-tab ${mode === "discord" ? "active" : ""}`} onClick={() => setMode("discord")}>
            <span className="tab-code">A</span> DISCORD OAUTH
          </button>
          <button className={`mode-tab ${mode === "email" ? "active" : ""}`} onClick={() => setMode("email")}>
            <span className="tab-code">B</span> E-POST / PASSORD
          </button>
        </div>

        {mode === "discord" && (
          <div className="login-discord">
            <div className="discord-explain">
              <div className="discord-explain-row">
                <span className="bullet">▸</span> Autoriser via Discord — anbefalt for spillere
              </div>
              <div className="discord-explain-row">
                <span className="bullet">▸</span> WZN leser kun din Discord ID og brukernavn
              </div>
              <div className="discord-explain-row">
                <span className="bullet">▸</span> Activision ID kobles på i neste steg
              </div>
            </div>

            <button
              className="discord-btn"
              onClick={handleDiscord}
              disabled={step !== "idle"}
              style={{borderColor: tweaks.accent}}
            >
              {step === "idle" && (
                <>
                  <DiscordGlyph />
                  <span>FORTSETT MED DISCORD</span>
                  <span className="discord-btn-arrow">▶</span>
                </>
              )}
              {step === "connecting" && (
                <>
                  <span className="spinner" style={{borderTopColor: tweaks.accent}} />
                  <span>KOBLER TIL DISCORD…</span>
                </>
              )}
              {step === "success" && (
                <>
                  <span className="check" style={{color: tweaks.accent}}>✓</span>
                  <span>AUTORISERT — LASTER PROFIL</span>
                </>
              )}
            </button>

            <div className="login-divider"><span>ELLER</span></div>

            <div className="login-quick">
              <button className="quick-link" onClick={() => setMode("email")}>Bruk e-post i stedet</button>
              <span className="quick-sep">·</span>
              <a className="quick-link" href="#" onClick={(e)=>{e.preventDefault();onLogin();}}>Hopp over (demo)</a>
            </div>
          </div>
        )}

        {mode === "email" && (
          <form className="login-email" onSubmit={handleEmail}>
            <label className="field">
              <span className="field-label">E-POST</span>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="magnus@wzn.no"
                required
              />
            </label>
            <label className="field">
              <span className="field-label">PASSORD</span>
              <input
                type="password"
                value={pwd}
                onChange={(e) => setPwd(e.target.value)}
                placeholder="••••••••"
                required
              />
            </label>
            <div className="field-row">
              <label className="checkbox">
                <input type="checkbox" defaultChecked />
                <span>Husk meg på denne enheten</span>
              </label>
              <a href="#" className="quick-link" onClick={(e)=>e.preventDefault()}>Glemt passord?</a>
            </div>
            <button className="discord-btn solid" type="submit" style={{background: tweaks.accent, borderColor: tweaks.accent}}>
              <span>LOGG INN</span>
              <span className="discord-btn-arrow">▶</span>
            </button>
            <div className="login-quick">
              <span>Ny her?</span>
              <a href="#" className="quick-link" onClick={(e)=>e.preventDefault()}>Opprett konto →</a>
            </div>
          </form>
        )}

        <div className="login-card-footer">
          <div className="footer-stamp">
            <span className="stamp-cell">FORM</span>
            <span className="stamp-cell">WZN-AUTH-001</span>
          </div>
          <div className="footer-stamp">
            <span className="stamp-cell">REV</span>
            <span className="stamp-cell">04 · 2026</span>
          </div>
          <div className="footer-stamp">
            <span className="stamp-cell">SEC</span>
            <span className="stamp-cell" style={{color: tweaks.accent}}>TLS 1.3</span>
          </div>
        </div>
      </div>

    </div>
  );
};

const DiscordGlyph = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.058a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
  </svg>
);

Object.assign(window, { LoginScreen });