// auth.jsx — Login / Sign-up (glass, centered)
const { useState: useStateA } = React;

function Field({ label, type = "text", placeholder, value, onChange, icon }) {
  const [f, setF] = useStateA(false);
  return (
    <label style={{ display: "block" }}>
      <span className="cap" style={{ display: "block", marginBottom: 8, color: "var(--ink-2)", fontWeight: 500 }}>{label}</span>
      <div style={{
        display: "flex", alignItems: "center", gap: 10, padding: "0 14px",
        background: "color-mix(in oklch, black 22%, transparent)",
        border: `1px solid ${f ? "var(--accent)" : "var(--glass-border)"}`,
        borderRadius: 13, transition: "border-color .2s, box-shadow .2s",
        boxShadow: f ? "0 0 0 3px var(--accent-glow)" : "none",
      }}>
        {icon && <span style={{ color: f ? "var(--accent)" : "var(--ink-3)" }}><Icon name={icon} size={18} /></span>}
        <input type={type} placeholder={placeholder} value={value} onChange={e => onChange(e.target.value)}
          onFocus={() => setF(true)} onBlur={() => setF(false)}
          style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--ink)", fontSize: 15, padding: "13px 0", fontFamily: "var(--font)" }} />
      </div>
    </label>
  );
}

function Auth({ mode, onNav }) {
  const [tab, setTab] = useStateA(mode === "login" ? "login" : "signup");
  const [view, setView] = useStateA("auth");   // "auth" | "forgot" | "sent"
  const [email, setEmail] = useStateA("");
  const [pw, setPw] = useStateA("");
  const [name, setName] = useStateA("");
  const [resetEmail, setResetEmail] = useStateA("");
  const isLogin = tab === "login";

  const backToLogin = () => { setView("auth"); setTab("login"); };

  return (
    <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "1.1fr 1fr", position: "relative", zIndex: 1 }} className="auth-grid">
      {/* Left brand panel */}
      <div style={{ padding: "48px clamp(32px,5vw,72px)", display: "flex", flexDirection: "column", justifyContent: "space-between" }} className="auth-brand">
        <Logo size={30} onClick={() => onNav("landing")} />
        <div>
          <h1 className="h-display" style={{ fontSize: "clamp(40px,5vw,72px)", marginBottom: 18 }}>
            Welcome to<br /><span className="gradient-text">KVB 2.0</span>
          </h1>
          <p className="body-lg" style={{ maxWidth: 380, marginBottom: 30 }}>
            The fastest viewer engine on the market. Be live with real viewers in under a minute.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <div className="chip"><span className="dot" /> 5,000+ concurrent</div>
            <div className="chip"><Icon name="lock" size={14} /> AES-256</div>
            <div className="chip"><Icon name="bolt" size={14} /> 0% CPU</div>
          </div>
        </div>
        <span className="cap">© 2026 KVB · All rights reserved</span>
      </div>

      {/* Right form */}
      <div style={{ display: "grid", placeItems: "center", padding: "32px" }}>
        <div className="glass-strong" style={{ width: "100%", maxWidth: 420, padding: "clamp(26px,3vw,38px)", borderRadius: "var(--radius-lg)" }}>

          {view === "auth" && (
          <React.Fragment>
          <div className="glass" style={{ display: "flex", padding: 5, borderRadius: 999, gap: 4, marginBottom: 26 }}>
            {[["Create account", "signup"], ["Log in", "login"]].map(([l, v]) => (
              <button key={v} onClick={() => setTab(v)} className="btn btn-sm" style={{
                flex: 1, justifyContent: "center", border: "none",
                background: tab === v ? "var(--accent)" : "transparent",
                color: tab === v ? "var(--accent-ink)" : "var(--ink-2)", fontWeight: tab === v ? 640 : 500,
              }}>{l}</button>
            ))}
          </div>

          <div className="stack" style={{ gap: 16 }}>
            {!isLogin && <Field label="Username" placeholder="yourname" value={name} onChange={setName} icon="users" />}
            <Field label="Email" type="email" placeholder="you@email.com" value={email} onChange={setEmail} icon="globe" />
            <Field label="Password" type="password" placeholder="••••••••" value={pw} onChange={setPw} icon="lock" />
          </div>

          {isLogin && <div style={{ textAlign: "right", marginTop: 10 }}><a href="#" onClick={e => { e.preventDefault(); setResetEmail(email); setView("forgot"); }} className="cap" style={{ color: "var(--accent-soft)", cursor: "pointer" }}>Forgot password?</a></div>}

          <button className="btn btn-primary btn-lg" onClick={() => onNav("dashboard")} style={{ width: "100%", justifyContent: "center", marginTop: 22 }}>
            {isLogin ? "Log in" : "Create account"} <Icon name="arrow" size={17} />
          </button>

          <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "20px 0" }}>
            <hr className="divider" style={{ flex: 1 }} /><span className="cap">or continue with</span><hr className="divider" style={{ flex: 1 }} />
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            {["Discord", "Google"].map(p => (
              <button key={p} className="btn btn-ghost" style={{ flex: 1, justifyContent: "center" }} onClick={() => onNav("dashboard")}>{p}</button>
            ))}
          </div>
          <p className="cap" style={{ textAlign: "center", marginTop: 20, lineHeight: 1.5 }}>
            Secured with AES-256 encryption. By continuing you agree to our Terms & Privacy Policy.
          </p>
          </React.Fragment>
          )}

          {view === "forgot" && (
          <React.Fragment>
            <button onClick={backToLogin} className="cap" style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "none", border: "none", color: "var(--ink-3)", cursor: "pointer", padding: 0, marginBottom: 22 }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--ink)"} onMouseLeave={e => e.currentTarget.style.color = "var(--ink-3)"}>
              <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><Icon name="arrow" size={14} /></span> Back to log in
            </button>
            <div style={{ width: 52, height: 52, borderRadius: 15, display: "grid", placeItems: "center", color: "var(--accent)", background: "color-mix(in oklch, var(--accent) 13%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 30%, transparent)", marginBottom: 18 }}>
              <Icon name="lock" size={24} />
            </div>
            <h2 className="h2" style={{ fontSize: 24, marginBottom: 8 }}>Reset your password</h2>
            <p className="body" style={{ fontSize: 14.5, marginBottom: 24 }}>Enter the email on your account and we’ll send you a secure link to set a new password.</p>
            <div className="stack" style={{ gap: 16 }}>
              <Field label="Email" type="email" placeholder="you@email.com" value={resetEmail} onChange={setResetEmail} icon="globe" />
            </div>
            <button className="btn btn-primary btn-lg" onClick={() => setView("sent")} disabled={!resetEmail.trim()}
              style={{ width: "100%", justifyContent: "center", marginTop: 22, opacity: resetEmail.trim() ? 1 : 0.55, cursor: resetEmail.trim() ? "pointer" : "not-allowed" }}>
              Send reset link <Icon name="arrow" size={17} />
            </button>
            <p className="cap" style={{ textAlign: "center", marginTop: 18, lineHeight: 1.5 }}>
              Remembered it? <a href="#" onClick={e => { e.preventDefault(); backToLogin(); }} style={{ color: "var(--accent-soft)" }}>Log in instead</a>
            </p>
          </React.Fragment>
          )}

          {view === "sent" && (
          <React.Fragment>
            <div style={{ textAlign: "center" }}>
              <div style={{ width: 60, height: 60, borderRadius: 18, display: "grid", placeItems: "center", margin: "0 auto 20px", color: "var(--accent-ink)", background: "linear-gradient(150deg, var(--accent), var(--accent-deep))", boxShadow: "0 0 30px var(--accent-glow)" }}>
                <Icon name="check" size={30} stroke={2.6} />
              </div>
              <h2 className="h2" style={{ fontSize: 24, marginBottom: 10 }}>Check your inbox</h2>
              <p className="body" style={{ fontSize: 14.5, marginBottom: 6 }}>If an account exists for</p>
              <p className="body" style={{ fontSize: 15, color: "var(--ink)", fontWeight: 600, marginBottom: 6, wordBreak: "break-all" }}>{resetEmail}</p>
              <p className="body" style={{ fontSize: 14.5, marginBottom: 24 }}>we’ve sent a link to reset your password. It expires in 30 minutes.</p>
              <button className="btn btn-primary btn-lg" onClick={backToLogin} style={{ width: "100%", justifyContent: "center" }}>
                Back to log in
              </button>
              <p className="cap" style={{ marginTop: 18, lineHeight: 1.5 }}>
                Didn’t get it? Check spam, or <a href="#" onClick={e => { e.preventDefault(); setView("forgot"); }} style={{ color: "var(--accent-soft)" }}>try another email</a>.
              </p>
            </div>
          </React.Fragment>
          )}

        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .auth-grid{ grid-template-columns: 1fr !important; }
          .auth-brand{ display: none !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Auth });