"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';

export default function AdminDashboardPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="mediumLargeSizeLargeTitles"
        background="blurBottom"
        cardStyle="gradient-radial"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "Admin Panel", id: "/admin" },
              { name: "Reservations", id: "/admin/reservations" },
              { name: "Orders", id: "/admin/orders" },
              { name: "Menu", id: "/admin/menu" },
              { name: "Events", id: "/admin/events" },
              { name: "Blogs", id: "/admin/blogs" },
              { name: "Customers", id: "/admin/customers" }
            ]}
            brandName="ReservaFlow Admin"
            button={{ text: "Logout", href: "#" }}
          />
        </div>

        <main className="container mx-auto p-8">
          <h1 className="text-4xl font-bold mb-8">Admin Panel Dashboard</h1>
          <p className="text-lg mb-4">Welcome to the ReservaFlow Admin Panel. Use the navigation to manage various aspects of your restaurant operations.</p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="p-6 bg-card rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-2">Reservations</h2>
              <p>Manage all incoming and existing reservations.</p>
              <a href="/admin/reservations" className="text-primary-cta hover:underline">Go to Reservations &rarr;</a>
            </div>
            <div className="p-6 bg-card rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-2">Orders</h2>
              <p>Oversee online orders for pickup and delivery.</p>
              <a href="/admin/orders" className="text-primary-cta hover:underline">Go to Orders &rarr;</a>
            </div>
            <div className="p-6 bg-card rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-2">Menu</h2>
              <p>Update your restaurant's menu items, categories, and pricing.</p>
              <a href="/admin/menu" className="text-primary-cta hover:underline">Go to Menu &rarr;</a>
            </div>
            <div className="p-6 bg-card rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-2">Events</h2>
              <p>Schedule and manage special events and private bookings.</p>
              <a href="/admin/events" className="text-primary-cta hover:underline">Go to Events &rarr;</a>
            </div>
            <div className="p-6 bg-card rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-2">Blogs</h2>
              <p>Create, edit, and publish blog posts and news articles.</p>
              <a href="/admin/blogs" className="text-primary-cta hover:underline">Go to Blogs &rarr;</a>
            </div>
            <div className="p-6 bg-card rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-2">Customers</h2>
              <p>View and manage customer profiles and loyalty data.</p>
              <a href="/admin/customers" className="text-primary-cta hover:underline">Go to Customers &rarr;</a>
            </div>
          </div>
        </main>
      </ReactLenis>
    </ThemeProvider>
  );
}