import { NextAuthOptions } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { PrismaAdapter } from '@auth/prisma-adapter'
import { compare } from 'bcryptjs'
import { prisma } from './prisma'

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        // Lógica de autenticación
      },
    }),
  ],
  pages: {
    signIn: '/login',
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.id = user.id
      return token
    },
    async session({ session, token }) {
      if (token) session.user.id = token.id as string
      return session
    },
  },
}

// Hook para obtener la sesión
import { useSession } from "next-auth/react";

function MiComponente() {
  const { data: session, status } = useSession();

  if (status === "loading") return <p>Cargando...</p>;
  if (status === "unauthenticated") return <p>No autenticado</p>;

  return <p>Hola {session.user.email}!</p>;
}

// Protección en páginas del servidor
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { redirect } from "next/navigation";

export default async function PaginaProtegida() {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect("/login");
  }

  return <div>Contenido protegido para {session.user.email}</div>;
}

// src/app/api/auth/register/route.ts
export async function POST(request: Request) {
  const { email, password, name } = await request.json()

  // Validar datos
  const hashedPassword = await hash(password, 12)

  // Crear usuario
  const user = await prisma.user.create({
    data: {
      email,
      password: hashedPassword,
      name,
    },
  })

  return Response.json({ user: { id: user.id, email: user.email } })
}

// src/lib/prisma.ts - Cliente Prisma
import { PrismaClient } from '@/generated/prisma'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

// Ejemplos de uso en API Routes
import { prisma } from '@/lib/prisma'

// Obtener usuarios
const users = await prisma.user.findMany({
  select: {
    id: true,
    email: true,
    name: true,
    createdAt: true,
  },
})

// Crear usuario
const user = await prisma.user.create({
  data: {
    email: 'nuevo@ejemplo.com',
    name: 'Usuario Nuevo',
    password: hashedPassword,
  },
})

// Actualizar usuario
const updatedUser = await prisma.user.update({
  where: { id: userId },
  data: { name: 'Nuevo Nombre' },
})

// Eliminar usuario
await prisma.user.delete({
  where: { id: userId },
})

import { hash } from 'bcryptjs'
import { PrismaClient } from '@/generated/prisma'

const prisma = new PrismaClient()

async function main() {
  // Usuario de prueba
  const hashedPassword = await hash('password123', 12)

  const testUser = await prisma.user.upsert({
    where: { email: 'test@example.com' },
    update: {},
    create: {
      email: 'test@example.com',
      name: 'Usuario de Prueba',
      password: hashedPassword,
    },
  })

  console.log('Usuario creado:', testUser)
}

main()
  .catch(console.error)
  .finally(() => prisma.$disconnect())

import { DashboardLayout } from "@/modules/shared/components/layout/DashboardLayout";
import { Shield, Users, Settings } from "lucide-react";

export default function MiPagina() {
  return (
    <DashboardLayout
      // Configuración de navegación
      navigation={[
        {
          label: "Principal",
          items: [
            { title: "Inicio", url: "/dashboard", icon: Home },
            { title: "Usuarios", url: "/dashboard/users", icon: Users },
          ],
        },
      ]}
      // Configuración de branding
      branding={{
        name: "Mi App",
        subtitle: "Dashboard",
        icon: Shield,
      }}
      // Acciones del header
      headerProps={{
        actions: [
          {
            label: "Nuevo Item",
            icon: Plus,
            onClick: () => console.log("Crear nuevo"),
          },
        ],
      }}
    >
      {/* Tu contenido aquí */}
      <div className="space-y-6">
        <h1 className="text-2xl font-bold">Mi Contenido</h1>
        <p>Contenido de la página...</p>
      </div>
    </DashboardLayout>
  );
}

// Layout para administración
import { AdminDashboardLayout } from "@/modules/shared/components/layout/DashboardLayout";

export default function AdminPage() {
  return (
    <AdminDashboardLayout>
      <h1>Panel de Administración</h1>
    </AdminDashboardLayout>
  );
}

// Layout mínimo sin sidebar ni header
import { MinimalDashboardLayout } from "@/modules/shared/components/layout/DashboardLayout";

export default function FullscreenPage() {
  return (
    <MinimalDashboardLayout>
      <div className="h-full">Contenido a pantalla completa</div>
    </MinimalDashboardLayout>
  );
}

