'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import AdminLogo from '../components/AdminLogo';

export default function AdminLogin() {
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const router = useRouter();

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (password === '111222') {
      // Store admin session
      sessionStorage.setItem('adminLoggedIn', 'true');
      router.push('/admin/dashboard');
    } else {
      setError('Invalid password');
      setPassword('');
    }
  };

  return (
    <>
      <AdminLogo />
      <div className="relative min-h-screen bg-black tech-grid scanlines">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
      </div>

      <div className="relative mx-auto flex min-h-screen max-w-md flex-col items-center justify-center px-4 py-12">
        <div className="relative w-full rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
          <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
          <div className="relative">
            <div className="mb-2 flex items-center gap-2">
              <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
              <h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
                Admin Login
              </h1>
            </div>
            <p className="mb-6 text-sm text-white/60 font-mono">
              ENTER ADMIN PASSWORD TO CONTINUE
            </p>

            <form onSubmit={handleLogin} className="space-y-4">
              <div>
                <label
                  htmlFor="password"
                  className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                >
                  Password
                </label>
                <input
                  id="password"
                  type="password"
                  value={password}
                  onChange={(e) => {
                    setPassword(e.target.value);
                    setError('');
                  }}
                  placeholder="Enter password"
                  className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 text-lg font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                  required
                />
                {error && (
                  <p className="mt-2 text-sm text-red-500 font-mono">{error}</p>
                )}
              </div>

              <button
                type="submit"
                className="w-full rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 text-lg font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
              >
                Login
              </button>
            </form>

            <div className="mt-6 text-center">
              <Link
                href="/"
                className="text-sm text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider"
              >
                ← Back to Home
              </Link>
            </div>
          </div>
        </div>
      </div>
      </div>
    </>
  );
}