"use client";

import { useEffect, use } from "react";
import { useRouter } from "next/navigation";

type SearchParams = {
  next?: string | string[];
  role?: string | string[];
};

type PageProps = {
  searchParams: Promise<SearchParams>;
};

function sanitizePath(pathname: string | undefined | string[]) {
  if (!pathname || Array.isArray(pathname)) {
    return "/admin";
  }

  const trimmed = pathname.trim();
  if (!trimmed.startsWith("/")) {
    return "/admin";
  }

  if (trimmed.includes("://")) {
    return "/admin";
  }

  return trimmed;
}

export default function LoginPage(props: PageProps) {
  const searchParams = use(props.searchParams);
  const router = useRouter();
  const role = searchParams?.role;
  const candidate = sanitizePath(searchParams?.next);
  const targetPath = role !== "ADMIN" ? "/admin" : (candidate || "/admin");

  useEffect(() => {
    const timer = setTimeout(() => {
      router.replace(targetPath);
    }, 1500);
    return () => clearTimeout(timer);
  }, [router, targetPath]);

  return (
    <div className="min-h-screen bg-gray-950 flex flex-col items-center justify-center font-sans text-gray-100 selection:bg-indigo-500/30">
      <div className="w-full max-w-md p-8 relative overflow-hidden backdrop-blur-xl bg-white/5 border border-white/10 rounded-3xl shadow-2xl">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-50"></div>
        
        <div className="flex flex-col items-center space-y-6 text-center">
          <div className="relative flex items-center justify-center w-20 h-20 rounded-full bg-indigo-500/10 border border-indigo-500/20">
            <svg className="w-8 h-8 text-indigo-400 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
            <div className="absolute inset-0 rounded-full border border-indigo-500/30 animate-[ping_2s_ease-in-out_infinite]"></div>
          </div>
          
          <div className="space-y-2">
            <h1 className="text-2xl font-semibold tracking-tight">Security Check</h1>
            <p className="text-sm text-gray-400">
              {role === "ADMIN" 
                ? "驗證通過，正在安全導向至管理後台..." 
                : "正在將您導向至登入頁面..."}
            </p>
          </div>

          <div className="w-full h-1 bg-gray-800 rounded-full overflow-hidden">
            <div className="h-full bg-indigo-500 rounded-full animate-[progress_1.5s_ease-in-out_forwards]" style={{ width: '0%' }}>
              <style dangerouslySetInnerHTML={{ __html: `
                @keyframes progress {
                  0% { width: 0%; }
                  100% { width: 100%; }
                }
              `}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