export const DEFAULT_NAVIGATION_ITEMS: NavigationItem[] = [
  {
    title: 'Inicio',
    url: '/dashboard',
    icon: Home,
    isActive: true,
  },
  {
    title: 'Usuarios',
    url: '/dashboard/users',
    icon: Users,
  },
  {
    title: 'Estadísticas',
    url: '/dashboard/stats',
    icon: BarChart3,
    badge: 'Nuevo',
  },
]

// Crear grupos de navegación
const navigation = createNavigationGroups({
  main: DEFAULT_NAVIGATION_ITEMS,
  settings: DEFAULT_SETTINGS_ITEMS,
  custom: [
    {
      label: 'Herramientas',
      items: [{ title: 'Reportes', url: '/tools/reports', icon: FileText }],
    },
  ],
})

import { AppSidebar } from '@/modules/shared/components/layout/AppSidebar'

// Uso básico
<AppSidebar
  navigation={navigationItems}
  branding={{ name: "Mi App", subtitle: "v1.0", icon: Zap }}
/>

// Con configuraciones avanzadas
<AppSidebar
  navigation={navigationItems}
  branding={branding}
  showBranding={true}
  showUserInfo={true}
  collapsible={true}
  variant="sidebar"  // o "floating"
/>

import { DashboardHeader } from "@/modules/shared/components/layout/DashboardHeader";

<DashboardHeader
  title="Mi Dashboard"
  description="Gestiona tu aplicación desde aquí"
  showBreadcrumb={true}
  showUserMenu={true}
  // Acciones personalizadas
  actions={[
    {
      label: "Exportar",
      icon: Download,
      onClick: () => handleExport(),
      variant: "outline",
    },
    {
      label: "Crear Nuevo",
      icon: Plus,
      onClick: () => handleCreate(),
      variant: "default",
    },
  ]}
  // Menú de usuario personalizado
  userMenuItems={[
    {
      label: "Mi Perfil",
      icon: User,
      href: "/profile",
    },
    {
      label: "Configuración",
      icon: Settings,
      href: "/settings",
    },
    { type: "separator" },
    {
      label: "Cerrar Sesión",
      icon: LogOut,
      onClick: () => signOut(),
    },
  ]}
/>;

import { withAuth } from 'next-auth/middleware'

// Rutas protegidas que requieren autenticación
const PROTECTED_ROUTES = [
  '/dashboard',
  '/dashboard/:path*',
  '/profile',
  '/settings',
  '/api/protected/:path*',
]

// Rutas públicas accesibles sin autenticación
const PUBLIC_ROUTES = ['/', '/login', '/register', '/api/auth/:path*']

// Rutas de administrador
const ADMIN_ROUTES = ['/admin', '/admin/:path*', '/api/admin/:path*']

export default withAuth(
  function middleware(request) {
    const { pathname } = request.nextUrl
    const token = request.nextauth.token

    // Lógica de autorización personalizada
    if (isAdminRoute(pathname) && !token?.isAdmin) {
      return NextResponse.redirect(new URL('/dashboard', request.url))
    }

    return NextResponse.next()
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        const { pathname } = req.nextUrl

        if (isPublicRoute(pathname)) return true
        if (isProtectedRoute(pathname)) return !!token

        return true
      },
    },
    pages: {
      signIn: '/login',
    },
  }
)

// src/app/mi-pagina/page.tsx
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { redirect } from "next/navigation";

export default async function MiPagina() {
  // Proteger la página (opcional)
  const session = await getServerSession(authOptions);
  if (!session) redirect("/login");

  return (
    <div>
      <h1>Mi Nueva Página</h1>
      <p>Hola {session.user.email}!</p>
    </div>
  );
}

// src/app/mi-dashboard/page.tsx
import { DashboardLayout } from "@/modules/shared/components/layout/DashboardLayout";
import { BarChart3 } from "lucide-react";

export default function MiDashboard() {
  return (
    <DashboardLayout
      branding={{
        name: "Mi Módulo",
        subtitle: "Dashboard",
        icon: BarChart3,
      }}
    >
      <div className="space-y-6">
        <h1 className="text-3xl font-bold">Mi Dashboard Personalizado</h1>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Contenido del dashboard */}
        </div>
      </div>
    </DashboardLayout>
  );
}

// src/app/api/mi-endpoint/route.ts
import { getServerSession } from 'next-auth'
import { authOptions } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
import { NextResponse } from 'next/server'

