"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { BarChart3, Trophy, TrendingUp, Clock } from 'lucide-react';

export default function DashboardPage() {
  const stats = [
    { icon: Clock, label: "Hours Learned", value: "24.5", color: "text-blue-500" },
    { icon: Trophy, label: "Badges Earned", value: "12", color: "text-yellow-500" },
    { icon: TrendingUp, label: "Courses Completed", value: "3", color: "text-green-500" },
    { icon: BarChart3, label: "Current Streak", value: "7 days", color: "text-purple-500" },
  ];

  const recentCourses = [
    { title: "Beginner's Guide to Stocks", progress: 75, status: "In Progress" },
    { title: "Personal Budgeting", progress: 100, status: "Completed" },
    { title: "Crypto 101 Course", progress: 45, status: "In Progress" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Learn", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "Community", id: "/" },
            { name: "FAQ", id: "/" },
            { name: "Dashboard", id: "/dashboard" },
          ]}
          button={{
            text: "Log Out",            href: "/login"
          }}
          brandName="FinHub"
        />
      </div>

      <div className="min-h-screen bg-background pt-20 pb-20 px-4">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <div className="mb-12">
            <h1 className="text-4xl font-bold text-foreground mb-2">Welcome Back, Learner!</h1>
            <p className="text-lg text-foreground opacity-75">Here's your learning progress and achievements</p>
          </div>

          {/* Stats Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {stats.map((stat, index) => {
              const Icon = stat.icon;
              return (
                <div key={index} className="bg-card rounded-lg p-6 shadow-md">
                  <div className="flex items-center justify-between mb-4">
                    <Icon className={`${stat.color}`} size={32} />
                  </div>
                  <p className="text-sm text-foreground opacity-75 mb-2">{stat.label}</p>
                  <p className="text-3xl font-bold text-foreground">{stat.value}</p>
                </div>
              );
            })}
          </div>

          {/* Recent Courses */}
          <div className="bg-card rounded-lg shadow-md p-8 mb-12">
            <h2 className="text-2xl font-bold text-foreground mb-6">Your Learning Progress</h2>
            <div className="space-y-6">
              {recentCourses.map((course, index) => (
                <div key={index}>
                  <div className="flex justify-between items-center mb-2">
                    <h3 className="text-lg font-semibold text-foreground">{course.title}</h3>
                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                      course.status === "Completed" 
                        ? "bg-green-100 text-green-800" 
                        : "bg-blue-100 text-blue-800"
                    }`}>
                      {course.status}
                    </span>
                  </div>
                  <div className="w-full bg-background rounded-full h-3 overflow-hidden">
                    <div
                      className="bg-primary-cta h-full transition-all duration-500"
                      style={{ width: `${course.progress}%` }}
                    />
                  </div>
                  <p className="text-sm text-foreground opacity-75 mt-1">{course.progress}% Complete</p>
                </div>
              ))}
            </div>
          </div>

          {/* Call to Action */}
          <div className="bg-gradient-to-r from-primary-cta to-accent rounded-lg p-8 text-center">
            <h3 className="text-2xl font-bold text-white mb-4">Continue Your Learning Journey</h3>
            <p className="text-white opacity-90 mb-6">
              You're making great progress! Check out new courses to expand your financial knowledge.
            </p>
            <a
              href="/courses"
              className="inline-block bg-white text-primary-cta px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
            >
              Browse More Courses
            </a>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
          imageAlt="FinHub gradient background"
          logoText="FinHub"
          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
          columns={[
            {
              title: "Learning",              items: [
                { label: "Courses", href: "/courses" },
                { label: "Lessons", href: "/" },
                { label: "Challenges", href: "#" },
                { label: "Resources", href: "#" },
              ],
            },
            {
              title: "Community",              items: [
                { label: "Forum", href: "#" },
                { label: "Discord", href: "#" },
                { label: "Leaderboard", href: "#" },
                { label: "Events", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "#" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
