"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { BarChart3, TrendingUp, Settings, Mail, Github, Linkedin, Twitter } from "lucide-react";

export default function Dashboard() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Analytics"
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "Reports", id: "reports" },
            { name: "Analytics", id: "analytics" },
            { name: "Settings", id: "settings" },
            { name: "Support", id: "support" }
          ]}
          bottomLeftText="Dashboard v1.0"
          bottomRightText="admin@analytics.com"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplit
          title="Analytics Dashboard"
          description="Monitor key metrics and insights in real-time with our intuitive dashboard interface. Track performance, analyze trends, and make data-driven decisions with ease."
          background={{ variant: "sparkles-gradient" }}
          tag="Dashboard"
          tagIcon={BarChart3}
          buttons={[
            { text: "View Dashboard", href: "dashboard", className: "rounded shadow" },
            { text: "Learn More", href: "#stats", className: "rounded shadow" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"
          imageAlt="dashboard analytics business data interface"
          imagePosition="right"
        />
      </div>
      
      <div id="stats" data-section="stats">
        <MetricCardFourteen
          title="Key Performance Indicators tracking system-wide health and user engagement metrics in real-time."
          tag="Stats"
          metrics={[
            {
              id: "revenue",              value: "$124.5K",              description: "Total revenue generated this month across all channels"
            },
            {
              id: "users",              value: "8,429",              description: "Active users currently engaged with the platform"
            },
            {
              id: "growth",              value: "+24.5%",              description: "Month-over-month growth rate compared to previous period"
            },
            {
              id: "engagement",              value: "92%",              description: "User engagement score based on interaction metrics"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="charts" data-section="charts">
        <FeatureCardTwelve
          title="Data Visualizations"
          description="Comprehensive chart and graph placeholders for displaying your analytics data with interactive elements."
          tag="Charts"
          tagIcon={TrendingUp}
          features={[
            {
              id: "revenue-chart",              label: "Revenue",              title: "Monthly Revenue Trends",              items: [
                "Real-time data updates",                "Multi-period comparison",                "Export capabilities",                "Custom date ranges"
              ],
              buttons: [
                { text: "Configure", href: "#", className: "rounded shadow" }
              ]
            },
            {
              id: "users-chart",              label: "Users",              title: "User Growth Analytics",              items: [
                "Active user tracking",                "Cohort analysis",                "Retention metrics",                "Demographic breakdown"
              ],
              buttons: [
                { text: "Configure", href: "#", className: "rounded shadow" }
              ]
            },
            {
              id: "engagement-chart",              label: "Engagement",              title: "User Engagement Metrics",              items: [
                "Session duration tracking",                "Feature usage stats",                "Interaction heatmaps",                "Behavior analysis"
              ],
              buttons: [
                { text: "Configure", href: "#", className: "rounded shadow" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="advanced-filters" data-section="advanced-filters">
        <FeatureCardTwelve
          title="Advanced Dashboard Controls"
          description="Filter, customize, and configure your dashboard experience with powerful control options."
          tag="Controls"
          tagIcon={Settings}
          features={[
            {
              id: "filters",              label: "Filters",              title: "Advanced Filtering System",              items: [
                "Date range selection",                "Category filtering",                "Status-based filtering",                "Custom filter combinations"
              ],
              buttons: [
                { text: "Apply Filters", href: "#", className: "rounded shadow" }
              ]
            },
            {
              id: "export",              label: "Export",              title: "Data Export Options",              items: [
                "CSV format export",                "PDF report generation",                "Scheduled reports",                "Email delivery"
              ],
              buttons: [
                { text: "Schedule Export", href: "#", className: "rounded shadow" }
              ]
            },
            {
              id: "alerts",              label: "Alerts",              title: "Performance Alerts",              items: [
                "Threshold-based alerts",                "Anomaly detection",                "Email notifications",                "Mobile push alerts"
              ],
              buttons: [
                { text: "Configure Alerts", href: "#", className: "rounded shadow" }
              ]
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Support"
          tagIcon={Mail}
          title="Stay Updated"
          description="Subscribe to our dashboard updates and receive notifications about new features, improvements, and important alerts."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. You can unsubscribe at any time from dashboard settings."
          imageSrc="https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg"
          imageAlt="chart graph data analytics statistics"
          mediaPosition="right"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Analytics"
          copyrightText="© 2025 Analytics Dashboard. All rights reserved."
          socialLinks={[
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}