20260512-skg-tk/web/app/login/page.tsx

"use client"

import type { FormEvent } from "react"
import { useEffect, useMemo, useState } from "react"
import {
  AlertCircle,
  ArrowRight,
  CheckCircle2,
  Eye,
  EyeOff,
  LockKeyhole,
  UserRound,
} from "lucide-react"
import { AnimatedLoginCharacters, type LoginCharacterMood } from "@/components/login/animated-login-characters"
import { OasisCanvas } from "@/components/login/oasis-canvas"

type LoginStatus = "idle" | "loading" | "success"

export default function LoginPage() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [remember, setRemember] = useState(true)
  const [showPassword, setShowPassword] = useState(false)
  const [activeField, setActiveField] = useState<"username" | "password" | null>(null)
  const [hasError, setHasError] = useState(false)
  const [status, setStatus] = useState<LoginStatus>("idle")
  const [eyeOffset, setEyeOffset] = useState({ x: 0, y: 0 })

  useEffect(() => {
    const onPointerMove = (event: PointerEvent) => {
      const centerX = window.innerWidth / 2
      const centerY = window.innerHeight / 2
      const nextX = Math.max(-1, Math.min(1, (event.clientX - centerX) / centerX))
      const nextY = Math.max(-1, Math.min(1, (event.clientY - centerY) / centerY))
      setEyeOffset({ x: nextX * 8, y: nextY * 5.5 })
    }
    window.addEventListener("pointermove", onPointerMove)
    return () => window.removeEventListener("pointermove", onPointerMove)
  }, [])

  const disabled = status === "loading" || status === "success"

  const mood: LoginCharacterMood = useMemo(() => {
    if (status === "success") return "success"
    if (hasError) return "error"
    if (showPassword && activeField === "password") return "peek"
    if (activeField || username || password) return "typing"
    return "idle"
  }, [activeField, hasError, password, showPassword, status, username])

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setHasError(false)
    if (!username.trim() || !password) {
      setHasError(true)
      return
    }
    setStatus("loading")
    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password, remember }),
      })
      if (!res.ok) {
        throw new Error()
      }
      setStatus("success")
      window.setTimeout(() => {
        window.location.href = "/"
      }, 420)
    } catch {
      setStatus("idle")
      setHasError(true)
    }
  }

  return (
    <main className="login-page login-page--oasis login-page--source relative min-h-screen overflow-hidden text-white">
      <OasisCanvas />
      <div className="login-oasis-shade" />
      <div className="login-source-overlay">
        <section className="login-auth-panel login-source-auth-panel login-source-combo-panel rounded-[8px]">
          <img className="login-skg-mark" src="/skg-logo-black.svg" alt="" aria-hidden="true" />
          <div className="login-source-character-strip" aria-hidden="true">
            <AnimatedLoginCharacters mood={mood} eyeOffset={eyeOffset} />
          </div>
          <form className="login-source-form-pane w-full" onSubmit={onSubmit}>
            <div className="mb-4">
              <div className="login-auth-icon inline-flex h-9 w-9 items-center justify-center rounded-[8px] text-white">
                <LockKeyhole className="h-5 w-5" />
              </div>
            </div>

            <div className="space-y-3">
              <label className="block">
                <span className="flex h-11 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
                  <UserRound className="h-4 w-4 text-white/45" />
                  <input
                    className="h-full min-w-0 flex-1 bg-transparent text-base text-white outline-none placeholder:text-white/30"
                    value={username}
                    disabled={disabled}
                    autoComplete="username"
                    onFocus={() => setActiveField("username")}
                    onBlur={() => setActiveField(null)}
                    onChange={(event) => {
                      setUsername(event.target.value)
                      if (hasError) setHasError(false)
                    }}
                  />
                </span>
              </label>

              <label className="block">
                <span className="flex h-11 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
                  <LockKeyhole className="h-4 w-4 text-white/45" />
                  <input
                    className="h-full min-w-0 flex-1 bg-transparent text-base text-white outline-none placeholder:text-white/30"
                    value={password}
                    disabled={disabled}
                    type={showPassword ? "text" : "password"}
                    autoComplete="current-password"
                    onFocus={() => setActiveField("password")}
                    onBlur={() => setActiveField(null)}
                    onChange={(event) => {
                      setPassword(event.target.value)
                      if (hasError) setHasError(false)
                    }}
                  />
                  <button
                    className="grid h-9 w-9 place-items-center rounded-[8px] text-white/55 transition hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-[#d6b36a]/45 disabled:opacity-50"
                    type="button"
                    disabled={disabled}
                    onMouseDown={(event) => event.preventDefault()}
                    onClick={() => setShowPassword((value) => !value)}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </button>
                </span>
              </label>
            </div>

            <label className="mt-3 flex cursor-pointer items-center gap-2 text-sm text-white/60">
              <input
                className="h-4 w-4 rounded border-white/20 bg-black/30 accent-[#c89b3c]"
                type="checkbox"
                checked={remember}
                disabled={disabled}
                onChange={(event) => setRemember(event.target.checked)}
              />
            </label>

            <div className="mt-4 min-h-9">
              {hasError ? (
                <div className="inline-flex h-9 w-9 items-center justify-center rounded-[8px] border border-red-400/30 bg-red-500/10 text-red-100">
                  <AlertCircle className="h-4 w-4" />
                </div>
              ) : status === "success" ? (
                <div className="inline-flex h-9 w-9 items-center justify-center rounded-[8px] border border-emerald-300/30 bg-emerald-400/10 text-emerald-100">
                  <CheckCircle2 className="h-4 w-4" />
                </div>
              ) : null}
            </div>

            <button
              className="mt-1 flex h-11 w-full items-center justify-center gap-2 rounded-[8px] bg-white px-4 text-base font-semibold text-black shadow-xl shadow-black/25 transition hover:bg-[#f5efe3] focus:outline-none focus:ring-2 focus:ring-[#d6b36a]/60 disabled:cursor-wait disabled:opacity-70"
              type="submit"
              disabled={disabled}
            >
              <ArrowRight className="h-4 w-4" />
            </button>
          </form>
        </section>
      </div>
    </main>
  )
}