"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import { BarChart2, CheckCircle, Clock, Facebook, Instagram, Linkedin, ListChecks, MapPin } from "lucide-react";

export default function AdminDashboardPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "Features", id: "#reporting-features" },
              { name: "Impact", id: "#public-impact" },
              { name: "FAQs", id: "#faqs" },
              { name: "Contact", id: "#contact" },
              { name: "Admin Dashboard", id: "/admin-dashboard" }
            ]}
            brandName="AquaWatch"
            button={{ text: "Report Issue", href: "#contact" }}
          />
        </div>

        <div id="admin-dashboard-hero" data-section="admin-dashboard-hero">
          <HeroSplitDoubleCarousel
            background={{ variant: "radial-gradient" }}
            title="Admin Dashboard"
            description="Manage water quality reports, users, and system settings."
            leftCarouselItems={[]}
            rightCarouselItems={[]}
            tag="System Overview"
            buttons={[]}
          />
        </div>

        <div id="dashboard-metrics" data-section="dashboard-metrics">
          <MetricCardSeven
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            title="Key Performance Indicators"
            description="Real-time insights into platform activity."
            metrics={[
              { id: "1", value: "1,500", title: "Active Reports", items: ["Currently under review", "Requires action"] },
              { id: "2", value: "95%", title: "Resolution Rate", items: ["Percentage of resolved issues", "High impact achieved"] },
              { id: "3", value: "3 Days", title: "Avg. Resolution Time", items: ["Faster response times", "Efficient process"] },
              { id: "4", value: "250", title: "New Users", items: ["Past 30 days", "Community growth"] }
            ]}
          />
        </div>

        <div id="recent-activity" data-section="recent-activity">
          <FeatureBento
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            title="Recent Reports & Activities"
            description="Overview of the latest water quality reports and system actions."
            features={[
              {
                title: "Report Status Updates",                description: "Track the status of recent water quality reports.",                bentoComponent: "timeline",                heading: "Latest Reports",                subheading: "Updates from the last 24 hours",                items: [
                  { label: "Report #1234: Oil Spill", detail: "Status: Under Review (Zone B)" },
                  { label: "Report #1233: Algae Bloom", detail: "Status: Resolved (Lake Victoria)" },
                  { label: "Report #1232: Industrial Waste", detail: "Status: Action Initiated (River Delta)" }
                ],
                completedLabel: "View All Activities"
              },
              {
                title: "User Engagement",                description: "Monitor user activity and engagement trends.",                bentoComponent: "animated-bar-chart"
              }
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterCard
            logoText="AquaWatch"
            copyrightText="© 2024 AquaWatch. All rights reserved."
            socialLinks={[
              { icon: Facebook, href: "https://facebook.com/aquawatch", ariaLabel: "Facebook" },
              { icon: Instagram, href: "https://instagram.com/aquawatch", ariaLabel: "Instagram" },
              { icon: Linkedin, href: "https://linkedin.com/company/aquawatch", ariaLabel: "LinkedIn" }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
