// Primate App Kit — Auth (Create account / Login)
const { useState: useStateAU } = React;

function Field({ label, type = "text", placeholder, icon, value, onChange }) {
  const [focus, setFocus] = useStateAU(false);
  const [hover, setHover] = useStateAU(false);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <label style={{ font: "var(--t-label)", fontWeight: 400, color: "var(--fg)" }}>{label}</label>
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", alignItems: "center", gap: 8, height: 48, boxSizing: "border-box", padding: "0 16px", borderRadius: "var(--r-md)", background: "var(--bg-elevated)", border: `1px solid ${focus ? "var(--gold-mid)" : hover ? "var(--border-hover)" : "var(--border-subtle)"}`, transition: "border-color .14s ease" }}>
        {icon && <Icon name={icon} size={18} color="var(--fg-placeholder)" />}
        <input type={type} placeholder={placeholder} value={value} onChange={onChange}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--fg)", font: "var(--t-body)" }} />
      </div>
    </div>
  );
}

function SocialBtn({ icon, grad, onClick, children }) {
  const [hover, setHover] = useStateAU(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} className={grad ? "grad-border" : undefined}
      style={{ width: "100%", height: 48, display: "flex", alignItems: "center", justifyContent: "center", gap: 10, borderRadius: "var(--r-md)", border: grad ? undefined : "1px solid var(--border-subtle)", background: hover ? "rgba(255,255,255,0.06)" : "transparent", color: "var(--fg)", font: "var(--t-btn)", cursor: "pointer", transition: "background .14s ease" }}>
      <img src={icon} width="18" height="18" />{children}
    </button>
  );
}

function RememberRow() {
  const [on, setOn] = useStateAU(true);
  const [hLink, setHLink] = useStateAU(false);
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginTop: -2 }}>
      <button onClick={() => setOn(v => !v)} style={{ display: "inline-flex", alignItems: "center", gap: 10, background: "transparent", border: "none", padding: 0, cursor: "pointer" }}>
        <span style={{ width: 18, height: 18, flexShrink: 0, borderRadius: 4, display: "flex", alignItems: "center", justifyContent: "center", background: on ? "var(--gold)" : "transparent", border: on ? "none" : "1px solid var(--border-hover)", transition: "background .14s ease" }}>
          {on && <Icon name="check" size={13} color="var(--on-gold)" />}
        </span>
        <span style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)" }}>Remember me</span>
      </button>
      <a href="#" onClick={(e) => e.preventDefault()} onMouseEnter={() => setHLink(true)} onMouseLeave={() => setHLink(false)} style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)", textDecoration: hLink ? "underline" : "none", textUnderlineOffset: 3 }}>Forgot password?</a>
    </div>
  );
}

function Auth({ mode = "signup", onAuthed, onSwitch }) {
  const isSignup = mode === "signup";
  const mobile = useViewport() === "mobile";
  return (
    <div style={{ position: "relative", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", overflow: "auto", padding: "32px 20px", boxSizing: "border-box", background: "linear-gradient(180deg, var(--bg) 0%, var(--bg-card) 100%)" }}>
      {/* ambient ape image */}
      <div style={{ position: "absolute", inset: 0, backgroundImage: "url(assets/onboarding-bg.webp)", backgroundSize: "cover", backgroundPosition: "center", opacity: 0.18, mixBlendMode: "lighten", pointerEvents: "none" }} />

      <div style={{ position: "relative", width: "100%", maxWidth: 400, display: "flex", flexDirection: "column", gap: 24, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
          <Logo size={56} />
          <h1 style={{ font: "var(--t-display-mono)", margin: 0, textAlign: "center" }}>{isSignup ? "Create an account" : "Welcome back"}</h1>
          <p style={{ font: "var(--t-body)", color: "var(--fg-secondary)", margin: 0 }}>
            {isSignup ? "Already have an account? " : "New to Primate? "}
            <span onClick={onSwitch} style={{ color: "var(--gold)", cursor: "pointer", textDecoration: "underline" }}>{isSignup ? "Login" : "Create an account"}</span>
          </p>
        </div>

        <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 16 }}>
          <Field label="Email" type="email" placeholder="you@example.com" />
          {isSignup ? (
            <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", gap: mobile ? 16 : 12 }}>
              <div style={{ flex: 1, minWidth: 0 }}><Field label="Password" type="password" placeholder="••••••••••" /></div>
              <div style={{ flex: 1, minWidth: 0 }}><Field label="Confirm Password" type="password" placeholder="••••••••••" /></div>
            </div>
          ) : (
            <Field label="Password" type="password" placeholder="••••••••••" />
          )}
          {!isSignup && <RememberRow />}
          <Btn variant="primary" onClick={onAuthed} style={{ width: "100%", marginTop: 4 }}>
            {isSignup ? "Sign Up" : "Login"}
          </Btn>
        </div>

        <div style={{ width: "100%", display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, transparent, var(--fg-secondary))" }} />
          <span style={{ font: "var(--t-eyebrow)", textTransform: "uppercase", color: "var(--fg-secondary)" }}>or</span>
          <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, var(--fg-secondary), transparent)" }} />
        </div>

        <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
          <SocialBtn grad icon="assets/google-mark.svg" onClick={onAuthed}>Continue With Google</SocialBtn>
          <SocialBtn icon="assets/github-mark.svg" onClick={onAuthed}>Continue With GitHub</SocialBtn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Auth });