"use client"
import Image from "next/image"
import { LoginForm } from "./components/login-form"
import { LeftPanel } from "./components/LeftPanel"
import { IconButton } from "@/components/ui/button";
import { useRouter } from "next/navigation";

const scrollBg = "/images/login/v1/bg.png";
const images = [
  "/images/login/v1/1.png",
  "/images/login/v1/2.png",
  "/images/login/v1/3.png",
  "/images/login/v1/4.png",
  "/images/login/v1/5.png",
  "/images/login/v1/6.png",
  "/images/login/v1/7.png",
  "/images/login/v1/8.png",
  "/images/login/v1/9.png",
  "/images/login/v1/10.png",
]

export default function LoginPage() {
  const router = useRouter();

  const handleClose = () => {
    router.replace('/');
  }

  return (
    <div className="flex h-screen w-screen overflow-hidden">
      {/* 左侧 - 滚动背景 + 图片轮播 (桌面端显示) */}
      <div className="hidden lg:block lg:w-1/2 relative">
        <LeftPanel scrollBg={scrollBg} images={images} />
        
        {/* 关闭按钮 - 桌面端 */}
        <IconButton
          iconfont="icon-close"
          variant="tertiaryDark"
          size="large"
          className="absolute top-6 left-6 z-20"
          onClick={handleClose}
        />
      </div>

      {/* 右侧 - 登录表单 */}
      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center px-6 sm:px-12 relative">
        {/* 关闭按钮 - 移动端 */}
        <IconButton
          iconfont="icon-close"
          variant="tertiary"
          size="large"
          className="absolute top-4 right-4 lg:hidden z-20"
          onClick={handleClose}
        />

        {/* Logo */}
        <div className="w-[120px] h-[48px] sm:w-[160px] sm:h-[64px] relative mb-8 sm:mb-12">
          <Image 
            src="/logo.svg" 
            alt="Crush Level" 
            fill 
            className="object-contain" 
            priority 
          />
        </div>

        {/* 登录表单 */}
        <div className="w-full max-w-[340px]">
          <LoginForm />
        </div>
      </div>
    </div>
  )
}