'use client';

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

export default function AdminDashboard() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // Check if admin is logged in
    const adminLoggedIn = sessionStorage.getItem('adminLoggedIn');
    if (adminLoggedIn !== 'true') {
      router.push('/admin');
      return;
    }
    setIsAuthenticated(true);
  }, [router]);

  const handleLogout = () => {
    sessionStorage.removeItem('adminLoggedIn');
    router.push('/admin');
  };

  if (!isAuthenticated) {
    return null;
  }

  const adminActions = [
    {
      id: 'add-job',
      title: 'Add New Job',
      description: 'Create a new service job for a vehicle',
      href: '/admin/jobs/add',
    },
    {
      id: 'view-jobs',
      title: 'View All Jobs',
      description: 'Browse and search all service jobs',
      href: '/admin/jobs',
    },
    // Add more actions here in the future
  ];

  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 max-w-4xl px-4 py-12">
        <div className="relative 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-8 flex items-center justify-between">
              <div className="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 Dashboard
                </h1>
              </div>
              <button
                onClick={handleLogout}
                className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
              >
                Logout
              </button>
            </div>

            <div className="mb-6">
              <h2 className="mb-4 text-xl font-bold text-white uppercase tracking-wider">
                Admin Actions
              </h2>
              <div className="grid gap-4 md:grid-cols-2">
                {adminActions.map((action) => (
                  <Link
                    key={action.id}
                    href={action.href}
                    className="group relative rounded-lg border-2 border-white/20 bg-black/50 p-6 transition-all hover:border-white/40 hover:bg-white/5 hover:shadow-[0_0_15px_rgba(255,255,255,0.2)]"
                  >
                    <div className="mb-2 flex items-center gap-2">
                      <div className="h-2 w-2 rounded-full bg-white group-hover:animate-pulse"></div>
                      <h3 className="text-lg font-bold text-white uppercase tracking-wider">
                        {action.title}
                      </h3>
                    </div>
                    <p className="text-sm text-white/60 font-mono">
                      {action.description}
                    </p>
                  </Link>
                ))}
              </div>
            </div>

            <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>
    </>
  );
}