"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';

export default function AdminDashboardPage() {
  const router = useRouter();
  const [isAdmin, setIsAdmin] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = localStorage.getItem('adminToken');
    const cookieToken = document.cookie.split('; ').find(row => row.startsWith('adminToken='))?.split('=')[1];

    if (token === 'mock-admin-token' && cookieToken === 'mock-admin-token') {
      setIsAdmin(true);
    } else {
      router.push('/admin/login?message=Unauthorized');
    }
    setLoading(false);
  }, [router]);

  const handleLogout = () => {
    localStorage.removeItem('adminToken');
    document.cookie = 'adminToken=; path=/; max-age=0;';
    router.push('/admin/login');
  };

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Pricing", id: "/pricing" },
    { name: "FAQ", id: "/faq" },
    { name: "Contact", id: "/contact" },
    { name: "Admin Login", id: "/admin/login" }
  ];

  if (loading) {
    return (
      <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
      >
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            brandName="SocBoost"
            button={{ text: "Register", href: "/register" }}
          />
        </div>
        <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
          <p className="text-foreground">Loading...</p>
        </div>
      </ThemeProvider>
    );
  }

  if (!isAdmin) {
    return null;
  }

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="grid"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
          logoAlt="SocBoost Logo"
          brandName="SocBoost"
          button={{ text: "Register", href: "/register" }}
        />
      </div>

      <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
        <div className="w-full max-w-2xl p-8 space-y-6 bg-card rounded-lg shadow-lg text-center">
          <h2 className="text-3xl font-bold text-foreground">Welcome to Admin Dashboard!</h2>
          <p className="text-lg text-foreground-lighter">This is a protected route, accessible only to authenticated administrators.</p>
          <button
            onClick={handleLogout}
            className="mt-6 py-2 px-6 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
          >
            Logout
          </button>
        </div>
      </div>
    </ThemeProvider>
  );
}