// GET /api/mi-endpoint
export async function GET(request: Request) {
  try {
    // Verificar autenticación
    const session = await getServerSession(authOptions)
    if (!session) {
      return NextResponse.json({ error: 'No autorizado' }, { status: 401 })
    }

    // Lógica del endpoint
    const data = await prisma.user.findMany()

    return NextResponse.json(data)
  } catch (error) {
    return NextResponse.json(
      { error: 'Error interno del servidor' },
      { status: 500 }
    )
  }
}

// POST /api/mi-endpoint
export async function POST(request: Request) {
  try {
    const session = await getServerSession(authOptions)
    if (!session) {
      return NextResponse.json({ error: 'No autorizado' }, { status: 401 })
    }

    const body = await request.json()

    // Validar datos con Zod
    const validationSchema = z.object({
      name: z.string().min(1),
      email: z.string().email(),
    })

    const validatedData = validationSchema.parse(body)

    // Crear registro
    const newRecord = await prisma.user.create({
      data: validatedData,
    })

    return NextResponse.json(newRecord, { status: 201 })
  } catch (error) {
    return NextResponse.json(
      { error: 'Error al crear registro' },
      { status: 400 }
    )
  }
}

// src/lib/auth.ts
callbacks: {
  async jwt({ token, user }) {
    if (user) {
      token.id = user.id
      token.role = user.role  // Agregar rol al token
    }
    return token
  },
  async session({ session, token }) {
    if (token) {
      session.user.id = token.id as string
      session.user.role = token.role as string  // Agregar rol a la sesión
    }
    return session
  }
}

// src/middleware.ts
if (isAdminRoute(pathname)) {
  if (!token || token.role !== 'ADMIN') {
    return NextResponse.redirect(new URL('/dashboard', origin))
  }
}

// src/modules/shared/stores/uiStore.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

export interface UIState {
  // Estado del tema
  theme: 'light' | 'dark' | 'system'
  setTheme: (theme: 'light' | 'dark' | 'system') => void

  // Estado de la interfaz
  isMobile: boolean
  setIsMobile: (isMobile: boolean) => void

  // Estado del sidebar
  sidebarOpen: boolean
  setSidebarOpen: (open: boolean) => void
  toggleSidebar: () => void

  // Notificaciones
  notifications: Notification[]
  addNotification: (notification: Omit<Notification, 'id'>) => void
  removeNotification: (id: string) => void
  clearNotifications: () => void
}

export const useUIStore = create<UIState>()(
  persist(
    (set, get) => ({
      // Tema
      theme: 'system',
      setTheme: theme => set({ theme }),

      // Interfaz
      isMobile: false,
      setIsMobile: isMobile => set({ isMobile }),

      // Sidebar
      sidebarOpen: false,
      setSidebarOpen: sidebarOpen => set({ sidebarOpen }),
      toggleSidebar: () => set(state => ({ sidebarOpen: !state.sidebarOpen })),

      // Notificaciones
      notifications: [],
      addNotification: notification => {
        const id = Math.random().toString(36).slice(2)
        set(state => ({
          notifications: [...state.notifications, { ...notification, id }],
        }))

        // Auto-remove después de 5 segundos
        if (notification.type !== 'error') {
          setTimeout(() => {
            get().removeNotification(id)
          }, 5000)
        }
      },
      removeNotification: id =>
        set(state => ({
          notifications: state.notifications.filter(n => n.id !== id),
        })),
      clearNotifications: () => set({ notifications: [] }),
    }),
    {
      name: 'ui-store',
      partialize: state => ({ theme: state.theme }), // Solo persistir tema
    }
  )
)

// src/modules/shared/stores/authStore.ts
import { create } from 'zustand'
import { getSession } from 'next-auth/react'

export interface AuthState {
  user: User | null
  isLoading: boolean
  isAuthenticated: boolean

  // Acciones
  setUser: (user: User | null) => void
  setLoading: (loading: boolean) => void
  checkSession: () => Promise<void>
  logout: () => void
}

