// Auth — login / signup splash. Used only when state.authed === false.
// Visually consistent with the paper/library theme.

function AuthView() {
  const { dispatch } = useApp();
  const [mode, setMode] = React.useState("signin"); // signin | signup
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const submit = (e) => {
    e?.preventDefault();
    // Mock: any input logs in. The 데모 둘러보기 button does the same.
    dispatch({ type: "LOGIN" });
  };

  return (
    <div className="w-full h-full flex bg-cream text-ink2 font-sans overflow-auto">
      <div className="mx-auto w-full max-w-[920px] px-5 sm:px-8 py-10 flex flex-col md:flex-row md:items-center gap-10 md:gap-16 min-h-full">
        {/* Brand / Pitch */}
        <div className="flex-1 max-w-[420px]">
          <div className="flex items-center gap-3 mb-7">
            <span
              className="w-10 h-10 rounded-[8px] bg-ink text-cream inline-flex items-center justify-center"
              style={{ fontFamily: "ui-serif, Georgia, 'Times New Roman', serif", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em" }}
            >M</span>
            <div>
              <div className="text-[22px] font-semibold text-ink tracking-tight2 leading-none">마이위키</div>
              <div className="text-[11px] text-mute mt-1 tracking-[0.06em] uppercase">My Wiki</div>
            </div>
          </div>
          <h1 className="text-[28px] sm:text-[34px] font-semibold text-ink tracking-tight2 leading-[1.2]">
            그냥 적어두면<br />알아서 정리되는 위키
          </h1>
          <p className="text-[14.5px] text-body leading-[1.7] mt-5">
            한 번의 채팅으로 여러 문서에 동시에 반영하고, 잘 기억해두면 좋을 패턴은 자동으로 문서가 됩니다.
            모든 자동 변경은 이력에 남고, 언제든 되돌릴 수 있어요.
          </p>
          <ul className="mt-5 space-y-1.5 text-[13.5px] text-body">
            <li className="flex gap-2"><span className="text-accent">·</span>주제별 공간 + 자동 문서 정리</li>
            <li className="flex gap-2"><span className="text-accent">·</span>마크다운 기반 — 내 데이터로 가져가기 쉬움</li>
            <li className="flex gap-2"><span className="text-accent">·</span>잠금·세션·이력으로 자동 정리 통제 가능</li>
          </ul>
        </div>

        {/* Form card */}
        <form onSubmit={submit} className="flex-1 max-w-[400px] w-full bg-paper border border-rule rounded-2xl shadow-paper p-6 sm:p-7 flex flex-col gap-4">
          <div className="flex items-center gap-1 text-[12px] mb-1">
            <button type="button" onClick={() => setMode("signin")}
              className={cn("px-3 py-1.5 rounded-md transition", mode === "signin" ? "bg-chipBg text-ink font-medium" : "text-mute hover:text-ink")}
            >로그인</button>
            <button type="button" onClick={() => setMode("signup")}
              className={cn("px-3 py-1.5 rounded-md transition", mode === "signup" ? "bg-chipBg text-ink font-medium" : "text-mute hover:text-ink")}
            >회원가입</button>
          </div>

          <div className="flex flex-col gap-1.5">
            <label className="text-[12px] text-mute">이메일</label>
            <input
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              autoComplete="email"
              placeholder="you@example.com"
              className="bg-cream border border-rule rounded-lg px-3 py-2.5 text-[14.5px] text-ink placeholder:text-dim outline-none focus:border-ink2"
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-[12px] text-mute flex items-center justify-between">
              <span>비밀번호</span>
              {mode === "signin" && <button type="button" className="text-[11px] text-mute hover:text-ink underline decoration-dotted">잊으셨나요?</button>}
            </label>
            <input
              type="password"
              value={pw}
              onChange={e => setPw(e.target.value)}
              autoComplete={mode === "signin" ? "current-password" : "new-password"}
              placeholder="••••••••"
              className="bg-cream border border-rule rounded-lg px-3 py-2.5 text-[14.5px] text-ink placeholder:text-dim outline-none focus:border-ink2"
            />
          </div>

          <Btn kind="primary" size="lg" className="w-full mt-1">
            {mode === "signin" ? "로그인" : "가입하고 시작"}
          </Btn>

          <div className="flex items-center gap-3 text-[11.5px] text-dim my-1">
            <span className="h-px bg-rule flex-1" />또는<span className="h-px bg-rule flex-1" />
          </div>

          <div className="flex flex-col gap-2">
            <button type="button" onClick={submit} className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg border border-rule bg-paper hover:bg-cream text-[14px] text-ink2 font-medium transition">
              <svg width="16" height="16" viewBox="0 0 16 16"><g><path fill="#4285F4" d="M15.5 8.2c0-.6 0-1.1-.1-1.7H8v3.2h4.2c-.2 1-.7 1.8-1.6 2.4v2h2.6c1.5-1.4 2.3-3.4 2.3-5.9Z"/><path fill="#34A853" d="M8 16c2.1 0 3.9-.7 5.2-1.9l-2.6-2c-.7.5-1.6.8-2.6.8-2 0-3.8-1.4-4.4-3.2H1v2C2.3 14.4 5 16 8 16Z"/><path fill="#FBBC05" d="M3.6 9.7c-.2-.5-.3-1.1-.3-1.7s.1-1.2.3-1.7v-2H1C.4 5.6 0 6.8 0 8s.4 2.4 1 3.7l2.6-2Z"/><path fill="#EA4335" d="M8 3.2c1.1 0 2.1.4 2.9 1.1l2.2-2.2C11.9.8 10.1 0 8 0 5 0 2.3 1.6 1 4l2.6 2c.6-1.8 2.4-3.2 4.4-3.2Z"/></g></svg>
              Google로 계속하기
            </button>
            <button type="button" onClick={submit} className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg border border-rule bg-paper hover:bg-cream text-[14px] text-ink2 font-medium transition">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M10.6 7.5c0-1.6 1.3-2.4 1.4-2.4-.8-1.1-1.9-1.3-2.4-1.3-1-.1-1.9.6-2.4.6s-1.3-.6-2.1-.6c-1.1 0-2.1.6-2.7 1.6-1.1 2-.3 4.9.9 6.4.5.8 1.1 1.6 1.9 1.6.8 0 1-.5 2-.5s1.2.5 2 .5c.8 0 1.4-.8 1.9-1.5.6-.9.9-1.7.9-1.8 0 0-1.7-.7-1.7-2.6ZM9.1 2.6c.4-.5.7-1.2.6-2-.6 0-1.3.4-1.8.9-.4.4-.7 1.1-.6 1.8.7 0 1.3-.4 1.8-.7Z"/></svg>
              Apple로 계속하기
            </button>
          </div>

          <div className="text-center pt-2 mt-1 border-t border-ruleSoft">
            <button type="button" onClick={submit} className="text-[12.5px] text-mute hover:text-ink underline decoration-dotted">
              데모 둘러보기 →
            </button>
          </div>

          <div className="text-[10.5px] text-dim text-center leading-[1.5]">
            계속하면 <a href="#" className="underline">이용약관</a>과 <a href="#" className="underline">개인정보처리방침</a>에 동의하는 것으로 간주됩니다.
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { AuthView });