import { ShieldCheck } from "lucide-react";
import { useState } from "react";
import { Navigate, useLocation } from "react-router-dom";

import { useAuth } from "@/auth/AuthProvider";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { adminTheme } from "@/theme";
import { adminThemeVars } from "@/theme-vars";

export function AdminLoginPage() {
  const { authenticating, login, user } = useAuth();
  const location = useLocation();
  const [email, setEmail] = useState("admin@example.com");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);

  if (user) {
    const destination = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? "/";
    return <Navigate to={destination} replace />;
  }

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);

    try {
      await login({ email, password });
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : "로그인에 실패했습니다.");
    }
  }

  return (
    <div className="min-h-screen bg-[var(--admin-shell-bg)] px-6 py-10 text-[#283042]" style={adminThemeVars(adminTheme)}>
      <div className="mx-auto grid max-w-6xl overflow-hidden rounded-[36px] border border-[var(--admin-border)] bg-white shadow-[0_30px_80px_rgba(20,27,40,0.18)] lg:grid-cols-[1fr_440px]">
        <section className="bg-[#232a39] px-8 py-10 text-white sm:px-12 sm:py-14">
          <div className="inline-flex items-center gap-3 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold">
            <ShieldCheck className="h-4 w-4" />
            Admin console
          </div>
          <h1 className="mt-8 text-4xl font-black tracking-[-0.04em]">운영 콘솔 실로그인</h1>
          <p className="mt-5 max-w-md text-base leading-7 text-white/72">
            토큰을 저장한 뒤 `auth/me`를 재호출해서 운영 셸 진입 전 인증 상태를 검증합니다.
          </p>
        </section>

        <section className="px-8 py-10 sm:px-10 sm:py-14">
          <form className="space-y-5" onSubmit={handleSubmit}>
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f0447d]">Restricted access</p>
              <h2 className="mt-3 text-3xl font-black text-[#232a39]">Sign in</h2>
            </div>

            <label className="block space-y-2">
              <span className="text-sm font-semibold text-[#3a4354]">Email</span>
              <Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
            </label>

            <label className="block space-y-2">
              <span className="text-sm font-semibold text-[#3a4354]">Password</span>
              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} required />
            </label>

            {error ? <p className="text-sm font-medium text-[#cc2f5c]">{error}</p> : null}

            <Button className="w-full" type="submit" disabled={authenticating}>
              {authenticating ? "Signing in..." : "Open admin console"}
            </Button>
          </form>
        </section>
      </div>
    </div>
  );
}