export const useAuthStore = create<AuthState>()((set, get) => ({
  user: null,
  isLoading: true,
  isAuthenticated: false,

  setUser: user =>
    set({
      user,
      isAuthenticated: !!user,
      isLoading: false,
    }),

  setLoading: isLoading => set({ isLoading }),

  checkSession: async () => {
    try {
      set({ isLoading: true })
      const session = await getSession()

      if (session?.user) {
        set({
          user: session.user as User,
          isAuthenticated: true,
          isLoading: false,
        })
      } else {
        set({
          user: null,
          isAuthenticated: false,
          isLoading: false,
        })
      }
    } catch (error) {
      console.error('Error checking session:', error)
      set({
        user: null,
        isAuthenticated: false,
        isLoading: false,
      })
    }
  },

  logout: () => {
    set({
      user: null,
      isAuthenticated: false,
      isLoading: false,
    })
  },
}))

// src/modules/shared/stores/dataStore.ts
import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
import axios from 'axios'

export interface DataState {
  // Usuarios
  users: User[]
  usersLoading: boolean
  usersError: string | null

  // Acciones para usuarios
  fetchUsers: () => Promise<void>
  createUser: (userData: CreateUserData) => Promise<void>
  updateUser: (id: string, userData: UpdateUserData) => Promise<void>
  deleteUser: (id: string) => Promise<void>

  // Otros datos...
  stats: DashboardStats | null
  fetchStats: () => Promise<void>
}

export const useDataStore = create<DataState>()(
  immer((set, get) => ({
    // Estado inicial
    users: [],
    usersLoading: false,
    usersError: null,
    stats: null,

    // Acciones para usuarios
    fetchUsers: async () => {
      set(state => {
        state.usersLoading = true
        state.usersError = null
      })

      try {
        const response = await axios.get('/api/users')
        set(state => {
          state.users = response.data
          state.usersLoading = false
        })
      } catch (error) {
        set(state => {
          state.usersError = 'Error al cargar usuarios'
          state.usersLoading = false
        })
      }
    },

    createUser: async userData => {
      try {
        const response = await axios.post('/api/users', userData)
        set(state => {
          state.users.push(response.data)
        })
      } catch (error) {
        throw new Error('Error al crear usuario')
      }
    },

    updateUser: async (id, userData) => {
      try {
        const response = await axios.put(`/api/users/${id}`, userData)
        set(state => {
          const index = state.users.findIndex(u => u.id === id)
          if (index !== -1) {
            state.users[index] = response.data
          }
        })
      } catch (error) {
        throw new Error('Error al actualizar usuario')
      }
    },

    deleteUser: async id => {
      try {
        await axios.delete(`/api/users/${id}`)
        set(state => {
          state.users = state.users.filter(u => u.id !== id)
        })
      } catch (error) {
        throw new Error('Error al eliminar usuario')
      }
    },

    fetchStats: async () => {
      try {
        const response = await axios.get('/api/stats')
        set(state => {
          state.stats = response.data
        })
      } catch (error) {
        console.error('Error al cargar estadísticas:', error)
      }
    },
  }))
)

// Componente usando múltiples stores
import { useUIStore } from "@/modules/shared/stores/uiStore";
import { useAuthStore } from "@/modules/shared/stores/authStore";
import { useDataStore } from "@/modules/shared/stores/dataStore";

