"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function DashboardPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Dashboard", id: "/dashboard" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Dashboard", href: "/dashboard" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Creator Quest RPG"
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="Creator Quest RPG Logo"
          navItems={navItems}
          button={{
            text: "Sign Up",            href: "/register"}}
        />
      </div>

      <div id="dashboard-features" data-section="dashboard-features">
        <FeatureCardTwentyThree
          animationType="slide-up"
          title="Your Personalized Creator Hub"
          description="The Dashboard is your command center for growth. Track progress, manage missions, and discover new ways to level up."
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "df1",              title: "Live XP & Level Tracking",              tags: ["Progress", "Motivation"],
              imageSrc: "http://img.b2bpic.net/free-photo/two-factor-authentication-mobile-device_23-2151997022.jpg",              imageAlt: "Live XP and Level Tracking"},
            {
              id: "df2",              title: "Daily Mission Overview",              tags: ["Habits", "Productivity"],
              imageSrc: "http://img.b2bpic.net/free-photo/multimedia-entertainment-play-button-interface_53876-120181.jpg",              imageAlt: "Daily Mission Summary"},
            {
              id: "df3",              title: "Achievement Badges Unlocked",              tags: ["Rewards", "Recognition"],
              imageSrc: "http://img.b2bpic.net/free-photo/8-bits-objects-gaming-assets_23-2151143643.jpg",              imageAlt: "Achievement Badges"},
          ]}
        />
      </div>

      <div id="dashboard-products" data-section="dashboard-products">
        <ProductCardTwo
          products={[
            {
              id: "p1",              brand: "Cosmetics",              name: "Cybernetic Glasses",              price: "$10.00",              rating: 5,
              reviewCount: "240",              imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-vr-glasses-gaming_23-2151138300.jpg",              imageAlt: "Cybernetic Glasses cosmetic"},
            {
              id: "p2",              brand: "Cosmetics",              name: "Glowing Hoodie",              price: "$15.00",              rating: 4,
              reviewCount: "180",              imageSrc: "http://img.b2bpic.net/free-photo/woman-hat-walking-market_23-2152003651.jpg",              imageAlt: "Glowing Hoodie cosmetic"},
            {
              id: "p3",              brand: "Boosters",              name: "Mega XP Boost (x2)",              price: "$7.00",              rating: 5,
              reviewCount: "300",              imageSrc: "http://img.b2bpic.net/free-photo/space-astronaut-with-copy-space_1194-638687.jpg",              imageAlt: "Mega XP Boost"},
            {
              id: "p4",              brand: "Cosmetics",              name: "Angelic Wings",              price: "$25.00",              rating: 5,
              reviewCount: "150",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-magical-wings-fairy-core-aesthetic_23-2151080002.jpg",              imageAlt: "Angelic Wings cosmetic"},
            {
              id: "p5",              brand: "Utility",              name: "Skill Respec Token",              price: "$5.00",              rating: 4,
              reviewCount: "90",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282445.jpg?_wi=1",              imageAlt: "Skill Respec Token"},
            {
              id: "p6",              brand: "Boosters",              name: "Creative Spark Pack",              price: "$12.00",              rating: 5,
              reviewCount: "110",              imageSrc: "http://img.b2bpic.net/free-photo/messy-office-workplace-workplace-workspace-concept_185193-108721.jpg",              imageAlt: "Creative Spark Pack"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          title="Boosters & Cosmetic Items"
          description="Personalize your avatar and accelerate your progress with our exclusive shop items."
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="dashboard-metrics" data-section="dashboard-metrics">
        <MetricCardEleven
          animationType="slide-up"
          title="Your Creator Stats"
          description="A quick overview of your most important metrics."
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "dm1",              value: "Level 25",              title: "Current Creator Level",              description: "Keep pushing forward to unlock new tiers.",              imageSrc: "http://img.b2bpic.net/free-vector/travel-onboarding-app-screens_23-2148407383.jpg"},
            {
              id: "dm2",              value: "850K",              title: "Virtual Followers",              description: "Your audience is growing, keep up the great work!",              imageSrc: "http://img.b2bpic.net/free-photo/people-carrying-burden-concept_23-2150044229.jpg"},
            {
              id: "dm3",              value: "32/50",              title: "Achievements Unlocked",              description: "So many more to conquer and showcase!",              imageSrc: "http://img.b2bpic.net/free-vector/seo-development-round-icons-set_1284-6881.jpg"},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="Creator Quest RPG Logo"
          logoText="Creator Quest RPG"
          columns={footerColumns}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}
