"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Settings, Users } from "lucide-react";

export default function ConfiguracionPage() {
  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 id="nav" data-section="nav">
            <NavbarLayoutFloatingOverlay
            navItems={[
                {
                name: "Inicio",                id: "hero"},
                {
                name: "Nosotros",                id: "about"},
                {
                name: "Funcionalidades",                id: "features"},
                {
                name: "Métricas",                id: "metrics"},
                {
                name: "Productos",                id: "products"},
                {
                name: "Precios",                id: "pricing"},
                {
                name: "Testimonios",                id: "testimonials"},
                {
                name: "FAQ",                id: "faq"},
                {
                name: "Contacto",                id: "contact"},
                {
                name: "Reportes",                id: "reportes"},
                {
                name: "Configuración",                id: "configuracion"}
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/creative-thunder-concept-logo-design-template-vector-illustration-isolated-background_384344-2117.jpg"
            logoAlt="Surtidora Ramona Logo"
            brandName="SURTIDORA RAMONA"
            />
        </div>

        <main className="container mx-auto p-8 pt-24 min-h-screen">
          <h1 className="text-5xl font-bold text-center mb-6 mt-12">Configuración del Sistema</h1>
          <p className="text-xl text-center text-foreground/70 mb-12">
            Administre los ajustes del sistema y la gestión de usuarios para optimizar su operación.
          </p>

          <section className="my-16 bg-card p-8 rounded-xl shadow-lg">
            <div className="flex items-center gap-4 mb-6">
              <Settings size={32} className="text-primary-cta" />
              <h2 className="text-3xl font-semibold">Ajustes Generales</h2>
            </div>
            <p className="text-lg text-foreground/80 mb-6">Personalice los parámetros generales de su plataforma ERP, incluyendo notificaciones, formatos de fecha y hora, y preferencias regionales.</p>
            <div className="space-y-4">
              <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
                <span className="font-medium">Configuración de Notificaciones</span>
                <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Editar</button>
              </div>
              <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
                <span className="font-medium">Formatos Regionales</span>
                <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Editar</button>
              </div>
            </div>
          </section>

          <section className="my-16 bg-card p-8 rounded-xl shadow-lg">
            <div className="flex items-center gap-4 mb-6">
              <Users size={32} className="text-primary-cta" />
              <h2 className="text-3xl font-semibold">Gestión de Usuarios y Roles</h2>
            </div>
            <p className="text-lg text-foreground/80 mb-6">Administre usuarios, asigne roles y configure permisos de acceso para su equipo, garantizando la seguridad y eficiencia operativa.</p>
            <div className="space-y-4">
              <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
                <span className="font-medium">Crear Nuevo Usuario</span>
                <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Añadir Usuario</button>
              </div>
              <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
                <span className="font-medium">Roles y Permisos</span>
                <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Gestionar</button>
              </div>
              <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
                <span className="font-medium">Auditoría de Acceso</span>
                <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Ver Historial</button>
              </div>
            </div>
          </section>

        </main>

        <div id="footer" data-section="footer">
            <FooterCard
            logoSrc="http://img.b2bpic.net/free-vector/creative-thunder-concept-logo-design-template-vector-illustration-isolated-background_384344-2117.jpg"
            logoAlt="Surtidora Ramona Logo"
            logoText="SURTIDORA RAMONA"
            copyrightText="© 2024 Surtidora Ramona. Todos los derechos reservados."
            socialLinks={[
                {
                icon: FileDown,
                href: "#",                ariaLabel: "Facebook"},
                {
                icon: FileDown,
                href: "#",                ariaLabel: "Twitter"},
                {
                icon: FileDown,
                href: "#",                ariaLabel: "Instagram"},
                {
                icon: FileDown,
                href: "#",                ariaLabel: "LinkedIn"},
            ]}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