export default function MiComponente() {
  // Store de UI
  const { theme, setTheme, addNotification } = useUIStore();

  // Store de auth
  const { user, isAuthenticated, checkSession } = useAuthStore();

  // Store de datos (con selector para optimización)
  const users = useDataStore((state) => state.users);
  const fetchUsers = useDataStore((state) => state.fetchUsers);
  const usersLoading = useDataStore((state) => state.usersLoading);

  useEffect(() => {
    if (isAuthenticated) {
      fetchUsers();
    }
  }, [isAuthenticated, fetchUsers]);

  const handleThemeChange = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    addNotification({
      title: "Tema cambiado",
      description: `Tema cambiado a ${newTheme}`,
      type: "success",
    });
  };

  return (
    <div>
      <h1>Hola {user?.name}</h1>
      <button onClick={handleThemeChange}>Cambiar tema actual: {theme}</button>

      {usersLoading ? (
        <p>Cargando usuarios...</p>
      ) : (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

// Store con persistencia personalizada
import { persist, createJSONStorage } from 'zustand/middleware'

export const useSettingsStore = create<SettingsState>()(
  persist(
    (set, get) => ({
      // Estado...
    }),
    {
      name: 'settings-store',
      storage: createJSONStorage(() => localStorage),
      partialize: state => ({
        theme: state.theme,
        language: state.language,
        // No persistir datos sensibles
      }),
      onRehydrateStorage: state => {
        console.log('Hidratando store de configuración', state)
        return (state, error) => {
          if (error) {
            console.error('Error hidratando store:', error)
          } else {
            console.log('Store hidratado correctamente')
          }
        }
      },
    }
  )
)

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: 'class',
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
      },
      animation: {
        float: 'float 6s ease-in-out infinite',
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-10px)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [],
}

export default config

// src/modules/shared/components/ui/button.tsx
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md hover:shadow-lg",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
        gradient:
          "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 shadow-md hover:shadow-lg",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

// src/modules/shared/components/ui/card.tsx
import { cn } from "@/lib/utils";

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "glass" | "gradient" | "elevated";
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = "default", ...props }, ref) => {
    const variants = {
      default: "rounded-lg border bg-card text-card-foreground shadow-sm",
      glass: "rounded-lg glass-effect text-card-foreground shadow-xl",
      gradient: "rounded-lg card-gradient text-card-foreground shadow-md",
      elevated:
        "rounded-lg bg-card text-card-foreground shadow-lg hover:shadow-xl transition-shadow",
    };

    return (
      <div ref={ref} className={cn(variants[variant], className)} {...props} />
    );
  }
);
Card.displayName = "Card";

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
));
CardHeader.displayName = "CardHeader";

const CardTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
));
CardTitle.displayName = "CardTitle";

export {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
};

// Ejemplo de uso de componentes con temas
import { Button } from "@/modules/shared/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/modules/shared/components/ui/card";
import { Badge } from "@/modules/shared/components/ui/badge";

