"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Briefcase, Folder, BookOpen, CheckCircle, Trophy } from 'lucide-react';

export default function DashboardPage() {
  const navItems = [
    { name: "Dashboard", id: "dashboard" },
    { name: "Projects", id: "projects" },
    { name: "Skills", id: "skills" },
    { name: "Goals", id: "goals" },
    { name: "Achievements", id: "achievements" },
    { name: "Profile", id: "profile" }
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Dashboard", href: "/dashboard" },
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#" },
        { label: "Export", href: "#" }
      ]
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Contact", href: "#contact" }
      ]
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Security", href: "#" }
      ]
    },
    {
      title: "Connect",
      items: [
        { label: "Twitter", href: "https://twitter.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Discord", href: "https://discord.com" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Trackfolio"
          bottomLeftText="Track Your Journey"
          bottomRightText="hello@trackfolio.io"
        />
      </div>

      <div id="dashboard-hero" data-section="dashboard-hero">
        <HeroSplitTestimonial
          title="Welcome to Your Dashboard"
          description="Manage your portfolio, track your progress, and showcase your achievements all in one beautiful interface. Start building your personal brand today."
          tag="Dashboard Overview"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          buttons={[
            { text: "Create New Project", href: "#" },
            { text: "View Tutorial", href: "#" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/user-panel-infographic-template-dashboard_23-2148378205.jpg?_wi=2"
          imageAlt="Dashboard Preview"
          mediaAnimation="slide-up"
          background={{ variant: "grid" }}
          testimonials={[
            {
              name: "Quick Start",
              handle: "@trackfolio",
              testimonial: "Get started in seconds. Add your first project and begin tracking your progress immediately.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman_23-2148137687.jpg?_wi=2",
              imageAlt: "Quick Start"
            },
            {
              name: "Easy Organization",
              handle: "@trackfolio",
              testimonial: "Organize all your work in one place with intuitive categories and drag-and-drop interface.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-portrait_23-2148105678.jpg?_wi=2",
              imageAlt: "Easy Organization"
            },
            {
              name: "Real-time Updates",
              handle: "@trackfolio",
              testimonial: "See your portfolio grow in real-time as you add projects, skills, and achievements.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-student-with-book-her-hands-goes-university_169016-66761.jpg?_wi=2",
              imageAlt: "Real-time Updates"
            }
          ]}
          useInvertedBackground={false}
          imagePosition="right"
        />
      </div>

      <div id="dashboard-stats" data-section="dashboard-stats">
        <MetricCardOne
          title="Your Portfolio Statistics"
          description="Monitor your growth and achievements at a glance."
          metrics={[
            {
              id: "active-projects",
              value: "12",
              title: "Active Projects",
              description: "Currently in progress",
              icon: Folder
            },
            {
              id: "skills-developed",
              value: "24",
              title: "Skills Developed",
              description: "From beginner to advanced",
              icon: BookOpen
            },
            {
              id: "goals-achieved",
              value: "18",
              title: "Goals Achieved",
              description: "Completed milestones",
              icon: CheckCircle
            },
            {
              id: "total-achievements",
              value: "8",
              title: "Total Achievements",
              description: "Certificates and awards",
              icon: Trophy
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View Detailed Analytics", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="dashboard-cta" data-section="dashboard-cta">
        <HeroSplitTestimonial
          title="Ready to Export Your Portfolio?"
          description="Generate a professional portfolio document or shareable link to showcase your work to potential employers and clients."
          tag="Portfolio Export"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          buttons={[
            { text: "Generate Portfolio", href: "#" },
            { text: "Share Link", href: "#" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/close-up-code-laptop-screen-server-hub-employees-reading-paperwork_482257-122503.jpg?_wi=2"
          imageAlt="Portfolio Export"
          mediaAnimation="slide-up"
          background={{ variant: "grid" }}
          testimonials={[
            {
              name: "Professional Export",
              handle: "@trackfolio",
              testimonial: "Export your portfolio as a beautifully formatted PDF perfect for job applications.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg?_wi=2",
              imageAlt: "Professional Export"
            },
            {
              name: "Shareable Links",
              handle: "@trackfolio",
              testimonial: "Create unique shareable links to showcase your portfolio to recruiters and clients.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/business-man-by-skyscraper_1303-13654.jpg?_wi=2",
              imageAlt: "Shareable Links"
            },
            {
              name: "Live Updates",
              handle: "@trackfolio",
              testimonial: "Your shared portfolio updates automatically as you add new projects and achievements.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/funny-smiling-woman-with-ringlets-wears-glasses-blue-jacket-poses-pink_291650-1102.jpg?_wi=2",
              imageAlt: "Live Updates"
            }
          ]}
          useInvertedBackground={false}
          imagePosition="right"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Trackfolio. All rights reserved."
          bottomRightText="Made with ❤️ for portfolio builders"
        />
      </div>
    </ThemeProvider>
  );
}