"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TextAbout from '@/components/sections/about/TextAbout';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BarChart3, HelpCircle, LineChart, TrendingUp, Zap } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          button={{ text: "Login", href: "#" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Dashboard Analytics"
          description="Monitor your business metrics, track performance, and gain insights at a glance with comprehensive data visualization."
          background={{ variant: "plain" }}
          tag="Analytics"
          tagIcon={TrendingUp}
          buttons={[
            { text: "View Reports", href: "#analytics" },
            { text: "Export Data", href: "#export" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Dashboard analytics overview"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Real-time metrics display"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Chart visualization"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Performance tracking"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Data insights"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Analytics dashboard"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardEleven
          title="Key Metrics"
          description="Real-time performance indicators for your dashboard"
          tag="Metrics"
          tagIcon={BarChart3}
          metrics={[
            {
              id: "1",              value: "12,458",              title: "Total Users",              description: "Active users in the last 30 days",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "User metrics"
            },
            {
              id: "2",              value: "8,392",              title: "New Signups",              description: "New accounts created this month",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-office-supplies_1098-3510.jpg",              imageAlt: "Signup metrics"
            },
            {
              id: "3",              value: "$125.4K",              title: "Revenue",              description: "Total monthly revenue",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-tablet-with-annual-summary_1098-3525.jpg",              imageAlt: "Revenue metrics"
            },
            {
              id: "4",              value: "3.8%",              title: "Conversion Rate",              description: "Overall conversion performance",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-cup-coffee-with-tablet-background_1098-3450.jpg",              imageAlt: "Conversion metrics"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardNineteen
          title="Data Visualization"
          description="Charts and graphs for detailed analysis"
          tag="Charts"
          tagIcon={LineChart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Revenue",              title: "Monthly Revenue Trend",              subtitle: "Year-over-year growth analysis",              description: "Track monthly revenue performance with detailed trend analysis. Monitor peak periods and seasonal patterns to optimize your business strategy and forecast future growth.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Revenue trend chart"
            },
            {
              id: 2,
              tag: "Users",              title: "User Growth Analytics",              subtitle: "Active user engagement metrics",              description: "Analyze user acquisition and engagement trends across different time periods. Understand user behavior patterns and identify growth opportunities to expand your user base effectively.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "User growth chart"
            },
            {
              id: 3,
              tag: "Performance",              title: "System Performance",              subtitle: "Uptime and reliability metrics",              description: "Monitor system health, uptime percentage, and performance metrics in real-time. Ensure optimal service delivery and identify potential bottlenecks before they impact users.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Performance metrics chart"
            }
          ]}
        />
      </div>

      <div id="quick-actions" data-section="quick-actions">
        <TextAbout
          tag="Quick Actions"
          tagIcon={Zap}
          title="Get started with common dashboard actions. Access reports, export data, configure alerts, and manage user permissions from your dashboard."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Generate Report", href: "#reports" },
            { text: "Configure Alerts", href: "#alerts" }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Dashboard FAQ"
          description="Common questions about using your dashboard"
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I export my dashboard data?",              content: "You can export data by clicking the Export button in the top-right corner of any dashboard section. Select your preferred format (CSV, PDF, or Excel) and the time period you want to export."
            },
            {
              id: "2",              title: "Can I customize the dashboard layout?",              content: "Yes, you can drag and drop dashboard cards to rearrange them. Click the gear icon on each card to customize metrics, filters, and display settings. Your layout preferences are automatically saved."
            },
            {
              id: "3",              title: "How often is the data updated?",              content: "Dashboard metrics are updated in real-time for most data sources. Some reports may be updated every 5-15 minutes depending on your data source configuration. You can manually refresh any section using the refresh button."
            },
            {
              id: "4",              title: "Can I set up automated alerts?",              content: "Yes, navigate to Settings > Alerts to create custom notifications. You can set thresholds for metrics and choose notification methods including email, SMS, or in-app notifications."
            },
            {
              id: "5",              title: "How do I share dashboard reports with my team?",              content: "Use the Share button to invite team members or generate a shareable link. You can set different permission levels (view-only, editor, or admin) for each person or group."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Dashboard"
          columns={[
            {
              items: [
                { label: "Overview", href: "overview" },
                { label: "Analytics", href: "analytics" },
                { label: "Reports", href: "reports" }
              ]
            },
            {
              items: [
                { label: "Settings", href: "settings" },
                { label: "Team Management", href: "#team" },
                { label: "API Docs", href: "#api" }
              ]
            },
            {
              items: [
                { label: "Help Center", href: "help" },
                { label: "Contact Support", href: "#support" },
                { label: "Status Page", href: "#status" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}