"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { BarChart3, TrendingUp, Github, Linkedin, Twitter } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          bottomLeftText="Dashboard System"
          bottomRightText="admin@dashboard.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Welcome to Your Dashboard"
          description="Monitor key metrics, track performance, and access actionable insights at a glance with our intuitive dashboard interface."
          tag="Analytics Hub"
          tagIcon={BarChart3}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg"
          imageAlt="Dashboard overview with charts and stats"
          buttons={[
            { text: "Explore Analytics" },
            { text: "View Reports", href: "reports" }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardFourteen
          title="Key Performance Indicators for your business growth and operational excellence across all departments."
          tag="Performance Metrics"
          metrics={[
            {
              id: "1",              value: "2.4M",              description: "Total active users across all platforms and regions"
            },
            {
              id: "2",              value: "47%",              description: "Month-over-month growth rate in user engagement"
            },
            {
              id: "3",              value: "$840K",              description: "Revenue generated this quarter from premium features"
            },
            {
              id: "4",              value: "98.5%",              description: "System uptime and reliability performance score"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="charts" data-section="charts">
        <ProductCardOne
          title="Data Visualization Charts"
          description="Interactive charts and graphs showing real-time data trends and performance metrics for comprehensive analysis."
          tag="Visual Analytics"
          tagIcon={TrendingUp}
          products={[
            {
              id: "chart-1",              name: "Revenue Trends",              price: "Q4 2024",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Revenue trends chart"
            },
            {
              id: "chart-2",              name: "User Growth",              price: "YoY Analysis",              imageSrc: "https://img.b2bpic.net/free-vector/social-media-analysis-design-graphs_53876-114315.jpg",              imageAlt: "User growth chart"
            },
            {
              id: "chart-3",              name: "Performance Index",              price: "30-Day View",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Performance index chart"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="quick-actions" data-section="quick-actions">
        <TextSplitAbout
          title="Quick Actions"
          description={[
            "Access frequently used features and administrative controls from a centralized hub for maximum productivity.",            "Customize your dashboard shortcuts and access permissions to match your workflow requirements and team needs."
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Create New Report" },
            { text: "Export Data" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Dashboard"
          copyrightText="© 2025 | Dashboard Analytics Platform"
          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>
  );
}