"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import { LineChart, Trophy, Percent, Star } from "lucide-react";

export const metadata = {
  title: 'Dashboard | The Drop Chronicle',
  description: 'Your personal dashboard with profile, statistics, and recent activity.',
};

export default function DashboardPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              {
                name: "Home", id: "#hero"},
              {
                name: "Dashboard", id: "/dashboard"},
              {
                name: "Giveaways", id: "#giveaways"},
              {
                name: "VIP Plan", id: "#vip-plans"},
              {
                name: "Tournaments", id: "#tournaments"},
              {
                name: "Winners", id: "#winners"},
              {
                name: "FAQs", id: "#faq"},
              {
                name: "Contact", id: "#contact"},
            ]}
            logoSrc="http://img.b2bpic.net/free-photo/shopping-cart-with-bubbles-geometric-shapes-3d-style_23-2152026895.jpg"
            logoAlt="The Drop Chronicle logo"
            brandName="The Drop Chronicle"
            button={{
              text: "Join Now", href: "#contact"}}
          />
        </div>

        <div id="user-profile" data-section="user-profile">
          <TeamCardSix
            title="My Profile"
            description="View and manage your personal information and membership details."
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            useInvertedBackground={false}
            members={[
              {
                id: "user-1",                name: "John Doe",                role: "VIP Member",                imageSrc: "http://img.b2bpic.net/free-photo/profile-3d-illustration_23-2151610476.jpg",                imageAlt: "User profile picture"
              }
            ]}
          />
        </div>

        <div id="user-statistics" data-section="user-statistics">
          <MetricCardThree
            title="Your Performance Metrics"
            description="Track your trading progress and key statistics at a glance."
            textboxLayout="default"
            animationType="slide-up"
            useInvertedBackground={false}
            metrics={[
              { id: "metric-1", icon: LineChart, title: "Total Trades", value: "1,245" },
              { id: "metric-2", icon: Trophy, title: "Wins", value: "980" },
              { id: "metric-3", icon: Percent, title: "Win Rate", value: "78.7%" },
              { id: "metric-4", icon: Star, title: "Points Earned", value: "5,000" }
            ]}
          />
        </div>

        <div id="recent-activity" data-section="recent-activity">
          <FeatureCardNineteen
            title="Recent Activity & Exclusive Access"
            description="Stay updated with your latest activities and exclusive features."
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              {
                tag: "New Signal",                title: "ETH/USDT Long",                subtitle: "Crypto Signal",                description: "Entry: $3,500, Target: $3,800. Profit locked: +8.5%",                imageSrc: "http://img.b2bpic.net/free-photo/gradient-abstract-flow_23-2150013098.jpg",                imageAlt: "Trading chart screenshot"
              },
              {
                tag: "Giveaway",                title: "Monthly VIP Laptop Draw",                subtitle: "Entry Confirmed",                description: "Your entry for the latest VIP laptop giveaway has been confirmed! Good luck!",                imageSrc: "http://img.b2bpic.net/free-photo/shiny-glossy-metal-surface_23-2150917719.jpg",                imageAlt: "Laptop giveaway"
              },
              {
                tag: "Tournament",                title: "Daily Trading Challenge",                subtitle: "Rank: #15",                description: "You've moved up to 15th place in today's challenge. Keep pushing!",                imageSrc: "http://img.b2bpic.net/free-photo/minimalist-metallic-dark-texture-design_53876-130097.jpg",                imageAlt: "Leaderboard interface"
              }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
