"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import { DollarSign, CalendarDays, Receipt, Percent, Users, LineChart } from "lucide-react";

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: "#home" },
              { name: "About", id: "#about" },
              { name: "Features", id: "#features" },
              { name: "Solutions", id: "#solutions" },
              { name: "Pricing", id: "#pricing" },
              { name: "Testimonials", id: "#testimonials" },
              { name: "Contact", id: "#contact" },
              { name: "Admin Login", id: "/admin/login" },
            ]}
            brandName="ReservaFlow"
            button={{ text: "Start Free Trial", href: "#contact" }}
          />
        </div>

        <div className="container mx-auto px-4 py-16">
          <h1 className="text-center text-5xl font-extrabold text-foreground mb-12">
            Admin Dashboard
          </h1>

          <div className="my-12">
            <MetricCardThree
              textboxLayout="default"
              useInvertedBackground={false}
              animationType="slide-up"
              title="Key Performance Indicators"
              description="Track essential business metrics at a glance."
              metrics={[
                { id: "kpi1", icon: DollarSign, title: "Total Revenue", value: "€250,000" },
                { id: "kpi2", icon: CalendarDays, title: "Reservations This Month", value: "1,234" },
                { id: "kpi3", icon: Receipt, title: "Online Orders", value: "567" },
                { id: "kpi4", icon: Percent, title: "Occupancy Rate", value: "85%" },
                { id: "kpi5", icon: Users, title: "Customer Growth", value: "+15%" }
              ]}
            />
          </div>

          <div className="mt-16 text-center">
            <h2 className="text-4xl font-bold text-foreground mb-8">Analytics Visualizations</h2>
            <p className="text-lg text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
              Detailed graphs and charts providing deeper insights into trends, customer behavior, and operational efficiency will be displayed here.
            </p>
            {/* Placeholder for actual chart/graph components */}
            <div className="mt-8 bg-card p-6 rounded-lg shadow-lg min-h-[300px] flex items-center justify-center">
              <LineChart className="w-24 h-24 text-primary-cta opacity-70" />
              <p className="ml-4 text-gray-500">Graph Placeholder</p>
            </div>
          </div>
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}