"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { LayoutDashboard, Settings, BarChart, CalendarDays, Search as SearchIcon } from "lucide-react";

export default function DashboardPage() {
  const navItemsForDashboard = [
    { name: "Home", id: "/" },
    { name: "Features", id: "/#features" },
    { name: "Tools", id: "/#tools" },
    { name: "Insights", id: "/#insights" },
    { name: "FAQ", id: "/#faq" },
    { name: "Dashboard", id: "/dashboard" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={navItemsForDashboard}
            brandName="Yt Mugi"
            button={{ text: "Reset / Change API Key", href: "#" }}
          />
        </div>

        <div className="min-h-screen bg-background-accent p-4 md:p-6 lg:p-8">
          {/* Dashboard Header */}
          <header className="bg-card shadow-sm rounded-lg p-4 mb-4 flex items-center justify-between">
            <h1 className="text-2xl font-bold text-foreground">
              <LayoutDashboard className="inline-block mr-3 text-primary-cta" size={28} />
              Dashboard Overview
            </h1>
            {/* Additional header elements like user menu, notifications */}
            <div className="flex items-center space-x-4">
              <span className="text-sm text-foreground hidden sm:block">Welcome, Creator!</span>
              {/* User Avatar Placeholder */}
              <div className="w-10 h-10 rounded-full bg-primary-cta flex items-center justify-center text-white text-lg font-semibold">
                YC
              </div>
            </div>
          </header>

          {/* Main Grid: Sidebar + Content */}
          <div className="grid grid-cols-1 lg:grid-cols-[250px_1fr] gap-6"> { /* Increased gap for better separation */}
            {/* Sidebar */}
            <aside className="bg-card shadow-sm rounded-lg p-4">
              <h2 className="text-xl font-semibold text-foreground mb-4">Navigation</h2>
              <nav>
                <ul className="space-y-2">
                  <li>
                    <a href="/dashboard" className="flex items-center text-primary-cta hover:text-accent p-3 rounded-md transition-colors duration-200">
                      <LayoutDashboard size={20} className="mr-2" />
                      Home
                    </a>
                  </li>
                  <li>
                    <a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
                      <BarChart size={20} className="mr-2" />
                      Analytics
                    </a>
                  </li>
                  <li>
                    <a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
                      <CalendarDays size={20} className="mr-2" />
                      Content Planner
                    </a>
                  </li>
                  <li>
                    <a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
                      <SearchIcon size={20} className="mr-2" />
                      SEO Tools
                    </a>
                  </li>
                  <li>
                    <a href="#" className="flex items-center text-foreground hover:text-primary-cta p-3 rounded-md transition-colors duration-200">
                      <Settings size={20} className="mr-2" />
                      Settings
                    </a>
                  </li>
                </ul>
              </nav>
            </aside>

            {/* Main Content Area */}
            <main className="bg-card shadow-sm rounded-lg p-6">
              <h2 className="text-2xl font-bold text-foreground mb-6">Main Content Area</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {/* Placeholder Cards */}
                <div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
                  <h3 className="font-semibold text-lg mb-2">Metric Card</h3>
                  <p className="text-3xl font-extrabold text-primary-cta">12.5K</p>
                  <p className="text-sm mt-1">Total Views this Month</p>
                </div>
                <div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
                  <h3 className="font-semibold text-lg mb-2">Engagement Rate</h3>
                  <p className="text-3xl font-extrabold text-accent">7.2%</p>
                  <p className="text-sm mt-1">Up 1.2% from last week</p>
                </div>
                <div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
                  <h3 className="font-semibold text-lg mb-2">Subscribers</h3>
                  <p className="text-3xl font-extrabold text-primary-cta">+850</p>
                  <p className="text-sm mt-1">New subscribers this month</p>
                </div>
                <div className="bg-background-accent p-5 rounded-lg text-foreground shadow-inner">
                  <h3 className="font-semibold text-lg mb-2">Top Video</h3>
                  <p className="text-base font-medium text-foreground truncate">"My Secret to Viral Content"</p>
                  <p className="text-sm mt-1 text-gray-500">250K views</p>
                </div>
              </div>
              <p className="mt-8 text-foreground leading-relaxed">
                This responsive grid system provides a flexible foundation for various dashboard widgets and data visualizations.
                It adapts seamlessly to different screen sizes, ensuring an optimal user experience whether on a desktop, tablet, or mobile device.
                Future components will fill these content areas.
              </p>
            </main>
          </div>
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}