export default function MiComponente() {
  return (
    <div className="space-y-6">
      {/* Card con efecto glass */}
      <Card variant="glass" className="p-6">
        <CardHeader>
          <CardTitle className="text-gradient">Dashboard Moderno</CardTitle>
          <CardDescription>Un diseño limpio y profesional</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-2">
            <Button variant="gradient">Acción Principal</Button>
            <Button variant="outline">Acción Secundaria</Button>
            <Button variant="ghost" size="icon">
              <Settings className="h-4 w-4" />
            </Button>
          </div>

          <div className="flex gap-2">
            <Badge variant="default">Activo</Badge>
            <Badge variant="secondary">En Progreso</Badge>
            <Badge variant="destructive">Error</Badge>
          </div>
        </CardContent>
      </Card>

      {/* Grid responsivo */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[1, 2, 3].map((i) => (
          <Card
            key={i}
            variant="elevated"
            className="hover:scale-105 transition-transform"
          >
            <CardHeader>
              <CardTitle>Card {i}</CardTitle>
            </CardHeader>
            <CardContent>
              <p>Contenido de ejemplo con animaciones</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

// Componente para cambiar tema
import { Moon, Sun, Monitor } from "lucide-react";
import { useUIStore } from "@/modules/shared/stores/uiStore";

export function ThemeToggle() {
  const { theme, setTheme } = useUIStore();

  const themes = [
    { value: "light", icon: Sun, label: "Claro" },
    { value: "dark", icon: Moon, label: "Oscuro" },
    { value: "system", icon: Monitor, label: "Sistema" },
  ] as const;

  return (
    <div className="flex rounded-lg bg-muted p-1">
      {themes.map(({ value, icon: Icon, label }) => (
        <button
          key={value}
          onClick={() => setTheme(value)}
          className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm font-medium transition-all ${
            theme === value
              ? "bg-background shadow-sm text-foreground"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          <Icon className="h-4 w-4" />
          <span className="hidden sm:inline">{label}</span>
        </button>
      ))}
    </div>
  );
}

// ✅ Bueno: Nombres descriptivos
const handleUserRegistration = async (userData: CreateUserData) => {
  // lógica...
}

const isUserAuthenticated = (user: User | null): user is User => {
  return user !== null && user.id !== undefined
}

interface DashboardLayoutProps {
  children: React.ReactNode
  navigation?: NavigationItem[]
  showSidebar?: boolean
}

// ❌ Evitar: Nombres genéricos
const handleSubmit = (data: any) => {
  // lógica...
}

const check = (user: any) => {
  return user !== null
}

interface Props {
  children: any
  items?: any[]
  show?: boolean
}

// ✅ Bueno: Tipos específicos y reutilizables
export interface User {
  id: string
  email: string
  name: string | null
  role: UserRole
  createdAt: Date
  updatedAt: Date
}

export type CreateUserData = Pick<User, 'email' | 'name'> & {
  password: string
}

export type UpdateUserData = Partial<Pick<User, 'name' | 'email'>>

export interface ApiResponse<T> {
  data: T
  message: string
  status: 'success' | 'error'
}

// ❌ Evitar: Uso excesivo de any
export interface User {
  id: any
  email: any
  data: any
}

export type UserData = any

// ✅ Bueno: Store modular con tipos
export interface AuthState {
  user: User | null
  isLoading: boolean
  error: string | null

  // Acciones con tipos específicos
  login: (credentials: LoginCredentials) => Promise<void>
  logout: () => void
  updateProfile: (data: UpdateProfileData) => Promise<void>
}

// ✅ Bueno: Selectores para optimización
const useAuthUser = () => useAuthStore(state => state.user)
const useAuthActions = () =>
  useAuthStore(state => ({
    login: state.login,
    logout: state.logout,
  }))

// ❌ Evitar: Estado global masivo
interface AppState {
  user: any
  ui: any
  data: any
  everything: any
  // Demasiado en un solo store
}

// ✅ Bueno: Componente flexible y tipado
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "outline" | "ghost";
  size?: "sm" | "default" | "lg";
  loading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      variant = "default",
      size = "default",
      loading,
      leftIcon,
      rightIcon,
      children,
      ...props
    },
    ref
  ) => {
    return (
      <button
        ref={ref}
        disabled={loading || props.disabled}
        className={cn(buttonVariants({ variant, size }), props.className)}
        {...props}
      >
        {loading && <Spinner className="w-4 h-4 mr-2" />}
        {leftIcon && <span className="mr-2">{leftIcon}</span>}
        {children}
        {rightIcon && <span className="ml-2">{rightIcon}</span>}
      </button>
    );
  }
);

// ❌ Evitar: Componente rígido
function Button({ text, onClick }: { text: string; onClick: () => void }) {
  return <button onClick={onClick}>{text}</button>;
}

// ✅ Bueno: Manejo robusto de errores
export class AppError extends Error {
  constructor(
    public message: string,
    public code: string,
    public statusCode: number = 500
  ) {
    super(message)
    this.name = 'AppError'
  }
}

export const handleApiError = (error: unknown): AppError => {
  if (error instanceof AppError) {
    return error
  }

  if (axios.isAxiosError(error)) {
    return new AppError(
      error.response?.data?.message || 'Error de red',
      'NETWORK_ERROR',
      error.response?.status || 500
    )
  }

  return new AppError('Error inesperado', 'UNKNOWN_ERROR', 500)
}

// Uso en componentes
const {
  mutate: createUser,
  isLoading,
  error,
} = useMutation({
  mutationFn: async (userData: CreateUserData) => {
    const response = await api.post('/users', userData)
    return response.data
  },
  onError: error => {
    const appError = handleApiError(error)
    toast.error(appError.message)
  },
  onSuccess: () => {
    toast.success('Usuario creado exitosamente')
    queryClient.invalidateQueries({ queryKey: ['users'] })
  },
})

// ❌ Evitar: Errores silenciosos
try {
  await api.post('/users', userData)
} catch (error) {
  console.log(error) // Error silencioso
}

// ✅ Bueno: Optimizaciones de performance
const UserList = React.memo(({ users }: { users: User[] }) => {
  const memoizedUsers = useMemo(
    () => users.filter(user => user.isActive),
    [users]
  )

  return (
    <div>
      {memoizedUsers.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  )
})

// Hook personalizado para debounce
const useDebounce = <T>(value: T, delay: number): T => {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(timer)
  }, [value, delay])

  return debouncedValue
}

// Lazy loading de componentes
const HeavyComponent = lazy(() => import('./HeavyComponent'))

const App = () => (
  <Suspense fallback={<Spinner />}>
    <HeavyComponent />
  </Suspense>
)

// ❌ Evitar: Re-renders innecesarios
const UserList = ({ users }: { users: User[] }) => {
  // Se ejecuta en cada render
  const activeUsers = users.filter(user => user.isActive)

  return (
    <div>
      {activeUsers.map((user, index) => (
        <UserCard key={index} user={user} /> // Key inestable
      ))}
    </div>
  )
}