"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";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";

export default function AdminDashboardPage() {
  const router = useRouter();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [adminId, setAdminId] = useState("");

  useEffect(() => {
    // Check authentication on mount
    const auth = localStorage.getItem("adminAuth");
    if (auth) {
      try {
        const parsedAuth = JSON.parse(auth);
        if (parsedAuth.isAuthenticated) {
          setIsAuthenticated(true);
          setAdminId(parsedAuth.id);
        } else {
          router.push("/admin/login");
        }
      } catch (e) {
        router.push("/admin/login");
      }
    } else {
      router.push("/admin/login");
    }
    setIsLoading(false);
  }, [router]);

  const handleLogout = () => {
    localStorage.removeItem("adminAuth");
    router.push("/admin/login");
  };

  const navItems = [
    { name: "Home", id: "home" },
    { name: "Streetwear", id: "streetwear" },
    { name: "Casuals", id: "casuals" },
    { name: "Specials", id: "specials" },
    { name: "Collections", id: "collections" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Shop",      items: [
        { label: "Streetwear", href: "#streetwear" },
        { label: "Casuals", href: "#casuals" },
        { label: "Specials", href: "#specials" },
        { label: "Seasonal Drops", href: "#seasonal" },
        { label: "New Arrivals", href: "#new" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/collections" },
        { label: "Our Story", href: "#story" },
        { label: "Careers", href: "#careers" },
        { label: "Press", href: "#press" },
        { label: "Blog", href: "#blog" },
      ],
    },
    {
      title: "Support",      items: [
        { label: "Contact Us", href: "#contact" },
        { label: "FAQ", href: "#faq" },
        { label: "Shipping Info", href: "#shipping" },
        { label: "Returns", href: "#returns" },
        { label: "Track Order", href: "#track" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms of Service", href: "#terms" },
        { label: "Refund Policy", href: "#refund" },
        { label: "Cookie Policy", href: "#cookies" },
        { label: "Accessibility", href: "#accessibility" },
      ],
    },
  ];

  if (isLoading) {
    return (
      <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeMediumTitles"
        background="aurora"
        cardStyle="soft-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
      >
        <div className="flex items-center justify-center min-h-screen">
          <p className="text-lg">Loading...</p>
        </div>
      </ThemeProvider>
    );
  }

  if (!isAuthenticated) {
    return null;
  }

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="DripDrop"
          bottomLeftText="Admin Dashboard"
          bottomRightText="hello@dripdrop.com"
        />
      </div>

      <div className="min-h-screen px-4 md:px-6 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="flex justify-between items-center mb-8">
            <div>
              <h1 className="text-4xl font-bold mb-2">Admin Dashboard</h1>
              <p className="text-gray-600 dark:text-gray-400">Welcome, {adminId}</p>
            </div>
            <button
              onClick={handleLogout}
              className="bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-semibold py-2 px-6 rounded-md transition duration-200"
            >
              Logout
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-xl font-bold mb-4">Total Orders</h2>
              <p className="text-4xl font-bold text-blue-600 dark:text-blue-400">2,847</p>
              <p className="text-gray-600 dark:text-gray-400 mt-2">+12% from last month</p>
            </div>

            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-xl font-bold mb-4">Total Revenue</h2>
              <p className="text-4xl font-bold text-green-600 dark:text-green-400">₹2.5L</p>
              <p className="text-gray-600 dark:text-gray-400 mt-2">+8% from last month</p>
            </div>

            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-xl font-bold mb-4">Active Users</h2>
              <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">1,234</p>
              <p className="text-gray-600 dark:text-gray-400 mt-2">+5% from last month</p>
            </div>

            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-xl font-bold mb-4">Pending Orders</h2>
              <p className="text-4xl font-bold text-orange-600 dark:text-orange-400">156</p>
              <p className="text-gray-600 dark:text-gray-400 mt-2">Awaiting shipment</p>
            </div>

            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-xl font-bold mb-4">Top Product</h2>
              <p className="text-lg font-semibold">Premium Black Hoodie</p>
              <p className="text-gray-600 dark:text-gray-400 mt-2">324 units sold</p>
            </div>

            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-xl font-bold mb-4">Return Rate</h2>
              <p className="text-4xl font-bold text-red-600 dark:text-red-400">2.3%</p>
              <p className="text-gray-600 dark:text-gray-400 mt-2">Below industry average</p>
            </div>
          </div>

          <div className="mt-12">
            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-6">
              <h2 className="text-2xl font-bold mb-6">Quick Actions</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <Link
                  href="/"
                  className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-md text-center transition duration-200"
                >
                  View Store
                </Link>
                <button className="bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white font-semibold py-3 px-4 rounded-md transition duration-200">
                  Manage Products
                </button>
                <button className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-semibold py-3 px-4 rounded-md transition duration-200">
                  View Orders
                </button>
                <button className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-semibold py-3 px-4 rounded-md transition duration-200">
                  Generate Report
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 mt-12">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
          bottomRightText="Secure checkout powered by Razorpay & Stripe"
          ariaLabel="Site footer with navigation and legal information"
        />
      </div>
    </ThemeProvider>
  );
}
