/* ────────────────────────────────────────────────────────────
   auth.jsx — 로그인 / 가입 화면
   CONTRACT §3.1:
     POST /api/auth/register {email,password,name} -> 201 {user}
     POST /api/auth/login    {email,password}      -> 200 {user} + Set-Cookie sb_session
     GET  /api/auth/me                              -> 200 {user}
     POST /api/auth/logout                          -> 200 {ok:true}
   ──────────────────────────────────────────────────────────── */

function Field({ label, hint, ...rest }) {
  return React.createElement("label", { style: { display: "block", marginBottom: 14 } },
    React.createElement("span", { className: "t-label-2", style: { display: "block", color: "var(--label-neutral)", marginBottom: 6, fontWeight: 700 } }, label),
    React.createElement("input", {
      ...rest,
      style: {
        width: "100%", height: 44, padding: "0 14px", borderRadius: "var(--r-sm)",
        border: "1px solid var(--border)", background: "var(--bg-normal)", color: "var(--label-normal)",
        fontSize: 15, fontFamily: "var(--font)", outline: "none",
      },
      onFocus: (e) => { e.target.style.borderColor = "var(--primary)"; },
      onBlur: (e) => { e.target.style.borderColor = "var(--border)"; },
    }),
    hint ? React.createElement("span", { className: "t-caption-1", style: { display: "block", color: "var(--label-assist)", marginTop: 5 } }, hint) : null
  );
}

function AuthShell({ title, sub, children, footer }) {
  return React.createElement("div", {
    style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, background: "var(--bg-canvas)" },
  },
    React.createElement("div", { style: { width: "100%", maxWidth: 400 } },
      React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, justifyContent: "center", marginBottom: 22 } },
        React.createElement("span", {
          style: { width: 32, height: 32, borderRadius: "var(--r-sm)", background: "var(--primary)", display: "inline-flex", alignItems: "center", justifyContent: "center" },
        },
          React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: 2 },
            React.createElement("rect", { x: 3, y: 3, width: 18, height: 18, rx: 2 }),
            React.createElement("path", { d: "M3 9h18M9 21V9" }))),
        React.createElement("span", { className: "t-heading-2", style: { letterSpacing: "-0.02em" } }, "Storyboard")),
      React.createElement("div", {
        style: { background: "var(--bg-normal)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "30px 28px", boxShadow: "var(--sh-2)" },
      },
        React.createElement("div", { className: "t-heading-1", style: { marginBottom: 4 } }, title),
        sub ? React.createElement("p", { className: "t-body-2", style: { color: "var(--label-alt)", margin: "0 0 22px" } }, sub) : null,
        children),
      footer ? React.createElement("div", { style: { textAlign: "center", marginTop: 18 } }, footer) : null
    )
  );
}

function LoginView({ onAuthed, goRegister }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  async function submit(e) {
    e.preventDefault();
    setErr(""); setBusy(true);
    try {
      const { user } = await api("/auth/login", { method: "POST", body: { email: email.trim(), password } });
      onAuthed(user);
    } catch (ex) {
      setErr(ex.message || "로그인에 실패했어요.");
    } finally { setBusy(false); }
  }

  return React.createElement(AuthShell, {
    title: "로그인", sub: "교수설계 스토리보드 작업실에 들어가요.",
    footer: React.createElement("span", { className: "t-body-2", style: { color: "var(--label-alt)" } },
      "계정이 없으세요? ",
      React.createElement("a", { href: "#", onClick: (e) => { e.preventDefault(); goRegister(); }, style: { color: "var(--primary)", fontWeight: 700 } }, "가입하기")),
  },
    React.createElement("form", { onSubmit: submit },
      React.createElement(Field, { label: "이메일", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "name@company.com", required: true, autoFocus: true }),
      React.createElement(Field, { label: "비밀번호", type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "비밀번호", required: true }),
      err ? React.createElement("div", { className: "t-label-2", style: { color: "var(--negative)", background: "var(--negative-bg)", borderRadius: "var(--r-sm)", padding: "9px 12px", marginBottom: 14 } }, err) : null,
      React.createElement(Button, { type: "submit", size: "lg", disabled: busy, style: { width: "100%" } },
        busy ? React.createElement(Spinner, { s: 16, color: "#fff" }) : "로그인")
    )
  );
}

function RegisterView({ onAuthed, goLogin }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  async function submit(e) {
    e.preventDefault();
    setErr(""); setBusy(true);
    try {
      // 가입 후 바로 로그인(세션 쿠키 확보)
      await api("/auth/register", { method: "POST", body: { email: email.trim(), password, name: name.trim() } });
      const { user } = await api("/auth/login", { method: "POST", body: { email: email.trim(), password } });
      onAuthed(user);
    } catch (ex) {
      setErr(ex.message || "가입에 실패했어요.");
    } finally { setBusy(false); }
  }

  return React.createElement(AuthShell, {
    title: "가입하기", sub: "이메일로 새 계정을 만들어요.",
    footer: React.createElement("span", { className: "t-body-2", style: { color: "var(--label-alt)" } },
      "이미 계정이 있으세요? ",
      React.createElement("a", { href: "#", onClick: (e) => { e.preventDefault(); goLogin(); }, style: { color: "var(--primary)", fontWeight: 700 } }, "로그인")),
  },
    React.createElement("form", { onSubmit: submit },
      React.createElement(Field, { label: "이름", value: name, onChange: (e) => setName(e.target.value), placeholder: "홍길동", required: true, autoFocus: true }),
      React.createElement(Field, { label: "이메일", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "name@company.com", required: true }),
      React.createElement(Field, { label: "비밀번호", type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "8자 이상 권장", hint: "8자 이상을 권장해요.", required: true }),
      err ? React.createElement("div", { className: "t-label-2", style: { color: "var(--negative)", background: "var(--negative-bg)", borderRadius: "var(--r-sm)", padding: "9px 12px", marginBottom: 14 } }, err) : null,
      React.createElement(Button, { type: "submit", size: "lg", disabled: busy, style: { width: "100%" } },
        busy ? React.createElement(Spinner, { s: 16, color: "#fff" }) : "가입하고 시작하기")
    )
  );
}

async function fetchMe() {
  try {
    const { user } = await api("/auth/me");
    return user || null;
  } catch (e) {
    return null; // 미인증 = 401 → null
  }
}
async function logout() {
  try { await api("/auth/logout", { method: "POST", body: {} }); } catch (e) { /* 무시 */ }
}

Object.assign(window, { LoginView, RegisterView, AuthShell, Field, fetchMe, logout });