"use client";

import Image from "next/image";
import { useLogin } from "@/hooks/useLogin";
import { LoginForm } from "@/components/auth/LoginForm";
import { UI_CONFIG } from "@/constants/auth";

export default function LoginPage() {
  const {
    formData,
    isLoading,
    error,
    showPassword,
    isPopMode,
    handleInputChange,
    handleLogin,
    togglePasswordVisibility,
    togglePopMode,
  } = useLogin();

  return (
    <div
      className="relative flex min-h-screen w-full items-center justify-center overflow-hidden"
      style={{
        background:
          "linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)",
      }}
    >
      {/* 라디얼 글로우 (블루/시안/퍼플) */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(circle at 20% 20%, rgba(0,80,143,0.30) 0, transparent 50%), radial-gradient(circle at 80% 20%, rgba(74,255,255,0.08) 0, transparent 40%), radial-gradient(circle at 50% 80%, rgba(94,53,177,0.15) 0, transparent 50%)",
        }}
      />

      {/* 격자 무늬 오버레이 */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }}
      />

      {/* 글래스 카드 */}
      <div
        className="relative z-10 w-[380px] max-w-[calc(100vw-2rem)] rounded-xl px-8 py-8"
        style={{
          background: "rgba(255, 255, 255, 0.97)",
          backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)",
          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
        }}
      >
        <div className="mb-5 flex flex-col items-center gap-1">
          <Image
            src="/images/rps-logo-on.png"
            alt="(주)알피에스 RPS 로고"
            width={150}
            height={40}
            className="h-10 w-auto object-contain"
            priority
          />
          <p className="text-sm font-bold" style={{ color: "#00508f" }}>
            업무관리 시스템
          </p>
        </div>

        <LoginForm
          formData={formData}
          isLoading={isLoading}
          error={error}
          showPassword={showPassword}
          isPopMode={isPopMode}
          onInputChange={handleInputChange}
          onSubmit={handleLogin}
          onTogglePassword={togglePasswordVisibility}
          onTogglePop={togglePopMode}
        />
      </div>

      {/* 하단 고정 푸터 */}
      <footer
        className="absolute bottom-0 left-0 right-0 z-20 flex flex-col items-start gap-3 px-12 py-7 text-[12px] leading-relaxed text-gray-600 sm:flex-row sm:items-center sm:justify-between sm:gap-6"
        style={{
          background: "rgba(255, 255, 255, 0.95)",
          borderTop: "1px solid #eee",
        }}
      >
        <div className="flex items-center gap-4">
          <Image
            src="/images/rps-logo-on.png"
            alt="RPS"
            width={90}
            height={24}
            className="h-7 w-auto object-contain"
          />
          <div className="flex flex-col gap-0.5">
            <p className="text-[13px] font-semibold text-gray-800">
              {UI_CONFIG.COMPANY_KR}
            </p>
            <p className="text-[12px]">
              본사 : {UI_CONFIG.ADDRESS}
            </p>
            <p className="text-[12px]">
              TEL : {UI_CONFIG.TEL} &nbsp;|&nbsp; FAX : {UI_CONFIG.FAX}
              &nbsp;|&nbsp; {UI_CONFIG.EMAIL}
            </p>
          </div>
        </div>
        <p className="text-[11px] text-gray-500">{UI_CONFIG.COPYRIGHT}</p>
      </footer>
    </div>
  );
}
