"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterCard from '@/components/sections/footer/FooterCard';
import { BarChart3, TrendingUp, Zap, Shield, Settings, Twitter, Linkedin, Github } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" }
          ]}
          brandName="Dashboard"
          bottomLeftText="Dashboard v1.0"
          bottomRightText="admin@dashboard.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="DASHBOARD"
          description="Monitor metrics, analyze trends, and manage your operations from a unified control center"
          buttons={[
            { text: "Get Started", href: "#metrics" },
            { text: "Learn More", href: "#charts" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Dashboard interface with analytics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Analytics charts and metrics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "Business reports and data"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Key Performance Indicators"
          description="Real-time metrics tracking your dashboard activity and system performance"
          tag="Metrics"
          tagIcon={BarChart3}
          metrics={[
            { id: "1", value: "2,847", description: "Total Users" },
            { id: "2", value: "94.2%", description: "System Uptime" },
            { id: "3", value: "12.5K", description: "Active Sessions" },
            { id: "4", value: "89ms", description: "Avg Response Time" }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="charts" data-section="charts">
        <ProductCardTwo
          title="Dashboard Charts & Analytics"
          description="Interactive visualization modules for comprehensive data analysis and reporting"
          tag="Charts"
          tagIcon={TrendingUp}
          products={[
            {
              id: "chart-1",              brand: "Analytics",              name: "Revenue Trends",              price: "Real-time",              rating: 5,
              reviewCount: "1.2k",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Revenue trend chart"
            },
            {
              id: "chart-2",              brand: "Analytics",              name: "User Growth",              price: "Real-time",              rating: 5,
              reviewCount: "892",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "User growth chart"
            },
            {
              id: "chart-3",              brand: "Analytics",              name: "Performance Metrics",              price: "Real-time",              rating: 4,
              reviewCount: "567",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Performance metrics chart"
            },
            {
              id: "chart-4",              brand: "Analytics",              name: "Conversion Funnel",              price: "Real-time",              rating: 5,
              reviewCount: "723",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "Conversion funnel chart"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="Dashboard Features"
          description="Powerful tools built for intuitive data exploration and actionable insights"
          features={[
            {
              icon: Zap,
              title: "Real-Time Updates",              description: "Live data feeds with instant synchronization across all dashboard components"
            },
            {
              icon: Shield,
              title: "Secure Access",              description: "Enterprise-grade security with role-based permissions and audit trails"
            },
            {
              icon: BarChart3,
              title: "Advanced Analytics",              description: "Comprehensive analysis tools with predictive insights and trend forecasting"
            },
            {
              icon: Settings,
              title: "Customizable Layout",              description: "Drag-and-drop widgets and personalized dashboard configurations"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Dashboard"
          copyrightText="© 2025 Dashboard Analytics. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}