"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function Dashboard() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="medium"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Support", id: "support" }
          ]}
          brandName="Dashboard"
          bottomLeftText="Admin Panel"
          bottomRightText="dashboard@company.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Dashboard Overview"
          description="Real-time metrics and insights at a glance. Monitor your business performance with interactive charts and comprehensive statistics."
          background={{ variant: "plain" }}
          avatars={[
            { src: "/placeholders/placeholder1.webp", alt: "User 1" },
            { src: "/placeholders/placeholder1.webp", alt: "User 2" },
            { src: "/placeholders/placeholder1.webp", alt: "User 3" }
          ]}
          avatarText="Trusted by 500+ teams"
          buttons={[
            { text: "View Full Dashboard", href: "#metrics" },
            { text: "Export Report", href: "#" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Key Performance Indicators"
          description="Real-time statistics and metrics tracking your dashboard performance across all critical areas."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              title: "Total Revenue",              subtitle: "Last 30 days performance",              category: "Finance",              value: "$125,430",              buttons: [{ text: "View Details", href: "#" }]
            },
            {
              id: "2",              title: "Active Users",              subtitle: "Currently online",              category: "Analytics",              value: "3,847",              buttons: [{ text: "View Users", href: "#" }]
            },
            {
              id: "3",              title: "Conversion Rate",              subtitle: "30-day average",              category: "Marketing",              value: "4.62%",              buttons: [{ text: "Analyze", href: "#" }]
            },
            {
              id: "4",              title: "Customer Satisfaction",              subtitle: "Latest survey results",              category: "Support",              value: "9.2/10",              buttons: [{ text: "View Feedback", href: "#" }]
            }
          ]}
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardTwentyTwo
          title="Data Visualization"
          description="Interactive charts and graphs displaying comprehensive analytics and trend analysis for informed decision-making."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          tag="Analytics"
          features={[
            {
              id: "1",              title: "Revenue Trends Analysis Over Time",              category: ["Finance", "Analysis"],
              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Revenue trend chart"
            },
            {
              id: "2",              title: "User Engagement Metrics Dashboard",              category: ["Analytics", "Engagement"],
              imageSrc: "https://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",              imageAlt: "User engagement chart"
            },
            {
              id: "3",              title: "Market Performance Comparison",              category: ["Market", "Performance"],
              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Market comparison chart"
            },
            {
              id: "4",              title: "Conversion Funnel Visualization",              category: ["Sales", "Conversion"],
              imageSrc: "https://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",              imageAlt: "Conversion funnel chart"
            }
          ]}
        />
      </div>

      <div id="activity" data-section="activity">
        <BlogCardThree
          title="Recent Activity Feed"
          description="Latest updates and activities from your dashboard, tracking all important events and system changes."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          tag="Activity"
          blogs={[
            {
              id: "1",              category: "System",              title: "New User Registration Spike Detected",              excerpt: "Unusual surge in sign-ups reported. 247 new registrations in the last 24 hours exceeding average by 340%.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "Activity notification",              authorName: "System Alert",              date: "2 hours ago"
            },
            {
              id: "2",              category: "Update",              title: "Dashboard Maintenance Completed Successfully",              excerpt: "System upgrades and performance optimizations have been deployed. All services running at optimal efficiency.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "Update notification",              authorName: "Admin Team",              date: "5 hours ago"
            },
            {
              id: "3",              category: "Report",              title: "Monthly Revenue Report Generated",              excerpt: "Comprehensive revenue analysis for current month is ready. Total gross revenue increased by 12% compared to previous month.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "Report notification",              authorName: "Finance Department",              date: "1 day ago"
            },
            {
              id: "4",              category: "Alert",              title: "Security Update: SSL Certificate Renewed",              excerpt: "SSL certificate has been successfully renewed and deployed across all services ensuring continuous secure connections.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "Security notification",              authorName: "Security Team",              date: "2 days ago"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Dashboard"
          columns={[
            {
              items: [
                { label: "Home", href: "#" },
                { label: "Analytics", href: "#analytics" },
                { label: "Reports", href: "#" }
              ]
            },
            {
              items: [
                { label: "Settings", href: "#settings" },
                { label: "Profile", href: "#" },
                { label: "Preferences", href: "#" }
              ]
            },
            {
              items: [
                { label: "Documentation", href: "#" },
                { label: "Support", href: "#support" },
                { label: "Contact", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}