"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import React from "react";
import Link from "next/link";
import { LogOut, User } from "lucide-react";

export default function DashboardPage() {
  const erpModules = [
    { name: "Inventario", href: "/dashboard/inventory" },
    { name: "Facturación", href: "/dashboard/invoicing" },
    { name: "CRM", href: "/dashboard/crm" },
    { name: "Delivery", href: "/dashboard/delivery" },
    { name: "Reportes", href: "/dashboard/reports" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <ReactLenis root>
        <div className="min-h-screen flex flex-col">
          {/* Dashboard Header/Navigation */}
          <header className="bg-background-accent text-foreground p-4 flex justify-between items-center shadow-md">
            <Link href="/" className="text-xl font-bold">
              SURTIDORA RAMONA ERP
            </Link>
            <div className="flex items-center space-x-4">
              {/* Module Navigation (simplified for now) */}
              <nav>
                <ul className="flex space-x-4">
                  {erpModules.map((module) => (
                    <li key={module.name}>
                      <Link href={module.href} className="hover:text-primary-cta">
                        {module.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </nav>
              {/* User Session Management */}
              <div className="flex items-center space-x-2">
                <Link href="/dashboard/profile" className="flex items-center hover:text-primary-cta">
                  <User size={18} className="mr-1" /> Profile
                </Link>
                <button className="flex items-center hover:text-primary-cta">
                  <LogOut size={18} className="mr-1" /> Logout
                </button>
              </div>
            </div>
          </header>

          {/* Main Content Area */}
          <main className="flex-1 p-8">
            <h1 className="text-4xl font-light mb-8 text-center">Dashboard Principal</h1>
            <p className="text-lg text-center text-foreground/80">
              Bienvenido al centro de control de tu ERP. Explora los módulos para gestionar tu negocio.
            </p>
            {/* Placeholder for ERP module content */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
              {erpModules.map((module) => (
                <Link
                  key={module.name}
                  href={module.href}
                  className="bg-card p-6 rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-300 flex flex-col items-center justify-center text-center group"
                >
                  <h2 className="text-2xl font-semibold mb-2 group-hover:text-primary-cta transition-colors duration-300">{module.name}</h2>
                  <p className="text-foreground/70">Gestiona y optimiza {module.name.toLowerCase()}.</p>
                </Link>
              ))}
            </div>
          </main>
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}