"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Wallet, ShoppingCart, Hourglass, CheckCircle, Settings, LogOut } from "lucide-react";
import Link from "next/link";

export default function UserDashboardPage() {
  const stats = [
    { id: "balance", title: "Current Balance", value: "$1,250.50", icon: Wallet },
    { id: "totalOrders", title: "Total Orders", value: "1,234", icon: ShoppingCart },
    { id: "pendingOrders", title: "Pending Orders", value: "42", icon: Hourglass },
    { id: "completedOrders", title: "Completed Orders", value: "1,192", icon: CheckCircle },
  ];

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Dashboard", id: "/dashboard" },
    { name: "New Order", id: "/new-order" },
    { name: "My Orders", id: "/orders" }
  ];

  const footerColumns = [
    {
      title: "Company",      items: [
        { label: "About Us", href: "/#features" },
        { label: "Dashboard", href: "/dashboard" },
        { label: "New Order", href: "/new-order" },
        { label: "My Orders", href: "/orders" }
      ],
    },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            brandName="SocBoost"
            button={{
              text: "Register",              href: "/register"
            }}
          />
        </div>

        <div className="flex flex-col lg:flex-row min-h-screen pt-20">
          {/* Sidebar */}
          <aside className="w-full lg:w-64 bg-card p-6 border-r border-border shadow-md">
            <h2 className="text-2xl font-semibold mb-6 text-foreground">User Panel</h2>
            <nav>
              <ul>
                <li className="mb-4">
                  <Link href="/dashboard" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
                    <Wallet className="mr-2 h-5 w-5" /> Dashboard
                  </Link>
                </li>
                <li className="mb-4">
                  <Link href="/new-order" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
                    <ShoppingCart className="mr-2 h-5 w-5" /> New Order
                  </Link>
                </li>
                <li className="mb-4">
                  <Link href="/orders" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
                    <Hourglass className="mr-2 h-5 w-5" /> My Orders
                  </Link>
                </li>
                <li className="mb-4">
                  <Link href="/settings" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
                    <Settings className="mr-2 h-5 w-5" /> Settings
                  </Link>
                </li>
                <li className="mb-4">
                  <button className="flex items-center text-foreground hover:text-red-500 transition-colors w-full text-left">
                    <LogOut className="mr-2 h-5 w-5" /> Logout
                  </button>
                </li>
              </ul>
            </nav>
          </aside>

          {/* Main Content */}
          <main className="flex-1 p-8 bg-background">
            <h1 className="text-4xl font-bold mb-8 text-foreground">Dashboard Overview</h1>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              {stats.map((stat) => (
                <div key={stat.id} className="bg-card p-6 rounded-lg shadow-lg flex items-center space-x-4">
                  <div classNameName="p-3 rounded-full bg-primary-cta bg-opacity-20">
                    <stat.icon className="h-6 w-6 text-primary-cta" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-foreground-light">{stat.title}</p>
                    <p className="text-2xl font-bold text-foreground">{stat.value}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* Additional Dashboard Content would go here */}
            <div className="bg-card p-6 rounded-lg shadow-lg">
              <h2 className="text-2xl font-semibold mb-4 text-foreground">Recent Activity</h2>
              <p className="text-foreground-light">Your recent orders and transactions will appear here.</p>
            </div>
          </main>
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={footerColumns}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            logoText="SocBoost"
            copyrightText="© 2024 SocBoost. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
