109:I[144680,["$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$8d","$8e","$7b","$7e","$8f","$7c","$85","$87","$80","$90","$7d","$83","$8b","$86","$91","$7f","$92","$84","$93","$8a","$88","$94","$82","$89","$95"],"S"] 111:"ExplicitChatIdProvider" 112:I[903690,["$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$8d","$8e","$7b","$7e","$8f","$7c","$85","$87","$80","$90","$7d","$83","$8b","$86","$91","$7f","$92","$84","$93","$8a","$88","$94","$82","$89","$95"],"$111"] 113:I[838238,["$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$8d","$8e","$7b","$7e","$8f","$7c","$85","$87","$80","$90","$7d","$83","$8b","$86","$91","$7f","$92","$84","$93","$8a","$88","$94","$82","$89","$95"],"SWRDataProvider"] 115:[] 116:[["b_efvUWLHiVpy",null],["b_R0B8exacT4m",null],["b_GQYCmBqrLwY",null]] 117:[["b_efvUWLHiVpy",{"templateVersionId":null,"templateCanonId":null}],["b_R0B8exacT4m",{"templateVersionId":null,"templateCanonId":null}],["b_GQYCmBqrLwY",{"templateVersionId":null,"templateCanonId":null}]] 118:[["UEjdgG9m5dB","$D2025-10-15T16:00:14.339Z"],["b_l8c0pqiOvX0","$D2025-10-15T16:00:58.546Z"],["b_R9WSDdaIuz2","$D2025-10-21T17:08:21.530Z"],["b_oqm7wRXkljY","$D2025-10-21T20:13:34.436Z"],["b_qFUYyTo8Tmr","$D2025-10-21T20:17:04.257Z"],["b_CMGcW5oDT1o","$D2025-10-21T20:20:49.758Z"],["b_u2jHiUyo4PK","$D2025-10-21T20:25:52.801Z"],["b_q0LiSbNSnDz","$D2025-10-21T20:46:19.374Z"],["b_zpU1ewa2Cn4","$D2025-10-27T00:50:04.665Z"],["b_HbHRjjhNJCQ","$D2025-10-27T01:03:16.220Z"],["b_qN6iqENpHvc","$D2025-10-27T01:11:27.414Z"],["b_1MbxIXSH77L","$D2025-10-27T17:14:47.660Z"],["b_zRZwl2NyNUz","$D2025-10-27T18:00:43.363Z"],["b_jHUEq66H5fl","$D2025-10-27T19:00:54.043Z"],["b_NnzcCRdP04Y","$D2025-10-27T19:11:27.150Z"],["b_TI9KPzQoKeT","$D2025-10-27T19:27:21.607Z"],["b_d6ddiV1Bcn8","$D2025-12-02T14:30:28.797Z"],["b_efvUWLHiVpy","$D2025-12-02T14:35:38.534Z"],["b_R0B8exacT4m","$D2025-12-02T14:40:12.429Z"],["b_GQYCmBqrLwY","$D2025-12-02T14:44:56.385Z"]] 119:[["b_efvUWLHiVpy",false],["b_R0B8exacT4m",false],["b_GQYCmBqrLwY",false]] 11a:[["b_efvUWLHiVpy","$undefined"],["b_R0B8exacT4m","$undefined"],["b_GQYCmBqrLwY","$undefined"]] 11b:[["b_efvUWLHiVpy",null],["b_R0B8exacT4m",null],["b_GQYCmBqrLwY",null]] 11c:[["b_efvUWLHiVpy",true],["b_R0B8exacT4m",true],["b_GQYCmBqrLwY",true]] 11d:[["b_efvUWLHiVpy",true],["b_R0B8exacT4m",true],["b_GQYCmBqrLwY",true]] 11e:[] 11f:Tfb0f3,[V0_FILE]typescriptreact:file="app/dashboard/ventas/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/productos/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/recuperar-contrasena/page.tsx" isMerged="true" isLocked="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { BookOpen, ArrowLeft } from "lucide-react" export default function RecuperarContrasenaPage() { return (

Recuperar contraseña

Ingrese su correo electrónico y le enviaremos un enlace para restablecer su contraseña.

Volver al inicio de sesión

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isLocked="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, 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))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, yellow: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", 950: "#451a03", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" isLocked="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { BookOpen } from "lucide-react" export default function LoginPage() { return (

Librería León

Sistema de Gestión

) } [V0_FILE]typescriptreact:file="app/dashboard/usuarios/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/depositos/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/promociones/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/proveedores/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/stock/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/reportes/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/caja/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/sucursales/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/categorias/loading.tsx" isFixed="true" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/perfil/loading.tsx" isMerged="true" isLocked="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" isLocked="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts" import { ShoppingCart, Package, TrendingUp, Users, DollarSign, RefreshCw, FileSpreadsheet } from "lucide-react" import { Button } from "@/components/ui/button" import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useToast } from "@/components/ui/use-toast" import { useState } from "react" // Datos de ejemplo para los gráficos const salesData = [ { name: "Ene", ventas: 4000 }, { name: "Feb", ventas: 3000 }, { name: "Mar", ventas: 5000 }, { name: "Abr", ventas: 4500 }, { name: "May", ventas: 6000 }, { name: "Jun", ventas: 5500 }, ] const categoryData = [ { name: "Literatura", value: 35 }, { name: "Infantil", value: 25 }, { name: "Académico", value: 20 }, { name: "Autoayuda", value: 15 }, { name: "Otros", value: 5 }, ] const COLORS = ["#FFBB28", "#FF8042", "#0088FE", "#00C49F", "#FFBB28"] const lowStockProducts = [ { id: 1, name: "El principito", stock: 3, threshold: 5 }, { id: 2, name: "Cien años de soledad", stock: 2, threshold: 5 }, { id: 3, name: "Harry Potter y la piedra filosofal", stock: 4, threshold: 10 }, ] export default function Dashboard() { const { toast } = useToast() const [dailySales, setDailySales] = useState("$12,580") const [dailySalesGrowth, setDailySalesGrowth] = useState("+12%") const [productsCount, setProductsCount] = useState("1,245") const [productsGrowth, setProductsGrowth] = useState("+8%") const [clientsCount, setClientsCount] = useState("3,587") const [clientsGrowth, setClientsGrowth] = useState("+5%") const [monthlyIncome, setMonthlyIncome] = useState("$245,890") const [monthlyIncomeGrowth, setMonthlyIncomeGrowth] = useState("+18%") function refreshSales() { toast({ title: "Actualizando ventas", description: "Obteniendo datos más recientes...", }) setTimeout(() => { // Simulación de nuevos datos const newSales = `$${(12000 + Math.floor(Math.random() * 2000)).toLocaleString()}` const newGrowth = `+${10 + Math.floor(Math.random() * 5)}%` setDailySales(newSales) setDailySalesGrowth(newGrowth) toast({ title: "Datos actualizados", description: "Ventas del día actualizadas correctamente", variant: "success", }) }, 1000) } function refreshProducts() { toast({ title: "Actualizando productos", description: "Obteniendo datos más recientes...", }) setTimeout(() => { // Simulación de nuevos datos const newCount = `${(1200 + Math.floor(Math.random() * 100)).toLocaleString()}` const newGrowth = `+${7 + Math.floor(Math.random() * 3)}%` setProductsCount(newCount) setProductsGrowth(newGrowth) toast({ title: "Datos actualizados", description: "Conteo de productos actualizado correctamente", variant: "success", }) }, 1000) } function refreshClients() { toast({ title: "Actualizando clientes", description: "Obteniendo datos más recientes...", }) setTimeout(() => { // Simulación de nuevos datos const newCount = `${(3500 + Math.floor(Math.random() * 200)).toLocaleString()}` const newGrowth = `+${4 + Math.floor(Math.random() * 3)}%` setClientsCount(newCount) setClientsGrowth(newGrowth) toast({ title: "Datos actualizados", description: "Conteo de clientes actualizado correctamente", variant: "success", }) }, 1000) } function refreshIncome() { toast({ title: "Actualizando ingresos", description: "Obteniendo datos más recientes...", }) setTimeout(() => { // Simulación de nuevos datos const newIncome = `$${(240000 + Math.floor(Math.random() * 10000)).toLocaleString()}` const newGrowth = `+${15 + Math.floor(Math.random() * 5)}%` setMonthlyIncome(newIncome) setMonthlyIncomeGrowth(newGrowth) toast({ title: "Datos actualizados", description: "Ingresos mensuales actualizados correctamente", variant: "success", }) }, 1000) } function exportLowStockToExcel() { toast({ title: "Exportando datos", description: "Preparando archivo Excel para descargar...", }) // Simulación de tiempo de procesamiento setTimeout(() => { toast({ title: "Exportación completada", description: "El archivo ha sido descargado correctamente", variant: "success", }) }, 1500) } return (

Dashboard

Bienvenido al sistema de gestión de Librería León

{/* Tarjetas de estadísticas */}

Ventas del día

Refrescar ventas

{dailySales}

{dailySalesGrowth}

Productos

Refrescar productos

{productsCount}

{productsGrowth}

Clientes

Refrescar clientes

{clientsCount}

{clientsGrowth}

Ingresos mensuales

Refrescar ingresos

{monthlyIncome}

{monthlyIncomeGrowth}

{/* Gráficos y alertas */}

{/* Gráfico de ventas */}

Ventas por mes Refrescar

Comparativa de ventas de los últimos 6 meses

{/* Gráfico de categorías */}

Ventas por categoría Refrescar

Distribución de ventas por tipo de producto

`${name} ${(percent * 100).toFixed(0)}%`} > {categoryData.map((entry, index) => ( ))}

{/* Alertas de stock bajo */}

Alertas de stock bajo Productos que requieren reposición

Exportar a Excel Refrescar

{lowStockProducts.map((product) => ( ))}

ID	Producto	Stock actual	Umbral	Estado
{product.id}	{product.name}	{product.stock}	{product.threshold}	Stock bajo

) } [V0_FILE]typescriptreact:file="app/dashboard/presupuestos/loading.tsx" isMerged="true" isLocked="true" import { Skeleton } from "@/components/ui/skeleton" import { Card, CardContent, CardHeader } from "@/components/ui/card" export default function PresupuestosLoading() { return (

{[...Array(5)].map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/presupuestos/nuevo/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isLocked="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { format } from "date-fns" import { es } from "date-fns/locale" import { Save, ArrowLeft, Plus, Trash, FileText, Search, X, ShoppingCart } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { useToast } from "@/components/ui/use-toast" // Datos de ejemplo para clientes const clientesData = [ { id: 1, nombre: "Juan Pérez", dni: "12345678", email: "juan@example.com", telefono: "1122334455" }, { id: 2, nombre: "María González", dni: "23456789", email: "maria@example.com", telefono: "2233445566" }, { id: 3, nombre: "Carlos Rodríguez", dni: "34567890", email: "carlos@example.com", telefono: "3344556677" }, { id: 4, nombre: "Ana Martínez", dni: "45678901", email: "ana@example.com", telefono: "4455667788" }, { id: 5, nombre: "Luis Sánchez", dni: "56789012", email: "luis@example.com", telefono: "5566778899" }, ] // Datos de ejemplo para productos const productosData = [ { id: 1, codigo: "LIB001", nombre: "El principito", precio: 2500, stock: 15, categoria: "Literatura" }, { id: 2, codigo: "LIB002", nombre: "Cien años de soledad", precio: 3200, stock: 8, categoria: "Literatura" }, { id: 3, codigo: "LIB003", nombre: "Harry Potter y la piedra filosofal", precio: 2800, stock: 12, categoria: "Infantil", }, { id: 4, codigo: "LIB004", nombre: "El señor de los anillos", precio: 4500, stock: 5, categoria: "Fantasía" }, { id: 5, codigo: "LIB005", nombre: "Don Quijote de la Mancha", precio: 3800, stock: 10, categoria: "Clásicos" }, { id: 6, codigo: "ART001", nombre: "Lápiz HB", precio: 150, stock: 50, categoria: "Artículos escolares" }, { id: 7, codigo: "ART002", nombre: "Cuaderno A4", precio: 450, stock: 30, categoria: "Artículos escolares" }, { id: 8, codigo: "ART003", nombre: "Marcadores x12", precio: 1200, stock: 20, categoria: "Artículos escolares" }, ] // Interfaz para los items del presupuesto interface PresupuestoItem { id: number producto: { id: number codigo: string nombre: string precio: number } cantidad: number precioUnitario: number descuento: number subtotal: number } export default function NuevoPresupuestoPage() { const router = useRouter() const { toast } = useToast() // Estados para el formulario const [clienteId, setClienteId] = useState("") const [validez, setValidez] = useState("15") const [observaciones, setObservaciones] = useState("") const [items, setItems] = useState([]) // Estados para el diálogo de búsqueda de productos const [productoDialogOpen, setProductoDialogOpen] = useState(false) const [searchTerm, setSearchTerm] = useState("") const [filteredProductos, setFilteredProductos] = useState(productosData) // Estados para el diálogo de búsqueda de clientes const [clienteDialogOpen, setClienteDialogOpen] = useState(false) const [clienteSearchTerm, setClienteSearchTerm] = useState("") const [filteredClientes, setFilteredClientes] = useState(clientesData) const [clienteSeleccionado, setClienteSeleccionado] = useState(null) // Calcular totales const subtotal = items.reduce((sum, item) => sum + item.subtotal, 0) const iva = subtotal * 0.21 const total = subtotal + iva // Filtrar productos según el término de búsqueda useEffect(() => { setFilteredProductos( productosData.filter( (producto) => producto.nombre.toLowerCase().includes(searchTerm.toLowerCase()) || producto.codigo.toLowerCase().includes(searchTerm.toLowerCase()) || producto.categoria.toLowerCase().includes(searchTerm.toLowerCase()), ), ) }, [searchTerm]) // Filtrar clientes según el término de búsqueda useEffect(() => { setFilteredClientes( clientesData.filter( (cliente) => cliente.nombre.toLowerCase().includes(clienteSearchTerm.toLowerCase()) || cliente.dni.includes(clienteSearchTerm), ), ) }, [clienteSearchTerm]) // Actualizar cliente seleccionado cuando cambia el ID useEffect(() => { if (clienteId) { const cliente = clientesData.find((c) => c.id.toString() === clienteId) setClienteSeleccionado(cliente || null) } else { setClienteSeleccionado(null) } }, [clienteId]) // Función para añadir un producto al presupuesto const addProducto = (producto: any) => { // Verificar si el producto ya está en la lista const existingItemIndex = items.findIndex((item) => item.producto.id === producto.id) if (existingItemIndex >= 0) { // Si ya existe, incrementar la cantidad const updatedItems = [...items] updatedItems[existingItemIndex].cantidad += 1 updatedItems[existingItemIndex].subtotal = updatedItems[existingItemIndex].cantidad * updatedItems[existingItemIndex].precioUnitario * (1 - updatedItems[existingItemIndex].descuento / 100) setItems(updatedItems) } else { // Si no existe, añadir nuevo item const newItem: PresupuestoItem = { id: items.length + 1, producto: { id: producto.id, codigo: producto.codigo, nombre: producto.nombre, precio: producto.precio, }, cantidad: 1, precioUnitario: producto.precio, descuento: 0, subtotal: producto.precio, } setItems([...items, newItem]) } setProductoDialogOpen(false) setSearchTerm("") } // Función para actualizar la cantidad de un item const updateCantidad = (id: number, cantidad: number) => { if (cantidad < 1) return const updatedItems = items.map((item) => { if (item.id === id) { const newCantidad = cantidad const newSubtotal = newCantidad * item.precioUnitario * (1 - item.descuento / 100) return { ...item, cantidad: newCantidad, subtotal: newSubtotal } } return item }) setItems(updatedItems) } // Función para actualizar el descuento de un item const updateDescuento = (id: number, descuento: number) => { if (descuento < 0 || descuento > 100) return const updatedItems = items.map((item) => { if (item.id === id) { const newDescuento = descuento const newSubtotal = item.cantidad * item.precioUnitario * (1 - newDescuento / 100) return { ...item, descuento: newDescuento, subtotal: newSubtotal } } return item }) setItems(updatedItems) } // Función para eliminar un item const removeItem = (id: number) => { setItems(items.filter((item) => item.id !== id)) } // Función para guardar el presupuesto const savePresupuesto = () => { // Validar que haya un cliente seleccionado if (!clienteId) { toast({ title: "Error", description: "Debe seleccionar un cliente para el presupuesto", variant: "destructive", }) return } // Validar que haya al menos un producto if (items.length === 0) { toast({ title: "Error", description: "Debe agregar al menos un producto al presupuesto", variant: "destructive", }) return } toast({ title: "Guardando presupuesto", description: "Procesando información...", }) // Simulación de guardado setTimeout(() => { toast({ title: "Presupuesto guardado", description: "El presupuesto ha sido creado correctamente", variant: "success", }) // Redireccionar a la lista de presupuestos router.push("/dashboard/presupuestos") }, 1500) } // Función para convertir directamente a venta const convertToVenta = () => { // Validar que haya un cliente seleccionado if (!clienteId) { toast({ title: "Error", description: "Debe seleccionar un cliente para crear la venta", variant: "destructive", }) return } // Validar que haya al menos un producto if (items.length === 0) { toast({ title: "Error", description: "Debe agregar al menos un producto a la venta", variant: "destructive", }) return } toast({ title: "Creando venta", description: "Procesando información...", }) // Simulación de creación de venta setTimeout(() => { toast({ title: "Venta creada", description: "La venta ha sido creada correctamente", variant: "success", }) // Redireccionar a la lista de ventas router.push("/dashboard/ventas") }, 1500) } return (

Nuevo Presupuesto

Crea un nuevo presupuesto para un cliente

{/* Información del presupuesto */} Información del Presupuesto Datos generales del presupuesto

Fecha de emisión

Validez (días)

Cliente

{clienteSeleccionado ? (

{clienteSeleccionado.nombre}

DNI: {clienteSeleccionado.dni}

Email: {clienteSeleccionado.email}

Teléfono: {clienteSeleccionado.telefono}

) : ( )}

Observaciones

setObservaciones(e.target.value)}
                rows={4}
              />
            </div>
          </CardContent>
        </Card>

{/* Resumen y totales */}
        <Card>
          <CardHeader>
            <CardTitle>Resumen del Presupuesto</CardTitle>
            <CardDescription>Totales y acciones</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>Subtotal:</span>
                <span className="font-medium">${subtotal.toLocaleString()}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>IVA (21%):</span>
                <span className="font-medium">${iva.toLocaleString()}</span>
              </div>
              <div className="flex justify-between text-base pt-2 border-t">
                <span className="font-bold">Total:</span>
                <span className="font-bold">${total.toLocaleString()}</span>
              </div>
            </div>

<div className="space-y-2">
              <Label>Acciones</Label>
              <div className="grid grid-cols-2 gap-2">
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() => {
                    toast({
                      title: "Generando PDF",
                      description: "Preparando vista previa del presupuesto...",
                    })

setTimeout(() => {
                      toast({
                        title: "PDF generado",
                        description: "La vista previa está lista",
                        variant: "success",
                      })
                    }, 1500)
                  }}
                >
                  <FileText className="mr-2 h-4 w-4" />
                  Vista previa
                </Button>
                <Button className="w-full bg-green-600 hover:bg-green-700" onClick={convertToVenta}>
                  <ShoppingCart className="mr-2 h-4 w-4" />
                  Crear venta
                </Button>
              </div>
            </div>

<div className="pt-4 border-t">
              <div className="text-sm text-muted-foreground">
                <p>Este presupuesto tiene validez por {validez} días desde su emisión.</p>
                <p className="mt-2">Los precios pueden estar sujetos a cambios sin previo aviso.</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Detalle de productos */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Detalle de Productos</CardTitle>
            <CardDescription>Productos incluidos en el presupuesto</CardDescription>
          </div>
          <Button onClick={() => setProductoDialogOpen(true)} className="bg-yellow-500 hover:bg-yellow-600 text-black">
            <Plus className="mr-2 h-4 w-4" />
            Agregar Producto
          </Button>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Código</TableHead>
                <TableHead>Producto</TableHead>
                <TableHead className="text-right">Precio Unit.</TableHead>
                <TableHead className="text-right">Cantidad</TableHead>
                <TableHead className="text-right">Descuento %</TableHead>
                <TableHead className="text-right">Subtotal</TableHead>
                <TableHead></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {items.length > 0 ? (
                items.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{item.producto.codigo}</TableCell>
                    <TableCell>{item.producto.nombre}</TableCell>
                    <TableCell className="text-right">${item.precioUnitario.toLocaleString()}</TableCell>
                    <TableCell className="text-right">
                      <Input
                        type="number"
                        min="1"
                        value={item.cantidad}
                        onChange={(e) => updateCantidad(item.id, Number.parseInt(e.target.value) || 1)}
                        className="w-16 text-right"
                      />
                    </TableCell>
                    <TableCell className="text-right">
                      <Input
                        type="number"
                        min="0"
                        max="100"
                        value={item.descuento}
                        onChange={(e) => updateDescuento(item.id, Number.parseInt(e.target.value) || 0)}
                        className="w-16 text-right"
                      />
                    </TableCell>
                    <TableCell className="text-right font-medium">${item.subtotal.toLocaleString()}</TableCell>
                    <TableCell>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => removeItem(item.id)}
                        className="text-red-500 hover:text-red-700"
                      >
                        <Trash className="h-4 w-4" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-6 text-muted-foreground">
                    No hay productos agregados al presupuesto
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Diálogo para buscar productos */}
      <Dialog open={productoDialogOpen} onOpenChange={setProductoDialogOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Buscar Producto</DialogTitle>
            <DialogDescription>Busca y selecciona los productos para agregar al presupuesto</DialogDescription>
          </DialogHeader>

<div className="relative my-2">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
            <Input
              type="search"
              placeholder="Buscar por nombre, código o categoría..."
              className="pl-8 w-full"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>

<div className="overflow-y-auto max-h-[400px]">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Código</TableHead>
                  <TableHead>Producto</TableHead>
                  <TableHead>Categoría</TableHead>
                  <TableHead className="text-right">Precio</TableHead>
                  <TableHead className="text-right">Stock</TableHead>
                  <TableHead></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredProductos.length > 0 ? (
                  filteredProductos.map((producto) => (
                    <TableRow key={producto.id}>
                      <TableCell className="font-medium">{producto.codigo}</TableCell>
                      <TableCell>{producto.nombre}</TableCell>
                      <TableCell>{producto.categoria}</TableCell>
                      <TableCell className="text-right">${producto.precio.toLocaleString()}</TableCell>
                      <TableCell className="text-right">{producto.stock}</TableCell>
                      <TableCell>
                        <Button variant="ghost" size="sm" onClick={() => addProducto(producto)}>
                          <Plus className="mr-2 h-4 w-4" />
                          Agregar
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-6 text-muted-foreground">
                      No se encontraron productos
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setProductoDialogOpen(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo para buscar clientes */}
      <Dialog open={clienteDialogOpen} onOpenChange={setClienteDialogOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Buscar Cliente</DialogTitle>
            <DialogDescription>Busca y selecciona un cliente para el presupuesto</DialogDescription>
          </DialogHeader>

<div className="relative my-2">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
            <Input
              type="search"
              placeholder="Buscar por nombre o DNI..."
              className="pl-8 w-full"
              value={clienteSearchTerm}
              onChange={(e) => setClienteSearchTerm(e.target.value)}
            />
          </div>

<div className="overflow-y-auto max-h-[400px]">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>DNI</TableHead>
                  <TableHead>Nombre</TableHead>
                  <TableHead>Email</TableHead>
                  <TableHead>Teléfono</TableHead>
                  <TableHead></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredClientes.length > 0 ? (
                  filteredClientes.map((cliente) => (
                    <TableRow key={cliente.id}>
                      <TableCell className="font-medium">{cliente.dni}</TableCell>
                      <TableCell>{cliente.nombre}</TableCell>
                      <TableCell>{cliente.email}</TableCell>
                      <TableCell>{cliente.telefono}</TableCell>
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => {
                            setClienteId(cliente.id.toString())
                            setClienteSeleccionado(cliente)
                            setClienteDialogOpen(false)
                          }}
                        >
                          <Plus className="mr-2 h-4 w-4" />
                          Seleccionar
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-6 text-muted-foreground">
                      No se encontraron clientes
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setClienteDialogOpen(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/presupuestos/nuevo/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/actividades/loading.tsx" isMerged="true" isLocked="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function LoadingActividades() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-48 mt-2" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>

<Card>
        <CardHeader className="pb-3">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <Skeleton className="h-6 w-48" />
              <Skeleton className="h-4 w-32 mt-2" />
            </div>
            <div className="flex flex-col sm:flex-row gap-2">
              <Skeleton className="h-10 w-[300px]" />
              <div className="flex gap-2">
                <Skeleton className="h-10 w-10" />
                <Skeleton className="h-10 w-10" />
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <div className="flex justify-between py-3 border-b">
              <Skeleton className="h-5 w-24" />
              <Skeleton className="h-5 w-24" />
              <Skeleton className="h-5 w-32" />
              <Skeleton className="h-5 w-48" />
              <Skeleton className="h-5 w-24" />
            </div>
            {Array(8)
              .fill(null)
              .map((_, i) => (
                <div key={i} className="flex justify-between py-3 border-b">
                  <Skeleton className="h-5 w-24" />
                  <Skeleton className="h-5 w-24" />
                  <Skeleton className="h-5 w-32" />
                  <Skeleton className="h-5 w-48" />
                  <Skeleton className="h-5 w-24" />
                </div>
              ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/actividades/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import React from "react"

import { useState, useEffect } from "react"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import {
  Activity,
  Search,
  RefreshCw,
  FileSpreadsheet,
  ShoppingCart,
  Package,
  User,
  FileText,
  DollarSign,
  Truck,
  Settings,
  Eye,
  Calendar,
  Filter,
  X,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"

// Datos de ejemplo para el registro de actividades
const actividadesData = [
  {
    id: 1,
    tipo: "venta",
    usuario: "María González",
    fecha: new Date(2023, 11, 15, 10, 30),
    descripcion: "Realizó la venta #V-2023-045",
    referencia: "V-2023-045",
    detalles: {
      cliente: "Juan Pérez",
      total: 5600,
      productos: 3,
    },
  },
  {
    id: 2,
    tipo: "presupuesto",
    usuario: "Carlos Rodríguez",
    fecha: new Date(2023, 11, 15, 11, 15),
    descripcion: "Creó el presupuesto #P-2023-028",
    referencia: "P-2023-028",
    detalles: {
      cliente: "Ana Martínez",
      total: 8900,
      validez: "15 días",
    },
  },
  {
    id: 3,
    tipo: "stock",
    usuario: "Admin",
    fecha: new Date(2023, 11, 15, 12, 45),
    descripcion: "Actualizó el stock del producto LIB004",
    referencia: "LIB004",
    detalles: {
      producto: "El señor de los anillos",
      stockAnterior: 3,
      stockNuevo: 10,
      deposito: "Depósito Central",
    },
  },
  {
    id: 4,
    tipo: "cliente",
    usuario: "Luis Sánchez",
    fecha: new Date(2023, 11, 14, 9, 20),
    descripcion: "Registró un nuevo cliente",
    referencia: "CLI-089",
    detalles: {
      cliente: "Roberto Gómez",
      dni: "67890123",
      email: "roberto@example.com",
    },
  },
  {
    id: 5,
    tipo: "producto",
    usuario: "Admin",
    fecha: new Date(2023, 11, 14, 14, 10),
    descripcion: "Modificó el precio del producto LIB002",
    referencia: "LIB002",
    detalles: {
      producto: "Cien años de soledad",
      precioAnterior: 3000,
      precioNuevo: 3200,
    },
  },
  {
    id: 6,
    tipo: "proveedor",
    usuario: "María González",
    fecha: new Date(2023, 11, 14, 16, 30),
    descripcion: "Realizó un pedido al proveedor Editorial Planeta",
    referencia: "PED-2023-012",
    detalles: {
      proveedor: "Editorial Planeta",
      productos: 5,
      total: 25000,
    },
  },
  {
    id: 7,
    tipo: "caja",
    usuario: "Carlos Rodríguez",
    fecha: new Date(2023, 11, 13, 18, 45),
    descripcion: "Realizó el cierre de caja",
    referencia: "CAJA-2023-12-13",
    detalles: {
      totalVentas: 45600,
      efectivo: 28000,
      tarjetas: 17600,
    },
  },
  {
    id: 8,
    tipo: "configuracion",
    usuario: "Admin",
    fecha: new Date(2023, 11, 13, 11, 30),
    descripcion: "Modificó la configuración del sistema",
    referencia: "CONFIG-001",
    detalles: {
      cambios: "Actualización de parámetros fiscales",
    },
  },
  {
    id: 9,
    tipo: "venta",
    usuario: "Luis Sánchez",
    fecha: new Date(2023, 11, 13, 10, 15),
    descripcion: "Realizó la venta #V-2023-044",
    referencia: "V-2023-044",
    detalles: {
      cliente: "María González",
      total: 3800,
      productos: 2,
    },
  },
  {
    id: 10,
    tipo: "presupuesto",
    usuario: "María González",
    fecha: new Date(2023, 11, 12, 15, 20),
    descripcion: "Convirtió el presupuesto #P-2023-027 en venta",
    referencia: "P-2023-027",
    detalles: {
      cliente: "Carlos Rodríguez",
      total: 12500,
      venta: "V-2023-043",
    },
  },
  {
    id: 11,
    tipo: "stock",
    usuario: "Carlos Rodríguez",
    fecha: new Date(2023, 11, 12, 14, 30),
    descripcion: "Realizó una transferencia de stock entre depósitos",
    referencia: "TRANSF-2023-008",
    detalles: {
      origen: "Depósito Central",
      destino: "Depósito Norte",
      productos: 4,
    },
  },
  {
    id: 12,
    tipo: "usuario",
    usuario: "Admin",
    fecha: new Date(2023, 11, 12, 9, 45),
    descripcion: "Creó un nuevo usuario",
    referencia: "USR-006",
    detalles: {
      usuario: "Ana Martínez",
      rol: "Vendedor",
      sucursal: "Sucursal Norte",
    },
  },
  {
    id: 13,
    tipo: "venta",
    usuario: "Ana Martínez",
    fecha: new Date(2023, 11, 11, 17, 30),
    descripcion: "Anuló la venta #V-2023-042",
    referencia: "V-2023-042",
    detalles: {
      cliente: "Luis Sánchez",
      total: 7500,
      motivo: "Error en productos seleccionados",
    },
  },
  {
    id: 14,
    tipo: "producto",
    usuario: "Admin",
    fecha: new Date(2023, 11, 11, 11, 15),
    descripcion: "Agregó un nuevo producto",
    referencia: "LIB006",
    detalles: {
      producto: "1984",
      categoria: "Literatura",
      precio: 2800,
    },
  },
  {
    id: 15,
    tipo: "caja",
    usuario: "María González",
    fecha: new Date(2023, 11, 10, 19, 0),
    descripcion: "Realizó el cierre de caja",
    referencia: "CAJA-2023-12-10",
    detalles: {
      totalVentas: 38500,
      efectivo: 22000,
      tarjetas: 16500,
    },
  },
]

// Tipos de actividades y sus iconos/colores
const tiposActividad = [
  { valor: "venta", label: "Venta", icono: ShoppingCart, color: "bg-green-100 text-green-800" },
  { valor: "presupuesto", label: "Presupuesto", icono: FileText, color: "bg-blue-100 text-blue-800" },
  { valor: "stock", label: "Stock", icono: Package, color: "bg-yellow-100 text-yellow-800" },
  { valor: "cliente", label: "Cliente", icono: User, color: "bg-purple-100 text-purple-800" },
  { valor: "producto", label: "Producto", icono: Package, color: "bg-indigo-100 text-indigo-800" },
  { valor: "proveedor", label: "Proveedor", icono: Truck, color: "bg-orange-100 text-orange-800" },
  { valor: "caja", label: "Caja", icono: DollarSign, color: "bg-emerald-100 text-emerald-800" },
  { valor: "configuracion", label: "Configuración", icono: Settings, color: "bg-gray-100 text-gray-800" },
  { valor: "usuario", label: "Usuario", icono: User, color: "bg-pink-100 text-pink-800" },
]

export default function ActividadesPage() {
  const { toast } = useToast()
  const [actividades, setActividades] = useState(actividadesData)
  const [filteredActividades, setFilteredActividades] = useState(actividadesData)
  const [searchTerm, setSearchTerm] = useState("")
  const [showDetalleDialog, setShowDetalleDialog] = useState(false)
  const [selectedActividad, setSelectedActividad] = useState<any>(null)
  const [showFiltrosDialog, setShowFiltrosDialog] = useState(false)

// Estados para filtros
  const [filtros, setFiltros] = useState({
    tipo: "",
    usuario: "",
    fechaDesde: "",
    fechaHasta: "",
    referencia: "",
  })

// Lista de usuarios únicos para el filtro
  const usuarios = Array.from(new Set(actividades.map((a) => a.usuario)))

// Función para refrescar las actividades
  const refreshActividades = () => {
    toast({
      title: "Actualizando registro",
      description: "Obteniendo datos más recientes...",
    })

setTimeout(() => {
      // En un entorno real, aquí se haría una llamada a la API
      setActividades([...actividadesData])
      aplicarFiltros()

toast({
        title: "Registro actualizado",
        description: "Los datos han sido actualizados correctamente",
      })
    }, 1000)
  }

// Función para exportar a Excel
  const exportToExcel = () => {
    toast({
      title: "Exportando datos",
      description: "Preparando archivo Excel para descargar...",
    })

setTimeout(() => {
      toast({
        title: "Exportación completada",
        description: "El archivo ha sido descargado correctamente",
      })
    }, 1500)
  }

// Función para ver detalles de una actividad
  const verDetalles = (actividad: any) => {
    setSelectedActividad(actividad)
    setShowDetalleDialog(true)
  }

// Función para obtener el icono según el tipo de actividad
  const getIconoActividad = (tipo: string) => {
    const tipoInfo = tiposActividad.find((t) => t.valor === tipo)
    return tipoInfo ? tipoInfo.icono : Activity
  }

// Función para obtener el color según el tipo de actividad
  const getColorActividad = (tipo: string) => {
    const tipoInfo = tiposActividad.find((t) => t.valor === tipo)
    return tipoInfo ? tipoInfo.color : "bg-gray-100 text-gray-800"
  }

// Función para obtener el label según el tipo de actividad
  const getLabelActividad = (tipo: string) => {
    const tipoInfo = tiposActividad.find((t) => t.valor === tipo)
    return tipoInfo ? tipoInfo.label : tipo.charAt(0).toUpperCase() + tipo.slice(1)
  }

// Función para aplicar filtros
  const aplicarFiltros = () => {
    let actividadesFiltradas = [...actividades]

// Filtrar por término de búsqueda
    if (searchTerm) {
      actividadesFiltradas = actividadesFiltradas.filter(
        (actividad) =>
          actividad.descripcion.toLowerCase().includes(searchTerm.toLowerCase()) ||
          actividad.referencia.toLowerCase().includes(searchTerm.toLowerCase()) ||
          actividad.usuario.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

// Filtrar por tipo
    if (filtros.tipo) {
      actividadesFiltradas = actividadesFiltradas.filter((actividad) => actividad.tipo === filtros.tipo)
    }

// Filtrar por usuario
    if (filtros.usuario) {
      actividadesFiltradas = actividadesFiltradas.filter((actividad) => actividad.usuario === filtros.usuario)
    }

// Filtrar por fecha desde
    if (filtros.fechaDesde) {
      const fechaDesde = new Date(filtros.fechaDesde)
      actividadesFiltradas = actividadesFiltradas.filter((actividad) => actividad.fecha >= fechaDesde)
    }

// Filtrar por fecha hasta
    if (filtros.fechaHasta) {
      const fechaHasta = new Date(filtros.fechaHasta)
      fechaHasta.setHours(23, 59, 59, 999) // Establecer al final del día
      actividadesFiltradas = actividadesFiltradas.filter((actividad) => actividad.fecha <= fechaHasta)
    }

// Filtrar por referencia
    if (filtros.referencia) {
      actividadesFiltradas = actividadesFiltradas.filter((actividad) =>
        actividad.referencia.toLowerCase().includes(filtros.referencia.toLowerCase()),
      )
    }

setFilteredActividades(actividadesFiltradas)
  }

// Aplicar filtros cuando cambian los criterios
  useEffect(() => {
    aplicarFiltros()
  }, [searchTerm, filtros])

// Función para resetear filtros
  const resetearFiltros = () => {
    setFiltros({
      tipo: "",
      usuario: "",
      fechaDesde: "",
      fechaHasta: "",
      referencia: "",
    })
    setSearchTerm("")
  }

// Verificar si hay filtros activos
  const hayFiltrosActivos = () => {
    return (
      filtros.tipo !== "" ||
      filtros.usuario !== "" ||
      filtros.fechaDesde !== "" ||
      filtros.fechaHasta !== "" ||
      filtros.referencia !== ""
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Registro de Actividades</h1>
          <p className="text-muted-foreground">Historial de todas las acciones realizadas en el sistema</p>
        </div>
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">
              <Calendar className="mr-2 h-4 w-4" />
              Filtros
              {hayFiltrosActivos() && (
                <Badge className="ml-2 bg-yellow-500 text-black" variant="secondary">
                  Activos
                </Badge>
              )}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-80">
            <div className="space-y-4">
              <h4 className="font-medium leading-none">Filtrar actividades</h4>
              <div className="space-y-2">
                <Label htmlFor="tipo">Tipo de actividad</Label>
                <Select value={filtros.tipo} onValueChange={(value) => setFiltros({ ...filtros, tipo: value })}>
                  <SelectTrigger id="tipo">
                    <SelectValue placeholder="Todos los tipos" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos los tipos</SelectItem>
                    {tiposActividad.map((tipo) => (
                      <SelectItem key={tipo.valor} value={tipo.valor}>
                        {tipo.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="usuario">Usuario</Label>
                <Select value={filtros.usuario} onValueChange={(value) => setFiltros({ ...filtros, usuario: value })}>
                  <SelectTrigger id="usuario">
                    <SelectValue placeholder="Todos los usuarios" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos los usuarios</SelectItem>
                    {usuarios.map((usuario) => (
                      <SelectItem key={usuario} value={usuario}>
                        {usuario}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="fechaDesde">Fecha desde</Label>
                <Input
                  id="fechaDesde"
                  type="date"
                  value={filtros.fechaDesde}
                  onChange={(e) => setFiltros({ ...filtros, fechaDesde: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="fechaHasta">Fecha hasta</Label>
                <Input
                  id="fechaHasta"
                  type="date"
                  value={filtros.fechaHasta}
                  onChange={(e) => setFiltros({ ...filtros, fechaHasta: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="referencia">Referencia</Label>
                <Input
                  id="referencia"
                  placeholder="Ej: V-2023-045"
                  value={filtros.referencia}
                  onChange={(e) => setFiltros({ ...filtros, referencia: e.target.value })}
                />
              </div>
              <div className="flex justify-between pt-2">
                <Button variant="outline" size="sm" onClick={resetearFiltros}>
                  <X className="mr-2 h-4 w-4" />
                  Limpiar
                </Button>
                <Button size="sm" onClick={aplicarFiltros} className="bg-yellow-500 hover:bg-yellow-600 text-black">
                  <Filter className="mr-2 h-4 w-4" />
                  Aplicar
                </Button>
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </div>

<Card>
        <CardHeader className="pb-3">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <CardTitle>Historial de Actividades</CardTitle>
              <CardDescription>{filteredActividades.length} actividades encontradas</CardDescription>
            </div>
            <div className="flex flex-col sm:flex-row gap-2">
              <div className="relative w-full sm:w-[300px]">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar actividades..."
                  className="pl-8 w-full"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <div className="flex gap-2">
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline" size="icon" onClick={refreshActividades}>
                        <RefreshCw className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline" size="icon" onClick={exportToExcel}>
                        <FileSpreadsheet className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Exportar a Excel</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-1">
            {filteredActividades.length > 0 ? (
              filteredActividades.map((actividad) => {
                const IconoActividad = getIconoActividad(actividad.tipo)
                return (
                  <div
                    key={actividad.id}
                    className="flex flex-col sm:flex-row sm:items-center justify-between py-3 px-4 border-b hover:bg-gray-50 rounded-md"
                  >
                    <div className="flex items-center gap-3 mb-2 sm:mb-0">
                      <div className={cn("p-2 rounded-full", getColorActividad(actividad.tipo))}>
                        <IconoActividad className="h-4 w-4" />
                      </div>
                      <div>
                        <p className="font-medium">{actividad.descripcion}</p>
                        <p className="text-sm text-muted-foreground">
                          {format(actividad.fecha, "dd/MM/yyyy HH:mm", { locale: es })}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="flex flex-col items-end">
                        <Badge variant="outline" className={getColorActividad(actividad.tipo)}>
                          {getLabelActividad(actividad.tipo)}
                        </Badge>
                        <span className="text-sm text-muted-foreground">{actividad.usuario}</span>
                      </div>
                      <Button variant="ghost" size="sm" onClick={() => verDetalles(actividad)}>
                        <Eye className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                )
              })
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                <Activity className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
                <h3 className="text-lg font-medium">No se encontraron actividades</h3>
                <p className="text-sm mt-2">
                  {hayFiltrosActivos()
                    ? "Prueba a cambiar los filtros para ver más resultados"
                    : "El registro de actividades está vacío"}
                </p>
                {hayFiltrosActivos() && (
                  <Button variant="outline" className="mt-4" onClick={resetearFiltros}>
                    <X className="mr-2 h-4 w-4" />
                    Limpiar filtros
                  </Button>
                )}
              </div>
            )}
          </div>
        </CardContent>
      </Card>

{/* Diálogo de detalles de actividad */}
      <Dialog open={showDetalleDialog} onOpenChange={setShowDetalleDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Detalle de la Actividad</DialogTitle>
            <DialogDescription>Información completa sobre la actividad seleccionada</DialogDescription>
          </DialogHeader>
          {selectedActividad && (
            <div className="py-4">
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className={cn("p-2 rounded-full", getColorActividad(selectedActividad.tipo))}>
                    {React.createElement(getIconoActividad(selectedActividad.tipo), { className: "h-4 w-4" })}
                  </div>
                  <div>
                    <Badge variant="outline" className={getColorActividad(selectedActividad.tipo)}>
                      {getLabelActividad(selectedActividad.tipo)}
                    </Badge>
                  </div>
                </div>

<div className="space-y-2">
                  <h4 className="font-medium">Descripción</h4>
                  <p>{selectedActividad.descripcion}</p>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <h4 className="text-sm font-medium">Fecha y hora</h4>
                    <p className="text-sm">{format(selectedActividad.fecha, "dd/MM/yyyy HH:mm", { locale: es })}</p>
                  </div>
                  <div className="space-y-1">
                    <h4 className="text-sm font-medium">Usuario</h4>
                    <p className="text-sm">{selectedActividad.usuario}</p>
                  </div>
                </div>

<div className="space-y-1">
                  <h4 className="text-sm font-medium">Referencia</h4>
                  <p className="text-sm">{selectedActividad.referencia}</p>
                </div>

<div className="space-y-2">
                  <h4 className="font-medium">Detalles</h4>
                  <div className="bg-muted p-3 rounded-md">
                    {Object.entries(selectedActividad.detalles).map(([key, value]) => (
                      <div key={key} className="flex justify-between py-1 border-b border-border/50 last:border-0">
                        <span className="text-sm font-medium capitalize">
                          {key.replace(/([A-Z])/g, " $1").toLowerCase()}
                        </span>
                        <span className="text-sm">{value}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button onClick={() => setShowDetalleDialog(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/categorias-clientes/loading.tsx" isMerged="true" isLocked="true"
export default function Loading() {
  return (
    <div className="flex h-[calc(100vh-theme(spacing.16))] w-full items-center justify-center">
      <div className="flex flex-col items-center gap-2">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-yellow-500" />
        <p className="text-sm text-muted-foreground">Cargando categorías de clientes...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/reportes/page.tsx" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import { BarChart2, FileText, Download, Calendar, Filter, Users, Tag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line,
  Legend,
} from "recharts"
import { useToast } from "@/hooks/use-toast"

// Datos de ejemplo
const ventasMensuales = [
  { name: "Ene", ventas: 120000 },
  { name: "Feb", ventas: 150000 },
  { name: "Mar", ventas: 180000 },
  { name: "Abr", ventas: 160000 },
  { name: "May", ventas: 210000 },
  { name: "Jun", ventas: 240000 },
]

const ventasPorCategoria = [
  { name: "Literatura", value: 35 },
  { name: "Infantil", value: 25 },
  { name: "Académico", value: 20 },
  { name: "Autoayuda", value: 15 },
  { name: "Otros", value: 5 },
]

// Datos de ejemplo para las tablas
const ventasDetalladas = [
  { id: 1, fecha: "2023-01-15", sucursal: "Centro", vendedor: "Juan Pérez", total: 120000 },
  { id: 2, fecha: "2023-02-10", sucursal: "Norte", vendedor: "María González", total: 150000 },
  { id: 3, fecha: "2023-03-05", sucursal: "Sur", vendedor: "Carlos Rodríguez", total: 180000 },
  { id: 4, fecha: "2023-04-20", sucursal: "Centro", vendedor: "Ana Martínez", total: 160000 },
  { id: 5, fecha: "2023-05-12", sucursal: "Norte", vendedor: "Roberto Sánchez", total: 210000 },
  { id: 6, fecha: "2023-06-08", sucursal: "Sur", vendedor: "Laura Fernández", total: 240000 },
]

const stockDetallado = [
  { id: 1, producto: "El principito", categoria: "Literatura", stock: 25, deposito: "Centro" },
  { id: 2, producto: "Cien años de soledad", categoria: "Literatura", stock: 15, deposito: "Norte" },
  { id: 3, producto: "Harry Potter", categoria: "Infantil", stock: 30, deposito: "Sur" },
  { id: 4, producto: "El señor de los anillos", categoria: "Fantasía", stock: 10, deposito: "Centro" },
  { id: 5, producto: "Don Quijote", categoria: "Clásicos", stock: 20, deposito: "Norte" },
]

const clientesDetallados = [
  { id: 1, nombre: "Juan Pérez", compras: 12, totalGastado: 25000, ultimaCompra: "2023-06-15" },
  { id: 2, nombre: "María González", compras: 8, totalGastado: 18000, ultimaCompra: "2023-05-20" },
  { id: 3, nombre: "Carlos Rodríguez", compras: 15, totalGastado: 32000, ultimaCompra: "2023-06-10" },
  { id: 4, nombre: "Ana Martínez", compras: 5, totalGastado: 12000, ultimaCompra: "2023-04-25" },
  { id: 5, nombre: "Roberto Sánchez", compras: 10, totalGastado: 22000, ultimaCompra: "2023-06-05" },
]

// Datos de ejemplo para el ranking de clientes por pagos
const categoriaClientes = [
  { id: 1, nombre: "Premium" },
  { id: 2, nombre: "Regular" },
  { id: 3, nombre: "Nuevo" },
  { id: 4, nombre: "Corporativo" },
  { id: 5, nombre: "Mayorista" },
]

const rankingClientesPorCategoria = [
  {
    categoria: "Premium",
    clientes: [
      { id: 1, nombre: "Carlos Rodríguez", cantidadPagos: 28, montoTotal: 58000, ultimoPago: "2023-06-18" },
      { id: 2, nombre: "Ana Martínez", cantidadPagos: 22, montoTotal: 45000, ultimoPago: "2023-06-15" },
      { id: 3, nombre: "Roberto Sánchez", cantidadPagos: 20, montoTotal: 42000, ultimoPago: "2023-06-10" },
    ],
  },
  {
    categoria: "Regular",
    clientes: [
      { id: 4, nombre: "María González", cantidadPagos: 18, montoTotal: 36000, ultimoPago: "2023-06-12" },
      { id: 5, nombre: "Juan Pérez", cantidadPagos: 15, montoTotal: 30000, ultimoPago: "2023-06-05" },
      { id: 6, nombre: "Laura Fernández", cantidadPagos: 12, montoTotal: 24000, ultimoPago: "2023-05-28" },
    ],
  },
  {
    categoria: "Corporativo",
    clientes: [
      { id: 7, nombre: "Empresa ABC", cantidadPagos: 30, montoTotal: 120000, ultimoPago: "2023-06-20" },
      { id: 8, nombre: "Corporación XYZ", cantidadPagos: 25, montoTotal: 95000, ultimoPago: "2023-06-15" },
      { id: 9, nombre: "Industrias 123", cantidadPagos: 22, montoTotal: 88000, ultimoPago: "2023-06-10" },
    ],
  },
  {
    categoria: "Mayorista",
    clientes: [
      { id: 10, nombre: "Distribuidora Norte", cantidadPagos: 35, montoTotal: 150000, ultimoPago: "2023-06-22" },
      { id: 11, nombre: "Mayorista Central", cantidadPagos: 32, montoTotal: 130000, ultimoPago: "2023-06-18" },
      { id: 12, nombre: "Abastecedora Sur", cantidadPagos: 28, montoTotal: 110000, ultimoPago: "2023-06-15" },
    ],
  },
  {
    categoria: "Nuevo",
    clientes: [
      { id: 13, nombre: "Pedro Gómez", cantidadPagos: 5, montoTotal: 10000, ultimoPago: "2023-06-20" },
      { id: 14, nombre: "Lucía Torres", cantidadPagos: 3, montoTotal: 6000, ultimoPago: "2023-06-15" },
      { id: 15, nombre: "Miguel Ángel", cantidadPagos: 2, montoTotal: 4000, ultimoPago: "2023-06-10" },
    ],
  },
]

// Datos para el gráfico de ranking por categoría
const datosPagosPorCategoria = [
  { name: "Premium", pagos: 70, monto: 145000 },
  { name: "Regular", pagos: 45, monto: 90000 },
  { name: "Corporativo", pagos: 77, monto: 303000 },
  { name: "Mayorista", pagos: 95, monto: 390000 },
  { name: "Nuevo", pagos: 10, monto: 20000 },
]

const COLORS = ["#FFBB28", "#FF8042", "#0088FE", "#00C49F", "#FFBB28"]

export default function ReportesPage() {
  const { toast } = useToast()

// Función para exportar a Excel
  const exportarExcel = () => {
    toast({
      title: "Exportación exitosa",
      description: "Los datos han sido exportados a Excel correctamente",
    })
  }

// Función para exportar a PDF
  const exportarPDF = () => {
    toast({
      title: "Exportación exitosa",
      description: "Los datos han sido exportados a PDF correctamente",
    })
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Reportes</h1>
        <p className="text-muted-foreground">Genere y visualice reportes del sistema</p>
      </div>

<Tabs defaultValue="ventas">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="ventas">Ventas</TabsTrigger>
          <TabsTrigger value="stock">Stock</TabsTrigger>
          <TabsTrigger value="clientes">Clientes</TabsTrigger>
          <TabsTrigger value="ranking-clientes">Ranking de Clientes</TabsTrigger>
        </TabsList>

<TabsContent value="ventas" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <FileText className="mr-2 h-5 w-5" />
                    Reporte de ventas
                  </CardTitle>
                  <CardDescription>Genere reportes de ventas por período</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={exportarExcel}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar Excel
                  </Button>
                  <Button variant="outline" onClick={exportarPDF}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar PDF
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Fecha desde</label>
                    <div className="flex">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input type="date" className="pl-8" />
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Fecha hasta</label>
                    <div className="flex">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input type="date" className="pl-8" />
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Sucursal</label>
                    <Select>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Todas" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todas">Todas</SelectItem>
                        <SelectItem value="centro">Centro</SelectItem>
                        <SelectItem value="norte">Norte</SelectItem>
                        <SelectItem value="sur">Sur</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                      <Filter className="mr-2 h-4 w-4" />
                      Filtrar
                    </Button>
                  </div>
                </div>

{/* Tabla de datos de ventas */}
                <div className="pt-4">
                  <h3 className="text-lg font-medium mb-2">Detalle de ventas</h3>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Fecha</TableHead>
                          <TableHead>Sucursal</TableHead>
                          <TableHead>Vendedor</TableHead>
                          <TableHead className="text-right">Total</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {ventasDetalladas.map((venta) => (
                          <TableRow key={venta.id}>
                            <TableCell>{venta.id}</TableCell>
                            <TableCell>{new Date(venta.fecha).toLocaleDateString()}</TableCell>
                            <TableCell>{venta.sucursal}</TableCell>
                            <TableCell>{venta.vendedor}</TableCell>
                            <TableCell className="text-right">${venta.total.toLocaleString()}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="stock" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <BarChart2 className="mr-2 h-5 w-5" />
                    Reporte de stock
                  </CardTitle>
                  <CardDescription>Visualice el estado actual del stock</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={exportarExcel}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar Excel
                  </Button>
                  <Button variant="outline" onClick={exportarPDF}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar PDF
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Depósito</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todos" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todos">Todos</SelectItem>
                        <SelectItem value="centro">Depósito Central</SelectItem>
                        <SelectItem value="norte">Depósito Norte</SelectItem>
                        <SelectItem value="sur">Depósito Sur</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Categoría</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todas" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todas">Todas</SelectItem>
                        <SelectItem value="literatura">Literatura</SelectItem>
                        <SelectItem value="infantil">Infantil</SelectItem>
                        <SelectItem value="academico">Académico</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                      <Filter className="mr-2 h-4 w-4" />
                      Filtrar
                    </Button>
                  </div>
                </div>

<div className="pt-4">
                  <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={ventasPorCategoria}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {ventasPorCategoria.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </div>

{/* Tabla de datos de stock */}
                <div className="pt-4">
                  <h3 className="text-lg font-medium mb-2">Detalle de stock</h3>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Producto</TableHead>
                          <TableHead>Categoría</TableHead>
                          <TableHead>Stock</TableHead>
                          <TableHead>Depósito</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {stockDetallado.map((item) => (
                          <TableRow key={item.id}>
                            <TableCell>{item.id}</TableCell>
                            <TableCell>{item.producto}</TableCell>
                            <TableCell>{item.categoria}</TableCell>
                            <TableCell>{item.stock}</TableCell>
                            <TableCell>{item.deposito}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="clientes" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <FileText className="mr-2 h-5 w-5" />
                    Reporte de clientes
                  </CardTitle>
                  <CardDescription>Analice el comportamiento de sus clientes</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={exportarExcel}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar Excel
                  </Button>
                  <Button variant="outline" onClick={exportarPDF}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar PDF
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Período</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Último mes" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="mes">Último mes</SelectItem>
                        <SelectItem value="trimestre">Último trimestre</SelectItem>
                        <SelectItem value="semestre">Último semestre</SelectItem>
                        <SelectItem value="anio">Último año</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Tipo de cliente</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todos" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todos">Todos</SelectItem>
                        <SelectItem value="frecuentes">Clientes frecuentes</SelectItem>
                        <SelectItem value="nuevos">Clientes nuevos</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                      <Filter className="mr-2 h-4 w-4" />
                      Generar
                    </Button>
                  </div>
                </div>

{/* Tabla de datos de clientes */}
                <div className="pt-4">
                  <h3 className="text-lg font-medium mb-2">Detalle de clientes</h3>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Nombre</TableHead>
                          <TableHead>Compras</TableHead>
                          <TableHead>Total gastado</TableHead>
                          <TableHead>Última compra</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {clientesDetallados.map((cliente) => (
                          <TableRow key={cliente.id}>
                            <TableCell>{cliente.id}</TableCell>
                            <TableCell>{cliente.nombre}</TableCell>
                            <TableCell>{cliente.compras}</TableCell>
                            <TableCell>${cliente.totalGastado.toLocaleString()}</TableCell>
                            <TableCell>{new Date(cliente.ultimaCompra).toLocaleDateString()}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="ranking-clientes" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <Users className="mr-2 h-5 w-5" />
                    Ranking de Clientes por Pagos
                  </CardTitle>
                  <CardDescription>Análisis de clientes que más pagos realizan agrupados por categoría</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={exportarExcel}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar Excel
                  </Button>
                  <Button variant="outline" onClick={exportarPDF}>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar PDF
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Período</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Último mes" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="mes">Último mes</SelectItem>
                        <SelectItem value="trimestre">Último trimestre</SelectItem>
                        <SelectItem value="semestre">Último semestre</SelectItem>
                        <SelectItem value="anio">Último año</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Categoría de cliente</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todas" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todas">Todas</SelectItem>
                        {categoriaClientes.map((categoria) => (
                          <SelectItem key={categoria.id} value={categoria.nombre.toLowerCase()}>
                            {categoria.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Ordenar por</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Cantidad de pagos" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="cantidad">Cantidad de pagos</SelectItem>
                        <SelectItem value="monto">Monto total</SelectItem>
                        <SelectItem value="reciente">Pago más reciente</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                      <Filter className="mr-2 h-4 w-4" />
                      Filtrar
                    </Button>
                  </div>
                </div>

{/* Tablas por categoría */}
                <div className="pt-4 space-y-6">
                  <h3 className="text-lg font-medium mb-2">Detalle por Categoría</h3>

{rankingClientesPorCategoria.map((categoria) => (
                    <div key={categoria.categoria} className="space-y-2">
                      <h4 className="text-md font-medium flex items-center">
                        <Tag className="mr-2 h-4 w-4" />
                        Categoría: {categoria.categoria}
                      </h4>
                      <div className="rounded-md border">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>Cliente</TableHead>
                              <TableHead className="text-center">Cantidad de Pagos</TableHead>
                              <TableHead className="text-center">Monto Total</TableHead>
                              <TableHead className="text-center">Último Pago</TableHead>
                              <TableHead className="text-right">Acciones</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {categoria.clientes.map((cliente) => (
                              <TableRow key={cliente.id}>
                                <TableCell className="font-medium">{cliente.nombre}</TableCell>
                                <TableCell className="text-center">{cliente.cantidadPagos}</TableCell>
                                <TableCell className="text-center">${cliente.montoTotal.toLocaleString()}</TableCell>
                                <TableCell className="text-center">
                                  {new Date(cliente.ultimoPago).toLocaleDateString()}
                                </TableCell>
                                <TableCell className="text-right">
                                  <Button variant="ghost" size="sm">
                                    Ver detalle
                                  </Button>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/marcas/page.tsx" isMerged="true" isLocked="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Plus, Search, MoreHorizontal, Edit, Trash2, Eye, Package } from "lucide-react"

// Datos de ejemplo para marcas
const marcasData = [
  {
    id: 1,
    nombre: "Penguin Random House",
    descripcion: "Editorial líder mundial en publicación de libros",
    productos: 245,
    estado: "activo",
    fechaCreacion: "2023-01-15",
  },
  {
    id: 2,
    nombre: "Editorial Planeta",
    descripcion: "Grupo editorial español con presencia internacional",
    productos: 189,
    estado: "activo",
    fechaCreacion: "2023-02-20",
  },
  {
    id: 3,
    nombre: "Alfaguara",
    descripcion: "Sello editorial especializado en literatura contemporánea",
    productos: 156,
    estado: "activo",
    fechaCreacion: "2023-03-10",
  },
  {
    id: 4,
    nombre: "Anagrama",
    descripcion: "Editorial independiente catalana",
    productos: 98,
    estado: "activo",
    fechaCreacion: "2023-04-05",
  },
  {
    id: 5,
    nombre: "Tusquets Editores",
    descripcion: "Editorial especializada en narrativa y ensayo",
    productos: 67,
    estado: "inactivo",
    fechaCreacion: "2023-05-12",
  },
]

export default function MarcasPage() {
  const [marcas, setMarcas] = useState(marcasData)
  const [searchTerm, setSearchTerm] = useState("")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingMarca, setEditingMarca] = useState<any>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    descripcion: "",
  })

const filteredMarcas = marcas.filter(
    (marca) =>
      marca.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      marca.descripcion.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (editingMarca) {
      // Editar marca existente
      setMarcas(marcas.map((marca) => (marca.id === editingMarca.id ? { ...marca, ...formData } : marca)))
    } else {
      // Crear nueva marca
      const newMarca = {
        id: marcas.length + 1,
        ...formData,
        productos: 0,
        estado: "activo",
        fechaCreacion: new Date().toISOString().split("T")[0],
      }
      setMarcas([...marcas, newMarca])
    }
    setIsDialogOpen(false)
    setEditingMarca(null)
    setFormData({ nombre: "", descripcion: "" })
  }

const handleEdit = (marca: any) => {
    setEditingMarca(marca)
    setFormData({
      nombre: marca.nombre,
      descripcion: marca.descripcion,
    })
    setIsDialogOpen(true)
  }

const handleDelete = (id: number) => {
    setMarcas(marcas.filter((marca) => marca.id !== id))
  }

const toggleEstado = (id: number) => {
    setMarcas(
      marcas.map((marca) =>
        marca.id === id ? { ...marca, estado: marca.estado === "activo" ? "inactivo" : "activo" } : marca,
      ),
    )
  }

const totalMarcas = marcas.length
  const marcasActivas = marcas.filter((m) => m.estado === "activo").length
  const totalProductos = marcas.reduce((sum, marca) => sum + marca.productos, 0)

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Marcas</h1>
          <p className="text-muted-foreground">Gestiona las marcas y editoriales de tus productos</p>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Plus className="mr-2 h-4 w-4" />
              Nueva Marca
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <form onSubmit={handleSubmit}>
              <DialogHeader>
                <DialogTitle>{editingMarca ? "Editar Marca" : "Nueva Marca"}</DialogTitle>
                <DialogDescription>
                  {editingMarca
                    ? "Modifica los datos de la marca seleccionada."
                    : "Completa los datos para crear una nueva marca."}
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-4 items-center gap-4">
                  <Label htmlFor="nombre" className="text-right">
                    Nombre
                  </Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                    className="col-span-3"
                    required
                  />
                </div>
                <div className="grid grid-cols-4 items-center gap-4">
                  <Label htmlFor="descripcion" className="text-right">
                    Descripción
                  </Label>
                  <Textarea
                    id="descripcion"
                    value={formData.descripcion}
                    onChange={(e) => setFormData({ ...formData, descripcion: e.target.value })}
                    className="col-span-3"
                    rows={3}
                  />
                </div>
              </div>
              <DialogFooter>
                <Button type="submit" className="bg-yellow-500 hover:bg-yellow-600 text-black">
                  {editingMarca ? "Guardar Cambios" : "Crear Marca"}
                </Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>
      </div>

{/* Estadísticas */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Marcas</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalMarcas}</div>
            <p className="text-xs text-muted-foreground">{marcasActivas} activas</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Marcas Activas</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{marcasActivas}</div>
            <p className="text-xs text-muted-foreground">
              {((marcasActivas / totalMarcas) * 100).toFixed(1)}% del total
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Productos</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalProductos}</div>
            <p className="text-xs text-muted-foreground">En todas las marcas</p>
          </CardContent>
        </Card>
      </div>

{/* Filtros y búsqueda */}
      <Card>
        <CardHeader>
          <CardTitle>Marcas Registradas</CardTitle>
          <CardDescription>Lista de todas las marcas y editoriales registradas en el sistema</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center space-x-2 mb-4">
            <div className="relative flex-1">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar marcas..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-8"
              />
            </div>
          </div>

<div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Marca</TableHead>
                  <TableHead>Descripción</TableHead>
                  <TableHead>Productos</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Fecha Creación</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredMarcas.map((marca) => (
                  <TableRow key={marca.id}>
                    <TableCell className="font-medium">{marca.nombre}</TableCell>
                    <TableCell className="max-w-xs truncate">{marca.descripcion}</TableCell>
                    <TableCell>{marca.productos}</TableCell>
                    <TableCell>
                      <Badge variant={marca.estado === "activo" ? "default" : "secondary"}>{marca.estado}</Badge>
                    </TableCell>
                    <TableCell>{marca.fechaCreacion}</TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" className="h-8 w-8 p-0">
                            <span className="sr-only">Abrir menú</span>
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                          <DropdownMenuItem onClick={() => handleEdit(marca)}>
                            <Edit className="mr-2 h-4 w-4" />
                            Editar
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => toggleEstado(marca.id)}>
                            <Eye className="mr-2 h-4 w-4" />
                            {marca.estado === "activo" ? "Desactivar" : "Activar"}
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem onClick={() => handleDelete(marca.id)} className="text-red-600">
                            <Trash2 className="mr-2 h-4 w-4" />
                            Eliminar
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/marcas/loading.tsx" isMerged="true" isLocked="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function MarcasLoading() {
  return (
    <div className="space-y-6">
      {/* Header skeleton */}
      <div className="flex justify-between items-center">
        <div className="space-y-2">
          <Skeleton className="h-8 w-32" />
          <Skeleton className="h-4 w-64" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>

{/* Stats cards skeleton */}
      <div className="grid gap-4 md:grid-cols-3">
        {Array.from({ length: 3 }).map((_, i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-4" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16 mb-2" />
              <Skeleton className="h-3 w-20" />
            </CardContent>
          </Card>
        ))}
      </div>

{/* Table skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-40" />
          <Skeleton className="h-4 w-80" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Skeleton className="h-10 w-full" />
            <div className="space-y-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function ClientesLoading() {
  return (
    <div className="space-y-6">
      {/* Header skeleton */}
      <div className="flex justify-between items-center">
        <div className="space-y-2">
          <Skeleton className="h-8 w-32" />
          <Skeleton className="h-4 w-64" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>

{/* Table skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-40" />
          <Skeleton className="h-4 w-80" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex space-x-2">
              <Skeleton className="h-10 flex-1" />
              <Skeleton className="h-10 w-40" />
              <Skeleton className="h-10 w-32" />
            </div>
            <div className="space-y-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/promociones/page.tsx" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import { Tag, Plus, Search, Eye, Pencil, Trash2, Download, RefreshCw, Package, Filter, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"

// Datos de ejemplo de promociones
const promociones = [
  {
    id: 1,
    codigo: "PROM-001",
    nombre: "Descuento Estudiantes",
    tipo: "Porcentaje",
    valor: 15,
    fechaInicio: "2023-09-01",
    fechaFin: "2023-12-31",
    estado: "Activa",
    descripcion: "Descuento especial para estudiantes en libros académicos",
    condiciones: "Válido con credencial estudiantil",
    usos: 245,
    limite: 1000,
    limitePorCliente: 1,
    compraMinima: 0,
    esAcumulable: false,
    categorias: ["Académicos", "Universitarios"],
    productos: [],
  },
  {
    id: 2,
    codigo: "PROM-002",
    nombre: "2x1 Literatura Clásica",
    tipo: "2x1",
    valor: 0,
    fechaInicio: "2023-10-01",
    fechaFin: "2023-10-31",
    estado: "Activa",
    descripcion: "Promoción 2x1 en literatura clásica seleccionada",
    condiciones: "Aplica al producto de menor valor",
    usos: 89,
    limite: 500,
    limitePorCliente: 2,
    compraMinima: 1000,
    esAcumulable: true,
    categorias: [],
    productos: ["Don Quijote", "Cien años de soledad", "El principito"],
  },
  {
    id: 3,
    codigo: "PROM-003",
    nombre: "Black Friday Librería",
    tipo: "Monto fijo",
    valor: 500,
    fechaInicio: "2023-11-24",
    fechaFin: "2023-11-26",
    estado: "Inactiva",
    descripcion: "Descuento fijo para Black Friday",
    condiciones: "Compra mínima $2000",
    usos: 0,
    limite: 2000,
    limitePorCliente: 0,
    compraMinima: 2000,
    esAcumulable: false,
    categorias: [],
    productos: [],
  },
]

// Datos de ejemplo de productos
const productos = [
  { id: 1, codigo: "LIB001", nombre: "Don Quijote de la Mancha", categoria: "Clásicos", precio: 2500 },
  { id: 2, codigo: "LIB002", nombre: "Cien años de soledad", categoria: "Literatura", precio: 3200 },
  { id: 3, codigo: "LIB003", nombre: "El principito", categoria: "Infantil", precio: 1800 },
  { id: 4, codigo: "LIB004", nombre: "Harry Potter y la piedra filosofal", categoria: "Fantasía", precio: 2800 },
  { id: 5, codigo: "LIB005", nombre: "1984", categoria: "Distopía", precio: 2200 },
  { id: 6, codigo: "LIB006", nombre: "Orgullo y prejuicio", categoria: "Romance", precio: 2400 },
  { id: 7, codigo: "LIB007", nombre: "El señor de los anillos", categoria: "Fantasía", precio: 4500 },
  { id: 8, codigo: "LIB008", nombre: "Matar a un ruiseñor", categoria: "Drama", precio: 2600 },
  { id: 9, codigo: "LIB009", nombre: "El gran Gatsby", categoria: "Clásicos", precio: 2300 },
  { id: 10, codigo: "LIB010", nombre: "Crimen y castigo", categoria: "Psicológico", precio: 3500 },
]

// Datos de ejemplo de categorías
const categorias = [
  { id: 1, nombre: "Literatura", descripcion: "Novelas y obras literarias" },
  { id: 2, nombre: "Académicos", descripcion: "Libros de texto y estudio" },
  { id: 3, nombre: "Infantil", descripcion: "Libros para niños" },
  { id: 4, nombre: "Fantasía", descripcion: "Novelas de fantasía y ciencia ficción" },
  { id: 5, nombre: "Clásicos", descripcion: "Literatura clásica universal" },
  { id: 6, nombre: "Romance", descripcion: "Novelas románticas" },
  { id: 7, nombre: "Drama", descripcion: "Obras dramáticas" },
  { id: 8, nombre: "Psicológico", descripcion: "Novelas psicológicas" },
  { id: 9, nombre: "Distopía", descripcion: "Literatura distópica" },
  { id: 10, nombre: "Universitarios", descripcion: "Textos universitarios" },
]

export default function PromocionesPage() {
  const { toast } = useToast()
  const [searchTerm, setSearchTerm] = useState("")
  const [showNuevaPromocionDialog, setShowNuevaPromocionDialog] = useState(false)
  const [showEditarPromocionDialog, setShowEditarPromocionDialog] = useState(false)
  const [showDetallesPromocionDialog, setShowDetallesPromocionDialog] = useState(false)
  const [showEliminarPromocionDialog, setShowEliminarPromocionDialog] = useState(false)
  const [showResumenPromocionDialog, setShowResumenPromocionDialog] = useState(false)
  const [selectedPromocion, setSelectedPromocion] = useState<any>(null)
  const [promocionesList, setPromocionesList] = useState(promociones)
  const [activeTab, setActiveTab] = useState("general")

// Estados para búsqueda en productos y categorías
  const [productSearchTerm, setProductSearchTerm] = useState("")
  const [categorySearchTerm, setCategorySearchTerm] = useState("")

// Estados para el formulario de nueva promoción
  const [formPromocion, setFormPromocion] = useState({
    id: 0,
    codigo: "",
    nombre: "",
    tipo: "",
    valor: 0,
    fechaInicio: "",
    fechaFin: "",
    estado: "Activa",
    descripcion: "",
    condiciones: "",
    limite: 0,
    categorias: [] as string[],
    productos: [] as string[],
    compraMinima: 0,
    limitePorCliente: 0,
    esAcumulable: false,
  })

// Filtrar promociones basado en la búsqueda
  const filteredPromociones = promocionesList.filter(
    (promocion) =>
      promocion.codigo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      promocion.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      promocion.tipo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      promocion.estado.toLowerCase().includes(searchTerm.toLowerCase()),
  )

// Filtrar productos basado en la búsqueda
  const filteredProductos = productos.filter(
    (producto) =>
      producto.nombre.toLowerCase().includes(productSearchTerm.toLowerCase()) ||
      producto.codigo.toLowerCase().includes(productSearchTerm.toLowerCase()) ||
      producto.categoria.toLowerCase().includes(productSearchTerm.toLowerCase()),
  )

// Filtrar categorías basado en la búsqueda
  const filteredCategorias = categorias.filter(
    (categoria) =>
      categoria.nombre.toLowerCase().includes(categorySearchTerm.toLowerCase()) ||
      categoria.descripcion.toLowerCase().includes(categorySearchTerm.toLowerCase()),
  )

// Funciones para manejar el formulario
  const handleFormChange = (field: string, value: any) => {
    setFormPromocion({ ...formPromocion, [field]: value })
  }

const handleCategoriaToggle = (categoriaNombre: string) => {
    const categorias = formPromocion.categorias.includes(categoriaNombre)
      ? formPromocion.categorias.filter((c) => c !== categoriaNombre)
      : [...formPromocion.categorias, categoriaNombre]
    setFormPromocion({ ...formPromocion, categorias })
  }

const handleProductoToggle = (productoNombre: string) => {
    const productos = formPromocion.productos.includes(productoNombre)
      ? formPromocion.productos.filter((p) => p !== productoNombre)
      : [...formPromocion.productos, productoNombre]
    setFormPromocion({ ...formPromocion, productos })
  }

// Funciones para abrir diálogos
  const openNuevaPromocionDialog = () => {
    setFormPromocion({
      id: promocionesList.length + 1,
      codigo: `PROM-${String(promocionesList.length + 1).padStart(3, "0")}`,
      nombre: "",
      tipo: "",
      valor: 0,
      fechaInicio: "",
      fechaFin: "",
      estado: "Activa",
      descripcion: "",
      condiciones: "",
      limite: 0,
      categorias: [],
      productos: [],
      compraMinima: 0,
      limitePorCliente: 0,
      esAcumulable: false,
    })
    setActiveTab("general")
    setProductSearchTerm("")
    setCategorySearchTerm("")
    setShowNuevaPromocionDialog(true)
  }

const openEditarPromocionDialog = (promocion: any) => {
    setSelectedPromocion(promocion)
    setFormPromocion({ ...promocion })
    setActiveTab("general")
    setProductSearchTerm("")
    setCategorySearchTerm("")
    setShowEditarPromocionDialog(true)
  }

const openDetallesPromocionDialog = (promocion: any) => {
    setSelectedPromocion(promocion)
    setShowDetallesPromocionDialog(true)
  }

const openEliminarPromocionDialog = (promocion: any) => {
    setSelectedPromocion(promocion)
    setShowEliminarPromocionDialog(true)
  }

const openResumenPromocionDialog = () => {
    if (!formPromocion.nombre || !formPromocion.tipo) {
      toast({
        title: "Error",
        description: "Por favor complete los campos obligatorios",
        variant: "destructive",
      })
      return
    }
    setShowResumenPromocionDialog(true)
  }

// Funciones para guardar
  const confirmarNuevaPromocion = () => {
    const nuevaPromocion = { ...formPromocion, usos: 0 }
    setPromocionesList([...promocionesList, nuevaPromocion])

toast({
      title: "Promoción creada",
      description: "La promoción ha sido creada correctamente",
    })

setShowResumenPromocionDialog(false)
    setShowNuevaPromocionDialog(false)
  }

const confirmarEdicionPromocion = () => {
    const promocionesActualizadas = promocionesList.map((p) => (p.id === formPromocion.id ? formPromocion : p))
    setPromocionesList(promocionesActualizadas)

toast({
      title: "Promoción actualizada",
      description: "La promoción ha sido actualizada correctamente",
    })

setShowResumenPromocionDialog(false)
    setShowEditarPromocionDialog(false)
  }

const eliminarPromocion = () => {
    const promocionesActualizadas = promocionesList.filter((p) => p.id !== selectedPromocion.id)
    setPromocionesList(promocionesActualizadas)

toast({
      title: "Promoción eliminada",
      description: "La promoción ha sido eliminada correctamente",
    })

setShowEliminarPromocionDialog(false)
  }

const refreshData = () => {
    toast({
      title: "Datos actualizados",
      description: "La información ha sido actualizada correctamente",
    })
  }

const exportarDatos = () => {
    toast({
      title: "Exportación exitosa",
      description: "Los datos han sido exportados a Excel correctamente",
    })
  }

const getEstadoBadgeColor = (estado: string) => {
    switch (estado) {
      case "Activa":
        return "bg-green-100 text-green-800"
      case "Inactiva":
        return "bg-red-100 text-red-800"
      case "Expirada":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getTipoBadgeColor = (tipo: string) => {
    switch (tipo) {
      case "Porcentaje":
        return "bg-purple-100 text-purple-800"
      case "Monto fijo":
        return "bg-orange-100 text-orange-800"
      case "2x1":
        return "bg-cyan-100 text-cyan-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Promociones</h1>
          <p className="text-muted-foreground">Administre descuentos, ofertas y promociones especiales</p>
        </div>
        <div className="flex space-x-2">
          <Button variant="outline" size="sm" onClick={refreshData} title="Refrescar datos">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" onClick={exportarDatos}>
            <Download className="mr-2 h-4 w-4" />
            Exportar
          </Button>
          <Button className="bg-yellow-500 hover:bg-yellow-600 text-black" onClick={openNuevaPromocionDialog}>
            <Plus className="mr-2 h-4 w-4" />
            Nueva promoción
          </Button>
        </div>
      </div>

<div className="relative">
        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Buscar promociones por código o nombre..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="pl-8"
        />
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Tag className="mr-2 h-5 w-5" />
            Promociones Activas
          </CardTitle>
          <CardDescription>Gestione todas las promociones y ofertas de la librería</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Código</TableHead>
                  <TableHead>Nombre</TableHead>
                  <TableHead>Tipo</TableHead>
                  <TableHead>Valor</TableHead>
                  <TableHead>Vigencia</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Usos</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredPromociones.map((promocion) => (
                  <TableRow key={promocion.id}>
                    <TableCell className="font-medium">{promocion.codigo}</TableCell>
                    <TableCell>{promocion.nombre}</TableCell>
                    <TableCell>
                      <Badge variant="secondary" className={getTipoBadgeColor(promocion.tipo)}>
                        {promocion.tipo}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      {promocion.tipo === "Porcentaje" && `${promocion.valor}%`}
                      {promocion.tipo === "Monto fijo" && `$${promocion.valor}`}
                      {promocion.tipo === "2x1" && "2x1"}
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        <div>{new Date(promocion.fechaInicio).toLocaleDateString()}</div>
                        <div className="text-muted-foreground">
                          hasta {new Date(promocion.fechaFin).toLocaleDateString()}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="secondary" className={getEstadoBadgeColor(promocion.estado)}>
                        {promocion.estado}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        <div className="font-medium">
                          {promocion.usos}
                          {promocion.limite > 0 && `/${promocion.limite}`}
                        </div>
                        {promocion.limite > 0 && (
                          <div className="text-muted-foreground">
                            {Math.round((promocion.usos / promocion.limite) * 100)}% usado
                          </div>
                        )}
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="ghost" size="sm" onClick={() => openDetallesPromocionDialog(promocion)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="sm" onClick={() => openEditarPromocionDialog(promocion)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-red-500"
                          onClick={() => openEliminarPromocionDialog(promocion)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de nueva promoción */}
      <Dialog open={showNuevaPromocionDialog} onOpenChange={setShowNuevaPromocionDialog}>
        <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Nueva promoción</DialogTitle>
            <DialogDescription>Complete los datos para crear una nueva promoción</DialogDescription>
          </DialogHeader>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="general">General</TabsTrigger>
              <TabsTrigger value="productos">Productos</TabsTrigger>
              <TabsTrigger value="categorias">Categorías</TabsTrigger>
            </TabsList>

<TabsContent value="general" className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="codigo">Código *</Label>
                  <Input
                    id="codigo"
                    value={formPromocion.codigo}
                    onChange={(e) => handleFormChange("codigo", e.target.value)}
                    placeholder="PROM-001"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre de la promoción *</Label>
                  <Input
                    id="nombre"
                    value={formPromocion.nombre}
                    onChange={(e) => handleFormChange("nombre", e.target.value)}
                    placeholder="Ej: Descuento estudiantes"
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="tipo">Tipo de promoción *</Label>
                  <Select value={formPromocion.tipo} onValueChange={(value) => handleFormChange("tipo", value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione tipo" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Porcentaje">Descuento por porcentaje</SelectItem>
                      <SelectItem value="Monto fijo">Descuento monto fijo</SelectItem>
                      <SelectItem value="2x1">Promoción 2x1</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="estado">Estado</Label>
                  <Select value={formPromocion.estado} onValueChange={(value) => handleFormChange("estado", value)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Activa">Activa</SelectItem>
                      <SelectItem value="Inactiva">Inactiva</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

{formPromocion.tipo !== "2x1" && (
                <div className="space-y-2">
                  <Label htmlFor="valor">
                    Valor {formPromocion.tipo === "Porcentaje" ? "(porcentaje)" : "(monto)"}
                  </Label>
                  <Input
                    id="valor"
                    type="number"
                    value={formPromocion.valor}
                    onChange={(e) => handleFormChange("valor", Number.parseFloat(e.target.value) || 0)}
                    placeholder={formPromocion.tipo === "Porcentaje" ? "15" : "500"}
                  />
                </div>
              )}

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="fechaInicio">Fecha de inicio</Label>
                  <Input
                    id="fechaInicio"
                    type="date"
                    value={formPromocion.fechaInicio}
                    onChange={(e) => handleFormChange("fechaInicio", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="fechaFin">Fecha de fin</Label>
                  <Input
                    id="fechaFin"
                    type="date"
                    value={formPromocion.fechaFin}
                    onChange={(e) => handleFormChange("fechaFin", e.target.value)}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="descripcion">Descripción</Label>
                <Textarea
                  id="descripcion"
                  value={formPromocion.descripcion}
                  onChange={(e) => handleFormChange("descripcion", e.target.value)}
                  placeholder="Descripción de la promoción"
                  rows={3}
                />
              </div>

<div className="space-y-4 p-4 border rounded-md bg-muted/50">
                <h3 className="font-medium">Condiciones (opcionales)</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="limite">Límite de usos total (opcional)</Label>
                    <Input
                      id="limite"
                      type="number"
                      value={formPromocion.limite}
                      onChange={(e) => handleFormChange("limite", Number.parseInt(e.target.value) || 0)}
                      placeholder="Dejar en 0 para ilimitado"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="limitePorCliente">Límite por cliente (opcional)</Label>
                    <Input
                      id="limitePorCliente"
                      type="number"
                      value={formPromocion.limitePorCliente}
                      onChange={(e) => handleFormChange("limitePorCliente", Number.parseInt(e.target.value) || 0)}
                      placeholder="Dejar en 0 para ilimitado"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="compraMinima">Compra mínima requerida (opcional)</Label>
                  <Input
                    id="compraMinima"
                    type="number"
                    value={formPromocion.compraMinima}
                    onChange={(e) => handleFormChange("compraMinima", Number.parseFloat(e.target.value) || 0)}
                    placeholder="Dejar en 0 para sin mínimo"
                  />
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="esAcumulable"
                    checked={formPromocion.esAcumulable}
                    onCheckedChange={(checked) => handleFormChange("esAcumulable", checked)}
                  />
                  <Label htmlFor="esAcumulable">Es acumulable con otras promociones</Label>
                </div>

<div className="space-y-2">
                  <Label htmlFor="condiciones">Condiciones adicionales</Label>
                  <Textarea
                    id="condiciones"
                    value={formPromocion.condiciones}
                    onChange={(e) => handleFormChange("condiciones", e.target.value)}
                    placeholder="Condiciones y restricciones de la promoción"
                    rows={3}
                  />
                </div>
              </div>
            </TabsContent>

<TabsContent value="productos" className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-lg font-medium">Productos específicos</h3>
                    <p className="text-sm text-muted-foreground">
                      Seleccione los productos que aplicarán para esta promoción
                    </p>
                  </div>
                  <Badge variant="outline">{formPromocion.productos.length} productos seleccionados</Badge>
                </div>

<div className="relative">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Buscar productos por nombre, código o categoría..."
                    value={productSearchTerm}
                    onChange={(e) => setProductSearchTerm(e.target.value)}
                    className="pl-8"
                  />
                </div>

<div className="text-sm text-muted-foreground">
                  Mostrando {filteredProductos.length} de {productos.length} productos
                </div>

<div className="border rounded-md max-h-[400px] overflow-y-auto">
                  {filteredProductos.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">
                      <Package className="mx-auto h-12 w-12 mb-4" />
                      <p>No se encontraron productos que coincidan con la búsqueda</p>
                    </div>
                  ) : (
                    <div className="p-4 space-y-2">
                      {filteredProductos.map((producto) => (
                        <div key={producto.id} className="flex items-center space-x-3 p-2 hover:bg-muted rounded-md">
                          <Checkbox
                            id={`producto-${producto.id}`}
                            checked={formPromocion.productos.includes(producto.nombre)}
                            onCheckedChange={() => handleProductoToggle(producto.nombre)}
                          />
                          <div className="flex-1">
                            <div className="flex items-center justify-between">
                              <div>
                                <Label htmlFor={`producto-${producto.id}`} className="font-medium cursor-pointer">
                                  {producto.nombre}
                                </Label>
                                <div className="text-sm text-muted-foreground">
                                  {producto.codigo} • {producto.categoria}
                                </div>
                              </div>
                              <div className="text-sm font-medium">${producto.precio}</div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>

<TabsContent value="categorias" className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-lg font-medium">Categorías</h3>
                    <p className="text-sm text-muted-foreground">
                      Seleccione las categorías que aplicarán para esta promoción
                    </p>
                  </div>
                  <Badge variant="outline">{formPromocion.categorias.length} categorías seleccionadas</Badge>
                </div>

<div className="relative">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Buscar categorías..."
                    value={categorySearchTerm}
                    onChange={(e) => setCategorySearchTerm(e.target.value)}
                    className="pl-8"
                  />
                </div>

<div className="text-sm text-muted-foreground">
                  Mostrando {filteredCategorias.length} de {categorias.length} categorías
                </div>

<div className="border rounded-md max-h-[400px] overflow-y-auto">
                  {filteredCategorias.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">
                      <Filter className="mx-auto h-12 w-12 mb-4" />
                      <p>No se encontraron categorías que coincidan con la búsqueda</p>
                    </div>
                  ) : (
                    <div className="p-4 space-y-2">
                      {filteredCategorias.map((categoria) => (
                        <div key={categoria.id} className="flex items-center space-x-3 p-2 hover:bg-muted rounded-md">
                          <Checkbox
                            id={`categoria-${categoria.id}`}
                            checked={formPromocion.categorias.includes(categoria.nombre)}
                            onCheckedChange={() => handleCategoriaToggle(categoria.nombre)}
                          />
                          <div className="flex-1">
                            <Label htmlFor={`categoria-${categoria.id}`} className="font-medium cursor-pointer">
                              {categoria.nombre}
                            </Label>
                            <div className="text-sm text-muted-foreground">{categoria.descripcion}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>
          </Tabs>

<DialogFooter>
            <Button variant="outline" onClick={() => setShowNuevaPromocionDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={openResumenPromocionDialog} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Revisar y crear
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de editar promoción */}
      <Dialog open={showEditarPromocionDialog} onOpenChange={setShowEditarPromocionDialog}>
        <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Editar promoción</DialogTitle>
            <DialogDescription>Modifique los datos de la promoción</DialogDescription>
          </DialogHeader>

<TabsContent value="general" className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-codigo">Código *</Label>
                  <Input
                    id="edit-codigo"
                    value={formPromocion.codigo}
                    onChange={(e) => handleFormChange("codigo", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-nombre">Nombre de la promoción *</Label>
                  <Input
                    id="edit-nombre"
                    value={formPromocion.nombre}
                    onChange={(e) => handleFormChange("nombre", e.target.value)}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-tipo">Tipo de promoción *</Label>
                  <Select value={formPromocion.tipo} onValueChange={(value) => handleFormChange("tipo", value)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Porcentaje">Descuento por porcentaje</SelectItem>
                      <SelectItem value="Monto fijo">Descuento monto fijo</SelectItem>
                      <SelectItem value="2x1">Promoción 2x1</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-estado">Estado</Label>
                  <Select value={formPromocion.estado} onValueChange={(value) => handleFormChange("estado", value)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Activa">Activa</SelectItem>
                      <SelectItem value="Inactiva">Inactiva</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

{formPromocion.tipo !== "2x1" && (
                <div className="space-y-2">
                  <Label htmlFor="edit-valor">
                    Valor {formPromocion.tipo === "Porcentaje" ? "(porcentaje)" : "(monto)"}
                  </Label>
                  <Input
                    id="edit-valor"
                    type="number"
                    value={formPromocion.valor}
                    onChange={(e) => handleFormChange("valor", Number.parseFloat(e.target.value) || 0)}
                  />
                </div>
              )}

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-fechaInicio">Fecha de inicio</Label>
                  <Input
                    id="edit-fechaInicio"
                    type="date"
                    value={formPromocion.fechaInicio}
                    onChange={(e) => handleFormChange("fechaInicio", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-fechaFin">Fecha de fin</Label>
                  <Input
                    id="edit-fechaFin"
                    type="date"
                    value={formPromocion.fechaFin}
                    onChange={(e) => handleFormChange("fechaFin", e.target.value)}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="edit-descripcion">Descripción</Label>
                <Textarea
                  id="edit-descripcion"
                  value={formPromocion.descripcion}
                  onChange={(e) => handleFormChange("descripcion", e.target.value)}
                  rows={3}
                />
              </div>

<div className="space-y-4 p-4 border rounded-md bg-muted/50">
                <h3 className="font-medium">Condiciones (opcionales)</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="edit-limite">Límite de usos total (opcional)</Label>
                    <Input
                      id="edit-limite"
                      type="number"
                      value={formPromocion.limite}
                      onChange={(e) => handleFormChange("limite", Number.parseInt(e.target.value) || 0)}
                      placeholder="Dejar en 0 para ilimitado"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="edit-limitePorCliente">Límite por cliente (opcional)</Label>
                    <Input
                      id="edit-limitePorCliente"
                      type="number"
                      value={formPromocion.limitePorCliente}
                      onChange={(e) => handleFormChange("limitePorCliente", Number.parseInt(e.target.value) || 0)}
                      placeholder="Dejar en 0 para ilimitado"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="edit-compraMinima">Compra mínima requerida (opcional)</Label>
                  <Input
                    id="edit-compraMinima"
                    type="number"
                    value={formPromocion.compraMinima}
                    onChange={(e) => handleFormChange("compraMinima", Number.parseFloat(e.target.value) || 0)}
                    placeholder="Dejar en 0 para sin mínimo"
                  />
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="edit-esAcumulable"
                    checked={formPromocion.esAcumulable}
                    onCheckedChange={(checked) => handleFormChange("esAcumulable", checked)}
                  />
                  <Label htmlFor="edit-esAcumulable">Es acumulable con otras promociones</Label>
                </div>

<div className="space-y-2">
                  <Label htmlFor="edit-condiciones">Condiciones adicionales</Label>
                  <Textarea
                    id="edit-condiciones"
                    value={formPromocion.condiciones}
                    onChange={(e) => handleFormChange("condiciones", e.target.value)}
                    rows={3}
                  />
                </div>
              </div>
            </TabsContent>

<div className="text-sm text-muted-foreground">
                  Mostrando {filteredProductos.length} de {productos.length} productos
                </div>

<div className="border rounded-md max-h-[400px] overflow-y-auto">
                  {filteredProductos.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">
                      <Package className="mx-auto h-12 w-12 mb-4" />
                      <p>No se encontraron productos que coincidan con la búsqueda</p>
                    </div>
                  ) : (
                    <div className="p-4 space-y-2">
                      {filteredProductos.map((producto) => (
                        <div key={producto.id} className="flex items-center space-x-3 p-2 hover:bg-muted rounded-md">
                          <Checkbox
                            id={`edit-producto-${producto.id}`}
                            checked={formPromocion.productos.includes(producto.nombre)}
                            onCheckedChange={() => handleProductoToggle(producto.nombre)}
                          />
                          <div className="flex-1">
                            <div className="flex items-center justify-between">
                              <div>
                                <Label htmlFor={`edit-producto-${producto.id}`} className="font-medium cursor-pointer">
                                  {producto.nombre}
                                </Label>
                                <div className="text-sm text-muted-foreground">
                                  {producto.codigo} • {producto.categoria}
                                </div>
                              </div>
                              <div className="text-sm font-medium">${producto.precio}</div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>

<div className="text-sm text-muted-foreground">
                  Mostrando {filteredCategorias.length} de {categorias.length} categorías
                </div>

<div className="border rounded-md max-h-[400px] overflow-y-auto">
                  {filteredCategorias.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">
                      <Filter className="mx-auto h-12 w-12 mb-4" />
                      <p>No se encontraron categorías que coincidan con la búsqueda</p>
                    </div>
                  ) : (
                    <div className="p-4 space-y-2">
                      {filteredCategorias.map((categoria) => (
                        <div key={categoria.id} className="flex items-center space-x-3 p-2 hover:bg-muted rounded-md">
                          <Checkbox
                            id={`edit-categoria-${categoria.id}`}
                            checked={formPromocion.categorias.includes(categoria.nombre)}
                            onCheckedChange={() => handleCategoriaToggle(categoria.nombre)}
                          />
                          <div className="flex-1">
                            <Label htmlFor={`edit-categoria-${categoria.id}`} className="font-medium cursor-pointer">
                              {categoria.nombre}
                            </Label>
                            <div className="text-sm text-muted-foreground">{categoria.descripcion}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>
          </Tabs>

<DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setShowEditarPromocionDialog(false)
              }}
            >
              Cancelar
            </Button>
            <Button onClick={openResumenPromocionDialog} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Revisar y guardar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de resumen antes de confirmar */}
      <Dialog open={showResumenPromocionDialog} onOpenChange={setShowResumenPromocionDialog}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <CheckCircle className="mr-2 h-5 w-5 text-green-500" />
              Resumen de la promoción
            </DialogTitle>
            <DialogDescription>Revise los detalles antes de confirmar la promoción</DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Código</p>
                  <p className="mt-1 font-medium">{formPromocion.codigo}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Nombre</p>
                  <p className="mt-1 font-medium">{formPromocion.nombre}</p>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Tipo</p>
                  <Badge variant="secondary" className={getTipoBadgeColor(formPromocion.tipo)}>
                    {formPromocion.tipo}
                  </Badge>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Valor</p>
                  <p className="mt-1 font-medium">
                    {formPromocion.tipo === "Porcentaje" && `${formPromocion.valor}%`}
                    {formPromocion.tipo === "Monto fijo" && `$${formPromocion.valor}`}
                    {formPromocion.tipo === "2x1" && "2x1"}
                  </p>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Fecha de inicio</p>
                  <p className="mt-1">
                    {formPromocion.fechaInicio
                      ? new Date(formPromocion.fechaInicio).toLocaleDateString()
                      : "No especificada"}
                  </p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Fecha de fin</p>
                  <p className="mt-1">
                    {formPromocion.fechaFin ? new Date(formPromocion.fechaFin).toLocaleDateString() : "No especificada"}
                  </p>
                </div>
              </div>

{formPromocion.productos.length > 0 && (
                <div>
                  <p className="text-sm font-medium text-muted-foreground">
                    Productos aplicables ({formPromocion.productos.length})
                  </p>
                  <div className="mt-2 p-3 border rounded-md bg-muted/50 max-h-32 overflow-y-auto">
                    <div className="flex flex-wrap gap-1">
                      {formPromocion.productos.map((producto, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {producto}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              )}

{formPromocion.categorias.length > 0 && (
                <div>
                  <p className="text-sm font-medium text-muted-foreground">
                    Categorías aplicables ({formPromocion.categorias.length})
                  </p>
                  <div className="mt-2 p-3 border rounded-md bg-muted/50">
                    <div className="flex flex-wrap gap-1">
                      {formPromocion.categorias.map((categoria, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {categoria}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              )}

{formPromocion.productos.length === 0 && formPromocion.categorias.length === 0 && (
                <div className="p-4 border rounded-md bg-blue-50 border-blue-200">
                  <div className="flex items-center">
                    <Package className="h-4 w-4 text-blue-600 mr-2" />
                    <span className="text-sm font-medium text-blue-800">Aplicación general</span>
                  </div>
                  <p className="text-sm text-blue-700 mt-1">
                    Esta promoción se aplicará a todos los productos de la librería
                  </p>
                </div>
              )}

{(formPromocion.limite > 0 || formPromocion.limitePorCliente > 0 || formPromocion.compraMinima > 0) && (
                <div className="p-3 border rounded-md bg-muted/50">
                  <p className="text-sm font-medium text-muted-foreground mb-2">Condiciones</p>
                  <div className="space-y-1 text-sm">
                    {formPromocion.limite > 0 && <p>• Límite total: {formPromocion.limite} usos</p>}
                    {formPromocion.limitePorCliente > 0 && (
                      <p>• Límite por cliente: {formPromocion.limitePorCliente} usos</p>
                    )}
                    {formPromocion.compraMinima > 0 && <p>• Compra mínima: ${formPromocion.compraMinima}</p>}
                    {formPromocion.esAcumulable && <p>• Es acumulable con otras promociones</p>}
                  </div>
                </div>
              )}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowResumenPromocionDialog(false)}>
              Volver a editar
            </Button>
            <Button
              onClick={showNuevaPromocionDialog ? confirmarNuevaPromocion : confirmarEdicionPromocion}
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
            >
              Confirmar promoción
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de detalles de promoción */}
      <Dialog open={showDetallesPromocionDialog} onOpenChange={setShowDetallesPromocionDialog}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <Tag className="mr-2 h-5 w-5 text-yellow-500" />
              {selectedPromocion?.codigo} - {selectedPromocion?.nombre}
            </DialogTitle>
            <DialogDescription>
              <Badge variant="secondary" className={getEstadoBadgeColor(selectedPromocion?.estado || "")}>
                {selectedPromocion?.estado}
              </Badge>
            </DialogDescription>
          </DialogHeader>
          {selectedPromocion && (
            <div className="py-4">
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Código</p>
                    <p className="mt-1 font-medium">{selectedPromocion.codigo}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Tipo</p>
                    <Badge variant="secondary" className={getTipoBadgeColor(selectedPromocion.tipo)}>
                      {selectedPromocion.tipo}
                    </Badge>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Valor</p>
                    <p className="mt-1 font-medium">
                      {selectedPromocion.tipo === "Porcentaje" && `${selectedPromocion.valor}%`}
                      {selectedPromocion.tipo === "Monto fijo" && `$${selectedPromocion.valor}`}
                      {selectedPromocion.tipo === "2x1" && "2x1"}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Estado</p>
                    <Badge variant="secondary" className={getEstadoBadgeColor(selectedPromocion.estado)}>
                      {selectedPromocion.estado}
                    </Badge>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Fecha de inicio</p>
                    <p className="mt-1">{new Date(selectedPromocion.fechaInicio).toLocaleDateString()}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Fecha de fin</p>
                    <p className="mt-1">{new Date(selectedPromocion.fechaFin).toLocaleDateString()}</p>
                  </div>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Descripción</p>
                  <p className="mt-1">{selectedPromocion.descripcion}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Condiciones</p>
                  <p className="mt-1">{selectedPromocion.condiciones}</p>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Usos</p>
                    <p className="mt-1">
                      {selectedPromocion.usos}
                      {selectedPromocion.limite > 0 && ` / ${selectedPromocion.limite}`}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Porcentaje usado</p>
                    <p className="mt-1">
                      {selectedPromocion.limite > 0
                        ? `${Math.round((selectedPromocion.usos / selectedPromocion.limite) * 100)}%`
                        : "Sin límite"}
                    </p>
                  </div>
                </div>
                {selectedPromocion.categorias.length > 0 && (
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Categorías aplicables</p>
                    <div className="mt-1 flex flex-wrap gap-1">
                      {selectedPromocion.categorias.map((categoria: string, index: number) => (
                        <Badge key={index} variant="outline">
                          {categoria}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}
                {selectedPromocion.productos.length > 0 && (
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Productos aplicables</p>
                    <div className="mt-1 flex flex-wrap gap-1">
                      {selectedPromocion.productos.map((producto: string, index: number) => (
                        <Badge key={index} variant="outline">
                          {producto}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => openEditarPromocionDialog(selectedPromocion)}>
              <Pencil className="mr-2 h-4 w-4" />
              Editar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de eliminar promoción */}
      <Dialog open={showEliminarPromocionDialog} onOpenChange={setShowEliminarPromocionDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Eliminar promoción</DialogTitle>
            <DialogDescription>
              ¿Está seguro que desea eliminar esta promoción? Esta acción no se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          {selectedPromocion && (
            <div className="py-4">
              <div className="p-4 border rounded-md bg-muted">
                <div className="font-medium">
                  {selectedPromocion.codigo} - {selectedPromocion.nombre}
                </div>
                <div className="text-sm text-muted-foreground">{selectedPromocion.tipo}</div>
                <div className="text-sm text-muted-foreground">
                  {selectedPromocion.usos} usos{selectedPromocion.limite > 0 && ` de ${selectedPromocion.limite}`}
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEliminarPromocionDialog(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={eliminarPromocion}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/depositos/page.tsx" isMerged="true" isLocked="true"
"use client"

import type React from "react"

import { useState } from "react"
import {
  Warehouse,
  Plus,
  ArrowLeftRight,
  Search,
  Eye,
  Pencil,
  Download,
  RefreshCw,
  Store,
  ArrowDown,
  Minus,
  Trash2,
  FileUp,
  FileText,
  Calendar,
  Upload,
  FileSpreadsheet,
  CheckCircle,
  AlertCircle,
  ArrowUp,
  Package,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Checkbox } from "@/components/ui/checkbox"

// Datos de sucursales vinculadas a depósitos
const sucursalesVinculadas = [
  { id: 1, nombre: "Librería León Centro", depositoId: 1 },
  { id: 2, nombre: "Librería León Norte", depositoId: 2 },
  { id: 3, nombre: "Librería León Sur", depositoId: 3 },
  { id: 4, nombre: "Librería León Centro 2", depositoId: 1 }, // Comparte depósito con Centro
]

// Datos de ejemplo actualizados con sucursales vinculadas y código
const depositos = [
  {
    id: 1,
    codigo: "DEP-001",
    nombre: "Depósito Central",
    direccion: "Av. Corrientes 1234",
    productos: 1245,
    estado: "Activo",
    sucursalesVinculadas: ["Librería León Centro", "Librería León Centro 2"],
  },
  {
    id: 2,
    codigo: "DEP-002",
    nombre: "Depósito Norte",
    direccion: "Av. Cabildo 2000",
    productos: 856,
    estado: "Activo",
    sucursalesVinculadas: ["Librería León Norte"],
  },
  {
    id: 3,
    codigo: "DEP-003",
    nombre: "Depósito Sur",
    direccion: "Av. Mitre 750",
    productos: 920,
    estado: "Activo",
    sucursalesVinculadas: ["Librería León Sur"],
  },
]

// Datos de ejemplo de productos
const productos = [
  {
    id: 1,
    codigo: "LIB001",
    nombre: "El principito",
    stock: 10,
    deposito: "Depósito Central",
    categoria: "Literatura",
  },
  {
    id: 2,
    codigo: "LIB002",
    nombre: "Cien años de soledad",
    stock: 5,
    deposito: "Depósito Central",
    categoria: "Literatura",
  },
  {
    id: 3,
    codigo: "LIB003",
    nombre: "Harry Potter y la piedra filosofal",
    stock: 8,
    deposito: "Depósito Norte",
    categoria: "Infantil",
  },
  {
    id: 4,
    codigo: "LIB004",
    nombre: "El señor de los anillos",
    stock: 3,
    deposito: "Depósito Norte",
    categoria: "Fantasía",
  },
  {
    id: 5,
    codigo: "LIB005",
    nombre: "Don Quijote de la Mancha",
    stock: 7,
    deposito: "Depósito Sur",
    categoria: "Clásicos",
  },
]

// Datos de ejemplo para el historial de cargas
const historialCargas = [
  {
    id: 1,
    fecha: "2023-05-15",
    tipo: "Ingreso",
    deposito: "Depósito Central",
    proveedor: "Editorial Planeta",
    remito: "R-001234",
    documentos: ["orden_compra_001.pdf", "remito_001234.pdf"],
    productos: [
      { id: 1, codigo: "LIB001", nombre: "El principito", cantidad: 5 },
      { id: 4, codigo: "LIB004", nombre: "El señor de los anillos", cantidad: 3 },
    ],
    usuario: "Juan Pérez",
    observaciones: "Ingreso normal de mercadería según orden de compra",
  },
  {
    id: 2,
    fecha: "2023-05-10",
    tipo: "Transferencia",
    deposito: "Depósito Norte",
    origen: "Depósito Central",
    destino: "Depósito Norte",
    motivo: "Reposición de stock para sucursal norte debido a alta demanda",
    productos: [{ id: 2, codigo: "LIB002", nombre: "Cien años de soledad", cantidad: 10 }],
    usuario: "María López",
    observaciones: "Transferencia solicitada por gerente de sucursal",
  },
  {
    id: 3,
    fecha: "2023-05-05",
    tipo: "Ajuste",
    deposito: "Depósito Sur",
    productos: [{ id: 3, codigo: "LIB003", nombre: "Harry Potter y la piedra filosofal", cantidad: -2 }],
    usuario: "Carlos Rodríguez",
    observaciones: "Ajuste por daño en mercadería durante manipulación. Libros con páginas dañadas por humedad.",
  },
]

// Datos de notas de pedido
const notasPedido = [
  { id: 1, numero: "NP-001", proveedor: "Editorial Planeta", fecha: "2023-05-20", productos: 15 },
  { id: 2, numero: "NP-002", proveedor: "Distribuidora Literaria", fecha: "2023-05-18", productos: 8 },
  { id: 3, numero: "NP-003", proveedor: "Importadora de Libros", fecha: "2023-05-15", productos: 12 },
]

export default function DepositosPage() {
  const { toast } = useToast()
  const [showTransferDialog, setShowTransferDialog] = useState(false)
  const [showNewDepositoDialog, setShowNewDepositoDialog] = useState(false)
  const [showGestionarDialog, setShowGestionarDialog] = useState(false)
  const [showIngresoDialog, setShowIngresoDialog] = useState(false)
  const [showAjusteDialog, setShowAjusteDialog] = useState(false)
  const [showScannerModal, setShowScannerModal] = useState(false)
  const [showDetalleHistorialDialog, setShowDetalleHistorialDialog] = useState(false)
  const [showEliminarDepositoDialog, setShowEliminarDepositoDialog] = useState(false)
  const [depositoAEliminar, setDepositoAEliminar] = useState<any>(null)
  const [depositoDestino, setDepositoDestino] = useState("")
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedProducts, setSelectedProducts] = useState<any[]>([])
  const [selectedDeposito, setSelectedDeposito] = useState<any>(null)
  const [selectedHistorialItem, setSelectedHistorialItem] = useState<any>(null)
  const [activeTab, setActiveTab] = useState("depositos")
  const [step, setStep] = useState(1)

// Estados para formularios
  const [transferForm, setTransferForm] = useState({
    origen: "",
    destino: "",
    motivo: "",
    fecha: new Date().toISOString().split("T")[0],
  })

const [ingresoForm, setIngresoForm] = useState({
    deposito: "",
    proveedor: "",
    remito: "",
    fecha: new Date().toISOString().split("T")[0],
    observaciones: "",
    controlRealizado: false,
    tipoAsociacion: "",
    notaPedidoId: "",
    proveedorDirecto: "",
  })

const [ajusteForm, setAjusteForm] = useState({
    deposito: "",
    fecha: new Date().toISOString().split("T")[0],
    observaciones: "",
    tipo: "", // "perdida", "ajuste", "dano"
  })

// Estados para búsquedas y datos
  const [depositosSearchTerm, setDepositosSearchTerm] = useState("")
  const [historialSearchTerm, setHistorialSearchTerm] = useState("")
  const [depositosList, setDepositosList] = useState(depositos)
  const [documentos, setDocumentos] = useState<File[]>([])
  const [documentosNombres, setDocumentosNombres] = useState<string[]>([])
  const [excelData, setExcelData] = useState<any[]>([])
  const [excelErrors, setExcelErrors] = useState<string[]>([])
  const [isPreviewingExcel, setIsPreviewingExcel] = useState(false)
  const [scannedProducts, setScannedProducts] = useState<any[]>([])
  const [scannerInput, setScannerInput] = useState("")

// Filtrar productos basados en la búsqueda
  const filteredProductos = productos.filter(
    (producto) =>
      producto.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      producto.codigo.toLowerCase().includes(searchTerm.toLowerCase()),
  )

// Filtrar historial basado en la búsqueda
  const filteredHistorial = historialCargas.filter(
    (carga) =>
      (carga.proveedor && carga.proveedor.toLowerCase().includes(historialSearchTerm.toLowerCase())) ||
      (carga.remito && carga.remito.toLowerCase().includes(historialSearchTerm.toLowerCase())) ||
      carga.fecha.includes(historialSearchTerm) ||
      carga.deposito.toLowerCase().includes(historialSearchTerm.toLowerCase()) ||
      carga.usuario.toLowerCase().includes(historialSearchTerm.toLowerCase()) ||
      carga.tipo.toLowerCase().includes(historialSearchTerm.toLowerCase()) ||
      carga.productos.some(
        (p) =>
          p.nombre.toLowerCase().includes(historialSearchTerm.toLowerCase()) ||
          p.codigo.toLowerCase().includes(historialSearchTerm.toLowerCase()),
      ),
  )

// Filtrar depósitos basados en la búsqueda
  const filteredDepositos = depositosList.filter(
    (deposito) =>
      deposito.nombre.toLowerCase().includes(depositosSearchTerm.toLowerCase()) ||
      deposito.direccion.toLowerCase().includes(depositosSearchTerm.toLowerCase()) ||
      deposito.sucursalesVinculadas.some((sucursal) =>
        sucursal.toLowerCase().includes(depositosSearchTerm.toLowerCase()),
      ),
  )

// Manejar cambios en formularios
  const handleTransferFormChange = (field: string, value: any) => {
    setTransferForm({ ...transferForm, [field]: value })
  }

const handleIngresoFormChange = (field: string, value: any) => {
    setIngresoForm({ ...ingresoForm, [field]: value })
  }

const handleAjusteFormChange = (field: string, value: any) => {
    setAjusteForm({ ...ajusteForm, [field]: value })
  }

// Funciones para manejo de productos
  const addProductToSelection = (producto: any) => {
    if (!selectedProducts.some((p) => p.id === producto.id)) {
      setSelectedProducts([...selectedProducts, { ...producto, cantidad: 1 }])
    }
  }

const changeProductQuantity = (id: number, cantidad: number) => {
    setSelectedProducts(selectedProducts.map((product) => (product.id === id ? { ...product, cantidad } : product)))
  }

const removeProductFromSelection = (id: number) => {
    setSelectedProducts(selectedProducts.filter((product) => product.id !== id))
  }

// Manejar la carga de documentos
  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const newFiles = Array.from(e.target.files)
      setDocumentos([...documentos, ...newFiles])
      setDocumentosNombres([...documentosNombres, ...newFiles.map((file) => file.name)])
      e.target.value = ""
    }
  }

const removeDocumento = (index: number) => {
    const newDocumentos = [...documentos]
    const newNombres = [...documentosNombres]
    newDocumentos.splice(index, 1)
    newNombres.splice(index, 1)
    setDocumentos(newDocumentos)
    setDocumentosNombres(newNombres)
  }

// Funciones de confirmación
  const confirmTransfer = () => {
    toast({
      title: "Transferencia realizada",
      description: "La transferencia de stock se ha realizada correctamente",
    })
    setShowTransferDialog(false)
    resetForms()
  }

const confirmStockIngreso = () => {
    toast({
      title: "Stock ingresado correctamente",
      description: `Se han ingresado ${selectedProducts.length} productos al depósito`,
    })
    setShowIngresoDialog(false)
    resetForms()
    setActiveTab("historial")
  }

const confirmAjuste = () => {
    toast({
      title: "Ajuste de stock realizado",
      description: "El ajuste de stock se ha registrado correctamente",
    })
    setShowAjusteDialog(false)
    resetForms()
    setActiveTab("historial")
  }

const resetForms = () => {
    setSelectedProducts([])
    setDocumentos([])
    setDocumentosNombres([])
    setStep(1)
    setTransferForm({
      origen: "",
      destino: "",
      motivo: "",
      fecha: new Date().toISOString().split("T")[0],
    })
    setIngresoForm({
      deposito: "",
      proveedor: "",
      remito: "",
      fecha: new Date().toISOString().split("T")[0],
      observaciones: "",
      controlRealizado: false,
      tipoAsociacion: "",
      notaPedidoId: "",
      proveedorDirecto: "",
    })
    setAjusteForm({
      deposito: "",
      fecha: new Date().toISOString().split("T")[0],
      observaciones: "",
      tipo: "",
    })
  }

// Función para refrescar datos
  const refreshDepositos = () => {
    toast({
      title: "Actualizando depósitos",
      description: "Obteniendo datos más recientes...",
    })
    setTimeout(() => {
      const updatedDepositos = [...depositos].map((deposito) => ({
        ...deposito,
        productos: Math.floor(deposito.productos * (0.9 + Math.random() * 0.2)),
      }))
      setDepositosList(updatedDepositos)
      toast({
        title: "Depósitos actualizados",
        description: "La lista de depósitos ha sido actualizada correctamente",
      })
    }, 1000)
  }

// Abrir diálogo de gestión
  const openGestionarDialog = (deposito: any) => {
    setSelectedDeposito(deposito)
    setShowGestionarDialog(true)
  }

// Abrir diálogo de detalle del historial
  const openDetalleHistorialDialog = (item: any) => {
    setSelectedHistorialItem(item)
    setShowDetalleHistorialDialog(true)
  }

// Continuar al siguiente paso en ingreso
  const continueToProductSelection = () => {
    if (!ingresoForm.controlRealizado) {
      toast({
        title: "Control de stock requerido",
        description: "Debe confirmar que realizó el control de stock previo a la carga",
        variant: "destructive",
      })
      return
    }
    if (ingresoForm.deposito && ingresoForm.fecha) {
      setStep(2)
    } else {
      toast({
        title: "Datos incompletos",
        description: "Debe seleccionar un depósito y una fecha",
        variant: "destructive",
      })
    }
  }

// Función para manejar carga masiva de Excel
  const handleExcelUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0]
      console.log("Archivo seleccionado:", file.name)

// Simulamos datos cargados desde Excel
      const mockExcelData = [
        { codigo: "LIB001", nombre: "El principito", cantidad: 10, deposito: "Depósito Central" },
        { codigo: "LIB002", nombre: "Cien años de soledad", cantidad: 5, deposito: "Depósito Norte" },
        { codigo: "LIB003", nombre: "Harry Potter y la piedra filosofal", cantidad: 8, deposito: "Depósito Sur" },
      ]

const mockErrors = [
        "Fila 6: Código de producto 'LIB006' no encontrado en el sistema",
        "Fila 8: La cantidad debe ser un número positivo",
      ]

setExcelData(mockExcelData)
      setExcelErrors(mockErrors)
      setIsPreviewingExcel(true)
      e.target.value = ""
    }
  }

const confirmMassiveUpload = () => {
    toast({
      title: "Carga masiva exitosa",
      description: `Se han cargado ${excelData.length} productos correctamente`,
    })
    setExcelData([])
    setExcelErrors([])
    setIsPreviewingExcel(false)
    setActiveTab("historial")
  }

const downloadExcelTemplate = () => {
    toast({
      title: "Plantilla descargada",
      description: "La plantilla de Excel ha sido descargada correctamente",
    })
  }

// Funciones del escáner
  const handleScanProduct = () => {
    if (!scannerInput.trim()) return

const producto = productos.find(
      (p) =>
        p.codigo.toLowerCase() === scannerInput.toLowerCase() ||
        p.nombre.toLowerCase().includes(scannerInput.toLowerCase()),
    )

if (producto) {
      const existingProduct = scannedProducts.find((p) => p.id === producto.id)
      if (existingProduct) {
        setScannedProducts(scannedProducts.map((p) => (p.id === producto.id ? { ...p, cantidad: p.cantidad + 1 } : p)))
      } else {
        setScannedProducts([...scannedProducts, { ...producto, cantidad: 1 }])
      }
      setScannerInput("")
      toast({
        title: "Producto agregado",
        description: `${producto.nombre} agregado al listado`,
      })
    } else {
      toast({
        title: "Producto no encontrado",
        description: "No se encontró un producto con ese código",
        variant: "destructive",
      })
    }
  }

const changeScannedQuantity = (id: number, cantidad: number) => {
    setScannedProducts(scannedProducts.map((product) => (product.id === id ? { ...product, cantidad } : product)))
  }

const removeScannedProduct = (id: number) => {
    setScannedProducts(scannedProducts.filter((product) => product.id !== id))
  }

const confirmScannedProducts = () => {
    setSelectedProducts([...selectedProducts, ...scannedProducts])
    setScannedProducts([])
    setShowScannerModal(false)
    toast({
      title: "Productos agregados",
      description: `Se agregaron ${scannedProducts.length} productos a la selección`,
    })
  }

// Abrir diálogo de eliminación
  const openEliminarDepositoDialog = (deposito: any) => {
    setDepositoAEliminar(deposito)
    setShowEliminarDepositoDialog(true)
  }

// Confirmar eliminación
  const confirmEliminarDeposito = () => {
    if (depositoAEliminar.productos > 0 && !depositoDestino) {
      toast({
        title: "Depósito destino requerido",
        description: "Debe seleccionar un depósito destino para transferir el stock",
        variant: "destructive",
      })
      return
    }

if (depositoAEliminar.productos > 0) {
      toast({
        title: "Depósito eliminado",
        description: `Stock transferido a ${depositos.find((d) => d.id.toString() === depositoDestino)?.nombre} y depósito eliminado`,
      })
    } else {
      toast({
        title: "Depósito eliminado",
        description: "El depósito ha sido eliminado correctamente",
      })
    }

setShowEliminarDepositoDialog(false)
    setDepositoAEliminar(null)
    setDepositoDestino("")
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Depósitos</h1>
          <p className="text-muted-foreground">Administre depósitos, stock y transferencias</p>
        </div>
        <div className="flex gap-2">
          <Dialog open={showIngresoDialog} onOpenChange={setShowIngresoDialog}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <ArrowDown className="mr-2 h-4 w-4" />
                Ingresar stock
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[700px]">
              <DialogHeader>
                <DialogTitle>Ingreso de stock</DialogTitle>
                <DialogDescription>Registre el ingreso de productos al inventario</DialogDescription>
              </DialogHeader>
              <div className="py-4">
                {step === 1 ? (
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="deposito">Depósito destino</Label>
                      <Select
                        value={ingresoForm.deposito}
                        onValueChange={(value) => handleIngresoFormChange("deposito", value)}
                      >
                        <SelectTrigger id="deposito">
                          <SelectValue placeholder="Seleccione un depósito" />
                        </SelectTrigger>
                        <SelectContent>
                          {depositos.map((deposito) => (
                            <SelectItem key={deposito.id} value={deposito.id.toString()}>
                              {deposito.nombre}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="fecha">Fecha de recepción</Label>
                      <Input
                        id="fecha"
                        type="date"
                        value={ingresoForm.fecha}
                        onChange={(e) => handleIngresoFormChange("fecha", e.target.value)}
                      />
                    </div>

<div className="space-y-2">
                      <Label>Tipo de asociación</Label>
                      <Select
                        value={ingresoForm.tipoAsociacion}
                        onValueChange={(value) => handleIngresoFormChange("tipoAsociacion", value)}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione tipo de asociación" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="nota-pedido">Asociar con nota de pedido</SelectItem>
                          <SelectItem value="proveedor-directo">Asociar solo con proveedor</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

{ingresoForm.tipoAsociacion === "nota-pedido" && (
                      <div className="space-y-2">
                        <Label htmlFor="nota-pedido">Nota de pedido</Label>
                        <Select
                          value={ingresoForm.notaPedidoId}
                          onValueChange={(value) => {
                            handleIngresoFormChange("notaPedidoId", value)
                            const nota = notasPedido.find((n) => n.id.toString() === value)
                            if (nota) {
                              handleIngresoFormChange("proveedor", nota.proveedor)
                            }
                          }}
                        >
                          <SelectTrigger id="nota-pedido">
                            <SelectValue placeholder="Seleccione una nota de pedido" />
                          </SelectTrigger>
                          <SelectContent>
                            {notasPedido.map((nota) => (
                              <SelectItem key={nota.id} value={nota.id.toString()}>
                                {nota.numero} - {nota.proveedor} ({nota.productos} productos)
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    )}

{ingresoForm.tipoAsociacion === "proveedor-directo" && (
                      <div className="space-y-2">
                        <Label htmlFor="proveedor-directo">Proveedor</Label>
                        <Select
                          value={ingresoForm.proveedorDirecto}
                          onValueChange={(value) => handleIngresoFormChange("proveedorDirecto", value)}
                        >
                          <SelectTrigger id="proveedor-directo">
                            <SelectValue placeholder="Seleccione un proveedor" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="1">Editorial Planeta</SelectItem>
                            <SelectItem value="2">Distribuidora Literaria</SelectItem>
                            <SelectItem value="3">Importadora de Libros</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    )}

<div className="space-y-2">
                      <Label htmlFor="remito">Número de remito</Label>
                      <Input
                        id="remito"
                        placeholder="Ingrese número de remito"
                        value={ingresoForm.remito}
                        onChange={(e) => handleIngresoFormChange("remito", e.target.value)}
                      />
                    </div>

<div className="space-y-2">
                      <Label>Documentación relacionada</Label>
                      <div className="flex items-center gap-2">
                        <Label
                          htmlFor="file-upload"
                          className="flex h-10 w-full cursor-pointer items-center justify-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium hover:bg-accent hover:text-accent-foreground"
                        >
                          <FileUp className="mr-2 h-4 w-4" />
                          Adjuntar documentos
                        </Label>
                        <Input id="file-upload" type="file" multiple className="hidden" onChange={handleFileUpload} />
                      </div>

{documentosNombres.length > 0 && (
                        <div className="mt-2 space-y-2">
                          <p className="text-sm font-medium">Documentos adjuntos:</p>
                          <div className="max-h-32 overflow-y-auto rounded-md border p-2">
                            {documentosNombres.map((nombre, index) => (
                              <div key={index} className="flex items-center justify-between py-1">
                                <div className="flex items-center">
                                  <FileText className="mr-2 h-4 w-4 text-muted-foreground" />
                                  <span className="text-sm">{nombre}</span>
                                </div>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => removeDocumento(index)}
                                  className="h-6 w-6 p-0 text-red-500"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>

<div className="space-y-2">
                      <Label htmlFor="observaciones">Observaciones</Label>
                      <Textarea
                        id="observaciones"
                        placeholder="Observaciones adicionales"
                        value={ingresoForm.observaciones}
                        onChange={(e) => handleIngresoFormChange("observaciones", e.target.value)}
                      />
                    </div>

<div className="flex items-start space-x-2 pt-2">
                      <Checkbox
                        id="control-stock"
                        checked={ingresoForm.controlRealizado}
                        onCheckedChange={(checked) => handleIngresoFormChange("controlRealizado", checked)}
                      />
                      <div className="grid gap-1.5 leading-none">
                        <Label
                          htmlFor="control-stock"
                          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          Confirmo que realicé el control de stock previo a la carga
                        </Label>
                        <p className="text-sm text-muted-foreground">
                          Este control es obligatorio para continuar con el proceso de carga
                        </p>
                      </div>
                    </div>

<div className="pt-4">
                      <Button
                        className="w-full bg-yellow-500 hover:bg-yellow-600 text-black"
                        onClick={continueToProductSelection}
                      >
                        Continuar a selección de productos
                      </Button>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="text-lg font-medium">Selección de productos</h3>
                        <p className="text-sm text-muted-foreground">
                          Seleccione los productos a ingresar en el depósito
                        </p>
                      </div>
                      <Button variant="outline" size="sm" onClick={() => setStep(1)}>
                        Volver
                      </Button>
                    </div>

<div className="space-y-4">
                      <div className="flex items-center gap-2">
                        <div className="relative flex-1">
                          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                          <Input
                            type="search"
                            placeholder="Buscar producto..."
                            className="pl-8"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                          />
                        </div>
                        <Button
                          variant="outline"
                          onClick={() => setShowScannerModal(true)}
                          className="flex items-center gap-2"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          >
                            <path d="M3 7V5a2 2 0 0 1 2-2h2" />
                            <path d="M17 3h2a2 2 0 0 1 2 2v2" />
                            <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
                            <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
                            <path d="M7 8h10" />
                            <path d="M7 12h10" />
                            <path d="M7 16h10" />
                          </svg>
                          Escáner
                        </Button>
                      </div>

<div className="border rounded-md">
                        <div className="max-h-[200px] overflow-y-auto">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead>Código</TableHead>
                                <TableHead>Nombre</TableHead>
                                <TableHead>Categoría</TableHead>
                                <TableHead></TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {filteredProductos.map((producto) => (
                                <TableRow key={producto.id}>
                                  <TableCell className="font-medium">{producto.codigo}</TableCell>
                                  <TableCell>{producto.nombre}</TableCell>
                                  <TableCell>
                                    <Badge variant="outline">{producto.categoria}</Badge>
                                  </TableCell>
                                  <TableCell>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => addProductToSelection(producto)}
                                      disabled={selectedProducts.some((p) => p.id === producto.id)}
                                    >
                                      Agregar
                                    </Button>
                                  </TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </div>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label>Productos seleccionados</Label>
                      {selectedProducts.length === 0 ? (
                        <div className="border rounded-md p-4 text-center text-muted-foreground">
                          No hay productos seleccionados
                        </div>
                      ) : (
                        <div className="border rounded-md">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead>Producto</TableHead>
                                <TableHead>Cantidad</TableHead>
                                <TableHead></TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {selectedProducts.map((producto) => (
                                <TableRow key={producto.id}>
                                  <TableCell>
                                    <div>
                                      <div className="font-medium">{producto.nombre}</div>
                                      <div className="text-sm text-muted-foreground">{producto.codigo}</div>
                                    </div>
                                  </TableCell>
                                  <TableCell>
                                    <div className="flex items-center gap-1">
                                      <Button
                                        variant="outline"
                                        size="icon"
                                        className="h-6 w-6 bg-transparent"
                                        onClick={() =>
                                          changeProductQuantity(producto.id, Math.max(1, producto.cantidad - 1))
                                        }
                                      >
                                        <Minus className="h-3 w-3" />
                                      </Button>
                                      <Input
                                        type="number"
                                        min="1"
                                        value={producto.cantidad}
                                        onChange={(e) =>
                                          changeProductQuantity(producto.id, Number.parseInt(e.target.value) || 1)
                                        }
                                        className="w-16 h-8"
                                      />
                                      <Button
                                        variant="outline"
                                        size="icon"
                                        className="h-6 w-6 bg-transparent"
                                        onClick={() => changeProductQuantity(producto.id, producto.cantidad + 1)}
                                      >
                                        <Plus className="h-3 w-3" />
                                      </Button>
                                    </div>
                                  </TableCell>
                                  <TableCell>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => removeProductFromSelection(producto.id)}
                                      className="text-red-500"
                                    >
                                      <Trash2 className="h-4 w-4" />
                                    </Button>
                                  </TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </div>
                      )}
                    </div>

<div className="pt-4">
                      <Button
                        className="w-full bg-yellow-500 hover:bg-yellow-600 text-black"
                        onClick={confirmStockIngreso}
                        disabled={selectedProducts.length === 0}
                      >
                        Confirmar ingreso de stock
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            </DialogContent>
          </Dialog>

<Dialog open={showTransferDialog} onOpenChange={setShowTransferDialog}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <ArrowLeftRight className="mr-2 h-4 w-4" />
                Transferir stock
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[700px]">
              <DialogHeader>
                <DialogTitle>Transferencia de stock entre depósitos</DialogTitle>
                <DialogDescription>Complete los datos para transferir productos entre depósitos</DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="origen">Depósito origen</Label>
                    <Select
                      value={transferForm.origen}
                      onValueChange={(value) => handleTransferFormChange("origen", value)}
                    >
                      <SelectTrigger id="origen">
                        <SelectValue placeholder="Seleccione depósito origen" />
                      </SelectTrigger>
                      <SelectContent>
                        {depositos.map((deposito) => (
                          <SelectItem key={deposito.id} value={deposito.id.toString()}>
                            {deposito.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="destino">Depósito destino</Label>
                    <Select
                      value={transferForm.destino}
                      onValueChange={(value) => handleTransferFormChange("destino", value)}
                    >
                      <SelectTrigger id="destino">
                        <SelectValue placeholder="Seleccione depósito destino" />
                      </SelectTrigger>
                      <SelectContent>
                        {depositos.map((deposito) => (
                          <SelectItem
                            key={deposito.id}
                            value={deposito.id.toString()}
                            disabled={deposito.id.toString() === transferForm.origen}
                          >
                            {deposito.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="fecha">Fecha de transferencia</Label>
                    <Input
                      id="fecha"
                      type="date"
                      value={transferForm.fecha}
                      onChange={(e) => handleTransferFormChange("fecha", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="motivo">Motivo</Label>
                    <Textarea
                      id="motivo"
                      placeholder="Motivo de la transferencia"
                      value={transferForm.motivo}
                      onChange={(e) => handleTransferFormChange("motivo", e.target.value)}
                      rows={3}
                    />
                  </div>
                </div>

<div className="space-y-2 pt-2">
                  <div className="flex items-center justify-between">
                    <Label>Productos a transferir</Label>
                    <div className="relative w-[250px]">
                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                      <Input
                        type="search"
                        placeholder="Buscar producto..."
                        className="pl-8"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                      />
                    </div>
                  </div>

<div className="border rounded-md">
                    <div className="max-h-[200px] overflow-y-auto">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Código</TableHead>
                            <TableHead>Nombre</TableHead>
                            <TableHead>Stock</TableHead>
                            <TableHead>Depósito</TableHead>
                            <TableHead></TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {filteredProductos
                            .filter((producto) =>
                              transferForm.origen
                                ? producto.deposito ===
                                  depositos.find((d) => d.id.toString() === transferForm.origen)?.nombre
                                : true,
                            )
                            .map((producto) => (
                              <TableRow key={producto.id}>
                                <TableCell className="font-medium">{producto.codigo}</TableCell>
                                <TableCell>{producto.nombre}</TableCell>
                                <TableCell>{producto.stock}</TableCell>
                                <TableCell>{producto.deposito}</TableCell>
                                <TableCell>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => addProductToSelection(producto)}
                                    disabled={selectedProducts.some((p) => p.id === producto.id)}
                                  >
                                    Agregar
                                  </Button>
                                </TableCell>
                              </TableRow>
                            ))}
                        </TableBody>
                      </Table>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <Label>Productos seleccionados</Label>
                  {selectedProducts.length === 0 ? (
                    <div className="border rounded-md p-4 text-center text-muted-foreground">
                      No hay productos seleccionados
                    </div>
                  ) : (
                    <div className="border rounded-md">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Producto</TableHead>
                            <TableHead>Cantidad</TableHead>
                            <TableHead></TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {selectedProducts.map((producto) => (
                            <TableRow key={producto.id}>
                              <TableCell>
                                <div>
                                  <div className="font-medium">{producto.nombre}</div>
                                  <div className="text-sm text-muted-foreground">{producto.codigo}</div>
                                </div>
                              </TableCell>
                              <TableCell>
                                <Input
                                  type="number"
                                  min="1"
                                  max={producto.stock}
                                  value={producto.cantidad}
                                  onChange={(e) => changeProductQuantity(producto.id, Number.parseInt(e.target.value))}
                                  className="w-20"
                                />
                              </TableCell>
                              <TableCell>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => removeProductFromSelection(producto.id)}
                                  className="text-red-500"
                                >
                                  Eliminar
                                </Button>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  )}
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setShowTransferDialog(false)}>
                  Cancelar
                </Button>
                <Button
                  onClick={confirmTransfer}
                  disabled={!transferForm.origen || !transferForm.destino || selectedProducts.length === 0}
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                >
                  Confirmar transferencia
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

<Dialog open={showAjusteDialog} onOpenChange={setShowAjusteDialog}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <ArrowUp className="mr-2 h-4 w-4" />
                Ajustar stock
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[600px]">
              <DialogHeader>
                <DialogTitle>Ajuste de stock</DialogTitle>
                <DialogDescription>Registre ajustes de stock por pérdidas, daños o correcciones</DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="ajuste-deposito">Depósito</Label>
                    <Select
                      value={ajusteForm.deposito}
                      onValueChange={(value) => handleAjusteFormChange("deposito", value)}
                    >
                      <SelectTrigger id="ajuste-deposito">
                        <SelectValue placeholder="Seleccione un depósito" />
                      </SelectTrigger>
                      <SelectContent>
                        {depositos.map((deposito) => (
                          <SelectItem key={deposito.id} value={deposito.id.toString()}>
                            {deposito.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="ajuste-tipo">Tipo de ajuste</Label>
                    <Select value={ajusteForm.tipo} onValueChange={(value) => handleAjusteFormChange("tipo", value)}>
                      <SelectTrigger id="ajuste-tipo">
                        <SelectValue placeholder="Seleccione tipo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="perdida">Pérdida</SelectItem>
                        <SelectItem value="dano">Daño</SelectItem>
                        <SelectItem value="ajuste">Ajuste de inventario</SelectItem>
                        <SelectItem value="vencimiento">Vencimiento</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="ajuste-fecha">Fecha</Label>
                  <Input
                    id="ajuste-fecha"
                    type="date"
                    value={ajusteForm.fecha}
                    onChange={(e) => handleAjusteFormChange("fecha", e.target.value)}
                  />
                </div>

<div className="space-y-2">
                  <Label>Productos a ajustar</Label>
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      type="search"
                      placeholder="Buscar producto..."
                      className="pl-8"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>

<div className="border rounded-md">
                    <div className="max-h-[200px] overflow-y-auto">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Código</TableHead>
                            <TableHead>Nombre</TableHead>
                            <TableHead>Stock Actual</TableHead>
                            <TableHead></TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {filteredProductos
                            .filter((producto) =>
                              ajusteForm.deposito
                                ? producto.deposito ===
                                  depositos.find((d) => d.id.toString() === ajusteForm.deposito)?.nombre
                                : true,
                            )
                            .map((producto) => (
                              <TableRow key={producto.id}>
                                <TableCell className="font-medium">{producto.codigo}</TableCell>
                                <TableCell>{producto.nombre}</TableCell>
                                <TableCell>{producto.stock}</TableCell>
                                <TableCell>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => addProductToSelection(producto)}
                                    disabled={selectedProducts.some((p) => p.id === producto.id)}
                                  >
                                    Agregar
                                  </Button>
                                </TableCell>
                              </TableRow>
                            ))}
                        </TableBody>
                      </Table>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="ajuste-observaciones">Observaciones</Label>
                  <Textarea
                    id="ajuste-observaciones"
                    placeholder="Observaciones adicionales sobre el ajuste"
                    value={ajusteForm.observaciones}
                    onChange={(e) => handleAjusteFormChange("observaciones", e.target.value)}
                    rows={4}
                  />
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setShowAjusteDialog(false)}>
                  Cancelar
                </Button>
                <Button
                  onClick={confirmAjuste}
                  disabled={!ajusteForm.deposito || !ajusteForm.tipo || selectedProducts.length === 0}
                  className="bg-red-500 hover:bg-red-600 text-white"
                >
                  Confirmar ajuste
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

<Dialog open={showNewDepositoDialog} onOpenChange={setShowNewDepositoDialog}>
            <DialogTrigger asChild>
              <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                <Plus className="mr-2 h-4 w-4" />
                Nuevo depósito
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Crear nuevo depósito</DialogTitle>
                <DialogDescription>Complete los datos para crear un nuevo depósito</DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre</Label>
                  <Input id="nombre" placeholder="Nombre del depósito" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="codigo">Código</Label>
                  <Input id="codigo" placeholder="Código del depósito (ej: DEP-004)" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="direccion">Dirección</Label>
                  <Input id="direccion" placeholder="Dirección del depósito" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="descripcion">Descripción</Label>
                  <Textarea id="descripcion" placeholder="Descripción del depósito" />
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setShowNewDepositoDialog(false)}>
                  Cancelar
                </Button>
                <Button
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  onClick={() => {
                    toast({
                      title: "Depósito creado",
                      description: "El depósito ha sido creado exitosamente",
                    })
                    setShowNewDepositoDialog(false)
                  }}
                >
                  Guardar
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="depositos">Depósitos</TabsTrigger>
          <TabsTrigger value="cargaMasiva">Carga Masiva</TabsTrigger>
          <TabsTrigger value="stock">Estado de Stock</TabsTrigger>
          <TabsTrigger value="historial">Historial</TabsTrigger>
        </TabsList>

<TabsContent value="depositos" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <Warehouse className="mr-2 h-5 w-5" />
                Depósitos
              </CardTitle>
              <CardDescription>Gestione los depósitos de la empresa y sus sucursales vinculadas</CardDescription>
              <div className="flex items-center justify-between mt-4">
                <div className="relative w-[300px]">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar depósito o sucursal..."
                    className="pl-8"
                    value={depositosSearchTerm}
                    onChange={(e) => setDepositosSearchTerm(e.target.value)}
                  />
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={refreshDepositos}
                    title="Refrescar"
                    className="h-9 bg-transparent"
                  >
                    <RefreshCw className="h-4 w-4" />
                    <span className="sr-only">Refrescar</span>
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos han sido exportados a Excel correctamente",
                      })
                    }}
                    className="h-9"
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[50px]">ID</TableHead>
                      <TableHead>Código</TableHead>
                      <TableHead>Nombre</TableHead>
                      <TableHead>Dirección</TableHead>
                      <TableHead>Productos</TableHead>
                      <TableHead>Sucursales Vinculadas</TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead className="text-right">Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredDepositos.map((deposito) => (
                      <TableRow key={deposito.id}>
                        <TableCell>{deposito.id}</TableCell>
                        <TableCell className="font-medium">{deposito.codigo}</TableCell>
                        <TableCell className="font-medium">{deposito.nombre}</TableCell>
                        <TableCell>{deposito.direccion}</TableCell>
                        <TableCell>{deposito.productos}</TableCell>
                        <TableCell>
                          <div className="flex flex-wrap gap-1">
                            {deposito.sucursalesVinculadas.map((sucursal, index) => (
                              <Badge key={index} variant="outline" className="text-xs bg-blue-50 text-blue-700">
                                <Store className="mr-1 h-3 w-3" />
                                {sucursal}
                              </Badge>
                            ))}
                          </div>
                          <div className="text-xs text-muted-foreground mt-1">
                            {deposito.sucursalesVinculadas.length} sucursal
                            {deposito.sucursalesVinculadas.length !== 1 ? "es" : ""} vinculada
                            {deposito.sucursalesVinculadas.length !== 1 ? "s" : ""}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="default" className="bg-green-100 text-green-800">
                            {deposito.estado}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex gap-2 justify-end">
                            <Button variant="outline" size="sm" onClick={() => openGestionarDialog(deposito)}>
                              Gestionar
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => openEliminarDepositoDialog(deposito)}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="cargaMasiva" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <FileSpreadsheet className="mr-2 h-5 w-5" />
                Carga masiva de stock
              </CardTitle>
              <CardDescription>Cargue múltiples productos a la vez utilizando un archivo Excel</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="space-y-2">
                  <h3 className="text-sm font-medium">1. Descargue la plantilla de Excel</h3>
                  <p className="text-sm text-muted-foreground">
                    Utilice esta plantilla como referencia para completar la información de los productos a cargar
                  </p>
                  <Button onClick={downloadExcelTemplate} variant="outline" className="mt-2 bg-transparent">
                    <Download className="mr-2 h-4 w-4" />
                    Descargar plantilla
                  </Button>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium">2. Complete la plantilla con sus datos</h3>
                  <div className="rounded-md bg-muted p-4">
                    <p className="text-sm">La plantilla debe contener las siguientes columnas:</p>
                    <ul className="mt-2 space-y-1 text-sm list-disc pl-5">
                      <li>Código del producto</li>
                      <li>Nombre del producto</li>
                      <li>Cantidad a ingresar</li>
                      <li>Código del depósito destino</li>
                    </ul>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium">3. Suba el archivo completado</h3>
                  <div className="flex items-center gap-2">
                    <Label
                      htmlFor="excel-upload"
                      className="flex h-10 w-full cursor-pointer items-center justify-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium hover:bg-accent hover:text-accent-foreground"
                    >
                      <Upload className="mr-2 h-4 w-4" />
                      Seleccionar archivo Excel
                    </Label>
                    <Input
                      id="excel-upload"
                      type="file"
                      accept=".xlsx,.xls"
                      className="hidden"
                      onChange={handleExcelUpload}
                    />
                  </div>
                </div>

{isPreviewingExcel && (
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-sm font-medium">Vista previa de datos</h3>
                      <Badge variant={excelErrors.length > 0 ? "destructive" : "outline"}>
                        {excelErrors.length > 0 ? `${excelErrors.length} errores` : "Datos válidos"}
                      </Badge>
                    </div>

<div className="rounded-md border">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Código</TableHead>
                            <TableHead>Producto</TableHead>
                            <TableHead>Cantidad</TableHead>
                            <TableHead>Depósito</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {excelData.map((item, index) => (
                            <TableRow key={index}>
                              <TableCell className="font-medium">{item.codigo}</TableCell>
                              <TableCell>{item.nombre}</TableCell>
                              <TableCell>{item.cantidad}</TableCell>
                              <TableCell>{item.deposito}</TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>

{excelErrors.length > 0 && (
                      <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
                        <div className="flex items-center gap-2 font-medium text-destructive">
                          <AlertCircle className="h-4 w-4" />
                          <span>Se encontraron errores en el archivo</span>
                        </div>
                        <ul className="mt-2 space-y-1 text-sm text-destructive pl-6 list-disc">
                          {excelErrors.map((error, index) => (
                            <li key={index}>{error}</li>
                          ))}
                        </ul>
                      </div>
                    )}

<div className="flex justify-end gap-2">
                      <Button
                        variant="outline"
                        onClick={() => {
                          setExcelData([])
                          setExcelErrors([])
                          setIsPreviewingExcel(false)
                        }}
                      >
                        Cancelar
                      </Button>
                      <Button
                        onClick={confirmMassiveUpload}
                        disabled={excelErrors.length > 0}
                        className="bg-yellow-500 hover:bg-yellow-600 text-black"
                      >
                        <CheckCircle className="mr-2 h-4 w-4" />
                        Confirmar carga masiva
                      </Button>
                    </div>
                  </div>
                )}

<div className="rounded-md bg-blue-50 p-4 text-blue-800">
                  <div className="flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <circle cx="12" cy="12" r="10" />
                      <path d="M12 16v-4" />
                      <path d="M12 8h.01" />
                    </svg>
                    <span className="font-medium">Información importante</span>
                  </div>
                  <ul className="mt-2 space-y-1 text-sm pl-6 list-disc">
                    <li>El archivo debe estar en formato Excel (.xlsx o .xls)</li>
                    <li>Los códigos de productos deben existir en el sistema</li>
                    <li>Las cantidades deben ser números enteros positivos</li>
                    <li>Los nombres de depósitos deben coincidir exactamente con los registrados en el sistema</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="stock" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <Package className="mr-2 h-5 w-5" />
                  Estado actual de stock
                </CardTitle>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos de stock han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger>
                        <Button variant="ghost" size="icon" onClick={refreshDepositos}>
                          <RefreshCw className="h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Refrescar</TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
              </div>
              <CardDescription>Consulte el stock disponible por depósito</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      type="search"
                      placeholder="Buscar producto..."
                      className="pl-8"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                  <Select>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Todos los depósitos" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todos los depósitos</SelectItem>
                      {depositos.map((deposito) => (
                        <SelectItem key={deposito.id} value={deposito.id.toString()}>
                          {deposito.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Código</TableHead>
                        <TableHead>Producto</TableHead>
                        <TableHead>Stock</TableHead>
                        <TableHead>Depósito</TableHead>
                        <TableHead>Categoría</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredProductos.map((producto) => (
                        <TableRow key={producto.id}>
                          <TableCell className="font-medium">{producto.codigo}</TableCell>
                          <TableCell>{producto.nombre}</TableCell>
                          <TableCell>
                            <span className={producto.stock < 5 ? "text-yellow-600 font-medium" : ""}>
                              {producto.stock}
                            </span>
                          </TableCell>
                          <TableCell>{producto.deposito}</TableCell>
                          <TableCell>
                            <Badge variant="outline">{producto.categoria}</Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="historial" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <Calendar className="mr-2 h-5 w-5" />
                  Historial de transacciones
                </CardTitle>
                <Button
                  variant="outline"
                  onClick={() => {
                    toast({
                      title: "Exportación exitosa",
                      description: "El historial ha sido exportado a Excel correctamente",
                    })
                  }}
                >
                  <Download className="mr-2 h-4 w-4" />
                  Exportar a Excel
                </Button>
              </div>
              <CardDescription>Consulte el historial completo de movimientos de stock</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar por tipo, depósito, producto, usuario..."
                    className="pl-8"
                    value={historialSearchTerm}
                    onChange={(e) => setHistorialSearchTerm(e.target.value)}
                  />
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead>Depósito</TableHead>
                        <TableHead>Detalles</TableHead>
                        <TableHead>Productos</TableHead>
                        <TableHead>Usuario</TableHead>
                        <TableHead></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredHistorial.map((transaccion) => (
                        <TableRow key={transaccion.id}>
                          <TableCell>{new Date(transaccion.fecha).toLocaleDateString()}</TableCell>
                          <TableCell>
                            <Badge
                              variant={
                                transaccion.tipo === "Ingreso"
                                  ? "default"
                                  : transaccion.tipo === "Transferencia"
                                    ? "secondary"
                                    : "destructive"
                              }
                              className={
                                transaccion.tipo === "Ingreso"
                                  ? "bg-green-100 text-green-800"
                                  : transaccion.tipo === "Transferencia"
                                    ? "bg-blue-100 text-blue-800"
                                    : "bg-red-100 text-red-800"
                              }
                            >
                              {transaccion.tipo}
                            </Badge>
                          </TableCell>
                          <TableCell>{transaccion.deposito}</TableCell>
                          <TableCell>
                            {transaccion.tipo === "Ingreso" && transaccion.proveedor && (
                              <div className="text-sm">
                                <div>Proveedor: {transaccion.proveedor}</div>
                                {transaccion.remito && <div>Remito: {transaccion.remito}</div>}
                              </div>
                            )}
                            {transaccion.tipo === "Transferencia" && (
                              <div className="text-sm">
                                <div>
                                  {transaccion.origen} → {transaccion.destino}
                                </div>
                                {transaccion.motivo && <div>Motivo: {transaccion.motivo}</div>}
                              </div>
                            )}
                            {transaccion.tipo === "Ajuste" && (
                              <div className="text-sm">
                                <div>Tipo: {transaccion.tipo}</div>
                              </div>
                            )}
                          </TableCell>
                          <TableCell>{transaccion.productos.length} productos</TableCell>
                          <TableCell>{transaccion.usuario}</TableCell>
                          <TableCell>
                            <Button variant="ghost" size="sm" onClick={() => openDetalleHistorialDialog(transaccion)}>
                              <Eye className="h-4 w-4 mr-1" />
                              Ver detalle
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Modal del escáner de código de barras */}
      <Dialog open={showScannerModal} onOpenChange={setShowScannerModal}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>Escáner de código de barras</DialogTitle>
            <DialogDescription>Escanee o busque productos para agregar al ingreso de stock</DialogDescription>
          </DialogHeader>

<div className="grid grid-cols-2 gap-4">
              <div>
                <h3 className="text-sm font-medium mb-2">Productos disponibles</h3>
                <div className="border rounded-md max-h-[300px] overflow-y-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Código</TableHead>
                        <TableHead>Nombre</TableHead>
                        <TableHead></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredProductos.slice(0, 10).map((producto) => (
                        <TableRow key={producto.id}>
                          <TableCell className="font-medium">{producto.codigo}</TableCell>
                          <TableCell>{producto.nombre}</TableCell>
                          <TableCell>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => {
                                setScannerInput(producto.codigo)
                                handleScanProduct()
                              }}
                            >
                              <Plus className="h-4 w-4" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>

<div>
                <div className="flex items-center justify-between mb-2">
                  <h3 className="text-sm font-medium">Productos escaneados</h3>
                  <Badge variant="outline">{scannedProducts.length} productos</Badge>
                </div>
                <div className="border rounded-md max-h-[300px] overflow-y-auto">
                  {scannedProducts.length === 0 ? (
                    <div className="p-4 text-center text-muted-foreground">No hay productos escaneados</div>
                  ) : (
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Producto</TableHead>
                          <TableHead>Cantidad</TableHead>
                          <TableHead></TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {scannedProducts.map((producto) => (
                          <TableRow key={producto.id}>
                            <TableCell>
                              <div>
                                <div className="font-medium">{producto.nombre}</div>
                                <div className="text-sm text-muted-foreground">{producto.codigo}</div>
                              </div>
                            </TableCell>
                            <TableCell>
                              <div className="flex items-center gap-1">
                                <Button
                                  variant="outline"
                                  size="icon"
                                  className="h-6 w-6 bg-transparent"
                                  onClick={() => changeScannedQuantity(producto.id, Math.max(1, producto.cantidad - 1))}
                                >
                                  <Minus className="h-3 w-3" />
                                </Button>
                                <Input
                                  type="number"
                                  min="1"
                                  value={producto.cantidad}
                                  onChange={(e) =>
                                    changeScannedQuantity(producto.id, Number.parseInt(e.target.value) || 1)
                                  }
                                  className="w-16 h-8"
                                />
                                <Button
                                  variant="outline"
                                  size="icon"
                                  className="h-6 w-6 bg-transparent"
                                  onClick={() => changeScannedQuantity(producto.id, producto.cantidad + 1)}
                                >
                                  <Plus className="h-3 w-3" />
                                </Button>
                              </div>
                            </TableCell>
                            <TableCell>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => removeScannedProduct(producto.id)}
                                className="text-red-500"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  )}
                </div>
              </div>
            </div>

<div className="flex justify-end gap-2 pt-4">
              <Button
                variant="outline"
                onClick={() => {
                  setShowScannerModal(false)
                  setScannedProducts([])
                  setScannerInput("")
                }}
              >
                Cancelar
              </Button>
              <Button
                onClick={confirmScannedProducts}
                disabled={scannedProducts.length === 0}
                className="bg-yellow-500 hover:bg-yellow-600 text-black"
              >
                Confirmar productos ({scannedProducts.length})
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Diálogo de gestión de depósito */}
      <Dialog open={showGestionarDialog} onOpenChange={setShowGestionarDialog}>
        <DialogContent className="sm:max-w-[700px]">
          <DialogHeader>
            <DialogTitle>Gestionar Depósito</DialogTitle>
            <DialogDescription>
              {selectedDeposito && `Administre el depósito ${selectedDeposito.nombre}`}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <Tabs defaultValue="info">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="info">Información</TabsTrigger>
                <TabsTrigger value="sucursales">Sucursales</TabsTrigger>
                <TabsTrigger value="productos">Productos</TabsTrigger>
                <TabsTrigger value="historial">Historial</TabsTrigger>
              </TabsList>
              <TabsContent value="info" className="space-y-4 pt-4">
                {selectedDeposito && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="edit-codigo">Código</Label>
                        <Input id="edit-codigo" defaultValue={selectedDeposito.codigo} />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="edit-nombre">Nombre</Label>
                        <Input id="edit-nombre" defaultValue={selectedDeposito.nombre} />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="edit-direccion">Dirección</Label>
                      <Input id="edit-direccion" defaultValue={selectedDeposito.direccion} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="edit-estado">Estado</Label>
                      <Select defaultValue={selectedDeposito.estado === "Activo" ? "activo" : "inactivo"}>
                        <SelectTrigger id="edit-estado">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="activo">Activo</SelectItem>
                          <SelectItem value="inactivo">Inactivo</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="edit-descripcion">Descripción</Label>
                      <Textarea id="edit-descripcion" placeholder="Descripción del depósito" />
                    </div>
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" onClick={() => setShowGestionarDialog(false)}>
                        Cancelar
                      </Button>
                      <Button
                        className="bg-yellow-500 hover:bg-yellow-600 text-black"
                        onClick={() => {
                          toast({
                            title: "Depósito actualizado",
                            description: "Los cambios han sido guardados exitosamente",
                          })
                          setShowGestionarDialog(false)
                        }}
                      >
                        Guardar cambios
                      </Button>
                    </div>
                  </div>
                )}
              </TabsContent>

<TabsContent value="sucursales" className="space-y-4 pt-4">
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <h3 className="text-lg font-medium">Sucursales vinculadas a este depósito</h3>
                    <Badge variant="outline" className="bg-blue-50 text-blue-700">
                      {selectedDeposito?.sucursalesVinculadas.length || 0} sucursales
                    </Badge>
                  </div>

{selectedDeposito?.sucursalesVinculadas && selectedDeposito.sucursalesVinculadas.length > 0 ? (
                    <div className="grid gap-3">
                      {selectedDeposito.sucursalesVinculadas.map((sucursal, index) => (
                        <div key={index} className="flex items-center justify-between p-3 border rounded-md bg-blue-50">
                          <div className="flex items-center">
                            <Store className="mr-3 h-5 w-5 text-blue-500" />
                            <div>
                              <div className="font-medium">{sucursal}</div>
                              <div className="text-sm text-muted-foreground">Comparte stock con este depósito</div>
                            </div>
                          </div>
                          <div className="flex gap-2">
                            <Button variant="ghost" size="sm">
                              <Eye className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm">
                              <Pencil className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center p-8 border rounded-md bg-muted">
                      <Store className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
                      <p className="text-muted-foreground">No hay sucursales vinculadas a este depósito</p>
                    </div>
                  )}

<div className="mt-6 p-4 border rounded-md bg-yellow-50">
                    <h4 className="font-medium text-yellow-800 mb-2">Información importante</h4>
                    <ul className="text-sm text-yellow-700 space-y-1">
                      <li>• Las sucursales vinculadas comparten el stock de este depósito</li>
                      <li>• Los cambios en el stock afectan a todas las sucursales vinculadas</li>
                      <li>• Para vincular/desvincular sucursales, use la gestión de sucursales</li>
                    </ul>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="productos" className="space-y-4 pt-4">
                <div className="flex justify-between items-center">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input type="search" placeholder="Buscar producto..." className="pl-8" />
                  </div>
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                </div>
                <div className="border rounded-md">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Código</TableHead>
                        <TableHead>Nombre</TableHead>
                        <TableHead>Stock</TableHead>
                        <TableHead>Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {productos
                        .filter((producto) => selectedDeposito && producto.deposito === selectedDeposito.nombre)
                        .map((producto) => (
                          <TableRow key={producto.id}>
                            <TableCell className="font-medium">{producto.codigo}</TableCell>
                            <TableCell>{producto.nombre}</TableCell>
                            <TableCell>{producto.stock}</TableCell>
                            <TableCell>
                              <div className="flex gap-2">
                                <Button variant="ghost" size="sm">
                                  <Eye className="h-4 w-4" />
                                </Button>
                                <Button variant="ghost" size="sm">
                                  <Pencil className="h-4 w-4" />
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                </div>
              </TabsContent>

<TabsContent value="historial" className="space-y-4 pt-4">
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg font-medium">Historial de movimientos del depósito</h3>
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                </div>
                <div className="text-center p-8 text-muted-foreground">
                  <p>Historial de movimientos del depósito</p>
                  <p className="text-sm">No hay movimientos registrados recientemente</p>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </DialogContent>
      </Dialog>

{/* Diálogo de detalle del historial */}
      <Dialog open={showDetalleHistorialDialog} onOpenChange={setShowDetalleHistorialDialog}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <Calendar className="mr-2 h-5 w-5 text-blue-500" />
              Detalle de transacción
            </DialogTitle>
            <DialogDescription>
              {selectedHistorialItem && (
                <Badge
                  variant="secondary"
                  className={
                    selectedHistorialItem.tipo === "Ingreso"
                      ? "bg-green-100 text-green-800"
                      : selectedHistorialItem.tipo === "Transferencia"
                        ? "bg-blue-100 text-blue-800"
                        : "bg-red-100 text-red-800"
                  }
                >
                  {selectedHistorialItem.tipo}
                </Badge>
              )}
            </DialogDescription>
          </DialogHeader>
          {selectedHistorialItem && (
            <div className="py-4">
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Fecha</p>
                    <p className="mt-1">{new Date(selectedHistorialItem.fecha).toLocaleDateString()}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Usuario</p>
                    <p className="mt-1">{selectedHistorialItem.usuario}</p>
                  </div>
                </div>

<div>
                  <p className="text-sm font-medium text-muted-foreground">Depósito</p>
                  <p className="mt-1">{selectedHistorialItem.deposito}</p>
                </div>

{selectedHistorialItem.tipo === "Ingreso" && (
                  <>
                    {selectedHistorialItem.proveedor && (
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Proveedor</p>
                        <p className="mt-1">{selectedHistorialItem.proveedor}</p>
                      </div>
                    )}
                    {selectedHistorialItem.remito && (
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Remito</p>
                        <p className="mt-1">{selectedHistorialItem.remito}</p>
                      </div>
                    )}
                    {selectedHistorialItem.documentos && selectedHistorialItem.documentos.length > 0 && (
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Documentos</p>
                        <div className="mt-1 flex flex-wrap gap-1">
                          {selectedHistorialItem.documentos.map((doc, index) => (
                            <Badge key={index} variant="outline" className="text-xs">
                              <FileText className="mr-1 h-3 w-3" />
                              {doc}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                  </>
                )}

{selectedHistorialItem.tipo === "Transferencia" && (
                  <>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Origen</p>
                        <p className="mt-1">{selectedHistorialItem.origen}</p>
                      </div>
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Destino</p>
                        <p className="mt-1">{selectedHistorialItem.destino}</p>
                      </div>
                    </div>
                    {selectedHistorialItem.motivo && (
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Motivo</p>
                        <p className="mt-1">{selectedHistorialItem.motivo}</p>
                      </div>
                    )}
                  </>
                )}

<div>
                  <p className="text-sm font-medium text-muted-foreground">Productos</p>
                  <div className="mt-2 border rounded-md">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Código</TableHead>
                          <TableHead>Producto</TableHead>
                          <TableHead>Cantidad</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {selectedHistorialItem.productos.map((producto, index) => (
                          <TableRow key={index}>
                            <TableCell className="font-medium">{producto.codigo}</TableCell>
                            <TableCell>{producto.nombre}</TableCell>
                            <TableCell>
                              <span className={producto.cantidad > 0 ? "text-green-600" : "text-red-600"}>
                                {producto.cantidad > 0 ? "+" : ""}
                                {producto.cantidad}
                              </span>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>

{selectedHistorialItem.observaciones && (
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Observaciones</p>
                    <p className="mt-1 text-sm bg-muted p-3 rounded-md">{selectedHistorialItem.observaciones}</p>
                  </div>
                )}
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDetalleHistorialDialog(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de eliminación de depósito */}
      <Dialog open={showEliminarDepositoDialog} onOpenChange={setShowEliminarDepositoDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="flex items-center text-red-600">
              <Trash2 className="mr-2 h-5 w-5" />
              Eliminar Depósito
            </DialogTitle>
            <DialogDescription>
              {depositoAEliminar && `¿Está seguro que desea eliminar el depósito "${depositoAEliminar.nombre}"?`}
            </DialogDescription>
          </DialogHeader>
          {depositoAEliminar && (
            <div className="py-4">
              <div className="space-y-4">
                <div className="p-4 border rounded-md bg-muted">
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div>
                      <strong>Código:</strong> {depositoAEliminar.codigo}
                    </div>
                    <div>
                      <strong>Nombre:</strong> {depositoAEliminar.nombre}
                    </div>
                    <div>
                      <strong>Dirección:</strong> {depositoAEliminar.direccion}
                    </div>
                    <div>
                      <strong>Productos:</strong> {depositoAEliminar.productos}
                    </div>
                  </div>
                </div>

{depositoAEliminar.productos > 0 && (
                  <div className="space-y-3">
                    <div className="p-3 border border-yellow-200 rounded-md bg-yellow-50">
                      <div className="flex items-center gap-2 text-yellow-800">
                        <AlertCircle className="h-4 w-4" />
                        <span className="font-medium">Atención</span>
                      </div>
                      <p className="text-sm text-yellow-700 mt-1">
                        Este depósito tiene {depositoAEliminar.productos} productos asignados. Debe seleccionar un
                        depósito destino para transferir automáticamente el stock.
                      </p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="deposito-destino">Depósito destino para transferir stock</Label>
                      <Select value={depositoDestino} onValueChange={setDepositoDestino}>
                        <SelectTrigger id="deposito-destino">
                          <SelectValue placeholder="Seleccione depósito destino" />
                        </SelectTrigger>
                        <SelectContent>
                          {depositos
                            .filter((d) => d.id !== depositoAEliminar.id)
                            .map((deposito) => (
                              <SelectItem key={deposito.id} value={deposito.id.toString()}>
                                {deposito.codigo} - {deposito.nombre}
                              </SelectItem>
                            ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                )}

{depositoAEliminar.productos === 0 && (
                  <div className="p-3 border border-green-200 rounded-md bg-green-50">
                    <div className="flex items-center gap-2 text-green-800">
                      <CheckCircle className="h-4 w-4" />
                      <span className="font-medium">Listo para eliminar</span>
                    </div>
                    <p className="text-sm text-green-700 mt-1">
                      Este depósito no tiene productos asignados y puede ser eliminado directamente.
                    </p>
                  </div>
                )}
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEliminarDepositoDialog(false)}>
              Cancelar
            </Button>
            <Button
              onClick={confirmEliminarDeposito}
              className="bg-red-500 hover:bg-red-600 text-white"
              disabled={depositoAEliminar?.productos > 0 && !depositoDestino}
            >
              {depositoAEliminar?.productos > 0 ? "Transferir stock y eliminar" : "Eliminar depósito"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/perfil/page.tsx" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import { Lock, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"

// Datos de ejemplo del usuario
const usuarioActual = {
  id: 1,
  nombre: "Admin",
  apellido: "Usuario",
  email: "admin@libreria-leon.com",
  telefono: "11-2233-4455",
  rol: "Administrador",
  sucursal: "Centro",
  fechaRegistro: "2023-01-15",
  ultimoAcceso: "2023-12-10 15:30",
}

export default function PerfilPage() {
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    nombre: usuarioActual.nombre,
    apellido: usuarioActual.apellido,
    email: usuarioActual.email,
    telefono: usuarioActual.telefono,
  })

const [passwordForm, setPasswordForm] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

const [showPasswordDialog, setShowPasswordDialog] = useState(false)

// Manejar cambios en el formulario de datos personales
  const handleFormChange = (field: string, value: string) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

// Manejar cambios en el formulario de contraseña
  const handlePasswordFormChange = (field: string, value: string) => {
    setPasswordForm({
      ...passwordForm,
      [field]: value,
    })
  }

// Guardar cambios en el perfil
  const saveProfileChanges = () => {
    // Aquí iría la lógica para guardar los cambios en el perfil
    console.log("Guardando cambios en el perfil:", formData)

toast({
      title: "Perfil actualizado",
      description: "Los cambios en tu perfil han sido guardados correctamente.",
    })
  }

// Cambiar contraseña
  const changePassword = () => {
    // Validar que las contraseñas coincidan
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      toast({
        title: "Error",
        description: "Las contraseñas nuevas no coinciden.",
        variant: "destructive",
      })
      return
    }

// Aquí iría la lógica para cambiar la contraseña
    console.log("Cambiando contraseña:", passwordForm)

toast({
      title: "Contraseña actualizada",
      description: "Tu contraseña ha sido actualizada correctamente.",
    })

// Resetear formulario y cerrar diálogo
    setPasswordForm({
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    })
    setShowPasswordDialog(false)
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Mi Perfil</h1>
        <p className="text-muted-foreground">Administre su información personal y contraseña</p>
      </div>

<div className="grid gap-6 md:grid-cols-5">
        {/* Tarjeta de perfil */}
        <Card className="md:col-span-2">
          <CardHeader className="pb-0">
            <CardTitle className="text-lg">Información de perfil</CardTitle>
            <CardDescription>Detalles de su cuenta y acceso al sistema</CardDescription>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="flex flex-col items-center space-y-4">
              <Avatar className="h-24 w-24">
                <AvatarFallback className="bg-yellow-100 text-yellow-800 text-xl">
                  {formData.nombre[0]?.toUpperCase() || "U"}
                </AvatarFallback>
              </Avatar>

<div className="text-center">
                <h3 className="text-lg font-medium">{`${formData.nombre} ${formData.apellido}`}</h3>
                <p className="text-sm text-muted-foreground">{formData.email}</p>
              </div>

<div className="w-full space-y-2 pt-4 border-t">
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Rol:</span>
                  <span className="text-sm font-medium">{usuarioActual.rol}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Sucursal:</span>
                  <span className="text-sm font-medium">{usuarioActual.sucursal}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Fecha de registro:</span>
                  <span className="text-sm font-medium">
                    {new Date(usuarioActual.fechaRegistro).toLocaleDateString()}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Último acceso:</span>
                  <span className="text-sm font-medium">{usuarioActual.ultimoAcceso}</span>
                </div>
              </div>

<Dialog open={showPasswordDialog} onOpenChange={setShowPasswordDialog}>
                <DialogTrigger asChild>
                  <Button variant="outline" className="w-full bg-transparent">
                    <Lock className="mr-2 h-4 w-4" />
                    Cambiar contraseña
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Cambiar contraseña</DialogTitle>
                    <DialogDescription>Ingrese su contraseña actual y la nueva contraseña</DialogDescription>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="space-y-2">
                      <Label htmlFor="currentPassword">Contraseña actual</Label>
                      <Input
                        id="currentPassword"
                        type="password"
                        value={passwordForm.currentPassword}
                        onChange={(e) => handlePasswordFormChange("currentPassword", e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="newPassword">Nueva contraseña</Label>
                      <Input
                        id="newPassword"
                        type="password"
                        value={passwordForm.newPassword}
                        onChange={(e) => handlePasswordFormChange("newPassword", e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="confirmPassword">Confirmar nueva contraseña</Label>
                      <Input
                        id="confirmPassword"
                        type="password"
                        value={passwordForm.confirmPassword}
                        onChange={(e) => handlePasswordFormChange("confirmPassword", e.target.value)}
                      />
                    </div>
                  </div>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setShowPasswordDialog(false)}>
                      Cancelar
                    </Button>
                    <Button
                      onClick={changePassword}
                      disabled={
                        !passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword
                      }
                      className="bg-yellow-500 hover:bg-yellow-600 text-black"
                    >
                      Guardar cambios
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </CardContent>
        </Card>

{/* Formulario de edición */}
        <Card className="md:col-span-3">
          <CardHeader>
            <CardTitle className="text-lg">Editar perfil</CardTitle>
            <CardDescription>Actualice su información personal</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4 pt-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre</Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => handleFormChange("nombre", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="apellido">Apellido</Label>
                  <Input
                    id="apellido"
                    value={formData.apellido}
                    onChange={(e) => handleFormChange("apellido", e.target.value)}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="email">Correo electrónico</Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleFormChange("email", e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="telefono">Teléfono</Label>
                <Input
                  id="telefono"
                  value={formData.telefono}
                  onChange={(e) => handleFormChange("telefono", e.target.value)}
                />
              </div>

<div className="pt-4">
                <Button onClick={saveProfileChanges} className="bg-yellow-500 hover:bg-yellow-600 text-black">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar cambios
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/usuarios/page.tsx" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import { Users, UserPlus, Shield, Pencil, Trash2, Search, Download, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/hooks/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Datos de ejemplo
const usuariosData = [
  {
    id: 1,
    nombre: "Juan",
    apellido: "Administrador",
    email: "admin@libreria-leon.com",
    telefono: "11-1234-5678",
    rol: "Administrador",
    estado: "Activo",
    sucursales: ["Centro", "Norte"],
  },
  {
    id: 2,
    nombre: "María",
    apellido: "Vendedora",
    email: "maria.vendedora@libreria-leon.com",
    telefono: "11-2345-6789",
    rol: "Vendedor",
    estado: "Activo",
    sucursales: ["Centro"],
  },
  {
    id: 3,
    nombre: "Carlos",
    apellido: "Pérez",
    email: "carlos.perez@libreria-leon.com",
    telefono: "11-3456-7890",
    rol: "Vendedor",
    estado: "Activo",
    sucursales: ["Norte", "Sur"],
  },
  {
    id: 4,
    nombre: "Ana",
    apellido: "Gerente",
    email: "ana.gerente@libreria-leon.com",
    telefono: "11-4567-8901",
    rol: "Gerente",
    estado: "Activo",
    sucursales: ["Centro", "Norte", "Sur"],
  },
  {
    id: 5,
    nombre: "Luis",
    apellido: "Almacén",
    email: "luis.almacen@libreria-leon.com",
    telefono: "11-5678-9012",
    rol: "Almacén",
    estado: "Inactivo",
    sucursales: ["Centro"],
  },
]

const sucursalesDisponibles = [
  { id: "centro", nombre: "Centro" },
  { id: "norte", nombre: "Norte" },
  { id: "sur", nombre: "Sur" },
]

export default function UsuariosPage() {
  const { toast } = useToast()
  const [usuarios, setUsuarios] = useState(usuariosData)
  const [searchTerm, setSearchTerm] = useState("")
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [selectedUser, setSelectedUser] = useState<any>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    apellido: "",
    email: "",
    telefono: "",
    rol: "",
    estado: true,
    sucursales: [] as string[],
  })

// Filtrar usuarios basados en la búsqueda
  const filteredUsuarios = usuarios.filter(
    (usuario) =>
      usuario.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      usuario.apellido.toLowerCase().includes(searchTerm.toLowerCase()) ||
      usuario.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      usuario.rol.toLowerCase().includes(searchTerm.toLowerCase()),
  )

// Manejar cambios en el formulario
  const handleFormChange = (field: string, value: any) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

// Manejar selección de sucursales
  const handleSucursalChange = (sucursalId: string, checked: boolean) => {
    const sucursalNombre = sucursalesDisponibles.find((s) => s.id === sucursalId)?.nombre || sucursalId
    if (checked) {
      setFormData({
        ...formData,
        sucursales: [...formData.sucursales, sucursalNombre],
      })
    } else {
      setFormData({
        ...formData,
        sucursales: formData.sucursales.filter((s) => s !== sucursalNombre),
      })
    }
  }

// Abrir diálogo de edición
  const openEditDialog = (usuario: any) => {
    setSelectedUser(usuario)
    setFormData({
      nombre: usuario.nombre,
      apellido: usuario.apellido,
      email: usuario.email,
      telefono: usuario.telefono,
      rol: usuario.rol,
      estado: usuario.estado === "Activo",
      sucursales: usuario.sucursales || [],
    })
    setShowEditDialog(true)
  }

// Abrir diálogo de eliminación
  const openDeleteDialog = (usuario: any) => {
    setSelectedUser(usuario)
    setShowDeleteDialog(true)
  }

// Guardar usuario (nuevo o editado)
  const saveUser = () => {
    // Validar que se haya seleccionado al menos una sucursal
    if (formData.sucursales.length === 0) {
      toast({
        title: "Error",
        description: "Debe seleccionar al menos una sucursal",
        variant: "destructive",
      })
      return
    }

if (showAddDialog) {
      // Agregar nuevo usuario
      const newUser = {
        id: usuarios.length + 1,
        nombre: formData.nombre,
        apellido: formData.apellido,
        email: formData.email,
        telefono: formData.telefono,
        rol: formData.rol,
        estado: "Activo", // Siempre activo
        sucursales: formData.sucursales,
      }
      setUsuarios([...usuarios, newUser])
      toast({
        title: "Usuario creado",
        description: "El usuario ha sido creado exitosamente",
      })
      setShowAddDialog(false)
    } else if (showEditDialog && selectedUser) {
      // Editar usuario existente
      const updatedUsers = usuarios.map((user) =>
        user.id === selectedUser.id
          ? {
              ...user,
              nombre: formData.nombre,
              apellido: formData.apellido,
              email: formData.email,
              telefono: formData.telefono,
              rol: formData.rol,
              estado: formData.estado ? "Activo" : "Inactivo",
              sucursales: formData.sucursales,
            }
          : user,
      )
      setUsuarios(updatedUsers)
      toast({
        title: "Usuario actualizado",
        description: "El usuario ha sido actualizado exitosamente",
      })
      setShowEditDialog(false)
    }

// Resetear formulario
    resetForm()
  }

// Eliminar usuario
  const deleteUser = () => {
    if (selectedUser) {
      const updatedUsers = usuarios.filter((user) => user.id !== selectedUser.id)
      setUsuarios(updatedUsers)
      toast({
        title: "Usuario eliminado",
        description: "El usuario ha sido eliminado exitosamente",
      })
      setShowDeleteDialog(false)
    }
  }

// Resetear formulario
  const resetForm = () => {
    setFormData({
      nombre: "",
      apellido: "",
      email: "",
      telefono: "",
      rol: "",
      estado: true,
      sucursales: [],
    })
  }

// Función para refrescar los datos (simulación)
  const refreshData = () => {
    // Simular la recarga de datos (aquí iría la llamada a la API)
    toast({
      title: "Datos actualizados",
      description: "Los datos de usuarios se han actualizado",
    })
    // En un entorno real, aquí se actualizaría el estado 'usuarios' con los nuevos datos
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Usuarios</h1>
          <p className="text-muted-foreground">Administre los usuarios del sistema y sus permisos</p>
        </div>
        <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
          <DialogTrigger asChild>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <UserPlus className="mr-2 h-4 w-4" />
              Nuevo usuario
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Crear nuevo usuario</DialogTitle>
              <DialogDescription>Complete los datos para crear un nuevo usuario del sistema</DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre</Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => handleFormChange("nombre", e.target.value)}
                    placeholder="Ingrese el nombre"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="apellido">Apellido</Label>
                  <Input
                    id="apellido"
                    value={formData.apellido}
                    onChange={(e) => handleFormChange("apellido", e.target.value)}
                    placeholder="Ingrese el apellido"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Correo electrónico</Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleFormChange("email", e.target.value)}
                  placeholder="usuario@libreria-leon.com"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="telefono">Teléfono</Label>
                <Input
                  id="telefono"
                  value={formData.telefono}
                  onChange={(e) => handleFormChange("telefono", e.target.value)}
                  placeholder="11-1234-5678"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="rol">Rol</Label>
                <Select value={formData.rol} onValueChange={(value) => handleFormChange("rol", value)}>
                  <SelectTrigger id="rol">
                    <SelectValue placeholder="Seleccione un rol" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Administrador">Administrador</SelectItem>
                    <SelectItem value="Gerente">Gerente</SelectItem>
                    <SelectItem value="Vendedor">Vendedor</SelectItem>
                    <SelectItem value="Almacén">Almacén</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Sucursales asignadas</Label>
                <div className="grid grid-cols-2 gap-2">
                  {sucursalesDisponibles.map((sucursal) => (
                    <div key={sucursal.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={sucursal.id}
                        checked={formData.sucursales.includes(sucursal.nombre)}
                        onCheckedChange={(checked) => handleSucursalChange(sucursal.id, checked as boolean)}
                      />
                      <Label htmlFor={sucursal.id} className="text-sm font-normal">
                        {sucursal.nombre}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button
                variant="outline"
                onClick={() => {
                  resetForm()
                  setShowAddDialog(false)
                }}
              >
                Cancelar
              </Button>
              <Button
                onClick={saveUser}
                className="bg-yellow-500 hover:bg-yellow-600 text-black"
                disabled={
                  !formData.nombre ||
                  !formData.apellido ||
                  !formData.email ||
                  !formData.telefono ||
                  !formData.rol ||
                  formData.sucursales.length === 0
                }
              >
                Guardar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center">
              <Users className="mr-2 h-5 w-5" />
              Usuarios del sistema
            </CardTitle>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  toast({
                    title: "Exportación exitosa",
                    description: "Los datos han sido exportados a Excel correctamente",
                  })
                }}
              >
                <Download className="mr-2 h-4 w-4" />
                Exportar a Excel
              </Button>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger>
                    <Button variant="ghost" size="icon" onClick={refreshData}>
                      <RefreshCw className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Refrescar</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
          <CardDescription>Gestione los usuarios y sus roles de acceso</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                type="search"
                placeholder="Buscar usuarios..."
                className="pl-8"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[50px]">ID</TableHead>
                  <TableHead>Nombre</TableHead>
                  <TableHead>Email</TableHead>
                  <TableHead>Teléfono</TableHead>
                  <TableHead>Rol</TableHead>
                  <TableHead>Sucursales</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredUsuarios.map((usuario) => (
                  <TableRow key={usuario.id}>
                    <TableCell>{usuario.id}</TableCell>
                    <TableCell className="font-medium">
                      {usuario.apellido}, {usuario.nombre}
                    </TableCell>
                    <TableCell>{usuario.email}</TableCell>
                    <TableCell>{usuario.telefono}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        <Shield className="mr-2 h-4 w-4 text-yellow-500" />
                        {usuario.rol}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        {usuario.sucursales.map((sucursal, index) => (
                          <Badge key={index} variant="outline" className="text-xs">
                            {sucursal}
                          </Badge>
                        ))}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant={usuario.estado === "Activo" ? "default" : "secondary"}
                        className={
                          usuario.estado === "Activo" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                        }
                      >
                        {usuario.estado}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button variant="ghost" size="sm" onClick={() => openEditDialog(usuario)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-red-500"
                          onClick={() => openDeleteDialog(usuario)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de edición */}
      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Editar usuario</DialogTitle>
            <DialogDescription>Modifique los datos del usuario</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-nombre">Nombre</Label>
                <Input
                  id="edit-nombre"
                  value={formData.nombre}
                  onChange={(e) => handleFormChange("nombre", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-apellido">Apellido</Label>
                <Input
                  id="edit-apellido"
                  value={formData.apellido}
                  onChange={(e) => handleFormChange("apellido", e.target.value)}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-email">Correo electrónico</Label>
              <Input
                id="edit-email"
                type="email"
                value={formData.email}
                onChange={(e) => handleFormChange("email", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-telefono">Teléfono</Label>
              <Input
                id="edit-telefono"
                value={formData.telefono}
                onChange={(e) => handleFormChange("telefono", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-rol">Rol</Label>
              <Select value={formData.rol} onValueChange={(value) => handleFormChange("rol", value)}>
                <SelectTrigger id="edit-rol">
                  <SelectValue placeholder="Seleccione un rol" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Administrador">Administrador</SelectItem>
                  <SelectItem value="Gerente">Gerente</SelectItem>
                  <SelectItem value="Vendedor">Vendedor</SelectItem>
                  <SelectItem value="Almacén">Almacén</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Sucursales asignadas</Label>
              <div className="grid grid-cols-2 gap-2">
                {sucursalesDisponibles.map((sucursal) => (
                  <div key={sucursal.id} className="flex items-center space-x-2">
                    <Checkbox
                      id={`edit-${sucursal.id}`}
                      checked={formData.sucursales.includes(sucursal.nombre)}
                      onCheckedChange={(checked) => handleSucursalChange(sucursal.id, checked as boolean)}
                    />
                    <Label htmlFor={`edit-${sucursal.id}`} className="text-sm font-normal">
                      {sucursal.nombre}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="edit-estado">Usuario activo</Label>
              <Switch
                id="edit-estado"
                checked={formData.estado}
                onCheckedChange={(checked) => handleFormChange("estado", checked)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                resetForm()
                setShowEditDialog(false)
              }}
            >
              Cancelar
            </Button>
            <Button
              onClick={saveUser}
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
              disabled={
                !formData.nombre ||
                !formData.apellido ||
                !formData.email ||
                !formData.telefono ||
                !formData.rol ||
                formData.sucursales.length === 0
              }
            >
              Guardar cambios
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import {
  Plus,
  Search,
  RefreshCw,
  FileSpreadsheet,
  MoreHorizontal,
  Eye,
  Edit,
  Trash,
  ShoppingCart,
  Copy,
} from "lucide-react"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { useToast } from "@/components/ui/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Datos de ejemplo para presupuestos
const presupuestosData = [
  {
    id: "P-2023-001",
    fecha: new Date(2023, 9, 15),
    cliente: { id: 1, nombre: "Juan Pérez", dni: "12345678" },
    total: 12500,
    items: 5,
    estado: "pendiente",
    validez: 15, // días
  },
  {
    id: "P-2023-002",
    fecha: new Date(2023, 9, 18),
    cliente: { id: 2, nombre: "María González", dni: "23456789" },
    total: 8750,
    items: 3,
    estado: "aprobado",
    validez: 15,
  },
  {
    id: "P-2023-003",
    fecha: new Date(2023, 9, 20),
    cliente: { id: 3, nombre: "Carlos Rodríguez", dni: "34567890" },
    total: 15200,
    items: 7,
    estado: "vencido",
    validez: 15,
  },
  {
    id: "P-2023-004",
    fecha: new Date(2023, 9, 22),
    cliente: { id: 4, nombre: "Ana Martínez", dni: "45678901" },
    total: 5300,
    items: 2,
    estado: "rechazado",
    validez: 15,
  },
  {
    id: "P-2023-005",
    fecha: new Date(2023, 9, 25),
    cliente: { id: 5, nombre: "Luis Sánchez", dni: "56789012" },
    total: 9800,
    items: 4,
    estado: "convertido",
    validez: 15,
  },
]

export default function PresupuestosPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { toast } = useToast()

const [presupuestos, setPresupuestos] = useState(presupuestosData)
  const [searchTerm, setSearchTerm] = useState("")
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [presupuestoToDelete, setPresupuestoToDelete] = useState<string | null>(null)
  const [showViewDialog, setShowViewDialog] = useState(false)
  const [selectedPresupuesto, setSelectedPresupuesto] = useState<any>(null)

// Filtrar presupuestos según el término de búsqueda
  const filteredPresupuestos = presupuestos.filter(
    (presupuesto) =>
      presupuesto.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      presupuesto.cliente.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      presupuesto.cliente.dni.includes(searchTerm),
  )

// Función para refrescar la lista de presupuestos
  const refreshPresupuestos = () => {
    toast({
      title: "Actualizando presupuestos",
      description: "Obteniendo datos más recientes...",
    })

setTimeout(() => {
      // Simulación de actualización de datos
      const updatedPresupuestos = [...presupuestosData].map((p) => ({
        ...p,
        total: p.total + Math.floor(Math.random() * 500) - 250,
      }))

setPresupuestos(updatedPresupuestos)

toast({
        title: "Datos actualizados",
        description: "Lista de presupuestos actualizada correctamente",
        variant: "success",
      })
    }, 1000)
  }

// Función para exportar a Excel
  const exportToExcel = () => {
    toast({
      title: "Exportando datos",
      description: "Preparando archivo Excel para descargar...",
    })

setTimeout(() => {
      toast({
        title: "Exportación completada",
        description: "El archivo ha sido descargado correctamente",
        variant: "success",
      })
    }, 1500)
  }

// Función para eliminar un presupuesto
  const handleDeletePresupuesto = () => {
    if (!presupuestoToDelete) return

toast({
      title: "Eliminando presupuesto",
      description: `Eliminando presupuesto ${presupuestoToDelete}...`,
    })

setTimeout(() => {
      setPresupuestos(presupuestos.filter((p) => p.id !== presupuestoToDelete))
      setDeleteDialogOpen(false)
      setPresupuestoToDelete(null)

toast({
        title: "Presupuesto eliminado",
        description: "El presupuesto ha sido eliminado correctamente",
        variant: "success",
      })
    }, 1000)
  }

// Función para convertir presupuesto a venta
  const convertToVenta = (presupuestoId: string) => {
    toast({
      title: "Convirtiendo a venta",
      description: `Convirtiendo presupuesto ${presupuestoId} a venta...`,
    })

setTimeout(() => {
      setPresupuestos(presupuestos.map((p) => (p.id === presupuestoId ? { ...p, estado: "convertido" } : p)))

toast({
        title: "Conversión completada",
        description: "El presupuesto ha sido convertido a venta correctamente",
        variant: "success",
      })
    }, 1000)
  }

// Función para duplicar presupuesto
  const duplicatePresupuesto = (presupuestoId: string) => {
    const presupuestoToDuplicate = presupuestos.find((p) => p.id === presupuestoId)
    if (!presupuestoToDuplicate) return

toast({
      title: "Duplicando presupuesto",
      description: `Creando copia del presupuesto ${presupuestoId}...`,
    })

setTimeout(() => {
      const newId = `P-2023-${String(presupuestos.length + 1).padStart(3, "0")}`
      const newPresupuesto = {
        ...presupuestoToDuplicate,
        id: newId,
        fecha: new Date(),
        estado: "pendiente",
      }

setPresupuestos([...presupuestos, newPresupuesto])

toast({
        title: "Presupuesto duplicado",
        description: `Se ha creado el presupuesto ${newId}`,
        variant: "success",
      })
    }, 1000)
  }

// Función para abrir el diálogo de ver detalles
  const openViewDialog = (presupuesto: any) => {
    setSelectedPresupuesto(presupuesto)
    setShowViewDialog(true)
  }

// Función para obtener el color de la badge según el estado
  const getEstadoBadgeColor = (estado: string) => {
    switch (estado) {
      case "pendiente":
        return "bg-yellow-100 text-yellow-800 hover:bg-yellow-100"
      case "aprobado":
        return "bg-green-100 text-green-800 hover:bg-green-100"
      case "vencido":
        return "bg-gray-100 text-gray-800 hover:bg-gray-100"
      case "rechazado":
        return "bg-red-100 text-red-800 hover:bg-red-100"
      case "convertido":
        return "bg-blue-100 text-blue-800 hover:bg-blue-100"
      default:
        return "bg-gray-100 text-gray-800 hover:bg-gray-100"
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Presupuestos</h1>
          <p className="text-muted-foreground">Gestiona los presupuestos para tus clientes</p>
        </div>
        <Button
          className="bg-yellow-500 hover:bg-yellow-600 text-black"
          onClick={() => router.push("/dashboard/presupuestos/nuevo")}
        >
          <Plus className="mr-2 h-4 w-4" />
          Nuevo Presupuesto
        </Button>
      </div>

<Card>
        <CardHeader className="pb-3">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <CardTitle>Lista de Presupuestos</CardTitle>
              <CardDescription>{filteredPresupuestos.length} presupuestos encontrados</CardDescription>
            </div>
            <div className="flex flex-col sm:flex-row gap-2">
              <div className="relative w-full sm:w-[300px]">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar presupuestos..."
                  className="pl-8 w-full"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <div className="flex gap-2">
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline" size="icon" onClick={refreshPresupuestos}>
                        <RefreshCw className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline" size="icon" onClick={exportToExcel}>
                        <FileSpreadsheet className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Exportar a Excel</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="py-3 px-4 text-left font-medium">Nº Presupuesto</th>
                  <th className="py-3 px-4 text-left font-medium">Fecha</th>
                  <th className="py-3 px-4 text-left font-medium">Cliente</th>
                  <th className="py-3 px-4 text-left font-medium">Items</th>
                  <th className="py-3 px-4 text-left font-medium">Total</th>
                  <th className="py-3 px-4 text-left font-medium">Estado</th>
                  <th className="py-3 px-4 text-left font-medium">Acciones</th>
                </tr>
              </thead>
              <tbody>
                {filteredPresupuestos.length > 0 ? (
                  filteredPresupuestos.map((presupuesto) => (
                    <tr key={presupuesto.id} className="border-b">
                      <td className="py-3 px-4 font-medium">{presupuesto.id}</td>
                      <td className="py-3 px-4">{format(presupuesto.fecha, "dd/MM/yyyy", { locale: es })}</td>
                      <td className="py-3 px-4">
                        <div>
                          <div>{presupuesto.cliente.nombre}</div>
                          <div className="text-xs text-muted-foreground">DNI: {presupuesto.cliente.dni}</div>
                        </div>
                      </td>
                      <td className="py-3 px-4">{presupuesto.items}</td>
                      <td className="py-3 px-4 font-medium">${presupuesto.total.toLocaleString()}</td>
                      <td className="py-3 px-4">
                        <Badge className={getEstadoBadgeColor(presupuesto.estado)} variant="outline">
                          {presupuesto.estado.charAt(0).toUpperCase() + presupuesto.estado.slice(1)}
                        </Badge>
                      </td>
                      <td className="py-3 px-4">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => openViewDialog(presupuesto)}>
                              <Eye className="mr-2 h-4 w-4" />
                              Ver detalles
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => router.push(`/dashboard/presupuestos/${presupuesto.id}/editar`)}
                            >
                              <Edit className="mr-2 h-4 w-4" />
                              Editar
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => duplicatePresupuesto(presupuesto.id)}>
                              <Copy className="mr-2 h-4 w-4" />
                              Duplicar
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            {presupuesto.estado !== "convertido" && (
                              <DropdownMenuItem onClick={() => convertToVenta(presupuesto.id)}>
                                <ShoppingCart className="mr-2 h-4 w-4" />
                                Convertir a venta
                              </DropdownMenuItem>
                            )}
                            <DropdownMenuItem
                              className="text-red-600"
                              onClick={() => {
                                setPresupuestoToDelete(presupuesto.id)
                                setDeleteDialogOpen(true)
                              }}
                            >
                              <Trash className="mr-2 h-4 w-4" />
                              Eliminar
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={7} className="py-6 text-center text-muted-foreground">
                      No se encontraron presupuestos
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de ver detalles del presupuesto */}
      <Dialog open={showViewDialog} onOpenChange={setShowViewDialog}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Detalles del Presupuesto</DialogTitle>
            <DialogDescription>
              Presupuesto {selectedPresupuesto?.id} - {selectedPresupuesto?.cliente.nombre}
            </DialogDescription>
          </DialogHeader>
          {selectedPresupuesto && (
            <div className="py-4 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Cliente</p>
                  <p className="font-medium">{selectedPresupuesto.cliente.nombre}</p>
                  <p className="text-sm text-muted-foreground">DNI: {selectedPresupuesto.cliente.dni}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Fecha</p>
                  <p className="font-medium">{format(selectedPresupuesto.fecha, "dd/MM/yyyy", { locale: es })}</p>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Total</p>
                  <p className="font-medium text-lg">${selectedPresupuesto.total.toLocaleString()}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Estado</p>
                  <Badge className={getEstadoBadgeColor(selectedPresupuesto.estado)} variant="outline">
                    {selectedPresupuesto.estado.charAt(0).toUpperCase() + selectedPresupuesto.estado.slice(1)}
                  </Badge>
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">Cantidad de items</p>
                <p className="font-medium">{selectedPresupuesto.items} productos</p>
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">Validez</p>
                <p className="font-medium">{selectedPresupuesto.validez} días</p>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowViewDialog(false)}>
              Cerrar
            </Button>
            <Button
              onClick={() => {
                setShowViewDialog(false)
                // Use setTimeout to ensure the dialog closes before navigation
                setTimeout(() => {
                  router.push(`/dashboard/presupuestos/editar/${selectedPresupuesto?.id}`)
                }, 100)
              }}
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
            >
              Editar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de confirmación para eliminar presupuesto */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>¿Estás seguro?</DialogTitle>
            <DialogDescription>
              Esta acción no se puede deshacer. Esto eliminará permanentemente el presupuesto {presupuestoToDelete} y
              todos sus datos asociados.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={handleDeletePresupuesto}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" isLocked="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  LayoutDashboard,
  Package,
  Users,
  ShoppingCart,
  FileText,
  Settings,
  Menu,
  UserCheck,
  Building2,
  Truck,
  Tag,
  Percent,
  Warehouse,
  BarChart3,
  CreditCard,
  Activity,
  LogOut,
  User,
  Bell,
  Search,
  Tags,
  BookOpen,
} from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuGroup,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Suspense } from "react"
import { Badge } from "@/components/ui/badge"

const navigation = [
  {
    name: "Dashboard",
    href: "/dashboard",
    icon: LayoutDashboard,
  },
  {
    name: "Productos",
    href: "/dashboard/productos",
    icon: Package,
  },
  {
    name: "Marcas",
    href: "/dashboard/marcas",
    icon: Tags,
  },
  {
    name: "Categorías",
    href: "/dashboard/categorias",
    icon: Tag,
  },
  {
    name: "Clientes",
    href: "/dashboard/clientes",
    icon: Users,
  },
  {
    name: "Cat. Clientes",
    href: "/dashboard/categorias-clientes",
    icon: UserCheck,
  },
  {
    name: "Proveedores",
    href: "/dashboard/proveedores",
    icon: Truck,
  },
  {
    name: "Ventas",
    href: "/dashboard/ventas",
    icon: ShoppingCart,
  },
  {
    name: "Presupuestos",
    href: "/dashboard/presupuestos",
    icon: FileText,
  },
  {
    name: "Depósitos",
    href: "/dashboard/depositos",
    icon: Warehouse,
  },
  {
    name: "Promociones",
    href: "/dashboard/promociones",
    icon: Percent,
  },
  {
    name: "Caja",
    href: "/dashboard/caja",
    icon: CreditCard,
  },
  {
    name: "Reportes",
    href: "/dashboard/reportes",
    icon: BarChart3,
  },
  {
    name: "Actividades",
    href: "/dashboard/actividades",
    icon: Activity,
  },
  {
    name: "Sucursales",
    href: "/dashboard/sucursales",
    icon: Building2,
  },
  {
    name: "Usuarios",
    href: "/dashboard/usuarios",
    icon: Settings,
  },
]

// Datos de ejemplo para notificaciones
const notificaciones = [
  {
    id: 1,
    tipo: "stock",
    titulo: "Stock bajo",
    mensaje: "El señor de los anillos - Solo quedan 3 unidades",
    detalles: { codigo: "LIB004", stock: 3, deposito: "Centro" },
    fecha: "Hace 2 horas",
    leido: false,
  },
  {
    id: 2,
    tipo: "stock",
    titulo: "Stock crítico",
    mensaje: "Cien años de soledad - Solo quedan 2 unidades",
    detalles: { codigo: "LIB002", stock: 2, deposito: "Norte" },
    fecha: "Hace 3 horas",
    leido: false,
  },
  {
    id: 3,
    tipo: "venta",
    titulo: "Venta completada",
    mensaje: "Venta #1248 por $4,500 - Cliente: María González",
    detalles: { vendedor: "María González", monto: 4500 },
    fecha: "Hace 30 minutos",
    leido: false,
  },
  {
    id: 4,
    tipo: "sistema",
    titulo: "Respaldo completado",
    mensaje: "Respaldo automático de datos completado exitosamente",
    detalles: { version: "2.3.0" },
    fecha: "Hace 1 hora",
    leido: true,
  },
  {
    id: 5,
    tipo: "proveedor",
    titulo: "Pedido recibido",
    mensaje: "Pedido #45 de Editorial Planeta - 15 productos",
    detalles: { productos: 15, proveedor: "Editorial Planeta" },
    fecha: "Hace 5 horas",
    leido: false,
  },
]

// Datos de ejemplo para búsqueda rápida
const productosData = [
  {
    id: 1,
    codigo: "LIB001",
    nombre: "El principito",
    precio: 1500,
    stock: 10,
    categoria: "Literatura",
  },
  {
    id: 2,
    codigo: "LIB002",
    nombre: "Cien años de soledad",
    precio: 2200,
    stock: 5,
    categoria: "Literatura",
  },
  {
    id: 3,
    codigo: "LIB003",
    nombre: "Harry Potter y la piedra filosofal",
    precio: 1800,
    stock: 8,
    categoria: "Fantasía",
  },
  {
    id: 4,
    codigo: "LIB004",
    nombre: "Don Quijote de la Mancha",
    precio: 2500,
    stock: 3,
    categoria: "Clásicos",
  },
  {
    id: 5,
    codigo: "LIB005",
    nombre: "1984",
    precio: 1900,
    stock: 12,
    categoria: "Ficción",
  },
]

const clientesData = [
  {
    id: 1,
    nombre: "Juan Pérez",
    email: "juan.perez@email.com",
    telefono: "+54 11 1234-5678",
    categoria: "Minorista",
    tipo: "Persona Física",
  },
  {
    id: 2,
    nombre: "Librería González S.A.",
    email: "ventas@libreriagonzalez.com",
    telefono: "+54 11 2345-6789",
    categoria: "Mayorista",
    tipo: "Empresa",
  },
  {
    id: 3,
    nombre: "Carlos Rodríguez",
    email: "carlos.rodriguez@email.com",
    telefono: "+54 11 3456-7890",
    categoria: "Librería",
    tipo: "Persona Física",
  },
  {
    id: 4,
    nombre: "Escuela San Martín",
    email: "compras@escuelasanmartin.edu.ar",
    telefono: "+54 11 4567-8901",
    categoria: "Institución",
    tipo: "Empresa",
  },
  {
    id: 5,
    nombre: "María González",
    email: "maria.gonzalez@email.com",
    telefono: "+54 11 5678-9012",
    categoria: "Minorista",
    tipo: "Persona Física",
  },
]

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [searchResults, setSearchResults] = useState<{
    productos: any[]
    clientes: any[]
  }>({ productos: [], clientes: [] })
  const [showSearchResults, setShowSearchResults] = useState(false)

// Función de búsqueda
  const handleSearch = (term: string) => {
    setSearchTerm(term)

if (!term.trim()) {
      setSearchResults({ productos: [], clientes: [] })
      setShowSearchResults(false)
      return
    }

const searchLower = term.toLowerCase()

// Buscar productos
    const productos = productosData
      .filter(
        (producto) =>
          producto.nombre.toLowerCase().includes(searchLower) ||
          producto.codigo.toLowerCase().includes(searchLower) ||
          producto.categoria.toLowerCase().includes(searchLower),
      )
      .slice(0, 5) // Limitar a 5 resultados

// Buscar clientes
    const clientes = clientesData
      .filter(
        (cliente) =>
          cliente.nombre.toLowerCase().includes(searchLower) ||
          cliente.email.toLowerCase().includes(searchLower) ||
          cliente.categoria.toLowerCase().includes(searchLower),
      )
      .slice(0, 5) // Limitar a 5 resultados

setSearchResults({ productos, clientes })
    setShowSearchResults(productos.length > 0 || clientes.length > 0)
  }

// Cerrar resultados cuando se hace clic fuera
  useEffect(() => {
    const handleClickOutside = () => {
      setShowSearchResults(false)
    }

if (showSearchResults) {
      document.addEventListener("click", handleClickOutside)
      return () => document.removeEventListener("click", handleClickOutside)
    }
  }, [showSearchResults])

const SidebarContent = () => (
    <div className="flex h-full flex-col">
      <div className="flex h-16 items-center border-b px-4">
        <Link href="/dashboard" className="flex items-center space-x-2">
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-yellow-400">
            <BookOpen className="w-4 h-4 text-black" />
          </div>
          <span className="font-bold text-lg">Librería León</span>
        </Link>
      </div>
      <ScrollArea className="flex-1 px-3 py-4">
        <nav className="space-y-1">
          {navigation.map((item) => {
            const isActive = pathname === item.href
            return (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  "flex items-center space-x-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  isActive ? "bg-yellow-100 text-yellow-900" : "text-gray-700 hover:bg-gray-100 hover:text-gray-900",
                )}
                onClick={() => setSidebarOpen(false)}
              >
                <item.icon className="h-4 w-4" />
                <span>{item.name}</span>
              </Link>
            )
          })}
        </nav>
      </ScrollArea>
    </div>
  )

return (
    <Suspense fallback={<div>Loading...</div>}>
      <div className="flex h-screen bg-gray-50">
        {/* Sidebar para desktop */}
        <div className="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
          <div className="flex flex-col flex-grow bg-white border-r border-gray-200 overflow-y-auto">
            <SidebarContent />
          </div>
        </div>

{/* Sidebar móvil */}
        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
          <SheetContent side="left" className="p-0 w-64">
            <SidebarContent />
          </SheetContent>
        </Sheet>

{/* Contenido principal */}
        <div className="flex flex-col flex-1 lg:pl-64">
          {/* Header */}
          <header className="bg-white border-b border-gray-200 px-4 py-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
                  <SheetTrigger asChild>
                    <Button variant="ghost" size="icon" className="lg:hidden">
                      <Menu className="h-5 w-5" />
                    </Button>
                  </SheetTrigger>
                </Sheet>

<div className="relative hidden md:block">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar productos, clientes..."
                    className="pl-8 w-64"
                    value={searchTerm}
                    onChange={(e) => handleSearch(e.target.value)}
                    onClick={(e) => e.stopPropagation()}
                  />

{/* Resultados de búsqueda */}
                  {showSearchResults && (
                    <div
                      className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 max-h-96 overflow-y-auto"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {/* Productos */}
                      {searchResults.productos.length > 0 && (
                        <div className="p-2">
                          <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
                            <Package className="h-3 w-3" />
                            Productos
                          </div>
                          {searchResults.productos.map((producto) => (
                            <Link
                              key={`producto-${producto.id}`}
                              href="/dashboard/productos"
                              className="flex items-center gap-3 px-2 py-2 hover:bg-gray-50 rounded-md cursor-pointer"
                              onClick={() => {
                                setShowSearchResults(false)
                                setSearchTerm("")
                              }}
                            >
                              <div className="flex items-center justify-center w-8 h-8 bg-blue-100 rounded-md">
                                <Package className="h-4 w-4 text-blue-600" />
                              </div>
                              <div className="flex-1 min-w-0">
                                <div className="font-medium text-sm truncate">{producto.nombre}</div>
                                <div className="text-xs text-gray-500">
                                  {producto.codigo} • ${producto.precio.toLocaleString()} • Stock: {producto.stock}
                                </div>
                              </div>
                              <Badge variant="outline" className="text-xs">
                                {producto.categoria}
                              </Badge>
                            </Link>
                          ))}
                        </div>
                      )}

{/* Clientes */}
                      {searchResults.clientes.length > 0 && (
                        <div className="p-2 border-t border-gray-100">
                          <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
                            <Users className="h-3 w-3" />
                            Clientes
                          </div>
                          {searchResults.clientes.map((cliente) => (
                            <Link
                              key={`cliente-${cliente.id}`}
                              href="/dashboard/clientes"
                              className="flex items-center gap-3 px-2 py-2 hover:bg-gray-50 rounded-md cursor-pointer"
                              onClick={() => {
                                setShowSearchResults(false)
                                setSearchTerm("")
                              }}
                            >
                              <div className="flex items-center justify-center w-8 h-8 bg-green-100 rounded-md">
                                <User className="h-4 w-4 text-green-600" />
                              </div>
                              <div className="flex-1 min-w-0">
                                <div className="font-medium text-sm truncate">{cliente.nombre}</div>
                                <div className="text-xs text-gray-500">
                                  {cliente.email} • {cliente.telefono}
                                </div>
                              </div>
                              <Badge variant="outline" className="text-xs">
                                {cliente.categoria}
                              </Badge>
                            </Link>
                          ))}
                        </div>
                      )}

{/* Sin resultados */}
                      {searchResults.productos.length === 0 && searchResults.clientes.length === 0 && (
                        <div className="p-4 text-center text-gray-500">
                          <Search className="h-8 w-8 mx-auto mb-2 text-gray-300" />
                          <p className="text-sm">No se encontraron resultados para "{searchTerm}"</p>
                        </div>
                      )}

{/* Ver todos los resultados */}
                      {(searchResults.productos.length > 0 || searchResults.clientes.length > 0) && (
                        <div className="border-t border-gray-100 p-2">
                          <div className="text-center">
                            <button
                              className="text-xs text-blue-600 hover:text-blue-700 font-medium"
                              onClick={() => {
                                setShowSearchResults(false)
                                setSearchTerm("")
                              }}
                            >
                              Ver todos los resultados
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>

<div className="flex items-center space-x-4">
                {/* Botón de Nueva Venta - AQUÍ ESTÁ EL BOTÓN */}
                <Link href="/dashboard/ventas?nueva=true">
                  <Button className="bg-yellow-500 hover:bg-yellow-600 text-black font-medium">
                    <ShoppingCart className="mr-2 h-4 w-4" />
                    <span className="hidden sm:inline">Nueva Venta</span>
                    <span className="sm:hidden">Venta</span>
                  </Button>
                </Link>

{/* Notificaciones */}
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="relative">
                      <Bell className="h-5 w-5" />
                      <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-[10px] font-medium text-black">
                        {notificaciones.filter((n) => !n.leido).length}
                      </span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-80">
                    <DropdownMenuLabel>Notificaciones</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <div className="max-h-80 overflow-y-auto">
                      <DropdownMenuGroup>
                        {notificaciones.length > 0 ? (
                          notificaciones.slice(0, 6).map((notificacion) => (
                            <DropdownMenuItem
                              key={notificacion.id}
                              className={cn("cursor-pointer py-3 px-3", !notificacion.leido && "bg-yellow-50")}
                            >
                              <div className="flex items-start gap-3 w-full">
                                {notificacion.tipo === "stock" && (
                                  <Package className="h-5 w-5 text-red-500 mt-0.5 shrink-0" />
                                )}
                                {notificacion.tipo === "venta" && (
                                  <ShoppingCart className="h-5 w-5 text-green-500 mt-0.5 shrink-0" />
                                )}
                                {notificacion.tipo === "sistema" && (
                                  <Bell className="h-5 w-5 text-blue-500 mt-0.5 shrink-0" />
                                )}
                                {notificacion.tipo === "proveedor" && (
                                  <Truck className="h-5 w-5 text-purple-500 mt-0.5 shrink-0" />
                                )}
                                <div className="flex flex-col space-y-1 flex-1 min-w-0">
                                  <div className="font-medium text-sm">{notificacion.titulo}</div>
                                  <div className="text-xs text-muted-foreground line-clamp-2">
                                    {notificacion.mensaje}
                                  </div>
                                  <div className="text-xs text-muted-foreground mt-1">{notificacion.fecha}</div>
                                </div>
                                {!notificacion.leido && (
                                  <div className="w-2 h-2 bg-yellow-500 rounded-full mt-1 shrink-0"></div>
                                )}
                              </div>
                            </DropdownMenuItem>
                          ))
                        ) : (
                          <div className="px-3 py-4 text-center text-sm text-muted-foreground">
                            No hay notificaciones
                          </div>
                        )}
                      </DropdownMenuGroup>
                    </div>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild className="cursor-pointer">
                      <div className="flex justify-center font-medium text-yellow-600 hover:text-yellow-700">
                        Ver todas las notificaciones
                      </div>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>

{/* Menú de usuario */}
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                      <Avatar className="h-8 w-8">
                        <AvatarImage src="/placeholder.svg" alt="Usuario" />
                        <AvatarFallback>U</AvatarFallback>
                      </Avatar>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent className="w-56" align="end" forceMount>
                    <DropdownMenuLabel className="font-normal">
                      <div className="flex flex-col space-y-1">
                        <p className="text-sm font-medium leading-none">Usuario Admin</p>
                        <p className="text-xs leading-none text-muted-foreground">admin@libreria-leon.com</p>
                      </div>
                    </DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href="/dashboard/perfil">
                        <User className="mr-2 h-4 w-4" />
                        <span>Perfil</span>
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>
                      <LogOut className="mr-2 h-4 w-4" />
                      <span>Cerrar sesión</span>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
          </header>

{/* Contenido */}
          <main className="flex-1 overflow-y-auto p-6">{children}</main>
        </div>
      </div>
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/categorias-clientes/page.tsx" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import { Search, Plus, Pencil, Trash2, Filter, RefreshCw, Download, Tag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Datos de ejemplo para categorías de clientes
const categorias = [
  {
    id: 1,
    nombre: "VIP",
    descripcion: "Clientes con alto volumen de compras",
    color: "#FFD700", // Dorado
    descuento: 15,
    clientesAsignados: 8,
    status: "activo",
  },
  {
    id: 2,
    nombre: "Frecuente",
    descripcion: "Clientes que compran regularmente",
    color: "#4CAF50", // Verde
    descuento: 10,
    clientesAsignados: 24,
    status: "activo",
  },
  {
    id: 3,
    nombre: "Ocasional",
    descripcion: "Clientes que compran esporádicamente",
    color: "#2196F3", // Azul
    descuento: 5,
    clientesAsignados: 45,
    status: "inactivo",
  },
  {
    id: 4,
    nombre: "Nuevo",
    descripcion: "Clientes que realizaron su primera compra",
    color: "#9C27B0", // Púrpura
    descuento: 8,
    clientesAsignados: 12,
    status: "activo",
  },
  {
    id: 5,
    nombre: "Corporativo",
    descripcion: "Empresas y organizaciones",
    color: "#F44336", // Rojo
    descuento: 20,
    clientesAsignados: 6,
    status: "activo",
  },
]

export default function CategoriasClientesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [selectedCategoria, setSelectedCategoria] = useState<any>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    descripcion: "",
    color: "#FFD700",
    descuento: 0,
    status: "activo",
  })

const { toast } = useToast()

// Filtrar categorías basadas en la búsqueda
  const filteredCategorias = categorias.filter(
    (categoria) =>
      categoria.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      categoria.descripcion.toLowerCase().includes(searchTerm.toLowerCase()),
  )

// Manejar cambios en el formulario
  const handleFormChange = (field: string, value: any) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

// Abrir diálogo de edición
  const openEditDialog = (categoria: any) => {
    setSelectedCategoria(categoria)
    setFormData({
      nombre: categoria.nombre,
      descripcion: categoria.descripcion,
      color: categoria.color,
      descuento: categoria.descuento,
      status: categoria.status,
    })
    setShowEditDialog(true)
  }

// Abrir diálogo de eliminación
  const openDeleteDialog = (categoria: any) => {
    setSelectedCategoria(categoria)
    setShowDeleteDialog(true)
  }

// Resetear formulario
  const resetForm = () => {
    setFormData({
      nombre: "",
      descripcion: "",
      color: "#FFD700",
      descuento: 0,
      status: "activo",
    })
  }

// Guardar categoría (nueva o editada)
  const saveCategoria = () => {
    // Aquí iría la lógica para guardar la categoría
    console.log("Guardando categoría:", formData)

toast({
      title: showAddDialog ? "Categoría creada" : "Categoría actualizada",
      description: `La categoría ${formData.nombre} ha sido ${showAddDialog ? "creada" : "actualizada"} correctamente.`,
    })

if (showAddDialog) {
      setShowAddDialog(false)
    } else if (showEditDialog) {
      setShowEditDialog(false)
    }

resetForm()
  }

// Eliminar categoría
  const deleteCategoria = () => {
    // Aquí iría la lógica para eliminar la categoría
    console.log("Eliminando categoría:", selectedCategoria)

toast({
      title: "Categoría eliminada",
      description: `La categoría ${selectedCategoria.nombre} ha sido eliminada correctamente.`,
    })

setShowDeleteDialog(false)
  }

// Refrescar listado de categorías
  const refreshCategorias = () => {
    // Aquí iría la lógica para recargar las categorías desde el servidor
    toast({
      title: "Listado actualizado",
      description: "La lista de categorías ha sido actualizada correctamente",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Categorías de Clientes</h1>
          <p className="text-muted-foreground">Gestione las categorías para clasificar a sus clientes</p>
        </div>
        <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
          <DialogTrigger asChild>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Plus className="mr-2 h-4 w-4" />
              Nueva categoría
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>Crear nueva categoría</DialogTitle>
              <DialogDescription>
                Complete los datos de la categoría. Haga clic en guardar cuando termine.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="nombre">Nombre de la categoría</Label>
                <Input
                  id="nombre"
                  value={formData.nombre}
                  onChange={(e) => handleFormChange("nombre", e.target.value)}
                  placeholder="Ej: VIP, Frecuente, Corporativo..."
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="descripcion">Descripción</Label>
                <Input
                  id="descripcion"
                  value={formData.descripcion}
                  onChange={(e) => handleFormChange("descripcion", e.target.value)}
                  placeholder="Breve descripción de la categoría"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="color">Color</Label>
                  <div className="flex items-center gap-2">
                    <Input
                      id="color"
                      type="color"
                      value={formData.color}
                      onChange={(e) => handleFormChange("color", e.target.value)}
                      className="w-16 h-10 p-1"
                    />
                    <div className="w-10 h-10 rounded-md border" style={{ backgroundColor: formData.color }}></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="descuento">Descuento (%)</Label>
                  <Input
                    id="descuento"
                    type="number"
                    min="0"
                    max="100"
                    value={formData.descuento}
                    onChange={(e) => handleFormChange("descuento", Number.parseInt(e.target.value) || 0)}
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="status">Estado</Label>
                <Select value={formData.status} onValueChange={(value) => handleFormChange("status", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccione el estado" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="activo">Activo</SelectItem>
                    <SelectItem value="inactivo">Inactivo</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowAddDialog(false)}>
                Cancelar
              </Button>
              <Button onClick={saveCategoria} className="bg-yellow-500 hover:bg-yellow-600 text-black">
                Guardar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center">
              <Tag className="mr-2 h-5 w-5" />
              Listado de categorías
            </CardTitle>
            <div className="flex space-x-2">
              <Button
                variant="outline"
                size="icon"
                onClick={refreshCategorias}
                className="h-9 w-9 bg-transparent"
                title="Refrescar listado"
              >
                <RefreshCw className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                onClick={() => {
                  toast({
                    title: "Exportación exitosa",
                    description: "Los datos de categorías han sido exportados a Excel correctamente",
                  })
                }}
              >
                <Download className="mr-2 h-4 w-4" />
                Exportar a Excel
              </Button>
            </div>
          </div>
          <CardDescription>Administre las categorías para clasificar a sus clientes</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar por nombre o descripción..."
                  className="pl-8"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
            </div>

<div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px]">ID</TableHead>
                    <TableHead className="w-[180px]">Nombre</TableHead>
                    <TableHead>Descripción</TableHead>
                    <TableHead className="w-[100px]">Color</TableHead>
                    <TableHead className="w-[100px]">Descuento</TableHead>
                    <TableHead className="w-[120px]">Clientes</TableHead>
                    <TableHead className="w-[100px]">Estado</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredCategorias.map((categoria) => (
                    <TableRow key={categoria.id}>
                      <TableCell className="font-medium">{categoria.id}</TableCell>
                      <TableCell>
                        <div className="font-medium">{categoria.nombre}</div>
                      </TableCell>
                      <TableCell>{categoria.descripcion}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <div
                            className="w-6 h-6 rounded-full border"
                            style={{ backgroundColor: categoria.color }}
                          ></div>
                          <span className="text-xs">{categoria.color}</span>
                        </div>
                      </TableCell>
                      <TableCell>{categoria.descuento}%</TableCell>
                      <TableCell>
                        <Badge variant="outline" className="bg-gray-100">
                          {categoria.clientesAsignados} clientes
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant={categoria.status === "activo" ? "default" : "secondary"}
                          className={
                            categoria.status === "activo" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                          }
                        >
                          {categoria.status === "activo" ? "Activo" : "Inactivo"}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="icon" onClick={() => openEditDialog(categoria)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-red-500"
                            onClick={() => openDeleteDialog(categoria)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de edición */}
      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Editar categoría</DialogTitle>
            <DialogDescription>
              Modifique los datos de la categoría. Haga clic en guardar cuando termine.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="edit-nombre">Nombre de la categoría</Label>
              <Input
                id="edit-nombre"
                value={formData.nombre}
                onChange={(e) => handleFormChange("nombre", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-descripcion">Descripción</Label>
              <Input
                id="edit-descripcion"
                value={formData.descripcion}
                onChange={(e) => handleFormChange("descripcion", e.target.value)}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-color">Color</Label>
                <div className="flex items-center gap-2">
                  <Input
                    id="edit-color"
                    type="color"
                    value={formData.color}
                    onChange={(e) => handleFormChange("color", e.target.value)}
                    className="w-16 h-10 p-1"
                  />
                  <div className="w-10 h-10 rounded-md border" style={{ backgroundColor: formData.color }}></div>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-descuento">Descuento (%)</Label>
                <Input
                  id="edit-descuento"
                  type="number"
                  min="0"
                  max="100"
                  value={formData.descuento}
                  onChange={(e) => handleFormChange("descuento", Number.parseInt(e.target.value) || 0)}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-status">Estado</Label>
              <Select value={formData.status} onValueChange={(value) => handleFormChange("status", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione el estado" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="activo">Activo</SelectItem>
                  <SelectItem value="inactivo">Inactivo</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={saveCategoria} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Guardar cambios
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de eliminación */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar eliminación</DialogTitle>
            <DialogDescription>
              ¿Está seguro que desea eliminar esta categoría? Esta acción no se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {selectedCategoria && (
              <div className="p-4 border rounded-md bg-muted">
                <div className="font-medium">{selectedCategoria.nombre}</div>
                <div className="text-sm text-muted-foreground">{selectedCategoria.descripcion}</div>
                <div className="mt-2 text-sm">
                  <span className="font-medium">Clientes asignados:</span> {selectedCategoria.clientesAsignados}
                </div>
                <div className="mt-1 text-sm">
                  <span className="font-medium">Estado:</span>
                  <Badge
                    variant={selectedCategoria.status === "activo" ? "default" : "secondary"}
                    className={`ml-2 ${selectedCategoria.status === "activo" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                  >
                    {selectedCategoria.status === "activo" ? "Activo" : "Inactivo"}
                  </Badge>
                </div>
              </div>
            )}
            {selectedCategoria && selectedCategoria.clientesAsignados > 0 && (
              <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md text-sm text-yellow-800">
                <strong>Advertencia:</strong> Esta categoría tiene {selectedCategoria.clientesAsignados} clientes
                asignados. Al eliminarla, estos clientes perderán su categoría.
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteDialog(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={deleteCategoria}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true" isLocked="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/categorias/page.tsx" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import { Tag, Plus, Pencil, Trash2, Download, RefreshCw, ArrowUpDown, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { toast } from "@/components/ui/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Datos de ejemplo
const categorias = [
  {
    id: 1,
    nombre: "Literatura",
    descripcion: "Libros de literatura general",
    productos: 245,
    activa: true,
    color: "#FFBB28",
  },
  {
    id: 2,
    nombre: "Infantil",
    descripcion: "Libros para niños y jóvenes",
    productos: 156,
    activa: true,
    color: "#FF8042",
  },
  {
    id: 3,
    nombre: "Académico",
    descripcion: "Libros de texto y material educativo",
    productos: 189,
    activa: true,
    color: "#0088FE",
  },
  {
    id: 4,
    nombre: "Autoayuda",
    descripcion: "Libros de desarrollo personal",
    productos: 78,
    activa: true,
    color: "#00C49F",
  },
  {
    id: 5,
    nombre: "Fantasía",
    descripcion: "Libros de fantasía y ciencia ficción",
    productos: 112,
    activa: true,
    color: "#FFBB28",
  },
  {
    id: 6,
    nombre: "Clásicos",
    descripcion: "Obras clásicas de la literatura",
    productos: 95,
    activa: false,
    color: "#FF8042",
  },
]

export default function CategoriasPage() {
  const [showNewCategoriaDialog, setShowNewCategoriaDialog] = useState(false)
  const [showEditCategoriaDialog, setShowEditCategoriaDialog] = useState(false)
  const [showDeleteCategoriaDialog, setShowDeleteCategoriaDialog] = useState(false)
  const [selectedCategoria, setSelectedCategoria] = useState<any>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    descripcion: "",
    color: "#FFBB28",
    activa: true,
  })
  const [searchQuery, setSearchQuery] = useState("")
  const [sortColumn, setSortColumn] = useState<"nombre" | "productos" | "estado" | null>(null)
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")

// Manejar cambios en el formulario
  const handleFormChange = (field: string, value: any) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

// Abrir diálogo de edición
  const openEditDialog = (categoria: any) => {
    setSelectedCategoria(categoria)
    setFormData({
      nombre: categoria.nombre,
      descripcion: categoria.descripcion,
      color: categoria.color,
      activa: categoria.activa,
    })
    setShowEditCategoriaDialog(true)
  }

// Abrir diálogo de eliminación
  const openDeleteDialog = (categoria: any) => {
    setSelectedCategoria(categoria)
    setShowDeleteCategoriaDialog(true)
  }

// Guardar categoría (nueva o editada)
  const saveCategoria = () => {
    console.log("Guardando categoría:", formData)

if (showNewCategoriaDialog) {
      setShowNewCategoriaDialog(false)
    } else if (showEditCategoriaDialog) {
      setShowEditCategoriaDialog(false)
    }

setFormData({
      nombre: "",
      descripcion: "",
      color: "#FFBB28",
      activa: true,
    })
  }

// Eliminar categoría
  const deleteCategoria = () => {
    console.log("Eliminando categoría:", selectedCategoria)
    setShowDeleteCategoriaDialog(false)
  }

// Función para refrescar los datos (simulación)
  const refreshData = () => {
    // Simular la recarga de datos (aquí iría la llamada a la API)
    toast({
      title: "Datos actualizados",
      description: "Los datos de categorías se han actualizado",
    })
    // En un entorno real, aquí se actualizaría el estado 'categorias' con los nuevos datos
  }

// Función para aplicar la búsqueda
  const filteredCategorias = categorias.filter((categoria) => {
    const searchTermLower = searchQuery.toLowerCase()
    return (
      categoria.nombre.toLowerCase().includes(searchTermLower) ||
      categoria.descripcion.toLowerCase().includes(searchTermLower)
    )
  })

// Función para aplicar el ordenamiento
  const sortedCategorias = [...filteredCategorias].sort((a, b) => {
    if (!sortColumn) {
      return 0
    }

let comparison = 0

if (sortColumn === "nombre") {
      comparison = a.nombre.localeCompare(b.nombre)
    } else if (sortColumn === "productos") {
      comparison = a.productos - b.productos
    } else if (sortColumn === "estado") {
      comparison = a.activa === b.activa ? 0 : a.activa ? -1 : 1
    }

return sortOrder === "asc" ? comparison : -comparison
  })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Categorías</h1>
          <p className="text-muted-foreground">Administre las categorías de productos</p>
        </div>
        <Dialog open={showNewCategoriaDialog} onOpenChange={setShowNewCategoriaDialog}>
          <DialogTrigger asChild>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Plus className="mr-2 h-4 w-4" />
              Nueva categoría
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Crear nueva categoría</DialogTitle>
              <DialogDescription>Complete los datos para crear una nueva categoría de productos</DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="nombre">Nombre</Label>
                <Input
                  id="nombre"
                  placeholder="Nombre de la categoría"
                  value={formData.nombre}
                  onChange={(e) => handleFormChange("nombre", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="descripcion">Descripción</Label>
                <Textarea
                  id="descripcion"
                  placeholder="Descripción de la categoría"
                  value={formData.descripcion}
                  onChange={(e) => handleFormChange("descripcion", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="color">Color</Label>
                <div className="flex items-center gap-2">
                  <Input
                    id="color"
                    type="color"
                    value={formData.color}
                    onChange={(e) => handleFormChange("color", e.target.value)}
                    className="w-12 h-8 p-1"
                  />
                  <div className="w-8 h-8 rounded-md border" style={{ backgroundColor: formData.color }}></div>
                  <span className="text-sm">{formData.color}</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="activa">Categoría activa</Label>
                <Switch
                  id="activa"
                  checked={formData.activa}
                  onCheckedChange={(checked) => handleFormChange("activa", checked)}
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowNewCategoriaDialog(false)}>
                Cancelar
              </Button>
              <Button onClick={saveCategoria} className="bg-yellow-500 hover:bg-yellow-600 text-black">
                Guardar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center">
              <Tag className="mr-2 h-5 w-5" />
              Listado de categorías
            </CardTitle>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  toast({
                    title: "Exportación exitosa",
                    description: "Los datos de categorías han sido exportados a Excel correctamente",
                  })
                }}
              >
                <Download className="mr-2 h-4 w-4" />
                Exportar a Excel
              </Button>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger>
                    <Button variant="ghost" size="icon" onClick={refreshData}>
                      <RefreshCw className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Refrescar</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
          <CardDescription>Gestione las categorías de productos</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar categorías..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[50px]">ID</TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("nombre")
                          setSortOrder(sortColumn === "nombre" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Nombre
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Descripción</TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("productos")
                          setSortOrder(sortColumn === "productos" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Productos
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("estado")
                          setSortOrder(sortColumn === "estado" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Estado
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sortedCategorias.map((categoria) => (
                    <TableRow key={categoria.id}>
                      <TableCell>{categoria.id}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <div className="w-4 h-4 rounded-full" style={{ backgroundColor: categoria.color }}></div>
                          <span className="font-medium">{categoria.nombre}</span>
                        </div>
                      </TableCell>
                      <TableCell>{categoria.descripcion}</TableCell>
                      <TableCell>{categoria.productos}</TableCell>
                      <TableCell>
                        <Badge
                          variant={categoria.activa ? "default" : "secondary"}
                          className={categoria.activa ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
                        >
                          {categoria.activa ? "Activa" : "Inactiva"}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="sm" onClick={() => openEditDialog(categoria)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-red-500"
                            onClick={() => openDeleteDialog(categoria)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de edición */}
      <Dialog open={showEditCategoriaDialog} onOpenChange={setShowEditCategoriaDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Editar categoría</DialogTitle>
            <DialogDescription>Modifique los datos de la categoría</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="edit-nombre">Nombre</Label>
              <Input
                id="edit-nombre"
                placeholder="Nombre de la categoría"
                value={formData.nombre}
                onChange={(e) => handleFormChange("nombre", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-descripcion">Descripción</Label>
              <Textarea
                id="edit-descripcion"
                placeholder="Descripción de la categoría"
                value={formData.descripcion}
                onChange={(e) => handleFormChange("descripcion", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-color">Color</Label>
              <div className="flex items-center gap-2">
                <Input
                  id="edit-color"
                  type="color"
                  value={formData.color}
                  onChange={(e) => handleFormChange("color", e.target.value)}
                  className="w-12 h-8 p-1"
                />
                <div className="w-8 h-8 rounded-md border" style={{ backgroundColor: formData.color }}></div>
                <span className="text-sm">{formData.color}</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="edit-activa">Categoría activa</Label>
              <Switch
                id="edit-activa"
                checked={formData.activa}
                onCheckedChange={(checked) => handleFormChange("activa", checked)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditCategoriaDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={saveCategoria} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Guardar cambios
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de eliminación */}
      <Dialog open={showDeleteCategoriaDialog} onOpenChange={setShowDeleteCategoriaDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar eliminación</DialogTitle>
            <DialogDescription>
              ¿Está seguro que desea eliminar esta categoría? Esta acción no se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {selectedCategoria && (
              <div className="p-4 border rounded-md bg-muted">
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: selectedCategoria.color }}></div>
                  <span className="font-medium">{selectedCategoria.nombre}</span>
                </div>
                <div className="mt-2 text-sm text-muted-foreground">
                  Esta categoría contiene {selectedCategoria.productos} productos.
                </div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteCategoriaDialog(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={deleteCategoria}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/proveedores/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import { DialogTrigger } from "@/components/ui/dialog"
import { DialogContent } from "@/components/ui/dialog"
import { useState, useEffect } from "react"
import {
  Truck,
  Plus,
  FileText,
  Search,
  Download,
  RefreshCw,
  Calendar,
  Package,
  Clock,
  CheckCircle,
  AlertCircle,
  SplitSquareVertical,
  Trash2,
  MinusCircle,
  PlusCircle,
  RotateCcw,
  History,
  Building2,
  User,
  Phone,
  Mail,
  MapPin,
  DollarSign,
  MoreHorizontal,
  X,
  Edit,
  ExternalLink,
} from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent as DialogContentPrimitive,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/hooks/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import Link from "next/link"

// Datos de ejemplo actualizados con los nuevos campos
const proveedoresData = [
  {
    id: 1,
    cuit: "20-12345678-9",
    tipoFactura: "A",
    nombreEmpresa: "Editorial Planeta S.A.",
    razonSocial: "Editorial Planeta Sociedad Anónima",
    telefono: "11-2233-4455",
    email: "ventas@planeta.com",
    direccion: "Av. Corrientes 1234, CABA",
    contacto: {
      apellido: "Pérez",
      nombre: "Juan",
      telefono: "11-2233-4456",
      email: "juan.perez@planeta.com",
    },
    ultimoPedido: "2023-11-15",
    estado: "Activo",
  },
  {
    id: 2,
    cuit: "30-87654321-2",
    tipoFactura: "B",
    nombreEmpresa: "Distribuidora Literaria S.R.L.",
    razonSocial: "Distribuidora Literaria Sociedad de Responsabilidad Limitada",
    telefono: "11-3344-5566",
    email: "pedidos@distribuidoraliteraria.com",
    direccion: "Av. Rivadavia 5678, CABA",
    contacto: {
      apellido: "González",
      nombre: "María",
      telefono: "11-3344-5567",
      email: "maria.gonzalez@distribuidoraliteraria.com",
    },
    ultimoPedido: "2023-12-05",
    estado: "Activo",
  },
  {
    id: 3,
    cuit: "20-11223344-5",
    tipoFactura: "A",
    nombreEmpresa: "Papelera Nacional S.A.",
    razonSocial: "Papelera Nacional Sociedad Anónima",
    telefono: "11-4455-6677",
    email: "ventas@papeleranacional.com",
    direccion: "Av. San Martín 9012, CABA",
    contacto: {
      apellido: "Rodríguez",
      nombre: "Carlos",
      telefono: "11-4455-6678",
      email: "carlos.rodriguez@papeleranacional.com",
    },
    ultimoPedido: "2023-10-20",
    estado: "Inactivo",
  },
  {
    id: 4,
    cuit: "30-55667788-9",
    tipoFactura: "A",
    nombreEmpresa: "Importadora de Libros S.A.",
    razonSocial: "Importadora de Libros Sociedad Anónima",
    telefono: "11-5566-7788",
    email: "importaciones@importadoralibros.com",
    direccion: "Av. Santa Fe 3456, CABA",
    contacto: {
      apellido: "Martínez",
      nombre: "Ana",
      telefono: "11-5566-7789",
      email: "ana.martinez@importadoralibros.com",
    },
    ultimoPedido: "2023-11-30",
    estado: "Activo",
  },
]

// Datos de ejemplo de productos
const productos = [
  {
    id: 1,
    codigo: "LIB001",
    nombre: "El principito",
    precio: 1500,
    precioCompra: 900,
    categoria: "Literatura",
  },
  {
    id: 2,
    codigo: "LIB002",
    nombre: "Cien años de soledad",
    precio: 2200,
    precioCompra: 1300,
    categoria: "Literatura",
  },
  {
    id: 3,
    codigo: "LIB003",
    nombre: "Harry Potter y la piedra filosofal",
    precio: 1800,
    precioCompra: 1100,
    categoria: "Infantil",
  },
  {
    id: 4,
    codigo: "LIB004",
    nombre: "El señor de los anillos",
    precio: 2500,
    precioCompra: 1500,
    categoria: "Fantasía",
  },
  {
    id: 5,
    codigo: "LIB005",
    nombre: "Don Quijote de la Mancha",
    precio: 1900,
    precioCompra: 1200,
    categoria: "Clásicos",
  },
]

// Datos de ejemplo de pedidos a proveedores
const pedidosData = [
  {
    id: 1,
    proveedorId: 1,
    fecha: "2023-11-15",
    fechaEntrega: "2023-11-25",
    estado: "Entregado",
    total: 15600,
    productos: [
      { id: 1, nombre: "El principito", codigo: "LIB001", cantidad: 10, precioCompra: 900 },
      { id: 2, nombre: "Cien años de soledad", codigo: "LIB002", cantidad: 5, precioCompra: 1300 },
    ],
    observaciones: "Entrega en sucursal central",
  },
  {
    id: 2,
    proveedorId: 1,
    fecha: "2023-12-10",
    fechaEntrega: "2023-12-20",
    estado: "En tránsito",
    total: 22000,
    productos: [
      { id: 3, nombre: "Harry Potter y la piedra filosofal", codigo: "LIB003", cantidad: 20, precioCompra: 1100 },
    ],
    observaciones: "Incluir material promocional",
  },
  {
    id: 3,
    proveedorId: 2,
    fecha: "2023-12-05",
    fechaEntrega: "2023-12-15",
    estado: "Entregado",
    total: 18000,
    productos: [{ id: 4, nombre: "El señor de los anillos", codigo: "LIB004", cantidad: 12, precioCompra: 1500 }],
    observaciones: "",
  },
  {
    id: 4,
    proveedorId: 4,
    fecha: "2023-11-30",
    fechaEntrega: "2023-12-10",
    estado: "Pendiente",
    total: 24000,
    productos: [{ id: 5, nombre: "Don Quijote de la Mancha", codigo: "LIB005", cantidad: 20, precioCompra: 1200 }],
    observaciones: "Confirmar stock antes de envío",
  },
]

// Datos de ejemplo de devoluciones
const devolucionesData = [
  {
    id: 1,
    pedidoId: 1,
    fecha: "2023-11-28",
    productos: [
      {
        id: 1,
        nombre: "El principito",
        codigo: "LIB001",
        cantidad: 10,
        cantidadDevolver: 3,
        precioCompra: 900,
        motivo: "Libros con páginas dañadas",
      },
      {
        id: 2,
        nombre: "Cien años de soledad",
        codigo: "LIB002",
        cantidad: 5,
        cantidadDevolver: 1,
        precioCompra: 1300,
        motivo: "Portada rasgada",
      },
    ],
    motivoGeneral: "Productos recibidos con daños en el transporte",
    estado: "Pendiente",
  },
  {
    id: 2,
    pedidoId: 1,
    fecha: "2023-12-02",
    productos: [
      {
        id: 1,
        nombre: "El principito",
        codigo: "LIB001",
        cantidad: 10,
        cantidadDevolver: 2,
        precioCompra: 900,
        motivo: "Contenido incompleto",
      },
    ],
    motivoGeneral: "Libros con páginas faltantes",
    estado: "Aprobada",
  },
  {
    id: 3,
    pedidoId: 3,
    fecha: "2023-12-16",
    productos: [
      {
        id: 4,
        nombre: "El señor de los anillos",
        codigo: "LIB004",
        cantidad: 12,
        cantidadDevolver: 4,
        precioCompra: 1500,
        motivo: "Edición incorrecta",
      },
    ],
    motivoGeneral: "Se recibió una edición diferente a la solicitada",
    estado: "Pendiente",
  },
]

// Datos de ejemplo de pagos a proveedores
const pagosProveedoresData = [
  {
    id: 1,
    proveedorId: 1,
    pedidoId: 1,
    fecha: "2023-11-20",
    monto: 15600,
    metodoPago: "Transferencia bancaria",
    concepto: "Pago completo pedido #1",
    comprobante: "TRF-001",
    estado: "Completado",
  },
  {
    id: 2,
    proveedorId: 2,
    fecha: "2023-12-08",
    monto: 9000,
    metodoPago: "Cheque",
    concepto: "Pago parcial pedido #3",
    comprobante: "CHQ-002",
    estado: "Completado",
  },
  {
    id: 3,
    proveedorId: 1,
    fecha: "2023-12-12",
    monto: 5000,
    metodoPago: "Efectivo",
    concepto: "Anticipo para próximo pedido",
    comprobante: "EFE-003",
    estado: "Completado",
  },
]

// Datos de ejemplo de reclamos a proveedores
const reclamosProveedoresData = [
  {
    id: 1,
    proveedorId: 1,
    pedidoId: 1,
    fecha: "2023-11-26",
    tipo: "Calidad del producto",
    titulo: "Libros con páginas dañadas",
    descripcion:
      "Se recibieron varios ejemplares de 'El principito' con páginas arrugadas y manchadas. Esto afecta la calidad del producto que ofrecemos a nuestros clientes.",
    prioridad: "Alta",
    estado: "Pendiente",
    fechaRespuesta: null,
    respuestaProveedor: null,
  },
  {
    id: 2,
    proveedorId: 2,
    fecha: "2023-12-01",
    tipo: "Retraso en entrega",
    titulo: "Entrega tardía del pedido #3",
    descripcion:
      "El pedido #3 fue entregado con 5 días de retraso sin previo aviso, causando inconvenientes con nuestros clientes.",
    prioridad: "Media",
    estado: "En proceso",
    fechaRespuesta: "2023-12-03",
    respuestaProveedor: "Disculpas por el retraso. Hubo problemas logísticos que ya fueron solucionados.",
  },
  {
    id: 3,
    proveedorId: 1,
    pedidoId: 2,
    fecha: "2023-12-08",
    tipo: "Producto incorrecto",
    titulo: "Edición incorrecta de Harry Potter",
    descripcion:
      "Se solicitó la edición tapa dura pero se recibió la edición de bolsillo. Necesitamos el cambio urgente.",
    prioridad: "Alta",
    estado: "Resuelto",
    fechaRespuesta: "2023-12-09",
    respuestaProveedor: "Se realizará el cambio inmediatamente. Los libros correctos serán enviados mañana.",
  },
]

// Datos de ejemplo de depósitos
const depositos = [
  { id: 1, nombre: "Depósito Central" },
  { id: 2, nombre: "Depósito Norte" },
  { id: 3, nombre: "Depósito Sur" },
]

export default function ProveedoresPage() {
  const [devoluciones, setDevoluciones] = useState<any[]>(devolucionesData)
  const [pedidosCargados, setPedidosCargados] = useState<number[]>([1, 3])
  const { toast } = useToast()
  const [proveedores, setProveedores] = useState(proveedoresData)
  const [pedidos, setPedidos] = useState(pedidosData)
  const [showNewProveedorDialog, setShowNewProveedorDialog] = useState(false)
  const [showEditProveedorDialog, setShowEditProveedorDialog] = useState(false)
  const [showPedidoDialog, setShowPedidoDialog] = useState(false)
  const [showPedidosListDialog, setShowPedidosListDialog] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [proveedorSearch, setProveedorSearch] = useState("")
  const [selectedProveedor, setSelectedProveedor] = useState<any>(null)
  const [selectedProducts, setSelectedProducts] = useState<any[]>([])
  const [pedidoForm, setPedidoForm] = useState({
    proveedor: "",
    fechaEntrega: "",
    observaciones: "",
  })
  const [proveedorForm, setProveedorForm] = useState({
    cuit: "",
    tipoFactura: "",
    nombreEmpresa: "",
    razonSocial: "",
    telefono: "",
    email: "",
    direccion: "",
    contactoApellido: "",
    contactoNombre: "",
    contactoTelefono: "",
    contactoEmail: "",
    observaciones: "",
    estado: true,
  })
  const [pedidoFilter, setPedidoFilter] = useState("todos")
  const [pedidoSearchTerm, setPedidoSearchTerm] = useState("")

const [showStockDialog, setShowStockDialog] = useState(false)
  const [selectedPedidoParaStock, setSelectedPedidoParaStock] = useState<any>(null)
  const [productosDistribucion, setProductosDistribucion] = useState<any[]>([])
  const [showDistribucionDialog, setShowDistribucionDialog] = useState(false)
  const [currentProductoDistribucion, setCurrentProductoDistribucion] = useState<any>(null)
  const [distribucionesProducto, setDistribucionesProducto] = useState<any[]>([])
  const [cantidadRestante, setCantidadRestante] = useState(0)
  const [distribucionCompleta, setDistribucionCompleta] = useState(false)

const [showDevolucionDialog, setShowDevolucionDialog] = useState(false)
  const [selectedPedidoParaDevolucion, setSelectedPedidoParaDevolucion] = useState<any>(null)
  const [productosDevolucion, setProductosDevolucion] = useState<any[]>([])
  const [motivoDevolucion, setMotivoDevolucion] = useState("")
  const [showDevolucionesHistorialDialog, setShowDevolucionesHistorialDialog] = useState(false)

const [showVerNotaDevolucionDialog, setShowVerNotaDevolucionDialog] = useState(false)
  const [selectedDevolucion, setSelectedDevolucion] = useState<any>(null)

// Estados para pagos a proveedores
  const [pagosProveedores, setPagosProveedores] = useState<any[]>(pagosProveedoresData)
  const [showPagoDialog, setShowPagoDialog] = useState(false)
  const [showPagosHistorialDialog, setShowPagosHistorialDialog] = useState(false)
  const [selectedProveedorParaPago, setSelectedProveedorParaPago] = useState<any>(null)
  const [pagoForm, setPagoForm] = useState({
    monto: "",
    metodoPago: "",
    concepto: "",
    comprobante: "",
    pedidoId: "",
    fecha: new Date().toISOString().split("T")[0],
  })
  const [pedidoBusqueda, setPedidoBusqueda] = useState("")

// Estados para reclamos a proveedores
  const [reclamosProveedores, setReclamosProveedores] = useState<any[]>(reclamosProveedoresData)
  const [showReclamoDialog, setShowReclamoDialog] = useState(false)
  const [showReclamosHistorialDialog, setShowReclamosHistorialDialog] = useState(false)
  const [selectedProveedorParaReclamo, setSelectedProveedorParaReclamo] = useState<any>(null)
  const [reclamoForm, setReclamoForm] = useState({
    tipo: "",
    titulo: "",
    descripcion: "",
    prioridad: "Media",
    pedidoId: "",
    fecha: new Date().toISOString().split("T")[0],
  })

// Estados para las nuevas pestañas
  const [activeTab, setActiveTab] = useState("proveedores")
  const [reclamosSearch, setReclamosSearch] = useState("")
  const [pedidosSearch, setPedidosSearch] = useState("")
  const [pagosSearch, setPagosSearch] = useState("")
  const [devolucionesSearch, setDevolucionesSearch] = useState("")

// Agregar estado para el filtro de proveedor en pagos:
  const [filtroProveedorPagos, setFiltroProveedorPagos] = useState("")

// Estados para cambiar estado del pedido
  const [showCambiarEstadoDialog, setShowCambiarEstadoDialog] = useState(false)
  const [pedidoParaCambiarEstado, setPedidoParaCambiarEstado] = useState<any>(null)
  const [nuevoEstadoPedido, setNuevoEstadoPedido] = useState("")

// Filtrar proveedores basados en la búsqueda
  const filteredProveedores = proveedores.filter(
    (proveedor) =>
      proveedor.nombreEmpresa.toLowerCase().includes(proveedorSearch.toLowerCase()) ||
      proveedor.contacto.nombre.toLowerCase().includes(proveedorSearch.toLowerCase()) ||
      proveedor.contacto.apellido.toLowerCase().includes(proveedorSearch.toLowerCase()) ||
      proveedor.email.toLowerCase().includes(proveedorSearch.toLowerCase()) ||
      proveedor.cuit.includes(proveedorSearch),
  )

// Filtrar pedidos para la pestaña de pedidos
  const filteredPedidosTab = pedidos.filter((pedido) => {
    const proveedor = proveedores.find((p) => p.id === pedido.proveedorId)
    const matchesSearch =
      pedidosSearch.trim() === ""
        ? true
        : pedido.id.toString().includes(pedidosSearch) ||
          proveedor?.nombreEmpresa.toLowerCase().includes(pedidosSearch.toLowerCase()) ||
          pedido.observaciones?.toLowerCase().includes(pedidosSearch.toLowerCase()) ||
          pedido.productos.some(
            (p) =>
              p.nombre.toLowerCase().includes(pedidosSearch.toLowerCase()) ||
              p.codigo.toLowerCase().includes(pedidosSearch.toLowerCase()),
          ) ||
          pedido.fecha.includes(pedidosSearch) ||
          pedido.fechaEntrega.includes(pedidosSearch)
    return matchesSearch
  })

// Filtrar reclamos para la pestaña de reclamos
  const filteredReclamos = reclamosProveedores.filter((reclamo) => {
    const proveedor = proveedores.find((p) => p.id === reclamo.proveedorId)
    const matchesSearch =
      reclamosSearch.trim() === ""
        ? true
        : reclamo.id.toString().includes(reclamosSearch) ||
          proveedor?.nombreEmpresa.toLowerCase().includes(reclamosSearch.toLowerCase()) ||
          reclamo.titulo.toLowerCase().includes(reclamosSearch.toLowerCase()) ||
          reclamo.tipo.toLowerCase().includes(reclamosSearch.toLowerCase()) ||
          reclamo.descripcion.toLowerCase().includes(reclamosSearch.toLowerCase())
    return matchesSearch
  })

// Actualizar la función filteredPagos para incluir el filtro:
  const filteredPagos = pagosProveedores.filter((pago) => {
    const proveedor = proveedores.find((p) => p.id === pago.proveedorId)
    const matchesSearch =
      pagosSearch.trim() === ""
        ? true
        : pago.id.toString().includes(pagosSearch) ||
          proveedor?.nombreEmpresa.toLowerCase().includes(pagosSearch.toLowerCase()) ||
          pago.concepto.toLowerCase().includes(pagosSearch.toLowerCase()) ||
          pago.metodoPago.toLowerCase().includes(pagosSearch.toLowerCase()) ||
          pago.comprobante?.toLowerCase().includes(pagosSearch.toLowerCase())

const matchesProveedor = filtroProveedorPagos === "" || pago.proveedorId.toString() === filtroProveedorPagos

return matchesSearch && matchesProveedor
  })

// Filtrar devoluciones para la pestaña de devoluciones
  const filteredDevoluciones = devoluciones.filter((devolucion) => {
    const pedido = pedidos.find((p) => p.id === devolucion.pedidoId)
    const proveedor = proveedores.find((p) => p.id === pedido?.proveedorId)
    const matchesSearch =
      devolucionesSearch.trim() === ""
        ? true
        : devolucion.id.toString().includes(devolucionesSearch) ||
          proveedor?.nombreEmpresa.toLowerCase().includes(devolucionesSearch.toLowerCase()) ||
          devolucion.motivoGeneral?.toLowerCase().includes(devolucionesSearch.toLowerCase()) ||
          devolucion.productos.some(
            (p) =>
              p.nombre.toLowerCase().includes(devolucionesSearch.toLowerCase()) ||
              p.codigo.toLowerCase().includes(devolucionesSearch.toLowerCase()),
          )
    return matchesSearch
  })

// Modificar la función de filtrado de pedidos para incluir la búsqueda
  const filteredPedidos = pedidos.filter((pedido) => {
    const matchesProveedor = selectedProveedor ? pedido.proveedorId === selectedProveedor.id : true
    const matchesSearch =
      pedidoSearchTerm.trim() === ""
        ? true
        : pedido.id.toString().includes(pedidoSearchTerm) ||
          pedido.observaciones?.toLowerCase().includes(pedidoSearchTerm.toLowerCase()) ||
          pedido.productos.some(
            (p) =>
              p.nombre.toLowerCase().includes(pedidoSearchTerm.toLowerCase()) ||
              p.codigo.toLowerCase().includes(pedidoSearchTerm.toLowerCase()),
          ) ||
          pedido.fecha.includes(pedidoSearchTerm) ||
          pedido.fechaEntrega.includes(pedidoSearchTerm)

if (pedidoFilter === "todos") return matchesProveedor && matchesSearch
    if (pedidoFilter === "pendientes") return matchesProveedor && pedido.estado === "Pendiente" && matchesSearch
    if (pedidoFilter === "en-transito") return matchesProveedor && pedido.estado === "En tránsito" && matchesSearch
    if (pedidoFilter === "entregados") return matchesProveedor && pedido.estado === "Entregado" && matchesSearch

return matchesProveedor && matchesSearch
  })

// Función para buscar pedidos por número
  const buscarPedidoPorNumero = (numeroPedido: string) => {
    if (!numeroPedido.trim()) return []
    return pedidos.filter((pedido) => pedido.id.toString().includes(numeroPedido))
  }

// Manejar cambios en el formulario de pedido
  const handlePedidoFormChange = (field: string, value: any) => {
    setPedidoForm({
      ...pedidoForm,
      [field]: value,
    })
  }

// Manejar cambios en el formulario de proveedor
  const handleProveedorFormChange = (field: string, value: any) => {
    setProveedorForm({
      ...proveedorForm,
      [field]: value,
    })
  }

// Abrir diálogo de pedido
  const openPedidoDialog = (proveedor: any) => {
    setSelectedProveedor(proveedor)
    setPedidoForm({
      proveedor: proveedor.id.toString(),
      fechaEntrega: "",
      observaciones: "",
    })
    setSelectedProducts([])
    setShowPedidoDialog(true)
  }

// Abrir diálogo de edición
  const openEditDialog = (proveedor: any) => {
    setSelectedProveedor(proveedor)
    setProveedorForm({
      cuit: proveedor.cuit,
      tipoFactura: proveedor.tipoFactura,
      nombreEmpresa: proveedor.nombreEmpresa,
      razonSocial: proveedor.razonSocial,
      telefono: proveedor.telefono,
      email: proveedor.email,
      direccion: proveedor.direccion,
      contactoApellido: proveedor.contacto.apellido,
      contactoNombre: proveedor.contacto.nombre,
      contactoTelefono: proveedor.contacto.telefono,
      contactoEmail: proveedor.contacto.email,
      observaciones: "",
      estado: proveedor.estado === "Activo",
    })
    setShowEditProveedorDialog(true)
  }

// Abrir diálogo de listado de pedidos
  const openPedidosListDialog = (proveedor: any) => {
    setSelectedProveedor(proveedor)
    setPedidoFilter("todos")
    setShowPedidosListDialog(true)
  }

// Agregar producto al pedido
  const addProductToPedido = (producto: any) => {
    if (!selectedProducts.some((p) => p.id === producto.id)) {
      setSelectedProducts([...selectedProducts, { ...producto, cantidad: 1 }])
    }
  }

// Cambiar cantidad de un producto en el pedido
  const changeProductQuantity = (id: number, cantidad: number) => {
    setSelectedProducts(selectedProducts.map((product) => (product.id === id ? { ...product, cantidad } : product)))
  }

// Cambiar precio de compra de un producto en el pedido
  const changeProductPrecioCompra = (id: number, precioCompra: number) => {
    setSelectedProducts(selectedProducts.map((product) => (product.id === id ? { ...product, precioCompra } : product)))
  }

// Eliminar producto del pedido
  const removeProductFromPedido = (id: number) => {
    setSelectedProducts(selectedProducts.filter((product) => product.id !== id))
  }

// Confirmar pedido
  const confirmPedido = () => {
    const total = selectedProducts.reduce((total, product) => total + product.precioCompra * product.cantidad, 0)

const nuevoPedido = {
      id: pedidos.length + 1,
      proveedorId: Number.parseInt(pedidoForm.proveedor),
      fecha: new Date().toISOString().split("T")[0],
      fechaEntrega: pedidoForm.fechaEntrega,
      estado: "Pendiente",
      total,
      productos: selectedProducts.map((p) => ({
        id: p.id,
        nombre: p.nombre,
        codigo: p.codigo,
        cantidad: p.cantidad,
        precioCompra: p.precioCompra,
      })),
      observaciones: pedidoForm.observaciones,
    }

setPedidos([...pedidos, nuevoPedido])

// Actualizar la fecha del último pedido del proveedor
    const updatedProveedores = proveedores.map((prov) =>
      prov.id === Number.parseInt(pedidoForm.proveedor) ? { ...prov, ultimoPedido: nuevoPedido.fecha } : prov,
    )
    setProveedores(updatedProveedores)

toast({
      title: "Pedido creado",
      description: "El pedido ha sido creado exitosamente",
    })

setShowPedidoDialog(false)
  }

// Guardar proveedor (nuevo o editado)
  const saveProveedor = () => {
    if (showNewProveedorDialog) {
      // Crear nuevo proveedor
      const nuevoProveedor = {
        id: proveedores.length + 1,
        cuit: proveedorForm.cuit,
        tipoFactura: proveedorForm.tipoFactura,
        nombreEmpresa: proveedorForm.nombreEmpresa,
        razonSocial: proveedorForm.razonSocial,
        telefono: proveedorForm.telefono,
        email: proveedorForm.email,
        direccion: proveedorForm.direccion,
        contacto: {
          apellido: proveedorForm.contactoApellido,
          nombre: proveedorForm.contactoNombre,
          telefono: proveedorForm.contactoTelefono,
          email: proveedorForm.contactoEmail,
        },
        ultimoPedido: "-",
        estado: proveedorForm.estado ? "Activo" : "Inactivo",
      }

setProveedores([...proveedores, nuevoProveedor])
      toast({
        title: "Proveedor creado",
        description: "El proveedor ha sido creado exitosamente",
      })
      setShowNewProveedorDialog(false)
    } else if (showEditProveedorDialog && selectedProveedor) {
      // Editar proveedor existente
      const updatedProveedores = proveedores.map((prov) =>
        prov.id === selectedProveedor.id
          ? {
              ...prov,
              cuit: proveedorForm.cuit,
              tipoFactura: proveedorForm.tipoFactura,
              nombreEmpresa: proveedorForm.nombreEmpresa,
              razonSocial: proveedorForm.razonSocial,
              telefono: proveedorForm.telefono,
              email: proveedorForm.email,
              direccion: proveedorForm.direccion,
              contacto: {
                apellido: proveedorForm.contactoApellido,
                nombre: proveedorForm.contactoNombre,
                telefono: proveedorForm.contactoTelefono,
                email: proveedorForm.contactoEmail,
              },
              estado: proveedorForm.estado ? "Activo" : "Inactivo",
            }
          : prov,
      )

setProveedores(updatedProveedores)
      toast({
        title: "Proveedor actualizado",
        description: "El proveedor ha sido actualizado exitosamente",
      })
      setShowEditProveedorDialog(false)
    }

// Resetear formulario
    resetProveedorForm()
  }

// Resetear formulario de proveedor
  const resetProveedorForm = () => {
    setProveedorForm({
      cuit: "",
      tipoFactura: "",
      nombreEmpresa: "",
      razonSocial: "",
      telefono: "",
      email: "",
      direccion: "",
      contactoApellido: "",
      contactoNombre: "",
      contactoTelefono: "",
      contactoEmail: "",
      observaciones: "",
      estado: true,
    })
  }

// Refrescar listado de proveedores
  const refreshProveedores = () => {
    setProveedores(proveedoresData)
    setProveedorSearch("")
    toast({
      title: "Listado actualizado",
      description: "El listado de proveedores ha sido actualizado",
    })
  }

// Obtener el estado del pedido con su color correspondiente
  const getPedidoEstadoBadge = (estado: string) => {
    switch (estado) {
      case "Pendiente":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 border-yellow-300">
            <Clock className="mr-1 h-3 w-3" /> Pendiente
          </Badge>
        )
      case "En tránsito":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800 border-blue-300">
            <Package className="mr-1 h-3 w-3" /> En tránsito
          </Badge>
        )
      case "Entregado":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
            <CheckCircle className="mr-1 h-3 w-3" /> Entregado
          </Badge>
        )
      default:
        return (
          <Badge variant="outline" className="bg-gray-100 text-gray-800 border-gray-300">
            <AlertCircle className="mr-1 h-3 w-3" /> {estado}
          </Badge>
        )
    }
  }

// Añadir una función para exportar los pedidos
  const exportarPedidos = (formato: "excel" | "pdf") => {
    toast({
      title: "Exportación exitosa",
      description: `Los pedidos han sido exportados a ${formato === "excel" ? "Excel" : "PDF"} correctamente`,
    })
  }

// Función para abrir el diálogo de cambio de estado
  const abrirCambioEstado = (pedido: any) => {
    setPedidoParaCambiarEstado(pedido)
    setNuevoEstadoPedido(pedido.estado)
    setShowCambiarEstadoDialog(true)
  }

// Función para confirmar el cambio de estado
  const confirmarCambioEstado = () => {
    if (pedidoParaCambiarEstado && nuevoEstadoPedido) {
      const pedidosActualizados = pedidos.map((p) =>
        p.id === pedidoParaCambiarEstado.id ? { ...p, estado: nuevoEstadoPedido } : p,
      )
      setPedidos(pedidosActualizados)

toast({
        title: "Estado actualizado",
        description: `El pedido #${pedidoParaCambiarEstado.id} ha sido actualizado a ${nuevoEstadoPedido}`,
      })

setShowCambiarEstadoDialog(false)
      setPedidoParaCambiarEstado(null)
      setNuevoEstadoPedido("")
    }
  }

// Añadir después de la función exportarPedidos
  const cargarAlStock = (pedido: any) => {
    // Inicializar productos para distribución
    const productosParaDistribuir = pedido.productos.map((producto: any) => ({
      ...producto,
      distribuciones: [],
      cantidadDistribuida: 0,
      distribucionCompleta: false,
    }))

setProductosDistribucion(productosParaDistribuir)
    setSelectedPedidoParaStock(pedido)
    setShowStockDialog(true)
  }

// Función para abrir el diálogo de devolución
  const crearNotaDevolucion = (pedido: any) => {
    // Inicializar productos para devolución con cantidad 0
    const productosParaDevolver = pedido.productos.map((producto: any) => ({
      ...producto,
      cantidadDevolver: 0,
      motivo: "",
    }))

setProductosDevolucion(productosParaDevolver)
    setSelectedPedidoParaDevolucion(pedido)
    setMotivoDevolucion("")
    setShowDevolucionDialog(true)
  }

// Función para cambiar la cantidad a devolver de un producto
  const cambiarCantidadDevolucion = (id: number, cantidad: number) => {
    setProductosDevolucion(
      productosDevolucion.map((producto) => {
        if (producto.id === id) {
          // Asegurar que la cantidad no exceda la cantidad original
          const nuevaCantidad = Math.min(cantidad, producto.cantidad)
          return { ...producto, cantidadDevolver: nuevaCantidad }
        }
        return producto
      }),
    )
  }

// Función para cambiar el motivo de devolución de un producto
  const cambiarMotivoProducto = (id: number, motivo: string) => {
    setProductosDevolucion(
      productosDevolucion.map((producto) => {
        if (producto.id === id) {
          return { ...producto, motivo }
        }
        return producto
      }),
    )
  }

// Función para confirmar la devolución
  const confirmarDevolucion = () => {
    if (selectedPedidoParaDevolucion) {
      // Filtrar solo los productos que tienen cantidad a devolver
      const productosADevolver = productosDevolucion.filter((producto) => producto.cantidadDevolver > 0)

if (productosADevolver.length === 0) {
        toast({
          title: "Error",
          description: "Debe seleccionar al menos un producto para devolver",
          variant: "destructive",
        })
        return
      }

// Crear la nota de devolución
      const nuevaDevolucion = {
        id: devoluciones.length + 1,
        pedidoId: selectedPedidoParaDevolucion.id,
        fecha: new Date().toISOString().split("T")[0],
        productos: productosADevolver,
        motivoGeneral: motivoDevolucion,
        estado: "Pendiente",
      }

setDevoluciones([...devoluciones, nuevaDevolucion])

toast({
        title: "Nota de devolución creada",
        description: `La nota de devolución para el pedido #${selectedPedidoParaDevolucion.id} ha sido creada exitosamente`,
      })

setShowDevolucionDialog(false)
      setSelectedPedidoParaDevolucion(null)
      setProductosDevolucion([])
      setMotivoDevolucion("")
    }
  }

// Función para abrir el historial de devoluciones
  const verHistorialDevoluciones = (pedido: any) => {
    setSelectedPedidoParaDevolucion(pedido)
    setShowDevolucionesHistorialDialog(true)
  }

// Después de la función verHistorialDevoluciones
  const verNotaDevolucion = (devolucion: any) => {
    setSelectedDevolucion(devolucion)
    setShowVerNotaDevolucionDialog(true)
  }

// Función para abrir el diálogo de pago
  const registrarPago = (proveedor: any) => {
    setSelectedProveedorParaPago(proveedor)
    setPagoForm({
      monto: "",
      metodoPago: "",
      concepto: "",
      comprobante: "",
      pedidoId: "",
      fecha: new Date().toISOString().split("T")[0],
    })
    setPedidoBusqueda("")
    setShowPagoDialog(true)
  }

// Función para ver historial de pagos
  const verHistorialPagos = (proveedor: any) => {
    setSelectedProveedorParaPago(proveedor)
    setShowPagosHistorialDialog(true)
  }

// Función para confirmar el pago
  const confirmarPago = () => {
    if (selectedProveedorParaPago && pagoForm.monto && pagoForm.metodoPago) {
      const nuevoPago = {
        id: pagosProveedores.length + 1,
        proveedorId: selectedProveedorParaPago.id,
        pedidoId: pagoForm.pedidoId ? Number(pagoForm.pedidoId) : null,
        fecha: pagoForm.fecha,
        monto: Number(pagoForm.monto),
        metodoPago: pagoForm.metodoPago,
        concepto: pagoForm.concepto,
        comprobante: pagoForm.comprobante,
        estado: "Completado",
      }

setPagosProveedores([...pagosProveedores, nuevoPago])

toast({
        title: "Pago registrado",
        description: `El pago de $${Number(pagoForm.monto).toLocaleString()} a ${selectedProveedorParaPago.nombreEmpresa} ha sido registrado exitosamente`,
      })

setShowPagoDialog(false)
      setSelectedProveedorParaPago(null)
      setPagoForm({
        monto: "",
        metodoPago: "",
        concepto: "",
        comprobante: "",
        pedidoId: "",
        fecha: new Date().toISOString().split("T")[0],
      })
      setPedidoBusqueda("")
    }
  }

// Función para calcular el total de pagos por proveedor
  const getTotalPagosProveedor = (proveedorId: number) => {
    return pagosProveedores
      .filter((pago) => pago.proveedorId === proveedorId)
      .reduce((total, pago) => total + pago.monto, 0)
  }

// Función para calcular el total de pedidos por proveedor
  const getTotalPedidosProveedor = (proveedorId: number) => {
    return pedidos
      .filter((pedido) => pedido.proveedorId === proveedorId && pedido.estado === "Entregado")
      .reduce((total, pedido) => total + pedido.total, 0)
  }

// Función para abrir el diálogo de distribución de un producto
  const abrirDistribucionProducto = (producto: any) => {
    setCurrentProductoDistribucion(producto)
    setDistribucionesProducto(producto.distribuciones || [])
    setCantidadRestante(producto.cantidad - (producto.cantidadDistribuida || 0))
    setShowDistribucionDialog(true)
  }

// Función para agregar una distribución
  const agregarDistribucion = () => {
    if (distribucionesProducto.length < depositos.length) {
      setDistribucionesProducto([
        ...distribucionesProducto,
        {
          depositoId: "",
          cantidad: 0,
        },
      ])
    }
  }

// Función para eliminar una distribución
  const eliminarDistribucion = (index: number) => {
    const nuevasDistribuciones = [...distribucionesProducto]
    nuevasDistribuciones.splice(index, 1)
    setDistribucionesProducto(nuevasDistribuciones)
  }

// Función para actualizar una distribución
  const actualizarDistribucion = (index: number, campo: string, valor: any) => {
    const nuevasDistribuciones = [...distribucionesProducto]
    nuevasDistribuciones[index] = {
      ...nuevasDistribuciones[index],
      [campo]: valor,
    }
    setDistribucionesProducto(nuevasDistribuciones)
  }

// Calcular cantidad restante cuando cambian las distribuciones
  useEffect(() => {
    if (currentProductoDistribucion) {
      const cantidadTotal = distribucionesProducto.reduce((total, dist) => total + (Number(dist.cantidad) || 0), 0)
      setCantidadRestante(currentProductoDistribucion.cantidad - cantidadTotal)
    }
  }, [distribucionesProducto, currentProductoDistribucion])

// Función para confirmar la distribución de un producto
  const confirmarDistribucionProducto = () => {
    // Validar que no haya depósitos duplicados
    const depositosSeleccionados = distribucionesProducto.map((dist) => dist.depositoId).filter(Boolean)
    const depositosUnicos = new Set(depositosSeleccionados)

if (depositosSeleccionados.length !== depositosUnicos.size) {
      toast({
        title: "Error en la distribución",
        description: "No puede seleccionar el mismo depósito más de una vez",
        variant: "destructive",
      })
      return
    }

// Validar que todas las distribuciones tengan depósito y cantidad
    const distribucionesIncompletas = distribucionesProducto.some(
      (dist) => !dist.depositoId || !dist.cantidad || dist.cantidad <= 0,
    )

if (distribucionesIncompletas) {
      toast({
        title: "Distribución incompleta",
        description: "Todas las distribuciones deben tener un depósito y una cantidad mayor a cero",
        variant: "destructive",
      })
      return
    }

// Actualizar el producto en la lista de productos para distribución
    const nuevosProductos = productosDistribucion.map((prod) => {
      if (prod.id === currentProductoDistribucion.id) {
        const cantidadTotal = distribucionesProducto.reduce((total, dist) => total + (Number(dist.cantidad) || 0), 0)
        return {
          ...prod,
          distribuciones: distribucionesProducto,
          cantidadDistribuida: cantidadTotal,
          distribucionCompleta: cantidadTotal === prod.cantidad,
        }
      }
      return prod
    })

setProductosDistribucion(nuevosProductos)
    setShowDistribucionDialog(false)

// Verificar si todos los productos están completamente distribuidos
    const todosDistribuidos = nuevosProductos.every((prod) => prod.distribucionCompleta)
    setDistribucionCompleta(todosDistribuidos)
  }

// Función para confirmar la carga al stock
  const confirmarCargaStock = () => {
    if (selectedPedidoParaStock) {
      // Simular la carga al stock
      setPedidosCargados([...pedidosCargados, selectedPedidoParaStock.id])

// Aquí se procesaría la distribución a los diferentes depósitos
      // En una implementación real, se actualizaría el stock en cada depósito

toast({
        title: "Stock actualizado",
        description: `Los productos del pedido #${selectedPedidoParaStock.id} han sido distribuidos y cargados al stock correctamente`,
      })

setShowStockDialog(false)
      setSelectedPedidoParaStock(null)
      setProductosDistribucion([])
      setDistribucionCompleta(false)
    }
  }

// Añadir una función para ver las observaciones completas
  const [selectedObservacion, setSelectedObservacion] = useState<string | null>(null)

// Agregar las funciones para manejar reclamos:

// Función para abrir el diálogo de reclamo
  const crearReclamo = (proveedor: any) => {
    setSelectedProveedorParaReclamo(proveedor)
    setReclamoForm({
      tipo: "",
      titulo: "",
      descripcion: "",
      prioridad: "Media",
      pedidoId: "",
      fecha: new Date().toISOString().split("T")[0],
    })
    setShowReclamoDialog(true)
  }

// Función para ver historial de reclamos
  const verHistorialReclamos = (proveedor: any) => {
    setSelectedProveedorParaReclamo(proveedor)
    setShowReclamosHistorialDialog(true)
  }

// Función para confirmar el reclamo
  const confirmarReclamo = () => {
    if (selectedProveedorParaReclamo && reclamoForm.tipo && reclamoForm.titulo && reclamoForm.descripcion) {
      const nuevoReclamo = {
        id: reclamosProveedores.length + 1,
        proveedorId: selectedProveedorParaReclamo.id,
        pedidoId: reclamoForm.pedidoId ? Number(reclamoForm.pedidoId) : null,
        fecha: reclamoForm.fecha,
        tipo: reclamoForm.tipo,
        titulo: reclamoForm.titulo,
        descripcion: reclamoForm.descripcion,
        prioridad: reclamoForm.prioridad,
        estado: "Pendiente",
        fechaRespuesta: null,
        respuestaProveedor: null,
      }

setReclamosProveedores([...reclamosProveedores, nuevoReclamo])

toast({
        title: "Reclamo creado",
        description: `El reclamo a ${selectedProveedorParaReclamo.nombreEmpresa} ha sido registrado exitosamente`,
      })

setShowReclamoDialog(false)
      setSelectedProveedorParaReclamo(null)
      setReclamoForm({
        tipo: "",
        titulo: "",
        descripcion: "",
        prioridad: "Media",
        pedidoId: "",
        fecha: new Date().toISOString().split("T")[0],
      })
    }
  }

// Función para obtener el badge del estado del reclamo
  const getReclamoEstadoBadge = (estado: string) => {
    switch (estado) {
      case "Pendiente":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 border-red-300">
            <AlertCircle className="mr-1 h-3 w-3" /> Pendiente
          </Badge>
        )
      case "En proceso":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 border-yellow-300">
            <Clock className="mr-1 h-3 w-3" /> En proceso
          </Badge>
        )
      case "Resuelto":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
            <CheckCircle className="mr-1 h-3 w-3" /> Resuelto
          </Badge>
        )
      default:
        return (
          <Badge variant="outline" className="bg-gray-100 text-gray-800 border-gray-300">
            {estado}
          </Badge>
        )
    }
  }

// Función para obtener el badge de prioridad
  const getPrioridadBadge = (prioridad: string) => {
    switch (prioridad) {
      case "Alta":
        return <Badge className="bg-red-500 text-white">Alta</Badge>
      case "Media":
        return <Badge className="bg-yellow-500 text-white">Media</Badge>
      case "Baja":
        return <Badge className="bg-green-500 text-white">Baja</Badge>
      default:
        return <Badge variant="outline">{prioridad}</Badge>
    }
  }

// Función para contar reclamos pendientes por proveedor
  const getReclamosPendientesProveedor = (proveedorId: number) => {
    return reclamosProveedores.filter(
      (reclamo) => reclamo.proveedorId === proveedorId && reclamo.estado === "Pendiente",
    ).length
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Proveedores</h1>
          <p className="text-muted-foreground">Administre los proveedores, pedidos, pagos y reclamos</p>
        </div>
        <div className="flex gap-2">
          <Dialog open={showPedidoDialog} onOpenChange={setShowPedidoDialog}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <FileText className="mr-2 h-4 w-4" />
                Crear pedido
              </Button>
            </DialogTrigger>
          </Dialog>

<Dialog open={showNewProveedorDialog} onOpenChange={setShowNewProveedorDialog}>
            <DialogTrigger asChild>
              <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                <Plus className="mr-2 h-4 w-4" />
                Nuevo proveedor
              </Button>
            </DialogTrigger>
          </Dialog>
        </div>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="proveedores" className="flex items-center gap-2">
            <Truck className="h-4 w-4" />
            Proveedores
          </TabsTrigger>
          <TabsTrigger value="pedidos" className="flex items-center gap-2">
            <Package className="h-4 w-4" />
            Pedidos
          </TabsTrigger>
          <TabsTrigger value="pagos" className="flex items-center gap-2">
            <DollarSign className="h-4 w-4" />
            Pagos
          </TabsTrigger>
          <TabsTrigger value="devoluciones" className="flex items-center gap-2">
            <RotateCcw className="h-4 w-4" />
            Devoluciones
          </TabsTrigger>
        </TabsList>

<TabsContent value="proveedores" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <Truck className="mr-2 h-5 w-5" />
                  Proveedores
                </CardTitle>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos de proveedores han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger>
                        <Button variant="ghost" size="icon" onClick={refreshProveedores}>
                          <RefreshCw className="h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Refrescar</TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
              </div>
              <CardDescription>Gestione los proveedores y sus datos</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="mb-4">
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar proveedores por nombre, CUIT, contacto..."
                    className="pl-8"
                    value={proveedorSearch}
                    onChange={(e) => setProveedorSearch(e.target.value)}
                  />
                </div>
              </div>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[50px]">ID</TableHead>
                      <TableHead>Empresa</TableHead>
                      <TableHead>CUIT</TableHead>
                      <TableHead>Contacto</TableHead>
                      <TableHead>Teléfono</TableHead>
                      <TableHead>Email</TableHead>
                      <TableHead>Último pedido</TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead>Saldo</TableHead>
                      <TableHead className="text-right">Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredProveedores.map((proveedor) => (
                      <TableRow key={proveedor.id}>
                        <TableCell>{proveedor.id}</TableCell>
                        <TableCell>
                          <div>
                            <div className="font-medium">{proveedor.nombreEmpresa}</div>
                            <div className="text-sm text-muted-foreground">{proveedor.razonSocial}</div>
                          </div>
                        </TableCell>
                        <TableCell>{proveedor.cuit}</TableCell>
                        <TableCell>
                          <div>
                            <div className="font-medium">
                              {proveedor.contacto.apellido}, {proveedor.contacto.nombre}
                            </div>
                            <div className="text-sm text-muted-foreground">{proveedor.contacto.email}</div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div>
                            <div>{proveedor.telefono}</div>
                            <div className="text-sm text-muted-foreground">{proveedor.contacto.telefono}</div>
                          </div>
                        </TableCell>
                        <TableCell>{proveedor.email}</TableCell>
                        <TableCell>{new Date(proveedor.ultimoPedido).toLocaleDateString()}</TableCell>
                        <TableCell>
                          <Badge
                            variant="default"
                            className={
                              proveedor.estado === "Activo"
                                ? "bg-green-100 text-green-800"
                                : "bg-gray-100 text-gray-800"
                            }
                          >
                            {proveedor.estado}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {(() => {
                            const totalPedidos = getTotalPedidosProveedor(proveedor.id)
                            const totalPagos = getTotalPagosProveedor(proveedor.id)
                            const saldo = totalPedidos - totalPagos
                            return (
                              <div className="text-sm">
                                <div className={saldo > 0 ? "text-red-600 font-medium" : "text-green-600"}>
                                  ${saldo.toLocaleString()}
                                </div>
                                <div className="text-xs text-muted-foreground">
                                  Pedidos: ${totalPedidos.toLocaleString()}
                                </div>
                                <div className="text-xs text-muted-foreground">
                                  Pagos: ${totalPagos.toLocaleString()}
                                </div>
                              </div>
                            )
                          })()}
                        </TableCell>
                        <TableCell className="text-right">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Abrir menú</span>
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem onClick={() => openPedidosListDialog(proveedor)}>
                                <Calendar className="mr-2 h-4 w-4" />
                                Ver pedidos
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                onClick={() => openPedidoDialog(proveedor)}
                                disabled={proveedor.estado !== "Activo"}
                              >
                                <Plus className="mr-2 h-4 w-4" />
                                Crear pedido
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => openEditDialog(proveedor)}>
                                <FileText className="mr-2 h-4 w-4" />
                                Editar
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => registrarPago(proveedor)}>
                                <DollarSign className="mr-2 h-4 w-4" />
                                Registrar Pago
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => verHistorialPagos(proveedor)}>
                                <History className="mr-2 h-4 w-4" />
                                Ver Pagos
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="pedidos" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <Package className="mr-2 h-5 w-5" />
                  Todos los Pedidos
                </CardTitle>
                <div className="flex items-center gap-2">
                  <Button variant="outline" onClick={() => exportarPedidos("excel")}>
                    <Download className="mr-2 h-4 w-4" />
                    Excel
                  </Button>
                  <Button variant="outline" onClick={() => exportarPedidos("pdf")}>
                    <FileText className="mr-2 h-4 w-4" />
                    PDF
                  </Button>
                </div>
              </div>
              <CardDescription>Historial completo de pedidos a proveedores</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="mb-4">
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar pedidos por ID, proveedor, producto..."
                    className="pl-8"
                    value={pedidosSearch}
                    onChange={(e) => setPedidosSearch(e.target.value)}
                  />
                </div>
              </div>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>ID</TableHead>
                      <TableHead>Proveedor</TableHead>
                      <TableHead>Fecha pedido</TableHead>
                      <TableHead>Fecha entrega</TableHead>
                      <TableHead>Productos</TableHead>
                      <TableHead>Total</TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead>Observaciones</TableHead>
                      <TableHead>Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredPedidosTab.map((pedido) => {
                      const proveedor = proveedores.find((p) => p.id === pedido.proveedorId)
                      return (
                        <TableRow key={pedido.id}>
                          <TableCell>{pedido.id}</TableCell>
                          <TableCell>
                            <div>
                              <div className="font-medium">{proveedor?.nombreEmpresa}</div>
                              <div className="text-sm text-muted-foreground">{proveedor?.cuit}</div>
                            </div>
                          </TableCell>
                          <TableCell>{new Date(pedido.fecha).toLocaleDateString()}</TableCell>
                          <TableCell>{new Date(pedido.fechaEntrega).toLocaleDateString()}</TableCell>
                          <TableCell>
                            <div className="text-sm">
                              {pedido.productos.map((prod, idx) => (
                                <div key={idx}>
                                  {prod.cantidad} x {prod.nombre}
                                </div>
                              ))}
                            </div>
                          </TableCell>
                          <TableCell>${pedido.total.toLocaleString()}</TableCell>
                          <TableCell>{getPedidoEstadoBadge(pedido.estado)}</TableCell>
                          <TableCell>
                            {pedido.observaciones ? (
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button variant="ghost" size="sm" className="h-auto p-0 text-left font-normal">
                                      <span className="line-clamp-2 text-sm">{pedido.observaciones}</span>
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent className="max-w-xs">
                                    <p>{pedido.observaciones}</p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                            ) : (
                              <span className="text-muted-foreground">-</span>
                            )}
                          </TableCell>
                          <TableCell>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => abrirCambioEstado(pedido)}
                              className="gap-1"
                            >
                              <Edit className="h-3 w-3" />
                              Cambiar Estado
                            </Button>
                          </TableCell>
                        </TableRow>
                      )
                    })}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="pagos" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <DollarSign className="mr-2 h-5 w-5" />
                  Historial de Pagos
                </CardTitle>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos de pagos han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                </div>
              </div>
              <CardDescription>Registro completo de pagos realizados a proveedores</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="mb-4 space-y-4">
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar pagos por proveedor, concepto, comprobante..."
                    className="pl-8"
                    value={pagosSearch}
                    onChange={(e) => setPagosSearch(e.target.value)}
                  />
                </div>
                <div className="flex gap-2">
                  <Select value={filtroProveedorPagos} onValueChange={setFiltroProveedorPagos}>
                    <SelectTrigger className="w-[250px]">
                      <SelectValue placeholder="Filtrar por proveedor" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="">Todos los proveedores</SelectItem>
                      {proveedores.map((proveedor) => (
                        <SelectItem key={proveedor.id} value={proveedor.id.toString()}>
                          {proveedor.nombreEmpresa}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {filtroProveedorPagos && (
                    <Button variant="outline" size="sm" onClick={() => setFiltroProveedorPagos("")}>
                      <X className="h-4 w-4 mr-1" />
                      Limpiar
                    </Button>
                  )}
                </div>
              </div>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>ID</TableHead>
                      <TableHead>Proveedor</TableHead>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Monto</TableHead>
                      <TableHead>Método</TableHead>
                      <TableHead>Pedido</TableHead>
                      <TableHead>Comprobante</TableHead>
                      <TableHead>Concepto</TableHead>
                      <TableHead>Estado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredPagos
                      .sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                      .map((pago) => {
                        const proveedor = proveedores.find((p) => p.id === pago.proveedorId)
                        return (
                          <TableRow key={pago.id}>
                            <TableCell>{pago.id}</TableCell>
                            <TableCell>
                              <div>
                                <div className="font-medium">{proveedor?.nombreEmpresa}</div>
                                <div className="text-sm text-muted-foreground">{proveedor?.cuit}</div>
                              </div>
                            </TableCell>
                            <TableCell>{new Date(pago.fecha).toLocaleDateString()}</TableCell>
                            <TableCell className="font-medium">${pago.monto.toLocaleString()}</TableCell>
                            <TableCell>{pago.metodoPago}</TableCell>
                            <TableCell>
                              {pago.pedidoId ? (
                                <span className="text-blue-600">Pedido #{pago.pedidoId}</span>
                              ) : (
                                <span className="text-muted-foreground">-</span>
                              )}
                            </TableCell>
                            <TableCell>{pago.comprobante || "-"}</TableCell>
                            <TableCell>{pago.concepto || "-"}</TableCell>
                            <TableCell>
                              <Badge className="bg-green-100 text-green-800 border-green-300">{pago.estado}</Badge>
                            </TableCell>
                          </TableRow>
                        )
                      })}
                  </TableBody>
                  <TableFooter>
                    <TableRow>
                      <TableCell colSpan={8} className="text-right font-medium">
                        Total pagado:
                      </TableCell>
                      <TableCell className="font-bold">
                        ${filteredPagos.reduce((total, pago) => total + pago.monto, 0).toLocaleString()}
                      </TableCell>
                    </TableRow>
                  </TableFooter>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="devoluciones" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <RotateCcw className="mr-2 h-5 w-5" />
                  Historial de Devoluciones
                </CardTitle>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los datos de devoluciones han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                </div>
              </div>
              <CardDescription>Registro completo de devoluciones realizadas a proveedores</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="mb-4">
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar devoluciones por proveedor, producto, motivo..."
                    className="pl-8"
                    value={devolucionesSearch}
                    onChange={(e) => setDevolucionesSearch(e.target.value)}
                  />
                </div>
              </div>
              <div className="space-y-4">
                {filteredDevoluciones
                  .sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                  .map((devolucion) => {
                    const pedido = pedidos.find((p) => p.id === devolucion.pedidoId)
                    const proveedor = proveedores.find((p) => p.id === pedido?.proveedorId)
                    return (
                      <div key={devolucion.id} className="border rounded-md p-4">
                        <div className="flex items-start justify-between mb-4">
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <h3 className="text-lg font-medium">Nota de Devolución #{devolucion.id}</h3>
                              <Badge
                                variant="outline"
                                className={
                                  devolucion.estado === "Pendiente"
                                    ? "bg-yellow-100 text-yellow-800 border-yellow-300"
                                    : devolucion.estado === "Aprobada"
                                      ? "bg-green-100 text-green-800 border-green-300"
                                      : "bg-red-100 text-red-800 border-red-300"
                                }
                              >
                                {devolucion.estado}
                              </Badge>
                            </div>
                            <div className="flex items-center gap-4 text-sm text-muted-foreground mb-2">
                              <span>Fecha: {new Date(devolucion.fecha).toLocaleDateString()}</span>
                              <span>Proveedor: {proveedor?.nombreEmpresa}</span>
                              <span>Pedido: #{devolucion.pedidoId}</span>
                            </div>
                          </div>
                          <div className="flex flex-col items-end gap-2">
                            <Button
                              variant="outline"
                              size="sm"
                              className="bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
                              onClick={() => {
                                setSelectedDevolucion(devolucion)
                                setShowVerNotaDevolucionDialog(true)
                              }}
                            >
                              <FileText className="mr-1 h-4 w-4" />
                              Ver Nota Completa
                            </Button>
                          </div>
                        </div>

<div className="mb-4">
                          <h4 className="text-sm font-medium mb-2">Productos devueltos:</h4>
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                            {devolucion.productos.map((producto: any, idx: number) => (
                              <div key={idx} className="text-sm p-2 bg-gray-50 rounded-md">
                                <div className="font-medium">{producto.nombre}</div>
                                <div className="text-muted-foreground">
                                  Cantidad: {producto.cantidadDevolver} | Código: {producto.codigo}
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>

{devolucion.motivoGeneral && (
                          <div className="mb-4">
                            <h4 className="text-sm font-medium mb-2">Motivo general:</h4>
                            <p className="text-sm p-3 bg-gray-50 rounded-md">{devolucion.motivoGeneral}</p>
                          </div>
                        )}

<div className="text-sm text-muted-foreground">
                          Total devuelto: $
                          {devolucion.productos
                            .reduce(
                              (total: number, producto: any) =>
                                total + producto.precioCompra * producto.cantidadDevolver,
                              0,
                            )
                            .toLocaleString()}
                        </div>
                      </div>
                    )
                  })}
                {filteredDevoluciones.length === 0 && (
                  <div className="text-center p-6 text-muted-foreground">
                    No hay devoluciones que coincidan con la búsqueda
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Diálogo para cambiar estado del pedido */}
      <Dialog open={showCambiarEstadoDialog} onOpenChange={setShowCambiarEstadoDialog}>
        <DialogContentPrimitive className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Cambiar Estado del Pedido</DialogTitle>
            <DialogDescription>Actualice el estado del pedido #{pedidoParaCambiarEstado?.id}</DialogDescription>
          </DialogHeader>
          <div className="py-4 space-y-4">
            <div className="space-y-2">
              <Label htmlFor="nuevoEstado">Nuevo estado</Label>
              <Select value={nuevoEstadoPedido} onValueChange={setNuevoEstadoPedido}>
                <SelectTrigger id="nuevoEstado">
                  <SelectValue placeholder="Seleccione un estado" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Pendiente">Pendiente</SelectItem>
                  <SelectItem value="En tránsito">En tránsito</SelectItem>
                  <SelectItem value="Entregado">Entregado</SelectItem>
                </SelectContent>
              </Select>
            </div>

{nuevoEstadoPedido === "Entregado" && (
              <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-md">
                <div className="flex items-start gap-2">
                  <AlertCircle className="h-5 w-5 text-yellow-600 mt-0.5 flex-shrink-0" />
                  <div className="space-y-2">
                    <p className="text-sm font-medium text-yellow-800">Información importante</p>
                    <p className="text-sm text-yellow-700">
                      Cambiar el estado a "Entregado" <strong>NO agrega automáticamente los productos al stock</strong>.
                    </p>
                    <p className="text-sm text-yellow-700">
                      Para cargar los productos al stock, debe hacerlo desde la sección de Depósitos.
                    </p>
                    <Link
                      href="/dashboard/depositos"
                      className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 font-medium"
                    >
                      <ExternalLink className="h-4 w-4" />
                      Ir a Depósitos
                    </Link>
                  </div>
                </div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowCambiarEstadoDialog(false)}>
              Cancelar
            </Button>
            <Button
              onClick={confirmarCambioEstado}
              disabled={!nuevoEstadoPedido}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              Confirmar Cambio
            </Button>
          </DialogFooter>
        </DialogContentPrimitive>
      </Dialog>

{/* Diálogo de creación de pedido */}
      <Dialog open={showPedidoDialog} onOpenChange={setShowPedidoDialog}>
        <DialogContentPrimitive className="sm:max-w-[700px]">
          <DialogHeader>
            <DialogTitle>Crear pedido a proveedor</DialogTitle>
            <DialogDescription>Complete los datos para crear un nuevo pedido</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="proveedor">Proveedor</Label>
                <Select
                  value={pedidoForm.proveedor}
                  onValueChange={(value) => handlePedidoFormChange("proveedor", value)}
                >
                  <SelectTrigger id="proveedor">
                    <SelectValue placeholder="Seleccione proveedor" />
                  </SelectTrigger>
                  <SelectContent>
                    {proveedores
                      .filter((p) => p.estado === "Activo")
                      .map((proveedor) => (
                        <SelectItem key={proveedor.id} value={proveedor.id.toString()}>
                          {proveedor.nombreEmpresa}
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="fechaEntrega">Fecha estimada de entrega</Label>
                <Input
                  id="fechaEntrega"
                  type="date"
                  value={pedidoForm.fechaEntrega}
                  onChange={(e) => handlePedidoFormChange("fechaEntrega", e.target.value)}
                />
              </div>
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label>Productos a pedir</Label>
                <div className="relative w-[250px]">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar producto..."
                    className="pl-8"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
              </div>

<div className="border rounded-md">
                <div className="max-h-[200px] overflow-y-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Código</TableHead>
                        <TableHead>Nombre</TableHead>
                        <TableHead>Precio venta</TableHead>
                        <TableHead>Categoría</TableHead>
                        <TableHead></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredProductos.map((producto) => (
                        <TableRow key={producto.id}>
                          <TableCell className="font-medium">{producto.codigo}</TableCell>
                          <TableCell>{producto.nombre}</TableCell>
                          <TableCell>${producto.precio.toLocaleString()}</TableCell>
                          <TableCell>{producto.categoria}</TableCell>
                          <TableCell>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => addProductToPedido(producto)}
                              disabled={selectedProducts.some((p) => p.id === producto.id)}
                            >
                              Agregar
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label>Productos seleccionados</Label>
              {selectedProducts.length === 0 ? (
                <div className="border rounded-md p-4 text-center text-muted-foreground">
                  No hay productos seleccionados
                </div>
              ) : (
                <div className="border rounded-md">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Producto</TableHead>
                        <TableHead>Precio compra</TableHead>
                        <TableHead>Cantidad</TableHead>
                        <TableHead>Subtotal</TableHead>
                        <TableHead></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {selectedProducts.map((producto) => (
                        <TableRow key={producto.id}>
                          <TableCell>
                            <div>
                              <div className="font-medium">{producto.nombre}</div>
                              <div className="text-sm text-muted-foreground">{producto.codigo}</div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <Input
                              type="number"
                              min="1"
                              value={producto.precioCompra}
                              onChange={(e) => changeProductPrecioCompra(producto.id, Number.parseInt(e.target.value))}
                              className="w-24"
                            />
                          </TableCell>
                          <TableCell>
                            <Input
                              type="number"
                              min="1"
                              value={producto.cantidad}
                              onChange={(e) => changeProductQuantity(producto.id, Number.parseInt(e.target.value))}
                              className="w-20"
                            />
                          </TableCell>
                          <TableCell>${(producto.precioCompra * producto.cantidad).toLocaleString()}</TableCell>
                          <TableCell>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => removeProductFromPedido(producto.id)}
                              className="text-red-500"
                            >
                              Eliminar
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              )}
            </div>

{selectedProducts.length > 0 && (
              <div className="pt-2 border-t">
                <div className="flex justify-between text-lg font-bold">
                  <span>Total:</span>
                  <span>
                    $
                    {selectedProducts
                      .reduce((total, product) => total + product.precioCompra * product.cantidad, 0)
                      .toLocaleString()}
                  </span>
                </div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPedidoDialog(false)}>
              Cancelar
            </Button>
            <Button
              onClick={confirmPedido}
              disabled={!pedidoForm.proveedor || !pedidoForm.fechaEntrega || selectedProducts.length === 0}
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
            >
              Confirmar pedido
            </Button>
          </DialogFooter>
        </DialogContentPrimitive>
      </Dialog>

{/* Diálogo de nuevo proveedor */}
      <Dialog open={showNewProveedorDialog} onOpenChange={setShowNewProveedorDialog}>
        <DialogContentPrimitive className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Crear nuevo proveedor</DialogTitle>
            <DialogDescription>Complete los datos para crear un nuevo proveedor</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4 max-h-[70vh] overflow-y-auto">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="cuit" className="flex items-center gap-2">
                  <FileText className="h-4 w-4" />
                  CUIT
                </Label>
                <Input
                  id="cuit"
                  placeholder="20-12345678-9"
                  value={proveedorForm.cuit}
                  onChange={(e) => handleProveedorFormChange("cuit", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="tipoFactura">Tipo de factura</Label>
                <Select
                  value={proveedorForm.tipoFactura}
                  onValueChange={(value) => handleProveedorFormChange("tipoFactura", value)}
                >
                  <SelectTrigger id="tipoFactura">
                    <SelectValue placeholder="Seleccione tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="A">Factura A</SelectItem>
                    <SelectItem value="B">Factura B</SelectItem>
                    <SelectItem value="C">Factura C</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="nombreEmpresa" className="flex items-center gap-2">
                <Building2 className="h-4 w-4" />
                Nombre de la empresa
              </Label>
              <Input
                id="nombreEmpresa"
                placeholder="Editorial Planeta S.A."
                value={proveedorForm.nombreEmpresa}
                onChange={(e) => handleProveedorFormChange("nombreEmpresa", e.target.value)}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="razonSocial">Razón social</Label>
              <Input
                id="razonSocial"
                placeholder="Editorial Planeta Sociedad Anónima"
                value={proveedorForm.razonSocial}
                onChange={(e) => handleProveedorFormChange("razonSocial", e.target.value)}
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="telefono" className="flex items-center gap-2">
                  <Phone className="h-4 w-4" />
                  Teléfono empresa
                </Label>
                <Input
                  id="telefono"
                  placeholder="11-2233-4455"
                  value={proveedorForm.telefono}
                  onChange={(e) => handleProveedorFormChange("telefono", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email" className="flex items-center gap-2">
                  <Mail className="h-4 w-4" />
                  Email empresa
                </Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="ventas@empresa.com"
                  value={proveedorForm.email}
                  onChange={(e) => handleProveedorFormChange("email", e.target.value)}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="direccion" className="flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                Dirección
              </Label>
              <Input
                id="direccion"
                placeholder="Av. Corrientes 1234, CABA"
                value={proveedorForm.direccion}
                onChange={(e) => handleProveedorFormChange("direccion", e.target.value)}
              />
            </div>

<div className="border-t pt-4">
              <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
                <User className="h-5 w-5" />
                Datos del contacto referente
              </h3>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="contactoApellido">Apellido</Label>
                  <Input
                    id="contactoApellido"
                    placeholder="Pérez"
                    value={proveedorForm.contactoApellido}
                    onChange={(e) => handleProveedorFormChange("contactoApellido", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="contactoNombre">Nombre</Label>
                  <Input
                    id="contactoNombre"
                    placeholder="Juan"
                    value={proveedorForm.contactoNombre}
                    onChange={(e) => handleProveedorFormChange("contactoNombre", e.target.value)}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4 mt-4">
                <div className="space-y-2">
                  <Label htmlFor="contactoTelefono" className="flex items-center gap-2">
                    <Phone className="h-4 w-4" />
                    Teléfono contacto
                  </Label>
                  <Input
                    id="contactoTelefono"
                    placeholder="11-2233-4456"
                    value={proveedorForm.contactoTelefono}
                    onChange={(e) => handleProveedorFormChange("contactoTelefono", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="contactoEmail" className="flex items-center gap-2">
                    <Mail className="h-4 w-4" />
                    Email contacto
                  </Label>
                  <Input
                    id="contactoEmail"
                    type="email"
                    placeholder="juan.perez@empresa.com"
                    value={proveedorForm.contactoEmail}
                    onChange={(e) => handleProveedorFormChange("contactoEmail", e.target.value)}
                  />
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="observaciones">Observaciones</Label>
              <Textarea
                id="observaciones"
                placeholder="Observaciones adicionales"
                value={proveedorForm.observaciones}
                onChange={(e) => handleProveedorFormChange("observaciones", e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowNewProveedorDialog(false)}>
              Cancelar
            </Button>
            <Button
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
              onClick={saveProveedor}
              disabled={
                !proveedorForm.cuit ||
                !proveedorForm.nombreEmpresa ||
                !proveedorForm.razonSocial ||
                !proveedorForm.contactoApellido ||
                !proveedorForm.contactoNombre
              }
            >
              Guardar
            </Button>
          </DialogFooter>
        </DialogContentPrimitive>
      </Dialog>

{/* Diálogo de edición de proveedor */}
      <Dialog open={showEditProveedorDialog} onOpenChange={setShowEditProveedorDialog}>
        <DialogContentPrimitive className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Editar proveedor</DialogTitle>
            <DialogDescription>Modifique los datos del proveedor</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4 max-h-[70vh] overflow-y-auto">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-cuit" className="flex items-center gap-2">
                  <FileText className="h-4 w-4" />
                  CUIT
                </Label>
                <Input
                  id="edit-cuit"
                  placeholder="20-12345678-9"
                  value={proveedorForm.cuit}
                  onChange={(e) => handleProveedorFormChange("cuit", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-tipoFactura">Tipo de factura</Label>
                <Select
                  value={proveedorForm.tipoFactura}
                  onValueChange={(value) => handleProveedorFormChange("tipoFactura", value)}
                >
                  <SelectTrigger id="edit-tipoFactura">
                    <SelectValue placeholder="Seleccione tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="A">Factura A</SelectItem>
                    <SelectItem value="B">Factura B</SelectItem>
                    <SelectItem value="C">Factura C</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="edit-nombreEmpresa" className="flex items-center gap-2">
                <Building2 className="h-4 w-4" />
                Nombre de la empresa
              </Label>
              <Input
                id="edit-nombreEmpresa"
                placeholder="Editorial Planeta S.A."
                value={proveedorForm.nombreEmpresa}
                onChange={(e) => handleProveedorFormChange("nombreEmpresa", e.target.value)}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="edit-razonSocial">Razón social</Label>
              <Input
                id="edit-razonSocial"
                placeholder="Editorial Planeta Sociedad Anónima"
                value={proveedorForm.razonSocial}
                onChange={(e) => handleProveedorFormChange("razonSocial", e.target.value)}
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-telefono" className="flex items-center gap-2">
                  <Phone className="h-4 w-4" />
                  Teléfono empresa
                </Label>
                <Input
                  id="edit-telefono"
                  placeholder="11-2233-4455"
                  value={proveedorForm.telefono}
                  onChange={(e) => handleProveedorFormChange("telefono", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-email" className="flex items-center gap-2">
                  <Mail className="h-4 w-4" />
                  Email empresa
                </Label>
                <Input
                  id="edit-email"
                  type="email"
                  placeholder="ventas@empresa.com"
                  value={proveedorForm.email}
                  onChange={(e) => handleProveedorFormChange("email", e.target.value)}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="edit-direccion" className="flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                Dirección
              </Label>
              <Input
                id="edit-direccion"
                placeholder="Av. Corrientes 1234, CABA"
                value={proveedorForm.direccion}
                onChange={(e) => handleProveedorFormChange("direccion", e.target.value)}
              />
            </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-contactoApellido">Apellido</Label>
                  <Input
                    id="edit-contactoApellido"
                    placeholder="Pérez"
                    value={proveedorForm.contactoApellido}
                    onChange={(e) => handleProveedorFormChange("contactoApellido", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-contactoNombre">Nombre</Label>
                  <Input
                    id="edit-contactoNombre"
                    placeholder="Juan"
                    value={proveedorForm.contactoNombre}
                    onChange={(e) => handleProveedorFormChange("contactoNombre", e.target.value)}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4 mt-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-contactoTelefono" className="flex items-center gap-2">
                    <Phone className="h-4 w-4" />
                    Teléfono contacto
                  </Label>
                  <Input
                    id="edit-contactoTelefono"
                    placeholder="11-2233-4456"
                    value={proveedorForm.contactoTelefono}
                    onChange={(e) => handleProveedorFormChange("contactoTelefono", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-contactoEmail" className="flex items-center gap-2">
                    <Mail className="h-4 w-4" />
                    Email contacto
                  </Label>
                  <Input
                    id="edit-contactoEmail"
                    type="email"
                    placeholder="juan.perez@empresa.com"
                    value={proveedorForm.contactoEmail}
                    onChange={(e) => handleProveedorFormChange("contactoEmail", e.target.value)}
                  />
                </div>
              </div>
            </div>

<div className="flex items-center justify-between">
              <Label htmlFor="edit-estado">Proveedor activo</Label>
              <div className="flex h-6 items-center">
                <input
                  id="edit-estado"
                  type="checkbox"
                  className="h-4 w-4"
                  checked={proveedorForm.estado}
                  onChange={(e) => handleProveedorFormChange("estado", e.target.checked)}
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditProveedorDialog(false)}>
              Cancelar
            </Button>
            <Button
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
              onClick={saveProveedor}
              disabled={
                !proveedorForm.cuit ||
                !proveedorForm.nombreEmpresa ||
                !proveedorForm.razonSocial ||
                !proveedorForm.contactoApellido ||
                !proveedorForm.contactoNombre
              }
            >
              Guardar cambios
            </Button>
          </DialogFooter>
        </DialogContentPrimitive>
      </Dialog>

{/* Diálogo de listado de pedidos */}
      <Dialog open={showPedidosListDialog} onOpenChange={setShowPedidosListDialog}>
        <DialogContent className="sm:max-w-[900px]">
          <DialogHeader>
            <DialogTitle>Pedidos a proveedor: {selectedProveedor?.nombreEmpresa}</DialogTitle>
            <DialogDescription>Historial de pedidos realizados a este proveedor</DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <div className="flex items-center justify-between mb-4">
              <div className="flex-1"></div>
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => exportarPedidos("excel")}>
                  <Download className="mr-2 h-4 w-4" />
                  Excel
                </Button>
                <Button variant="outline" onClick={() => exportarPedidos("pdf")}>
                  <FileText className="mr-2 h-4 w-4" />
                  PDF
                </Button>
              </div>
            </div>

<div className="mb-4">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar por ID, producto, fecha..."
                  className="pl-8"
                  value={pedidoSearchTerm}
                  onChange={(e) => setPedidoSearchTerm(e.target.value)}
                />
              </div>
            </div>

<Tabs defaultValue="todos" value={pedidoFilter} onValueChange={setPedidoFilter}>
              <TabsList className="mb-4">
                <TabsTrigger value="todos">Todos</TabsTrigger>
                <TabsTrigger value="pendientes">Pendientes</TabsTrigger>
                <TabsTrigger value="en-transito">En tránsito</TabsTrigger>
                <TabsTrigger value="entregados">Entregados</TabsTrigger>
              </TabsList>

<TabsContent value="todos" className="mt-0">
                {filteredPedidos.length === 0 ? (
                  <div className="text-center p-6 text-muted-foreground">
                    No hay pedidos que coincidan con la búsqueda
                  </div>
                ) : (
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Fecha pedido</TableHead>
                          <TableHead>Fecha entrega</TableHead>
                          <TableHead>Productos</TableHead>
                          <TableHead>Total</TableHead>
                          <TableHead>Estado</TableHead>
                          <TableHead>Observaciones</TableHead>
                          <TableHead>Acciones</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredPedidos.map((pedido) => (
                          <TableRow key={pedido.id}>
                            <TableCell>{pedido.id}</TableCell>
                            <TableCell>{new Date(pedido.fecha).toLocaleDateString()}</TableCell>
                            <TableCell>{new Date(pedido.fechaEntrega).toLocaleDateString()}</TableCell>
                            <TableCell>
                              <div className="text-sm">
                                {pedido.productos.map((prod, idx) => (
                                  <div key={idx}>
                                    {prod.cantidad} x {prod.nombre}
                                  </div>
                                ))}
                              </div>
                            </TableCell>
                            <TableCell>${pedido.total.toLocaleString()}</TableCell>
                            <TableCell>{getPedidoEstadoBadge(pedido.estado)}</TableCell>
                            <TableCell>
                              {pedido.observaciones ? (
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        className="h-auto p-0 text-left font-normal"
                                        onClick={() => setSelectedObservacion(pedido.observaciones)}
                                      >
                                        <span className="line-clamp-2 text-sm">{pedido.observaciones}</span>
                                      </Button>
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-xs">
                                      <p>{pedido.observaciones}</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              ) : (
                                <span className="text-muted-foreground">-</span>
                              )}
                            </TableCell>
                            <TableCell>
                              {pedido.estado === "Entregado" && !pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700"
                                    onClick={() => cargarAlStock(pedido)}
                                  >
                                    <Package className="mr-1 h-4 w-4" />
                                    Cargar al Stock
                                  </Button>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                </div>
                              )}
                              {pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
                                    <CheckCircle className="mr-1 h-3 w-3" /> Cargado
                                  </Badge>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                  {devoluciones.some((dev) => dev.pedidoId === pedido.id) && (
                                    <div className="flex flex-col gap-2">
                                      <Button
                                        variant="outline"
                                        size="sm"
                                        className="bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
                                        onClick={() => verHistorialDevoluciones(pedido)}
                                      >
                                        <History className="mr-1 h-4 w-4" />
                                        Ver Devoluciones
                                      </Button>
                                      {devoluciones
                                        .filter((dev) => dev.pedidoId === pedido.id)
                                        .map((devolucion, index) => (
                                          <Button
                                            key={index}
                                            variant="outline"
                                            size="sm"
                                            className="bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-700"
                                            onClick={() => {
                                              setSelectedDevolucion(devolucion)
                                              setShowVerNotaDevolucionDialog(true)
                                            }}
                                          >
                                            <FileText className="mr-1 h-4 w-4" />
                                            Ver Nota #{devolucion.id}
                                          </Button>
                                        ))}
                                    </div>
                                  )}
                                </div>
                              )}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </TabsContent>
              <TabsContent value="pendientes" className="mt-0">
                {filteredPedidos.length === 0 ? (
                  <div className="text-center p-6 text-muted-foreground">
                    No hay pedidos pendientes que coincidan con la búsqueda
                  </div>
                ) : (
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Fecha pedido</TableHead>
                          <TableHead>Fecha entrega</TableHead>
                          <TableHead>Productos</TableHead>
                          <TableHead>Total</TableHead>
                          <TableHead>Estado</TableHead>
                          <TableHead>Observaciones</TableHead>
                          <TableHead>Acciones</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredPedidos.map((pedido) => (
                          <TableRow key={pedido.id}>
                            <TableCell>{pedido.id}</TableCell>
                            <TableCell>{new Date(pedido.fecha).toLocaleDateString()}</TableCell>
                            <TableCell>{new Date(pedido.fechaEntrega).toLocaleDateString()}</TableCell>
                            <TableCell>
                              <div className="text-sm">
                                {pedido.productos.map((prod, idx) => (
                                  <div key={idx}>
                                    {prod.cantidad} x {prod.nombre}
                                  </div>
                                ))}
                              </div>
                            </TableCell>
                            <TableCell>${pedido.total.toLocaleString()}</TableCell>
                            <TableCell>{getPedidoEstadoBadge(pedido.estado)}</TableCell>
                            <TableCell>
                              {pedido.observaciones ? (
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        className="h-auto p-0 text-left font-normal"
                                        onClick={() => setSelectedObservacion(pedido.observaciones)}
                                      >
                                        <span className="line-clamp-2 text-sm">{pedido.observaciones}</span>
                                      </Button>
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-xs">
                                      <p>{pedido.observaciones}</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              ) : (
                                <span className="text-muted-foreground">-</span>
                              )}
                            </TableCell>
                            <TableCell>
                              {pedido.estado === "Entregado" && !pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700"
                                    onClick={() => cargarAlStock(pedido)}
                                  >
                                    <Package className="mr-1 h-4 w-4" />
                                    Cargar al Stock
                                  </Button>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                </div>
                              )}
                              {pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
                                    <CheckCircle className="mr-1 h-3 w-3" /> Cargado
                                  </Badge>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                  {devoluciones.some((dev) => dev.pedidoId === pedido.id) && (
                                    <div className="flex flex-col gap-2">
                                      <Button
                                        variant="outline"
                                        size="sm"
                                        className="bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
                                        onClick={() => verHistorialDevoluciones(pedido)}
                                      >
                                        <History className="mr-1 h-4 w-4" />
                                        Ver Devoluciones
                                      </Button>
                                      {devoluciones
                                        .filter((dev) => dev.pedidoId === pedido.id)
                                        .map((devolucion, index) => (
                                          <Button
                                            key={index}
                                            variant="outline"
                                            size="sm"
                                            className="bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-700"
                                            onClick={() => {
                                              setSelectedDevolucion(devolucion)
                                              setShowVerNotaDevolucionDialog(true)
                                            }}
                                          >
                                            <FileText className="mr-1 h-4 w-4" />
                                            Ver Nota #{devolucion.id}
                                          </Button>
                                        ))}
                                    </div>
                                  )}
                                </div>
                              )}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </TabsContent>
              <TabsContent value="en-transito" className="mt-0">
                {filteredPedidos.length === 0 ? (
                  <div className="text-center p-6 text-muted-foreground">
                    No hay pedidos en tránsito que coincidan con la búsqueda
                  </div>
                ) : (
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Fecha pedido</TableHead>
                          <TableHead>Fecha entrega</TableHead>
                          <TableHead>Productos</TableHead>
                          <TableHead>Total</TableHead>
                          <TableHead>Estado</TableHead>
                          <TableHead>Observaciones</TableHead>
                          <TableHead>Acciones</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredPedidos.map((pedido) => (
                          <TableRow key={pedido.id}>
                            <TableCell>{pedido.id}</TableCell>
                            <TableCell>{new Date(pedido.fecha).toLocaleDateString()}</TableCell>
                            <TableCell>{new Date(pedido.fechaEntrega).toLocaleDateString()}</TableCell>
                            <TableCell>
                              <div className="text-sm">
                                {pedido.productos.map((prod, idx) => (
                                  <div key={idx}>
                                    {prod.cantidad} x {prod.nombre}
                                  </div>
                                ))}
                              </div>
                            </TableCell>
                            <TableCell>${pedido.total.toLocaleString()}</TableCell>
                            <TableCell>{getPedidoEstadoBadge(pedido.estado)}</TableCell>
                            <TableCell>
                              {pedido.observaciones ? (
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        className="h-auto p-0 text-left font-normal"
                                        onClick={() => setSelectedObservacion(pedido.observaciones)}
                                      >
                                        <span className="line-clamp-2 text-sm">{pedido.observaciones}</span>
                                      </Button>
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-xs">
                                      <p>{pedido.observaciones}</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              ) : (
                                <span className="text-muted-foreground">-</span>
                              )}
                            </TableCell>
                            <TableCell>
                              {pedido.estado === "Entregado" && !pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700"
                                    onClick={() => cargarAlStock(pedido)}
                                  >
                                    <Package className="mr-1 h-4 w-4" />
                                    Cargar al Stock
                                  </Button>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                </div>
                              )}
                              {pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
                                    <CheckCircle className="mr-1 h-3 w-3" /> Cargado
                                  </Badge>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                  {devoluciones.some((dev) => dev.pedidoId === pedido.id) && (
                                    <div className="flex flex-col gap-2">
                                      <Button
                                        variant="outline"
                                        size="sm"
                                        className="bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
                                        onClick={() => verHistorialDevoluciones(pedido)}
                                      >
                                        <History className="mr-1 h-4 w-4" />
                                        Ver Devoluciones
                                      </Button>
                                      {devoluciones
                                        .filter((dev) => dev.pedidoId === pedido.id)
                                        .map((devolucion, index) => (
                                          <Button
                                            key={index}
                                            variant="outline"
                                            size="sm"
                                            className="bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-700"
                                            onClick={() => {
                                              setSelectedDevolucion(devolucion)
                                              setShowVerNotaDevolucionDialog(true)
                                            }}
                                          >
                                            <FileText className="mr-1 h-4 w-4" />
                                            Ver Nota #{devolucion.id}
                                          </Button>
                                        ))}
                                    </div>
                                  )}
                                </div>
                              )}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </TabsContent>
              <TabsContent value="entregados" className="mt-0">
                {filteredPedidos.length === 0 ? (
                  <div className="text-center p-6 text-muted-foreground">
                    No hay pedidos entregados que coincidan con la búsqueda
                  </div>
                ) : (
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>ID</TableHead>
                          <TableHead>Fecha pedido</TableHead>
                          <TableHead>Fecha entrega</TableHead>
                          <TableHead>Productos</TableHead>
                          <TableHead>Total</TableHead>
                          <TableHead>Estado</TableHead>
                          <TableHead>Observaciones</TableHead>
                          <TableHead>Acciones</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredPedidos.map((pedido) => (
                          <TableRow key={pedido.id}>
                            <TableCell>{pedido.id}</TableCell>
                            <TableCell>{new Date(pedido.fecha).toLocaleDateString()}</TableCell>
                            <TableCell>{new Date(pedido.fechaEntrega).toLocaleDateString()}</TableCell>
                            <TableCell>
                              <div className="text-sm">
                                {pedido.productos.map((prod, idx) => (
                                  <div key={idx}>
                                    {prod.cantidad} x {prod.nombre}
                                  </div>
                                ))}
                              </div>
                            </TableCell>
                            <TableCell>${pedido.total.toLocaleString()}</TableCell>
                            <TableCell>{getPedidoEstadoBadge(pedido.estado)}</TableCell>
                            <TableCell>
                              {pedido.observaciones ? (
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        className="h-auto p-0 text-left font-normal"
                                        onClick={() => setSelectedObservacion(pedido.observaciones)}
                                      >
                                        <span className="line-clamp-2 text-sm">{pedido.observaciones}</span>
                                      </Button>
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-xs">
                                      <p>{pedido.observaciones}</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              ) : (
                                <span className="text-muted-foreground">-</span>
                              )}
                            </TableCell>
                            <TableCell>
                              {pedido.estado === "Entregado" && !pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700"
                                    onClick={() => cargarAlStock(pedido)}
                                  >
                                    <Package className="mr-1 h-4 w-4" />
                                    Cargar al Stock
                                  </Button>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                </div>
                              )}
                              {pedidosCargados.includes(pedido.id) && (
                                <div className="flex flex-col gap-2">
                                  <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
                                    <CheckCircle className="mr-1 h-3 w-3" /> Cargado
                                  </Badge>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
                                    onClick={() => crearNotaDevolucion(pedido)}
                                  >
                                    <RotateCcw className="mr-1 h-4 w-4" />
                                    Nota de Devolución
                                  </Button>
                                  {devoluciones.some((dev) => dev.pedidoId === pedido.id) && (
                                    <div className="flex flex-col gap-2">
                                      <Button
                                        variant="outline"
                                        size="sm"
                                        className="bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
                                        onClick={() => verHistorialDevoluciones(pedido)}
                                      >
                                        <History className="mr-1 h-4 w-4" />
                                        Ver Devoluciones
                                      </Button>
                                      {devoluciones
                                        .filter((dev) => dev.pedidoId === pedido.id)
                                        .map((devolucion, index) => (
                                          <Button
                                            key={index}
                                            variant="outline"
                                            size="sm"
                                            className="bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-700"
                                            onClick={() => {
                                              setSelectedDevolucion(devolucion)
                                              setShowVerNotaDevolucionDialog(true)
                                            }}
                                          >
                                            <FileText className="mr-1 h-4 w-4" />
                                            Ver Nota #{devolucion.id}
                                          </Button>
                                        ))}
                                    </div>
                                  )}
                                </div>
                              )}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setShowPedidosListDialog(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo para registrar pago */}
      <Dialog open={showPagoDialog} onOpenChange={setShowPagoDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Registrar Pago a Proveedor</DialogTitle>
            <DialogDescription>
              Registre un pago realizado a {selectedProveedorParaPago?.nombreEmpresa}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4 space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="monto">Monto del pago</Label>
                <Input
                  id="monto"
                  type="number"
                  placeholder="0"
                  value={pagoForm.monto}
                  onChange={(e) => setPagoForm({ ...pagoForm, monto: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="fecha">Fecha del pago</Label>
                <Input
                  id="fecha"
                  type="date"
                  value={pagoForm.fecha}
                  onChange={(e) => setPagoForm({ ...pagoForm, fecha: e.target.value })}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="metodoPago">Método de pago</Label>
              <Select
                value={pagoForm.metodoPago}
                onValueChange={(value) => setPagoForm({ ...pagoForm, metodoPago: value })}
              >
                <SelectTrigger id="metodoPago">
                  <SelectValue placeholder="Seleccione método de pago" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Efectivo">Efectivo</SelectItem>
                  <SelectItem value="Transferencia bancaria">Transferencia bancaria</SelectItem>
                  <SelectItem value="Cheque">Cheque</SelectItem>
                  <SelectItem value="Tarjeta de débito">Tarjeta de débito</SelectItem>
                  <SelectItem value="Tarjeta de crédito">Tarjeta de crédito</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="pedidoBusqueda">Buscar pedido asociado (opcional)</Label>
              <div className="flex gap-2">
                <Input
                  id="pedidoBusqueda"
                  placeholder="Ingrese número de pedido"
                  value={pedidoBusqueda}
                  onChange={(e) => setPedidoBusqueda(e.target.value)}
                />
                <Button
                  variant="outline"
                  onClick={() => {
                    const pedidosEncontrados = buscarPedidoPorNumero(pedidoBusqueda)
                    if (pedidosEncontrados.length > 0) {
                      const pedido = pedidosEncontrados.find((p) => p.proveedorId === selectedProveedorParaPago?.id)
                      if (pedido) {
                        setPagoForm({ ...pagoForm, pedidoId: pedido.id.toString() })
                        toast({
                          title: "Pedido encontrado",
                          description: `Pedido #${pedido.id} asociado correctamente`,
                        })
                      } else {
                        toast({
                          title: "Pedido no encontrado",
                          description: "No se encontró un pedido con ese número para este proveedor",
                          variant: "destructive",
                        })
                      }
                    } else {
                      toast({
                        title: "Pedido no encontrado",
                        description: "No se encontró un pedido con ese número",
                        variant: "destructive",
                      })
                    }
                  }}
                >
                  <Search className="h-4 w-4" />
                </Button>
              </div>
              {pagoForm.pedidoId && (
                <div className="p-2 bg-green-50 border border-green-200 rounded-md">
                  <p className="text-sm text-green-700">Pedido #{pagoForm.pedidoId} seleccionado</p>
                </div>
              )}
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="comprobante">Comprobante</Label>
                <Input
                  id="comprobante"
                  placeholder="Número de comprobante"
                  value={pagoForm.comprobante}
                  onChange={(e) => setPagoForm({ ...pagoForm, comprobante: e.target.value })}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="concepto">Concepto</Label>
              <Textarea
                id="concepto"
                placeholder="Descripción del pago"
                value={pagoForm.concepto}
                onChange={(e) => setPagoForm({ ...pagoForm, concepto: e.target.value })}
              />
            </div>

{selectedProveedorParaPago && (
              <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
                <h4 className="text-sm font-medium text-blue-800 mb-2">Resumen de cuenta</h4>
                <div className="text-sm text-blue-700">
                  <div>
                    Total pedidos entregados: ${getTotalPedidosProveedor(selectedProveedorParaPago.id).toLocaleString()}
                  </div>
                  <div>
                    Total pagos realizados: ${getTotalPagosProveedor(selectedProveedorParaPago.id).toLocaleString()}
                  </div>
                  <div className="font-medium">
                    Saldo actual: $
                    {(
                      getTotalPedidosProveedor(selectedProveedorParaPago.id) -
                      getTotalPagosProveedor(selectedProveedorParaPago.id)
                    ).toLocaleString()}
                  </div>
                </div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPagoDialog(false)}>
              Cancelar
            </Button>
            <Button
              onClick={confirmarPago}
              disabled={!pagoForm.monto || !pagoForm.metodoPago}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              Registrar Pago
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Resto de diálogos existentes */}
      {/* Diálogo para ver observaciones completas */}
      {selectedObservacion && (
        <Dialog open={!!selectedObservacion} onOpenChange={() => setSelectedObservacion(null)}>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>Observaciones del pedido</DialogTitle>
            </DialogHeader>
            <div className="py-4">
              <p className="text-sm">{selectedObservacion}</p>
            </div>
            <DialogFooter>
              <Button onClick={() => setSelectedObservacion(null)}>Cerrar</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Diálogo para cargar al stock */}
      {selectedPedidoParaStock && (
        <Dialog open={showStockDialog} onOpenChange={setShowStockDialog}>
          <DialogContent className="sm:max-w-[700px]">
            <DialogHeader>
              <DialogTitle>Distribuir productos a depósitos</DialogTitle>
              <DialogDescription>
                Distribuya los productos del pedido #{selectedPedidoParaStock.id} a los diferentes depósitos
              </DialogDescription>
            </DialogHeader>
            <div className="py-4">
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Código</TableHead>
                      <TableHead>Producto</TableHead>
                      <TableHead>Cantidad</TableHead>
                      <TableHead>Distribución</TableHead>
                      <TableHead>Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {productosDistribucion.map((producto: any, index: number) => (
                      <TableRow key={index}>
                        <TableCell>{producto.codigo}</TableCell>
                        <TableCell>{producto.nombre}</TableCell>
                        <TableCell>{producto.cantidad}</TableCell>
                        <TableCell>
                          {producto.distribuciones && producto.distribuciones.length > 0 ? (
                            <div className="text-sm">
                              {producto.distribuciones.map((dist: any, idx: number) => (
                                <div key={idx} className="flex items-center gap-1 text-sm">
                                  <span className="font-medium">
                                    {depositos.find((d) => d.id.toString() === dist.depositoId)?.nombre}:
                                  </span>{" "}
                                  {dist.cantidad} unidades
                                </div>
                              ))}
                              {producto.distribucionCompleta ? (
                                <Badge className="mt-1 bg-green-100 text-green-800 border-green-300">
                                  <CheckCircle className="mr-1 h-3 w-3" /> Completo
                                </Badge>
                              ) : (
                                <Badge className="mt-1 bg-yellow-100 text-yellow-800 border-yellow-300">
                                  <AlertCircle className="mr-1 h-3 w-3" /> Pendiente:{" "}
                                  {producto.cantidad - producto.cantidadDistribuida} unidades
                                </Badge>
                              )}
                            </div>
                          ) : (
                            <Badge variant="outline" className="bg-gray-100">
                              Sin distribuir
                            </Badge>
                          )}
                        </TableCell>
                        <TableCell>
                          <Button
                            variant="outline"
                            size="sm"
                            className="flex items-center gap-1 bg-transparent"
                            onClick={() => abrirDistribucionProducto(producto)}
                          >
                            <SplitSquareVertical className="h-4 w-4" />
                            Distribuir
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

<div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                <div className="flex items-start">
                  <AlertCircle className="h-5 w-5 text-yellow-600 mr-2 mt-0.5" />
                  <div>
                    <p className="text-sm font-medium text-yellow-800">Información importante</p>
                    <p className="text-sm text-yellow-700 mt-1">
                      Debe distribuir todos los productos a los depósitos antes de confirmar la carga al stock.
                      Asegúrese de haber verificado físicamente los productos recibidos.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowStockDialog(false)}>
                Cancelar
              </Button>
              <Button
                onClick={confirmarCargaStock}
                disabled={!distribucionCompleta}
                className="bg-green-600 hover:bg-green-700 text-white"
              >
                Confirmar carga
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Diálogo para distribuir un producto */}
      {currentProductoDistribucion && (
        <Dialog open={showDistribucionDialog} onOpenChange={setShowDistribucionDialog}>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Distribuir producto a depósitos</DialogTitle>
              <DialogDescription>
                Distribuya {currentProductoDistribucion.nombre} ({currentProductoDistribucion.codigo}) a los diferentes
                depósitos
              </DialogDescription>
            </DialogHeader>
            <div className="py-4">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <span className="text-sm font-medium">Cantidad total:</span>{" "}
                  <span className="font-bold">{currentProductoDistribucion.cantidad} unidades</span>
                </div>
                <div>
                  <span className="text-sm font-medium">Cantidad restante:</span>{" "}
                  <span
                    className={`font-bold ${
                      cantidadRestante === 0 ? "text-green-600" : cantidadRestante < 0 ? "text-red-600" : ""
                    }`}
                  >
                    {cantidadRestante} unidades
                  </span>
                </div>
              </div>

<div className="space-y-4">
                {distribucionesProducto.map((distribucion, index) => (
                  <div key={index} className="flex items-center gap-3 p-3 border rounded-md">
                    <div className="flex-1">
                      <Select
                        value={distribucion.depositoId}
                        onValueChange={(value) => actualizarDistribucion(index, "depositoId", value)}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione depósito" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="">Seleccione depósito</SelectItem>
                          {depositos.map((deposito) => (
                            <SelectItem
                              key={deposito.id}
                              value={deposito.id.toString()}
                              disabled={distribucionesProducto
                                .filter((_, i) => i !== index)
                                .some((d) => d.depositoId === deposito.id.toString())}
                            >
                              {deposito.nombre}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="icon"
                        className="h-8 w-8 bg-transparent"
                        onClick={() => {
                          const currentCantidad = Number(distribucion.cantidad) || 0
                          if (currentCantidad > 0) {
                            actualizarDistribucion(index, "cantidad", currentCantidad - 1)
                          }
                        }}
                      >
                        <MinusCircle className="h-4 w-4" />
                      </Button>
                      <Input
                        type="number"
                        min="0"
                        max={currentProductoDistribucion.cantidad}
                        value={distribucion.cantidad}
                        onChange={(e) => actualizarDistribucion(index, "cantidad", Number(e.target.value) || 0)}
                        className="w-20 text-center"
                      />
                      <Button
                        variant="outline"
                        size="icon"
                        className="h-8 w-8 bg-transparent"
                        onClick={() => {
                          const currentCantidad = Number(distribucion.cantidad) || 0
                          actualizarDistribucion(index, "cantidad", currentCantidad + 1)
                        }}
                      >
                        <PlusCircle className="h-4 w-4" />
                      </Button>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-red-500"
                      onClick={() => eliminarDistribucion(index)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                ))}

{distribucionesProducto.length < depositos.length && (
                  <Button
                    variant="outline"
                    className="w-full mt-2 bg-transparent"
                    onClick={agregarDistribucion}
                    disabled={distribucionesProducto.length >= depositos.length}
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    Agregar depósito
                  </Button>
                )}
              </div>

{cantidadRestante < 0 && (
                <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
                  <div className="flex items-start">
                    <AlertCircle className="h-5 w-5 text-red-600 mr-2 mt-0.5" />
                    <div>
                      <p className="text-sm font-medium text-red-800">Error en la distribución</p>
                      <p className="text-sm text-red-700 mt-1">
                        La cantidad total distribuida excede la cantidad disponible del producto. Ajuste las cantidades.
                      </p>
                    </div>
                  </div>
                </div>
              )}

{cantidadRestante > 0 && (
                <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                  <div className="flex items-start">
                    <AlertCircle className="h-5 w-5 text-yellow-600 mr-2 mt-0.5" />
                    <div>
                      <p className="text-sm font-medium text-yellow-800">Distribución incompleta</p>
                      <p className="text-sm text-yellow-700 mt-1">
                        Aún quedan {cantidadRestante} unidades por distribuir. Debe distribuir todas las unidades para
                        continuar.
                      </p>
                    </div>
                  </div>
                </div>
              )}

{cantidadRestante === 0 && distribucionesProducto.length > 0 && (
                <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
                  <div className="flex items-start">
                    <CheckCircle className="h-5 w-5 text-green-600 mr-2 mt-0.5" />
                    <div>
                      <p className="text-sm font-medium text-green-800">Distribución completa</p>
                      <p className="text-sm text-green-700 mt-1">
                        Todas las unidades han sido distribuidas correctamente.
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowDistribucionDialog(false)}>
                Cancelar
              </Button>
              <Button
                onClick={confirmarDistribucionProducto}
                disabled={cantidadRestante !== 0 || distribucionesProducto.length === 0}
                className="bg-green-600 hover:bg-green-700 text-white"
              >
                Confirmar distribución
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Diálogo para crear nota de devolución */}
      {selectedPedidoParaDevolucion && (
        <Dialog open={showDevolucionDialog} onOpenChange={setShowDevolucionDialog}>
          <DialogContent className="sm:max-w-[700px]">
            <DialogHeader>
              <DialogTitle>Crear Nota de Devolución</DialogTitle>
              <DialogDescription>
                Seleccione los productos a devolver del pedido #{selectedPedidoParaDevolucion.id}
              </DialogDescription>
            </DialogHeader>
            <div className="py-4">
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Código</TableHead>
                      <TableHead>Producto</TableHead>
                      <TableHead>Cantidad Original</TableHead>
                      <TableHead>Cantidad a Devolver</TableHead>
                      <TableHead>Motivo</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {productosDevolucion.map((producto: any, index: number) => (
                      <TableRow key={index}>
                        <TableCell>{producto.codigo}</TableCell>
                        <TableCell>{producto.nombre}</TableCell>
                        <TableCell>{producto.cantidad}</TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <Button
                              variant="outline"
                              size="icon"
                              className="h-8 w-8 bg-transparent"
                              onClick={() => {
                                const currentCantidad = Number(producto.cantidadDevolver) || 0
                                if (currentCantidad > 0) {
                                  cambiarCantidadDevolucion(producto.id, currentCantidad - 1)
                                }
                              }}
                            >
                              <MinusCircle className="h-4 w-4" />
                            </Button>
                            <Input
                              type="number"
                              min="0"
                              max={producto.cantidad}
                              value={producto.cantidadDevolver}
                              onChange={(e) => cambiarCantidadDevolucion(producto.id, Number(e.target.value) || 0)}
                              className="w-20 text-center"
                            />
                            <Button
                              variant="outline"
                              size="icon"
                              className="h-8 w-8 bg-transparent"
                              onClick={() => {
                                const currentCantidad = Number(producto.cantidadDevolver) || 0
                                if (currentCantidad < producto.cantidad) {
                                  cambiarCantidadDevolucion(producto.id, currentCantidad + 1)
                                }
                              }}
                            >
                              <PlusCircle className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Input
                            placeholder="Motivo específico"
                            value={producto.motivo}
                            onChange={(e) => cambiarMotivoProducto(producto.id, e.target.value)}
                            disabled={producto.cantidadDevolver === 0}
                          />
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

<div className="mt-4 space-y-2">
                <Label htmlFor="motivoGeneral">Motivo general de la devolución</Label>
                <Textarea
                  id="motivoGeneral"
                  placeholder="Describa el motivo general de la devolución"
                  value={motivoDevolucion}
                  onChange={(e) => setMotivoDevolucion(e.target.value)}
                />
              </div>

<div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                <div className="flex items-start">
                  <AlertCircle className="h-5 w-5 text-yellow-600 mr-2 mt-0.5" />
                  <div>
                    <p className="text-sm font-medium text-yellow-800">Información importante</p>
                    <p className="text-sm text-yellow-700 mt-1">
                      Esta acción generará una nota de devolución para los productos seleccionados. Asegúrese de
                      especificar correctamente las cantidades y motivos de devolución.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowDevolucionDialog(false)}>
                Cancelar
              </Button>
              <Button onClick={confirmarDevolucion} className="bg-red-600 hover:bg-red-700 text-white">
                Crear Nota de Devolución
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Diálogo para ver historial de devoluciones */}
      {selectedPedidoParaDevolucion && (
        <Dialog open={showDevolucionesHistorialDialog} onOpenChange={setShowDevolucionesHistorialDialog}>
          <DialogContent className="sm:max-w-[700px]">
            <DialogHeader>
              <DialogTitle>Historial de Devoluciones</DialogTitle>
              <DialogDescription>Devoluciones asociadas al pedido #{selectedPedidoParaDevolucion.id}</DialogDescription>
            </DialogHeader>
            <div className="py-4">
              {devoluciones.filter((dev) => dev.pedidoId === selectedPedidoParaDevolucion.id).length === 0 ? (
                <div className="text-center p-6 text-muted-foreground">
                  No hay devoluciones registradas para este pedido
                </div>
              ) : (
                <div className="space-y-6">
                  {devoluciones
                    .filter((dev) => dev.pedidoId === selectedPedidoParaDevolucion.id)
                    .map((devolucion, index) => (
                      <div key={index} className="border rounded-md p-4">
                        <div className="flex items-center justify-between mb-4">
                          <div>
                            <h3 className="text-lg font-medium">Nota de Devolución #{devolucion.id}</h3>
                            <p className="text-sm text-muted-foreground">
                              Fecha: {new Date(devolucion.fecha).toLocaleDateString()}
                            </p>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge
                              variant="outline"
                              className={
                                devolucion.estado === "Pendiente"
                                  ? "bg-yellow-100 text-yellow-800 border-yellow-300"
                                  : devolucion.estado === "Aprobada"
                                    ? "bg-green-100 text-green-800 border-green-300"
                                    : "bg-red-100 text-red-800 border-red-300"
                              }
                            >
                              {devolucion.estado}
                            </Badge>
                            <Button
                              variant="outline"
                              size="sm"
                              className="bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
                              onClick={() => {
                                setSelectedDevolucion(devolucion)
                                setShowVerNotaDevolucionDialog(true)
                              }}
                            >
                              <FileText className="mr-1 h-4 w-4" />
                              Ver Nota Completa
                            </Button>
                          </div>
                        </div>

<div className="rounded-md border">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead>Producto</TableHead>
                                <TableHead>Cantidad</TableHead>
                                <TableHead>Motivo</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {devolucion.productos.map((producto: any, idx: number) => (
                                <TableRow key={idx}>
                                  <TableCell>
                                    <div>
                                      <div className="font-medium">{producto.nombre}</div>
                                      <div className="text-sm text-muted-foreground">{producto.codigo}</div>
                                    </div>
                                  </TableCell>
                                  <TableCell>{producto.cantidadDevolver}</TableCell>
                                  <TableCell>{producto.motivo || "-"}</TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </div>

{devolucion.motivoGeneral && (
                          <div className="mt-4">
                            <h4 className="text-sm font-medium mb-1">Motivo general:</h4>
                            <p className="text-sm p-2 bg-gray-50 rounded-md">{devolucion.motivoGeneral}</p>
                          </div>
                        )}
                      </div>
                    ))}
                </div>
              )}
            </div>
            <DialogFooter>
              <Button onClick={() => setShowDevolucionesHistorialDialog(false)}>Cerrar</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Diálogo para visualizar nota de devolución */}
      {selectedDevolucion && (
        <Dialog open={showVerNotaDevolucionDialog} onOpenChange={setShowVerNotaDevolucionDialog}>
          <DialogContent className="sm:max-w-[800px]">
            <DialogHeader>
              <DialogTitle>Nota de Devolución #{selectedDevolucion.id}</DialogTitle>
              <DialogDescription>
                Pedido #{selectedDevolucion.pedidoId} - Fecha: {new Date(selectedDevolucion.fecha).toLocaleDateString()}
              </DialogDescription>
            </DialogHeader>
            <div className="py-4">
              <div className="border rounded-md p-6 bg-white print:shadow-none">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h2 className="text-xl font-bold">NOTA DE DEVOLUCIÓN</h2>
                    <p className="text-sm text-muted-foreground">#{selectedDevolucion.id}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">Fecha: {new Date(selectedDevolucion.fecha).toLocaleDateString()}</p>
                    <p className="text-sm text-muted-foreground">
                      Pedido de referencia: #{selectedDevolucion.pedidoId}
                    </p>
                    <Badge
                      variant="outline"
                      className={
                        selectedDevolucion.estado === "Pendiente"
                          ? "bg-yellow-100 text-yellow-800 border-yellow-300 mt-2"
                          : selectedDevolucion.estado === "Aprobada"
                            ? "bg-green-100 text-green-800 border-green-300 mt-2"
                            : "bg-red-100 text-red-800 border-red-300 mt-2"
                      }
                    >
                      {selectedDevolucion.estado}
                    </Badge>
                  </div>
                </div>

<div className="mb-6">
                  <h3 className="text-md font-semibold mb-2">Datos del Proveedor</h3>
                  <div className="border rounded-md p-3 bg-gray-50">
                    <p className="font-medium">
                      {proveedores.find(
                        (p) => p.id === pedidos.find((ped) => ped.id === selectedDevolucion.pedidoId)?.proveedorId,
                      )?.nombreEmpresa || "Proveedor"}
                    </p>
                    <p className="text-sm">
                      Contacto:{" "}
                      {proveedores.find(
                        (p) => p.id === pedidos.find((ped) => ped.id === selectedDevolucion.pedidoId)?.proveedorId,
                      )?.contacto.apellido || ""}
                      ,{" "}
                      {proveedores.find(
                        (p) => p.id === pedidos.find((ped) => ped.id === selectedDevolucion.pedidoId)?.proveedorId,
                      )?.contacto.nombre || ""}
                    </p>
                    <p className="text-sm">
                      Email:{" "}
                      {proveedores.find(
                        (p) => p.id === pedidos.find((ped) => ped.id === selectedDevolucion.pedidoId)?.proveedorId,
                      )?.email || ""}
                    </p>
                    <p className="text-sm">
                      Teléfono:{" "}
                      {proveedores.find(
                        (p) => p.id === pedidos.find((ped) => ped.id === selectedDevolucion.pedidoId)?.proveedorId,
                      )?.telefono || ""}
                    </p>
                  </div>
                </div>

<div className="mb-6">
                  <h3 className="text-md font-semibold mb-2">Productos a Devolver</h3>
                  <div className="border rounded-md">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Código</TableHead>
                          <TableHead>Producto</TableHead>
                          <TableHead className="text-center">Cantidad</TableHead>
                          <TableHead className="text-right">Precio Unitario</TableHead>
                          <TableHead className="text-right">Subtotal</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {selectedDevolucion.productos.map((producto: any, idx: number) => (
                          <TableRow key={idx}>
                            <TableCell className="font-medium">{producto.codigo}</TableCell>
                            <TableCell>{producto.nombre}</TableCell>
                            <TableCell className="text-center">{producto.cantidadDevolver}</TableCell>
                            <TableCell className="text-right">${producto.precioCompra.toLocaleString()}</TableCell>
                            <TableCell className="text-right">
                              ${(producto.precioCompra * producto.cantidadDevolver).toLocaleString()}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                      <TableFooter>
                        <TableRow>
                          <TableCell colSpan={4} className="text-right font-medium">
                            Total
                          </TableCell>
                          <TableCell className="text-right font-bold">
                            $
                            {selectedDevolucion.productos
                              .reduce(
                                (total: number, producto: any) =>
                                  total + producto.precioCompra * producto.cantidadDevolver,
                                0,
                              )
                              .toLocaleString()}
                          </TableCell>
                        </TableRow>
                      </TableFooter>
                    </Table>
                  </div>
                </div>

<div className="mb-6">
                  <h3 className="text-md font-semibold mb-2">Motivos de Devolución</h3>
                  <div className="border rounded-md p-3">
                    <h4 className="text-sm font-medium mb-2">Motivo General:</h4>
                    <p className="text-sm p-2 bg-gray-50 rounded-md mb-3">
                      {selectedDevolucion.motivoGeneral || "No especificado"}
                    </p>

<h4 className="text-sm font-medium mb-2">Motivos Específicos:</h4>
                    <div className="space-y-2">
                      {selectedDevolucion.productos.map((producto: any, idx: number) =>
                        producto.motivo ? (
                          <div key={idx} className="text-sm p-2 bg-gray-50 rounded-md">
                            <span className="font-medium">{producto.nombre}:</span> {producto.motivo}
                          </div>
                        ) : null,
                      )}
                      {!selectedDevolucion.productos.some((p: any) => p.motivo) && (
                        <p className="text-sm text-muted-foreground">No se especificaron motivos individuales</p>
                      )}
                    </div>
                  </div>
                </div>

<div className="grid grid-cols-2 gap-6 mt-8">
                  <div className="border-t pt-4">
                    <p className="text-sm text-center mb-10">Firma y Sello del Proveedor</p>
                  </div>
                  <div className="border-t pt-4">
                    <p className="text-sm text-center mb-10">Firma y Sello de la Empresa</p>
                  </div>
                </div>

<div className="text-xs text-muted-foreground mt-6 text-center">
                  <p>Esta nota de devolución debe ser presentada al proveedor para su procesamiento.</p>
                  <p>
                    Documento generado el {new Date().toLocaleDateString()} a las {new Date().toLocaleTimeString()}
                  </p>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowVerNotaDevolucionDialog(false)}>
                Cerrar
              </Button>
              {selectedDevolucion?.estado === "Pendiente" && (
                <>
                  <Button
                    onClick={() => {
                      const updatedDevoluciones = devoluciones.map((dev) =>
                        dev.id === selectedDevolucion.id ? { ...dev, estado: "Aprobada" } : dev,
                      )
                      setDevoluciones(updatedDevoluciones)
                      toast({
                        title: "Estado actualizado",
                        description: "La devolución ha sido aprobada",
                      })
                    }}
                    className="bg-green-600 hover:bg-green-700 text-white"
                  >
                    <CheckCircle className="mr-2 h-4 w-4" />
                    Aprobar
                  </Button>
                  <Button
                    onClick={() => {
                      const updatedDevoluciones = devoluciones.map((dev) =>
                        dev.id === selectedDevolucion.id ? { ...dev, estado: "Rechazada" } : dev,
                      )
                      setDevoluciones(updatedDevoluciones)
                      toast({
                        title: "Estado actualizado",
                        description: "La devolución ha sido rechazada",
                      })
                    }}
                    variant="destructive"
                  >
                    <X className="mr-2 h-4 w-4" />
                    Rechazar
                  </Button>
                </>
              )}
              <Button
                onClick={() => {
                  const updatedDevoluciones = devoluciones.filter((dev) => dev.id !== selectedDevolucion.id)
                  setDevoluciones(updatedDevoluciones)
                  setShowVerNotaDevolucionDialog(false)
                  toast({
                    title: "Devolución eliminada",
                    description: "La nota de devolución ha sido eliminada",
                  })
                }}
                variant="destructive"
              >
                <Trash2 className="mr-2 h-4 w-4" />
                Eliminar
              </Button>
              <Button
                onClick={() => {
                  window.print()
                }}
                className="bg-blue-600 hover:bg-blue-700 text-white"
              >
                <Download className="mr-2 h-4 w-4" />
                Imprimir / Guardar PDF
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

{/* Diálogo para ver historial de pagos */}
      <Dialog open={showPagosHistorialDialog} onOpenChange={setShowPagosHistorialDialog}>
        <DialogContent className="sm:max-w-[800px]">
          <DialogHeader>
            <DialogTitle>Historial de Pagos</DialogTitle>
            <DialogDescription>Pagos realizados a {selectedProveedorParaPago?.nombreEmpresa}</DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {pagosProveedores.filter((pago) => pago.proveedorId === selectedProveedorParaPago?.id).length === 0 ? (
              <div className="text-center p-6 text-muted-foreground">No hay pagos registrados para este proveedor</div>
            ) : (
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Monto</TableHead>
                      <TableHead>Método</TableHead>
                      <TableHead>Pedido</TableHead>
                      <TableHead>Comprobante</TableHead>
                      <TableHead>Concepto</TableHead>
                      <TableHead>Estado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {pagosProveedores
                      .filter((pago) => pago.proveedorId === selectedProveedorParaPago?.id)
                      .sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                      .map((pago) => (
                        <TableRow key={pago.id}>
                          <TableCell>{new Date(pago.fecha).toLocaleDateString()}</TableCell>
                          <TableCell className="font-medium">${pago.monto.toLocaleString()}</TableCell>
                          <TableCell>{pago.metodoPago}</TableCell>
                          <TableCell>
                            {pago.pedidoId ? (
                              <span className="text-blue-600">Pedido #{pago.pedidoId}</span>
                            ) : (
                              <span className="text-muted-foreground">-</span>
                            )}
                          </TableCell>
                          <TableCell>{pago.comprobante || "-"}</TableCell>
                          <TableCell>{pago.concepto || "-"}</TableCell>
                          <TableCell>
                            <Badge className="bg-green-100 text-green-800 border-green-300">{pago.estado}</Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                  </TableBody>
                  <TableFooter>
                    <TableRow>
                      <TableCell colSpan={6} className="text-right font-medium">
                        Total pagado:
                      </TableCell>
                      <TableCell className="font-bold">
                        $
                        {pagosProveedores
                          .filter((pago) => pago.proveedorId === selectedProveedorParaPago?.id)
                          .reduce((total, pago) => total + pago.monto, 0)
                          .toLocaleString()}
                      </TableCell>
                    </TableRow>
                  </TableFooter>
                </Table>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button onClick={() => setShowPagosHistorialDialog(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/sucursales/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import {
  Building2,
  Plus,
  Pencil,
  Trash2,
  MapPin,
  Phone,
  Mail,
  User,
  Package,
  AlertTriangle,
  Download,
  RefreshCw,
  ArrowUpDown,
  Search,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { toast } from "@/components/ui/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Datos de ejemplo
const usuarios = [
  { id: 1, nombre: "Juan Pérez", email: "juan@libreria.com" },
  { id: 2, nombre: "María García", email: "maria@libreria.com" },
  { id: 3, nombre: "Carlos López", email: "carlos@libreria.com" },
  { id: 4, nombre: "Ana Martínez", email: "ana@libreria.com" },
  { id: 5, nombre: "Luis Rodríguez", email: "luis@libreria.com" },
]

const depositos = [
  { id: 1, nombre: "Depósito Central" },
  { id: 2, nombre: "Depósito Norte" },
  { id: 3, nombre: "Depósito Sur" },
  { id: 4, nombre: "Depósito Este" },
]

const sucursales = [
  {
    id: 1,
    nombre: "Sucursal Centro",
    direccion: "Av. Principal 123",
    telefono: "+54 11 1234-5678",
    email: "centro@libreria.com",
    responsable_id: 1,
    responsable_nombre: "Juan Pérez",
    deposito_id: 1,
    deposito_nombre: "Depósito Central",
    activa: true,
    ventas_activas: 5, // Número de ventas activas
    nombre_fiscal: "Librería León S.A.",
    cuit: "30-12345678-9",
    notas: "Sucursal principal con mayor volumen de ventas",
  },
  {
    id: 2,
    nombre: "Sucursal Norte",
    direccion: "Calle Norte 456",
    telefono: "+54 11 2345-6789",
    email: "norte@libreria.com",
    responsable_id: 2,
    responsable_nombre: "María García",
    deposito_id: 2,
    deposito_nombre: "Depósito Norte",
    activa: true,
    ventas_activas: 0,
    nombre_fiscal: "Librería León Norte S.R.L.",
    cuit: "30-98765432-1",
    notas: "Sucursal inaugurada en 2023",
  },
  {
    id: 3,
    nombre: "Sucursal Sur",
    direccion: "Av. Sur 789",
    telefono: "+54 11 3456-7890",
    email: "sur@libreria.com",
    responsable_id: 3,
    responsable_nombre: "Carlos López",
    deposito_id: 3,
    deposito_nombre: "Depósito Sur",
    activa: false,
    ventas_activas: 2,
    nombre_fiscal: "Librería León Sur S.A.",
    cuit: "30-55555555-5",
    notas: "Temporalmente cerrada por remodelación",
  },
]

export default function SucursalesPage() {
  const [showNewSucursalDialog, setShowNewSucursalDialog] = useState(false)
  const [showEditSucursalDialog, setShowEditSucursalDialog] = useState(false)
  const [showDeleteSucursalDialog, setShowDeleteSucursalDialog] = useState(false)
  const [selectedSucursal, setSelectedSucursal] = useState<any>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    direccion: "",
    telefono: "",
    email: "",
    responsable_id: "",
    responsable_nombre: "",
    deposito_id: "",
    deposito_nombre: "",
    activa: true,
    nombre_fiscal: "",
    cuit: "",
    notas: "",
  })
  const [searchQuery, setSearchQuery] = useState("")
  const [sortColumn, setSortColumn] = useState<"nombre" | "responsable" | "deposito" | "estado" | null>(null)
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")

// Manejar cambios en el formulario
  const handleFormChange = (field: string, value: any) => {
    if (field === "responsable_id") {
      const usuario = usuarios.find((u) => u.id === Number.parseInt(value))
      setFormData({
        ...formData,
        responsable_id: value,
        responsable_nombre: usuario ? usuario.nombre : "",
      })
    } else if (field === "deposito_id") {
      const deposito = depositos.find((d) => d.id === Number.parseInt(value))
      setFormData({
        ...formData,
        deposito_id: value,
        deposito_nombre: deposito ? deposito.nombre : "",
      })
    } else {
      setFormData({
        ...formData,
        [field]: value,
      })
    }
  }

// Abrir diálogo de edición
  const openEditDialog = (sucursal: any) => {
    setSelectedSucursal(sucursal)
    setFormData({
      nombre: sucursal.nombre,
      direccion: sucursal.direccion,
      telefono: sucursal.telefono,
      email: sucursal.email,
      responsable_id: sucursal.responsable_id.toString(),
      responsable_nombre: sucursal.responsable_nombre,
      deposito_id: sucursal.deposito_id.toString(),
      deposito_nombre: sucursal.deposito_nombre,
      activa: sucursal.activa,
      nombre_fiscal: sucursal.nombre_fiscal || "",
      cuit: sucursal.cuit || "",
      notas: sucursal.notas || "",
    })
    setShowEditSucursalDialog(true)
  }

// Abrir diálogo de eliminación
  const openDeleteDialog = (sucursal: any) => {
    setSelectedSucursal(sucursal)
    setShowDeleteSucursalDialog(true)
  }

// Guardar sucursal (nueva o editada)
  const saveSucursal = () => {
    // Validar que se haya seleccionado un responsable
    if (!formData.responsable_id) {
      toast({
        title: "Error de validación",
        description: "Debe seleccionar un responsable para la sucursal",
        variant: "destructive",
      })
      return
    }

// Validar que se haya seleccionado un depósito
    if (!formData.deposito_id) {
      toast({
        title: "Error de validación",
        description: "Debe seleccionar un depósito para la sucursal",
        variant: "destructive",
      })
      return
    }

console.log("Guardando sucursal:", formData)

if (showNewSucursalDialog) {
      setShowNewSucursalDialog(false)
    } else if (showEditSucursalDialog) {
      setShowEditSucursalDialog(false)
    }

setFormData({
      nombre: "",
      direccion: "",
      telefono: "",
      email: "",
      responsable_id: "",
      responsable_nombre: "",
      deposito_id: "",
      deposito_nombre: "",
      activa: true,
      nombre_fiscal: "",
      cuit: "",
      notas: "",
    })
  }

// Eliminar sucursal
  const deleteSucursal = () => {
    console.log("Eliminando sucursal:", selectedSucursal)
    setShowDeleteSucursalDialog(false)
  }

// Función para refrescar los datos (simulación)
  const refreshData = () => {
    // Simular la recarga de datos (aquí iría la llamada a la API)
    toast({
      title: "Datos actualizados",
      description: "Los datos de sucursales se han actualizado",
    })
    // En un entorno real, aquí se actualizaría el estado 'sucursales' con los nuevos datos
  }

// Función para aplicar la búsqueda
  const filteredSucursales = sucursales.filter((sucursal) => {
    const searchTermLower = searchQuery.toLowerCase()
    return (
      sucursal.nombre.toLowerCase().includes(searchTermLower) ||
      sucursal.direccion.toLowerCase().includes(searchTermLower) ||
      sucursal.responsable_nombre.toLowerCase().includes(searchTermLower) ||
      sucursal.deposito_nombre.toLowerCase().includes(searchTermLower)
    )
  })

// Función para aplicar el ordenamiento
  const sortedSucursales = [...filteredSucursales].sort((a, b) => {
    if (!sortColumn) {
      return 0
    }

let comparison = 0

if (sortColumn === "nombre") {
      comparison = a.nombre.localeCompare(b.nombre)
    } else if (sortColumn === "responsable") {
      comparison = a.responsable_nombre.localeCompare(b.responsable_nombre)
    } else if (sortColumn === "deposito") {
      comparison = a.deposito_nombre.localeCompare(b.deposito_nombre)
    } else if (sortColumn === "estado") {
      comparison = a.activa === b.activa ? 0 : a.activa ? -1 : 1
    }

return sortOrder === "asc" ? comparison : -comparison
  })

// Verificar si una sucursal puede cambiar de depósito
  const puedeEditarDeposito = (sucursal: any) => {
    return sucursal.ventas_activas === 0
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Sucursales</h1>
          <p className="text-muted-foreground">Administre las sucursales de la librería</p>
        </div>
        <Dialog open={showNewSucursalDialog} onOpenChange={setShowNewSucursalDialog}>
          <DialogTrigger asChild>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Plus className="mr-2 h-4 w-4" />
              Nueva sucursal
            </Button>
          </DialogTrigger>
          <DialogContent className="max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Crear nueva sucursal</DialogTitle>
              <DialogDescription>Complete los datos para crear una nueva sucursal</DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="nombre">Nombre de la sucursal</Label>
                <Input
                  id="nombre"
                  placeholder="Nombre de la sucursal"
                  value={formData.nombre}
                  onChange={(e) => handleFormChange("nombre", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="nombre_fiscal">Nombre Fiscal</Label>
                <Input
                  id="nombre_fiscal"
                  placeholder="Razón social o nombre fiscal"
                  value={formData.nombre_fiscal}
                  onChange={(e) => handleFormChange("nombre_fiscal", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="cuit">CUIT</Label>
                <Input
                  id="cuit"
                  placeholder="XX-XXXXXXXX-X"
                  value={formData.cuit}
                  onChange={(e) => handleFormChange("cuit", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="direccion">Dirección</Label>
                <Textarea
                  id="direccion"
                  placeholder="Dirección completa"
                  value={formData.direccion}
                  onChange={(e) => handleFormChange("direccion", e.target.value)}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="telefono">Teléfono</Label>
                  <Input
                    id="telefono"
                    placeholder="+54 11 1234-5678"
                    value={formData.telefono}
                    onChange={(e) => handleFormChange("telefono", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="sucursal@libreria.com"
                    value={formData.email}
                    onChange={(e) => handleFormChange("email", e.target.value)}
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="responsable">Responsable</Label>
                <Select
                  value={formData.responsable_id}
                  onValueChange={(value) => handleFormChange("responsable_id", value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar responsable" />
                  </SelectTrigger>
                  <SelectContent>
                    {usuarios.map((usuario) => (
                      <SelectItem key={usuario.id} value={usuario.id.toString()}>
                        {usuario.nombre} - {usuario.email}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="deposito">Depósito</Label>
                <Select value={formData.deposito_id} onValueChange={(value) => handleFormChange("deposito_id", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar depósito" />
                  </SelectTrigger>
                  <SelectContent>
                    {depositos.map((deposito) => (
                      <SelectItem key={deposito.id} value={deposito.id.toString()}>
                        {deposito.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="notas">Notas</Label>
                <Textarea
                  id="notas"
                  placeholder="Notas adicionales sobre la sucursal"
                  value={formData.notas}
                  onChange={(e) => handleFormChange("notas", e.target.value)}
                  rows={3}
                />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="activa">Sucursal activa</Label>
                <Switch
                  id="activa"
                  checked={formData.activa}
                  onCheckedChange={(checked) => handleFormChange("activa", checked)}
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowNewSucursalDialog(false)}>
                Cancelar
              </Button>
              <Button onClick={saveSucursal} className="bg-yellow-500 hover:bg-yellow-600 text-black">
                Guardar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center">
              <Building2 className="mr-2 h-5 w-5" />
              Listado de sucursales
            </CardTitle>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  toast({
                    title: "Exportación exitosa",
                    description: "Los datos de sucursales han sido exportados a Excel correctamente",
                  })
                }}
              >
                <Download className="mr-2 h-4 w-4" />
                Exportar a Excel
              </Button>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger>
                    <Button variant="ghost" size="icon" onClick={refreshData}>
                      <RefreshCw className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Refrescar</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
          <CardDescription>Gestione las sucursales y sus responsables</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar sucursales..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[50px]">ID</TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("nombre")
                          setSortOrder(sortColumn === "nombre" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Nombre
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Contacto</TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("responsable")
                          setSortOrder(sortColumn === "responsable" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Responsable
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("deposito")
                          setSortOrder(sortColumn === "deposito" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Depósito
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("estado")
                          setSortOrder(sortColumn === "estado" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Estado
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sortedSucursales.map((sucursal) => (
                    <TableRow key={sucursal.id}>
                      <TableCell>{sucursal.id}</TableCell>
                      <TableCell>
                        <div>
                          <div className="font-medium">{sucursal.nombre}</div>
                          <div className="text-sm text-muted-foreground flex items-center">
                            <MapPin className="mr-1 h-3 w-3" />
                            {sucursal.direccion}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          <div className="text-sm flex items-center">
                            <Phone className="mr-1 h-3 w-3" />
                            {sucursal.telefono}
                          </div>
                          <div className="text-sm flex items-center">
                            <Mail className="mr-1 h-3 w-3" />
                            {sucursal.email}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center">
                          <User className="mr-2 h-4 w-4" />
                          <span>{sucursal.responsable_nombre}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center">
                          <Package className="mr-2 h-4 w-4" />
                          <span>{sucursal.deposito_nombre}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-col gap-1">
                          <Badge
                            variant={sucursal.activa ? "default" : "secondary"}
                            className={sucursal.activa ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
                          >
                            {sucursal.activa ? "Activa" : "Inactiva"}
                          </Badge>
                          {sucursal.ventas_activas > 0 && (
                            <Badge variant="outline" className="text-xs">
                              {sucursal.ventas_activas} ventas activas
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="sm" onClick={() => openEditDialog(sucursal)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-red-500"
                            onClick={() => openDeleteDialog(sucursal)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de edición */}
      <Dialog open={showEditSucursalDialog} onOpenChange={setShowEditSucursalDialog}>
        <DialogContent className="max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Editar sucursal</DialogTitle>
            <DialogDescription>Modifique los datos de la sucursal</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="edit-nombre">Nombre de la sucursal</Label>
              <Input
                id="edit-nombre"
                placeholder="Nombre de la sucursal"
                value={formData.nombre}
                onChange={(e) => handleFormChange("nombre", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-nombre_fiscal">Nombre Fiscal</Label>
              <Input
                id="edit-nombre_fiscal"
                placeholder="Razón social o nombre fiscal"
                value={formData.nombre_fiscal}
                onChange={(e) => handleFormChange("nombre_fiscal", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-cuit">CUIT</Label>
              <Input
                id="edit-cuit"
                placeholder="XX-XXXXXXXX-X"
                value={formData.cuit}
                onChange={(e) => handleFormChange("cuit", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-direccion">Dirección</Label>
              <Textarea
                id="edit-direccion"
                placeholder="Dirección completa"
                value={formData.direccion}
                onChange={(e) => handleFormChange("direccion", e.target.value)}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-telefono">Teléfono</Label>
                <Input
                  id="edit-telefono"
                  placeholder="+54 11 1234-5678"
                  value={formData.telefono}
                  onChange={(e) => handleFormChange("telefono", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-email">Email</Label>
                <Input
                  id="edit-email"
                  type="email"
                  placeholder="sucursal@libreria.com"
                  value={formData.email}
                  onChange={(e) => handleFormChange("email", e.target.value)}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-responsable">Responsable</Label>
              <Select
                value={formData.responsable_id}
                onValueChange={(value) => handleFormChange("responsable_id", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar responsable" />
                </SelectTrigger>
                <SelectContent>
                  {usuarios.map((usuario) => (
                    <SelectItem key={usuario.id} value={usuario.id.toString()}>
                      {usuario.nombre} - {usuario.email}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-deposito">Depósito</Label>
              {selectedSucursal && !puedeEditarDeposito(selectedSucursal) ? (
                <div className="space-y-2">
                  <Input value={formData.deposito_nombre} disabled className="bg-gray-100" />
                  <Alert>
                    <AlertTriangle className="h-4 w-4" />
                    <AlertDescription>
                      No se puede cambiar el depósito porque esta sucursal tiene {selectedSucursal.ventas_activas}{" "}
                      ventas activas.
                    </AlertDescription>
                  </Alert>
                </div>
              ) : (
                <Select value={formData.deposito_id} onValueChange={(value) => handleFormChange("deposito_id", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar depósito" />
                  </SelectTrigger>
                  <SelectContent>
                    {depositos.map((deposito) => (
                      <SelectItem key={deposito.id} value={deposito.id.toString()}>
                        {deposito.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              )}
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-notas">Notas</Label>
              <Textarea
                id="edit-notas"
                placeholder="Notas adicionales sobre la sucursal"
                value={formData.notas}
                onChange={(e) => handleFormChange("notas", e.target.value)}
                rows={3}
              />
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="edit-activa">Sucursal activa</Label>
              <Switch
                id="edit-activa"
                checked={formData.activa}
                onCheckedChange={(checked) => handleFormChange("activa", checked)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditSucursalDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={saveSucursal} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Guardar cambios
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de eliminación */}
      <Dialog open={showDeleteSucursalDialog} onOpenChange={setShowDeleteSucursalDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar eliminación</DialogTitle>
            <DialogDescription>
              ¿Está seguro que desea eliminar esta sucursal? Esta acción no se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {selectedSucursal && (
              <div className="p-4 border rounded-md bg-muted">
                <div className="font-medium">{selectedSucursal.nombre}</div>
                <div className="text-sm text-muted-foreground">{selectedSucursal.direccion}</div>
                <div className="text-sm text-muted-foreground">Responsable: {selectedSucursal.responsable_nombre}</div>
                <div className="text-sm text-muted-foreground">Depósito: {selectedSucursal.deposito_nombre}</div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteSucursalDialog(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={deleteSucursal}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]png:file="public/placeholder_image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/placeholder_image-UlSwf2wqzJxC0QxeFT4LFMEveIRdKP.png" isMerged="true" isLocked="true"
[V0_FILE]jpg:file="public/ceholder-svg-height-100-width-100-text-vista-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-height-100-width-100-text-vista--NLe42WGPNDkCmH8g5YxUjdSs0pwDVM.jpg" isMerged="true" isLocked="true"
[V0_FILE]png:file="public/placeholder-80x80.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/placeholder-80x80-8UeaqVmdaPoM7e0IK87erijrIXNbV5.png" isMerged="true" isLocked="true"
[V0_FILE]typescriptreact:file="app/dashboard/caja/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import React, { useMemo, useRef, useState } from "react"
import {
  DollarSign,
  ArrowUpRight,
  ArrowDownLeft,
  Calendar,
  Download,
  CheckCircle,
  History,
  FileText,
  AlertCircle,
  Search,
  Printer,
  Upload,
  FileUp,
  Eye,
  PlusCircle,
  Trash2,
  Edit,
  BookOpen,
  CreditCard,
  Banknote,
  Wallet,
  CreditCardIcon,
  Receipt,
  MoreHorizontal,
  Unlock,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

// Métodos de pago
const metodosPago = [
  { id: "efectivo", nombre: "Efectivo", icono: Banknote },
  { id: "transferencia", nombre: "Transferencia", icono: Banknote },
  { id: "credito", nombre: "Tarjeta de crédito", icono: CreditCardIcon },
  { id: "debito", nombre: "Tarjeta de débito", icono: CreditCard },
  { id: "mercadopago", nombre: "Mercado Pago", icono: Wallet },
  { id: "cheque", nombre: "Cheque", icono: Receipt },
  { id: "otro", nombre: "Otro", icono: MoreHorizontal },
]

// Cuentas contables
const cuentasContables = [
  { id: "caja", nombre: "Caja" },
  { id: "banco", nombre: "Banco" },
  { id: "tarjeta", nombre: "Tarjeta" },
  { id: "sueldos", nombre: "Sueldos" },
  { id: "compras", nombre: "Compras" },
  { id: "ventas", nombre: "Ventas" },
  { id: "impuestos", nombre: "Impuestos" },
  { id: "servicios", nombre: "Servicios" },
  { id: "alquiler", nombre: "Alquiler" },
  { id: "otros", nombre: "Otros" },
]

// Usuarios
const usuarios = [
  { id: 1, nombre: "Juan Pérez", email: "juan@libreria-leon.com" },
  { id: 2, nombre: "María López", email: "maria@libreria-leon.com" },
  { id: 3, nombre: "Carlos Gómez", email: "carlos@libreria-leon.com" },
  { id: 4, nombre: "Ana Martínez", email: "ana@libreria-leon.com" },
  { id: 5, nombre: "Roberto Sánchez", email: "roberto@libreria-leon.com" },
]

// Sucursales
const sucursales = [
  { id: "centro", nombre: "Centro" },
  { id: "norte", nombre: "Norte" },
  { id: "sur", nombre: "Sur" },
]

// Movimientos del día (mock)
const movimientos = [
  {
    id: 1,
    fecha: "2023-12-10",
    hora: "09:15",
    concepto: "Venta #1245",
    tipo: "Ingreso",
    monto: 3500,
    metodoPago: "efectivo",
    asientoContable: "ventas",
    observaciones: "Venta de libros escolares",
    comprobante: "factura-1245.pdf",
    responsable: 1,
    sucursal: "centro",
  },
  {
    id: 2,
    fecha: "2023-12-10",
    hora: "10:30",
    concepto: "Pago proveedor",
    tipo: "Egreso",
    monto: 15000,
    metodoPago: "transferencia",
    asientoContable: "compras",
    observaciones: "Pago a Editorial Planeta",
    comprobante: "comprobante-transferencia.jpg",
    responsable: 2,
    sucursal: "norte",
  },
  {
    id: 3,
    fecha: "2023-12-10",
    hora: "11:45",
    concepto: "Venta #1246",
    tipo: "Ingreso",
    monto: 2200,
    metodoPago: "credito",
    asientoContable: "ventas",
    observaciones: "Venta de novelas",
    comprobante: null,
    responsable: 1,
    sucursal: "centro",
  },
  {
    id: 4,
    fecha: "2023-12-10",
    hora: "12:20",
    concepto: "Gastos de limpieza",
    tipo: "Egreso",
    monto: 1500,
    metodoPago: "efectivo",
    asientoContable: "servicios",
    observaciones: "Productos de limpieza mensual",
    comprobante: "ticket-limpieza.jpg",
    responsable: 3,
    sucursal: "sur",
  },
  {
    id: 5,
    fecha: "2023-12-10",
    hora: "14:10",
    concepto: "Venta #1247",
    tipo: "Ingreso",
    monto: 4300,
    metodoPago: "debito",
    asientoContable: "ventas",
    observaciones: "Venta de material escolar",
    comprobante: null,
    responsable: 4,
    sucursal: "norte",
  },
]

// Asientos (mock ABM)
const asientosContablesData = [
  { id: 1, cuenta_contable: "caja", descripcion: "Asiento para movimientos en efectivo", activo: true },
  { id: 2, cuenta_contable: "ventas", descripcion: "Asiento para registro de ventas", activo: true },
  { id: 3, cuenta_contable: "compras", descripcion: "Asiento para registro de compras a proveedores", activo: true },
  { id: 4, cuenta_contable: "servicios", descripcion: "Asiento para gastos de servicios", activo: true },
  { id: 5, cuenta_contable: "sueldos", descripcion: "Asiento para pago de sueldos", activo: false },
]

// Cierres históricos (mock)
const cierresCaja = [
  {
    id: 1,
    fecha: "2023-12-10",
    hora: "21:15",
    usuario: 1,
    sucursal: "Centro",
    montosPorMetodo: {
      efectivo: 8500,
      credito: 12000,
      debito: 4500,
      transferencia: 0,
      mercadopago: 0,
      cheque: 0,
      otro: 0,
    },
    saldoSistema: 25000,
    saldoFisico: 24950,
    diferencia: -50,
    estado: "Cerrado",
    observaciones: "Faltante de $50 en efectivo",
  },
  {
    id: 2,
    fecha: "2023-12-09",
    hora: "21:30",
    usuario: 2,
    sucursal: "Norte",
    montosPorMetodo: {
      efectivo: 15000,
      credito: 10000,
      debito: 7000,
      transferencia: 0,
      mercadopago: 0,
      cheque: 0,
      otro: 0,
    },
    saldoSistema: 32000,
    saldoFisico: 32000,
    diferencia: 0,
    estado: "Cerrado",
    observaciones: "",
  },
]

// Resumen del día (mock)
const cierreActual = {
  fecha: new Date().toLocaleDateString(),
  ingresos: 10000,
  egresos: 16500,
  saldoSistema: -6500,
  saldoInicial: 45231.89,
  saldoFinal: 38731.89,
}

// Helpers
const getNombreUsuario = (id: number) => usuarios.find((u) => u.id === id)?.nombre || "Usuario desconocido"
const getNombreMetodoPago = (id: string) => metodosPago.find((m) => m.id === id)?.nombre || "Desconocido"
const getIconoMetodoPago = (id: string) => metodosPago.find((m) => m.id === id)?.icono || MoreHorizontal
const getNombreCuentaContable = (id: string) => cuentasContables.find((c) => c.id === id)?.nombre || "Desconocida"

export default function CajaPage() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("movimientos")

const [cajasAbiertas, setCajasAbiertas] = useState<Record<string, boolean>>({
    centro: false,
    norte: false,
    sur: false,
  })

const [showCierreDialog, setShowCierreDialog] = useState(false)
  const [showAperturaDialog, setShowAperturaDialog] = useState(false)
  const [cierreDetalleDialog, setCierreDetalleDialog] = useState(false)
  const [cierreSeleccionado, setCierreSeleccionado] = useState<any>(null)

const [showComprobanteDialog, setShowComprobanteDialog] = useState(false)
  const [comprobanteUrl, setComprobanteUrl] = useState("")
  const [showMovimientoDetalleDialog, setShowMovimientoDetalleDialog] = useState(false)
  const [movimientoSeleccionado, setMovimientoSeleccionado] = useState<any>(null)

// ABM de asientos
  const [asientosContables, setAsientosContables] = useState(asientosContablesData)
  const [showAsientoDialog, setShowAsientoDialog] = useState(false)
  const [asientoEditando, setAsientoEditando] = useState<any>(null)
  const [formAsiento, setFormAsiento] = useState({ cuenta_contable: "", descripcion: "" })

// Formulario ingreso/egreso
  const [formMovimiento, setFormMovimiento] = useState<any>({
    concepto: "",
    monto: "",
    metodoPago: "",
    asientoContable: "",
    observaciones: "",
    comprobante: null,
    sucursal: "",
  })

// Cierre de caja
  const [sucursalCierre, setSucursalCierre] = useState("")
  const [sucursalApertura, setSucursalApertura] = useState("")
  // Conteo real por método (inputs del usuario)
  const [montosRealesPorMetodo, setMontosRealesPorMetodo] = useState<Record<string, string>>({
    efectivo: "",
    credito: "",
    debito: "",
    transferencia: "",
    mercadopago: "",
    cheque: "",
    otro: "",
  })
  const [montosAperturaPorMetodo, setMontosAperturaPorMetodo] = useState<Record<string, string>>({
    efectivo: "",
    credito: "",
    debito: "",
    transferencia: "",
    mercadopago: "",
    cheque: "",
    otro: "",
  })
  const [observacionesCierre, setObservacionesCierre] = useState("")
  const [observacionesApertura, setObservacionesApertura] = useState("")

// Refs
  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const fileInputMovimientoRef = useRef<HTMLInputElement | null>(null)

// Totales del sistema por método: calculados a partir de movimientos (Ingresos suman, Egresos restan)
  const totalesSistemaPorMetodo = useMemo(() => {
    const base: Record<string, number> = {
      efectivo: 0,
      credito: 0,
      debito: 0,
      transferencia: 0,
      mercadopago: 0,
      cheque: 0,
      otro: 0,
    }
    for (const mov of movimientos) {
      const signo = mov.tipo === "Ingreso" ? 1 : -1
      if (base[mov.metodoPago] === undefined) base[mov.metodoPago] = 0
      base[mov.metodoPago] += signo * mov.monto
    }
    return base
  }, [])

const totalSistema = useMemo(
    () => Object.values(totalesSistemaPorMetodo).reduce((acc, v) => acc + (isNaN(v) ? 0 : v), 0),
    [totalesSistemaPorMetodo],
  )
  const totalFisico = useMemo(
    () => Object.values(montosRealesPorMetodo).reduce((sum, str) => sum + (Number.parseFloat(str) || 0), 0),
    [montosRealesPorMetodo],
  )
  const diferenciaCierre = totalFisico - totalSistema

const handleAperturaCaja = () => {
    if (!sucursalApertura) {
      toast({
        title: "Sucursal requerida",
        description: "Debe seleccionar la sucursal para la apertura de caja",
        variant: "destructive",
      })
      return
    }

if (cajasAbiertas[sucursalApertura]) {
      toast({
        title: "Caja ya abierta",
        description: "La caja de esta sucursal ya está abierta",
        variant: "destructive",
      })
      return
    }

const totalApertura = Object.values(montosAperturaPorMetodo).reduce(
      (sum, str) => sum + (Number.parseFloat(str) || 0),
      0,
    )

if (totalApertura === 0) {
      toast({
        title: "Montos requeridos",
        description: "Debe ingresar al menos un monto inicial por método de pago",
        variant: "destructive",
      })
      return
    }

// Mark caja as open for this branch
    setCajasAbiertas((prev) => ({ ...prev, [sucursalApertura]: true }))

toast({
      title: "Apertura de caja realizada",
      description: `La caja de ${sucursales.find((s) => s.id === sucursalApertura)?.nombre} se ha abierto correctamente`,
    })

// Reset
    setShowAperturaDialog(false)
    setMontosAperturaPorMetodo({
      efectivo: "",
      credito: "",
      debito: "",
      transferencia: "",
      mercadopago: "",
      cheque: "",
      otro: "",
    })
    setObservacionesApertura("")
    setSucursalApertura("")
  }

// Acciones cierre
  const handleCierreCaja = () => {
    if (!sucursalCierre) {
      toast({
        title: "Sucursal requerida",
        description: "Debe seleccionar la sucursal del cierre de caja",
        variant: "destructive",
      })
      return
    }

if (!cajasAbiertas[sucursalCierre]) {
      toast({
        title: "Caja no abierta",
        description: "No se puede cerrar una caja que no está abierta. Realice primero la apertura de caja.",
        variant: "destructive",
      })
      return
    }

if (totalFisico === 0) {
      toast({
        title: "Conteo requerido",
        description: "Debe ingresar al menos un monto real por método de pago",
        variant: "destructive",
      })
      return
    }

setCajasAbiertas((prev) => ({ ...prev, [sucursalCierre]: false }))

toast({ title: "Cierre de caja realizado", description: "El cierre de caja se ha registrado correctamente" })

// Reset
    setShowCierreDialog(false)
    setMontosRealesPorMetodo({
      efectivo: "",
      credito: "",
      debito: "",
      transferencia: "",
      mercadopago: "",
      cheque: "",
      otro: "",
    })
    setObservacionesCierre("")
    setSucursalCierre("")
  }

const verDetalleCierre = (cierre: any) => {
    setCierreSeleccionado(cierre)
    setCierreDetalleDialog(true)
  }

const verDetalleMovimiento = (movimiento: any) => {
    setMovimientoSeleccionado(movimiento)
    setShowMovimientoDetalleDialog(true)
  }

const verComprobante = (url: string) => {
    setComprobanteUrl(url)
    setShowComprobanteDialog(true)
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const validTypes = ["image/jpeg", "image/png", "application/pdf"]
      if (!validTypes.includes(file.type)) {
        toast({
          title: "Tipo de archivo no válido",
          description: "Solo se permiten archivos JPG, PNG o PDF",
          variant: "destructive",
        })
        return
      }
      if (file.size > 5 * 1024 * 1024) {
        toast({
          title: "Archivo demasiado grande",
          description: "El tamaño máximo permitido es 5MB",
          variant: "destructive",
        })
        return
      }
      setFormMovimiento({ ...formMovimiento, comprobante: file })
    }
  }

const handleIngresoEgreso = (tipo: "Ingreso" | "Egreso") => {
    if (
      !formMovimiento.concepto ||
      !formMovimiento.monto ||
      !formMovimiento.metodoPago ||
      !formMovimiento.asientoContable ||
      !formMovimiento.sucursal
    ) {
      toast({
        title: "Campos incompletos",
        description: "Complete concepto, monto, método, asiento y sucursal",
        variant: "destructive",
      })
      return
    }

if (!cajasAbiertas[formMovimiento.sucursal]) {
      toast({
        title: "Caja cerrada",
        description: `No se puede registrar un ${tipo.toLowerCase()} en una caja cerrada. Realice primero la apertura de caja para ${sucursales.find((s) => s.id === formMovimiento.sucursal)?.nombre}.`,
        variant: "destructive",
      })
      return
    }

toast({
      title: `${tipo} registrado`,
      description: `Se registró un ${tipo.toLowerCase()} de $${formMovimiento.monto}`,
    })

setFormMovimiento({
      concepto: "",
      monto: "",
      metodoPago: "",
      asientoContable: "",
      observaciones: "",
      comprobante: null,
      sucursal: "",
    })
  }

// ABM Asientos
  const crearAsiento = () => {
    if (!formAsiento.cuenta_contable || !formAsiento.descripcion) {
      toast({ title: "Campos incompletos", description: "Complete nombre y descripción", variant: "destructive" })
      return
    }
    if (asientosContables.some((a) => a.cuenta_contable.toLowerCase() === formAsiento.cuenta_contable.toLowerCase())) {
      toast({ title: "Duplicado", description: "Ya existe un asiento con ese nombre", variant: "destructive" })
      return
    }
    const nuevo = {
      id: Math.max(...asientosContables.map((a) => a.id)) + 1,
      cuenta_contable: formAsiento.cuenta_contable,
      descripcion: formAsiento.descripcion,
      activo: true,
    }
    setAsientosContables([...asientosContables, nuevo])
    setFormAsiento({ cuenta_contable: "", descripcion: "" })
    setShowAsientoDialog(false)
    toast({ title: "Asiento creado", description: "El asiento se creó correctamente" })
  }

const editarAsiento = (asiento: any) => {
    setAsientoEditando(asiento)
    setFormAsiento({ cuenta_contable: asiento.cuenta_contable, descripcion: asiento.descripcion })
    setShowAsientoDialog(true)
  }

const actualizarAsiento = () => {
    if (!formAsiento.cuenta_contable || !formAsiento.descripcion) {
      toast({ title: "Campos incompletos", description: "Complete nombre y descripción", variant: "destructive" })
      return
    }
    const duplicado = asientosContables.some(
      (a) =>
        a.id !== asientoEditando.id && a.cuenta_contable.toLowerCase() === formAsiento.cuenta_contable.toLowerCase(),
    )
    if (duplicado) {
      toast({ title: "Duplicado", description: "Ya existe un asiento con ese nombre", variant: "destructive" })
      return
    }
    setAsientosContables(
      asientosContables.map((a) =>
        a.id === asientoEditando.id
          ? { ...a, cuenta_contable: formAsiento.cuenta_contable, descripcion: formAsiento.descripcion }
          : a,
      ),
    )
    setAsientoEditando(null)
    setFormAsiento({ cuenta_contable: "", descripcion: "" })
    setShowAsientoDialog(false)
    toast({ title: "Asiento actualizado", description: "El asiento se actualizó correctamente" })
  }

const eliminarAsiento = (id: number) => {
    const asiento = asientosContables.find((a) => a.id === id)
    if (asiento && movimientos.some((m) => m.asientoContable === asiento.cuenta_contable)) {
      toast({
        title: "No se puede eliminar",
        description: "El asiento está siendo utilizado por movimientos",
        variant: "destructive",
      })
      return
    }
    setAsientosContables(asientosContables.filter((a) => a.id !== id))
    toast({ title: "Asiento eliminado", description: "El asiento se eliminó correctamente" })
  }

const toggleAsientoActivo = (id: number) =>
    setAsientosContables(asientosContables.map((a) => (a.id === id ? { ...a, activo: !a.activo } : a)))

const abrirDialogoAsiento = () => {
    setAsientoEditando(null)
    setFormAsiento({ cuenta_contable: "", descripcion: "" })
    setShowAsientoDialog(true)
  }

// Agregar estado para sucursal seleccionada en KPIs
  const [sucursalKPI, setSucursalKPI] = useState("todas")

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Caja</h1>
          <p className="text-muted-foreground">Administre los ingresos, egresos y cierres de caja</p>
        </div>
        <div className="flex gap-2">
          {/* Egreso */}
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline">
                <ArrowDownLeft className="mr-2 h-4 w-4 text-red-500" />
                Registrar egreso
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-xl">
              <DialogHeader>
                <DialogTitle>Registrar egreso de caja</DialogTitle>
                <DialogDescription>Complete los datos del egreso de caja</DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="concepto">Concepto *</Label>
                    <Input
                      id="concepto"
                      placeholder="Ingrese el concepto"
                      value={formMovimiento.concepto}
                      onChange={(e) => setFormMovimiento({ ...formMovimiento, concepto: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="monto">Monto *</Label>
                    <Input
                      id="monto"
                      type="number"
                      placeholder="0.00"
                      value={formMovimiento.monto}
                      onChange={(e) => setFormMovimiento({ ...formMovimiento, monto: e.target.value })}
                    />
                  </div>
                </div>

<div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="sucursal">Sucursal *</Label>
                    <Select
                      value={formMovimiento.sucursal}
                      onValueChange={(value) => setFormMovimiento({ ...formMovimiento, sucursal: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccione sucursal" />
                      </SelectTrigger>
                      <SelectContent>
                        {sucursales.map((s) => (
                          <SelectItem key={s.id} value={s.id}>
                            {s.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="metodoPago">Método de pago *</Label>
                    <Select
                      value={formMovimiento.metodoPago}
                      onValueChange={(value) => setFormMovimiento({ ...formMovimiento, metodoPago: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccione método de pago" />
                      </SelectTrigger>
                      <SelectContent>
                        {metodosPago.map((metodo) => (
                          <SelectItem key={metodo.id} value={metodo.id}>
                            <div className="flex items-center">
                              <metodo.icono className="mr-2 h-4 w-4" />
                              {metodo.nombre}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="asientoContable">Asiento contable *</Label>
                  <Select
                    value={formMovimiento.asientoContable}
                    onValueChange={(value) => setFormMovimiento({ ...formMovimiento, asientoContable: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione asiento contable" />
                    </SelectTrigger>
                    <SelectContent>
                      {cuentasContables.map((cuenta) => (
                        <SelectItem key={cuenta.id} value={cuenta.id}>
                          {cuenta.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="observaciones">Observaciones</Label>
                  <Textarea
                    id="observaciones"
                    placeholder="Observaciones adicionales"
                    value={formMovimiento.observaciones}
                    onChange={(e) => setFormMovimiento({ ...formMovimiento, observaciones: e.target.value })}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="comprobante">Adjuntar comprobante (opcional)</Label>
                  <div className="flex items-center gap-2">
                    <Button type="button" variant="outline" onClick={() => fileInputMovimientoRef.current?.click()}>
                      <Upload className="mr-2 h-4 w-4" />
                      Seleccionar archivo
                    </Button>
                    <Input
                      ref={fileInputMovimientoRef}
                      id="comprobante"
                      type="file"
                      className="hidden"
                      accept=".jpg,.jpeg,.png,.pdf"
                      onChange={handleFileChange}
                    />
                    {formMovimiento.comprobante && (
                      <span className="text-sm text-muted-foreground">{formMovimiento.comprobante.name}</span>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground">
                    Formatos permitidos: JPG, PNG, PDF. Tamaño máximo: 5MB
                  </p>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline">Cancelar</Button>
                <Button
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  onClick={() => handleIngresoEgreso("Egreso")}
                >
                  Guardar egreso
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

{/* Ingreso */}
          <Dialog>
            <DialogTrigger asChild>
              <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                <ArrowUpRight className="mr-2 h-4 w-4" />
                Registrar ingreso
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-xl">
              <DialogHeader>
                <DialogTitle>Registrar ingreso de caja</DialogTitle>
                <DialogDescription>Complete los datos del ingreso de caja</DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="concepto-ingreso">Concepto *</Label>
                    <Input
                      id="concepto-ingreso"
                      placeholder="Ingrese el concepto"
                      value={formMovimiento.concepto}
                      onChange={(e) => setFormMovimiento({ ...formMovimiento, concepto: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="monto-ingreso">Monto *</Label>
                    <Input
                      id="monto-ingreso"
                      type="number"
                      placeholder="0.00"
                      value={formMovimiento.monto}
                      onChange={(e) => setFormMovimiento({ ...formMovimiento, monto: e.target.value })}
                    />
                  </div>
                </div>

<div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="sucursal-ingreso">Sucursal *</Label>
                    <Select
                      value={formMovimiento.sucursal}
                      onValueChange={(value) => setFormMovimiento({ ...formMovimiento, sucursal: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccione sucursal" />
                      </SelectTrigger>
                      <SelectContent>
                        {sucursales.map((s) => (
                          <SelectItem key={s.id} value={s.id}>
                            {s.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="metodoPago-ingreso">Método de pago *</Label>
                    <Select
                      value={formMovimiento.metodoPago}
                      onValueChange={(value) => setFormMovimiento({ ...formMovimiento, metodoPago: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccione método de pago" />
                      </SelectTrigger>
                      <SelectContent>
                        {metodosPago.map((metodo) => (
                          <SelectItem key={metodo.id} value={metodo.id}>
                            <div className="flex items-center">
                              <metodo.icono className="mr-2 h-4 w-4" />
                              {metodo.nombre}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="asientoContable-ingreso">Asiento contable *</Label>
                  <Select
                    value={formMovimiento.asientoContable}
                    onValueChange={(value) => setFormMovimiento({ ...formMovimiento, asientoContable: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione asiento contable" />
                    </SelectTrigger>
                    <SelectContent>
                      {cuentasContables.map((cuenta) => (
                        <SelectItem key={cuenta.id} value={cuenta.id}>
                          {cuenta.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="observaciones-ingreso">Observaciones</Label>
                  <Textarea
                    id="observaciones-ingreso"
                    placeholder="Observaciones adicionales"
                    value={formMovimiento.observaciones}
                    onChange={(e) => setFormMovimiento({ ...formMovimiento, observaciones: e.target.value })}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="comprobante-ingreso">Adjuntar comprobante (opcional)</Label>
                  <div className="flex items-center gap-2">
                    <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
                      <Upload className="mr-2 h-4 w-4" />
                      Seleccionar archivo
                    </Button>
                    <Input
                      ref={fileInputRef}
                      id="comprobante-ingreso"
                      type="file"
                      className="hidden"
                      accept=".jpg,.jpeg,.png,.pdf"
                      onChange={handleFileChange}
                    />
                    {formMovimiento.comprobante && (
                      <span className="text-sm text-muted-foreground">{formMovimiento.comprobante.name}</span>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground">
                    Formatos permitidos: JPG, PNG, PDF. Tamaño máximo: 5MB
                  </p>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline">Cancelar</Button>
                <Button
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  onClick={() => handleIngresoEgreso("Ingreso")}
                >
                  Guardar ingreso
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

<Dialog open={showAperturaDialog} onOpenChange={setShowAperturaDialog}>
            <DialogTrigger asChild>
              <Button variant="outline" className="bg-green-500 hover:bg-green-600 text-white">
                <Unlock className="mr-2 h-4 w-4" />
                Apertura de caja
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Apertura de caja</DialogTitle>
                <DialogDescription>
                  Registre los montos iniciales por método de pago para abrir la caja
                </DialogDescription>
              </DialogHeader>

<div className="grid gap-6 py-4">
                <div className="space-y-2">
                  <Label htmlFor="sucursal-apertura">Sucursal *</Label>
                  <Select value={sucursalApertura} onValueChange={setSucursalApertura}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione sucursal" />
                    </SelectTrigger>
                    <SelectContent>
                      {sucursales.map((s) => (
                        <SelectItem key={s.id} value={s.id}>
                          <div className="flex items-center justify-between w-full">
                            <span>{s.nombre}</span>
                            {cajasAbiertas[s.id] && <Badge className="ml-2 bg-green-100 text-green-800">Abierta</Badge>}
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {sucursalApertura && cajasAbiertas[sucursalApertura] && (
                    <p className="text-sm text-yellow-600 flex items-center gap-1">
                      <AlertCircle className="h-4 w-4" />
                      La caja de esta sucursal ya está abierta
                    </p>
                  )}
                </div>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm">Montos iniciales por método de pago</CardTitle>
                    <CardDescription>Ingrese el monto inicial con el que comienza cada método de pago</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {metodosPago.map((m) => {
                        const Icono = m.icono
                        return (
                          <div key={m.id} className="flex items-center gap-2">
                            <Icono className="h-4 w-4" />
                            <Label className="flex-1 text-sm">{m.nombre}</Label>
                            <Input
                              type="number"
                              placeholder="0.00"
                              className="w-40"
                              value={montosAperturaPorMetodo[m.id]}
                              onChange={(e) =>
                                setMontosAperturaPorMetodo((prev) => ({ ...prev, [m.id]: e.target.value }))
                              }
                            />
                          </div>
                        )
                      })}
                      <Separator />
                      <div className="flex justify-between items-center">
                        <span className="font-medium">Total inicial:</span>
                        <span className="font-bold text-lg">
                          $
                          {Object.values(montosAperturaPorMetodo)
                            .reduce((sum, str) => sum + (Number.parseFloat(str) || 0), 0)
                            .toLocaleString()}
                        </span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<div className="space-y-2">
                  <Label htmlFor="observaciones-apertura">Observaciones</Label>
                  <Textarea
                    id="observaciones-apertura"
                    placeholder="Ingrese observaciones sobre la apertura de caja"
                    value={observacionesApertura}
                    onChange={(e) => setObservacionesApertura(e.target.value)}
                  />
                </div>
              </div>

<DialogFooter>
                <Button variant="outline" onClick={() => setShowAperturaDialog(false)}>
                  Cancelar
                </Button>
                <Button
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  onClick={handleAperturaCaja}
                  disabled={!sucursalApertura || cajasAbiertas[sucursalApertura]}
                >
                  Confirmar apertura
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

{/* Cierre de caja */}
          <Dialog open={showCierreDialog} onOpenChange={setShowCierreDialog}>
            <DialogTrigger asChild>
              <Button variant="outline" className="bg-blue-500 hover:bg-blue-600 text-white">
                <CheckCircle className="mr-2 h-4 w-4" />
                Realizar cierre de caja
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Cierre de caja</DialogTitle>
                <DialogDescription>Realice el cierre de caja del día {cierreActual.fecha}</DialogDescription>
              </DialogHeader>

<div className="grid gap-6 py-4">
                <div className="space-y-2">
                  <Label htmlFor="sucursal-cierre">Sucursal *</Label>
                  <Select value={sucursalCierre} onValueChange={setSucursalCierre}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione sucursal" />
                    </SelectTrigger>
                    <SelectContent>
                      {sucursales.map((s) => (
                        <SelectItem key={s.id} value={s.id}>
                          <div className="flex items-center justify-between w-full">
                            <span>{s.nombre}</span>
                            {cajasAbiertas[s.id] ? (
                              <Badge className="ml-2 bg-green-100 text-green-800">Abierta</Badge>
                            ) : (
                              <Badge className="ml-2 bg-red-100 text-red-800">Cerrada</Badge>
                            )}
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {sucursalCierre && !cajasAbiertas[sucursalCierre] && (
                    <p className="text-sm text-red-600 flex items-center gap-1">
                      <AlertCircle className="h-4 w-4" />
                      La caja de esta sucursal no está abierta. Realice primero la apertura de caja.
                    </p>
                  )}
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Resumen del día</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Saldo inicial:</span>
                          <span className="font-medium">${cierreActual.saldoInicial.toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Ingresos:</span>
                          <span className="font-medium text-green-600">+${cierreActual.ingresos.toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Egresos:</span>
                          <span className="font-medium text-red-600">-${cierreActual.egresos.toLocaleString()}</span>
                        </div>
                        <Separator />
                        <div className="flex justify-between">
                          <span className="font-medium">Saldo final sistema:</span>
                          <span className="font-bold">${cierreActual.saldoFinal.toLocaleString()}</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

<Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Sistema vs. Conteo por método</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        {metodosPago.map((m) => {
                          const Icono = m.icono
                          const sistema = totalesSistemaPorMetodo[m.id] || 0
                          const real = montosRealesPorMetodo[m.id]
                          const diff = (Number.parseFloat(real || "0") || 0) - sistema
                          return (
                            <div key={m.id} className="flex items-center gap-2">
                              <Icono className="h-4 w-4" />
                              <Label className="flex-1 text-sm">{m.nombre}</Label>
                              <div className="flex items-center gap-2">
                                <span className="text-xs text-muted-foreground min-w-[110px] text-right">
                                  Sistema: <span className="font-medium">${sistema.toLocaleString()}</span>
                                </span>
                                <Input
                                  type="number"
                                  placeholder="0.00"
                                  className="w-28 h-8"
                                  value={montosRealesPorMetodo[m.id]}
                                  onChange={(e) =>
                                    setMontosRealesPorMetodo((prev) => ({ ...prev, [m.id]: e.target.value }))
                                  }
                                />
                              </div>
                              <span
                                className={`ml-2 w-24 text-right text-xs ${diff === 0 ? "text-green-600" : diff > 0 ? "text-blue-600" : "text-red-600"}`}
                                title="Diferencia (Real - Sistema)"
                              >
                                {diff === 0 ? "OK" : diff > 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()}
                              </span>
                            </div>
                          )
                        })}
                        <Separator />
                        <div className="grid grid-cols-2 gap-2 text-sm">
                          <div className="flex justify-between">
                            <span>Total sistema:</span>
                            <span className="font-medium">${totalSistema.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span>Total físico:</span>
                            <span className="font-medium">${totalFisico.toLocaleString()}</span>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

<div className="flex justify-between items-center p-3 rounded-md border">
                  <span className="font-medium">Diferencia (Físico - Sistema):</span>
                  <span
                    className={`font-bold ${
                      diferenciaCierre === 0
                        ? "text-green-600"
                        : diferenciaCierre > 0
                          ? "text-blue-600"
                          : "text-red-600"
                    }`}
                  >
                    {diferenciaCierre === 0
                      ? "Sin diferencia"
                      : diferenciaCierre > 0
                        ? `+$${diferenciaCierre.toFixed(2)}`
                        : `-$${Math.abs(diferenciaCierre).toFixed(2)}`}
                  </span>
                </div>

<div className="space-y-2">
                  <Label htmlFor="observaciones-cierre">Observaciones</Label>
                  <Textarea
                    id="observaciones-cierre"
                    placeholder="Ingrese observaciones sobre el cierre de caja"
                    value={observacionesCierre}
                    onChange={(e) => setObservacionesCierre(e.target.value)}
                  />
                </div>

{diferenciaCierre !== 0 && (
                  <div
                    className={`p-3 rounded-md ${
                      diferenciaCierre > 0 ? "bg-blue-50 border-blue-200" : "bg-red-50 border-red-200"
                    } border`}
                  >
                    <div className="flex items-start">
                      <AlertCircle
                        className={`h-5 w-5 mr-2 ${diferenciaCierre > 0 ? "text-blue-500" : "text-red-500"}`}
                      />
                      <div>
                        <p className="font-medium">{diferenciaCierre > 0 ? "Sobrante en caja" : "Faltante en caja"}</p>
                        <p className="text-sm text-muted-foreground">
                          {diferenciaCierre > 0
                            ? `Sobrante de $${diferenciaCierre.toFixed(2)}. Verifique los movimientos del día.`
                            : `Faltante de $${Math.abs(diferenciaCierre).toFixed(2)}. Verifique los movimientos del día.`}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </div>

<DialogFooter>
                <Button variant="outline" onClick={() => setShowCierreDialog(false)}>
                  Cancelar
                </Button>
                <Button
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  onClick={handleCierreCaja}
                  disabled={totalFisico === 0 || !sucursalCierre || !cajasAbiertas[sucursalCierre]}
                >
                  Confirmar cierre
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

{/* KPIs */}
      <div className="flex items-center gap-4 mb-4">
        <div className="space-y-2">
          <Label className="text-sm font-medium">Sucursal para totales:</Label>
          <Select value={sucursalKPI} onValueChange={setSucursalKPI}>
            <SelectTrigger className="w-48">
              <SelectValue placeholder="Seleccione sucursal" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todas">Todas las sucursales</SelectItem>
              {sucursales.map((s) => (
                <SelectItem key={s.id} value={s.id}>
                  {s.nombre}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className="grid gap-6 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Saldo actual</CardTitle>
            <DollarSign className="h-4 w-4 text-yellow-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$45,231.89</div>
            <p className="text-xs text-muted-foreground">Actualizado: 10/12/2023 15:30</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Ingresos del día</CardTitle>
            <ArrowUpRight className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$10,000.00</div>
            <p className="text-xs text-muted-foreground">+15% respecto al día anterior</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Egresos del día</CardTitle>
            <ArrowDownLeft className="h-4 w-4 text-red-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$16,500.00</div>
            <p className="text-xs text-muted-foreground">+5% respecto al día anterior</p>
          </CardContent>
        </Card>
      </div>

{/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="movimientos" className="flex items-center">
            <FileText className="h-4 w-4 mr-2" />
            Movimientos
          </TabsTrigger>
          <TabsTrigger value="cierres" className="flex items-center">
            <History className="h-4 w-4 mr-2" />
            Cierres de Caja
          </TabsTrigger>
          <TabsTrigger value="asientos" className="flex items-center">
            <BookOpen className="h-4 w-4 mr-2" />
            Asientos Contables
          </TabsTrigger>
        </TabsList>

{/* Movimientos */}
        <TabsContent value="movimientos" className="mt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <DollarSign className="mr-2 h-5 w-5" />
                    Movimientos de caja
                  </CardTitle>
                  <CardDescription>Consulte los movimientos de caja por fecha</CardDescription>
                </div>
                <Button
                  variant="outline"
                  onClick={() => {
                    toast({
                      title: "Exportación exitosa",
                      description: "Los movimientos de caja han sido exportados a Excel correctamente",
                    })
                  }}
                >
                  <Download className="mr-2 h-4 w-4" />
                  Exportar a Excel
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Sucursal</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccione sucursal" />
                      </SelectTrigger>
                      <SelectContent>
                        {sucursales.map((s) => (
                          <SelectItem key={s.id} value={s.id}>
                            {s.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Fecha desde</label>
                    <div className="flex">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input type="date" className="pl-8" />
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Fecha hasta</label>
                    <div className="flex">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input type="date" className="pl-8" />
                      </div>
                    </div>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">Consultar</Button>
                  </div>
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Hora</TableHead>
                        <TableHead>Concepto</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead>Método</TableHead>
                        <TableHead>Asiento</TableHead>
                        <TableHead>Responsable</TableHead>
                        <TableHead className="text-right">Monto</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {movimientos.map((movimiento) => (
                        <TableRow key={movimiento.id}>
                          <TableCell>{new Date(movimiento.fecha).toLocaleDateString()}</TableCell>
                          <TableCell>{movimiento.hora}</TableCell>
                          <TableCell>{movimiento.concepto}</TableCell>
                          <TableCell>
                            <div className="flex items-center">
                              {movimiento.tipo === "Ingreso" ? (
                                <ArrowUpRight className="mr-2 h-4 w-4 text-green-500" />
                              ) : (
                                <ArrowDownLeft className="mr-2 h-4 w-4 text-red-500" />
                              )}
                              {movimiento.tipo}
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center">
                              {React.createElement(getIconoMetodoPago(movimiento.metodoPago), {
                                className: "mr-2 h-4 w-4",
                              })}
                              {getNombreMetodoPago(movimiento.metodoPago)}
                            </div>
                          </TableCell>
                          <TableCell>{getNombreCuentaContable(movimiento.asientoContable)}</TableCell>
                          <TableCell>{getNombreUsuario(movimiento.responsable)}</TableCell>
                          <TableCell className="text-right font-medium">
                            <span className={movimiento.tipo === "Ingreso" ? "text-green-600" : "text-red-600"}>
                              {movimiento.tipo === "Ingreso" ? "+" : "-"}${movimiento.monto.toLocaleString()}
                            </span>
                          </TableCell>
                          <TableCell className="text-right">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem onClick={() => verDetalleMovimiento(movimiento)}>
                                  <Eye className="mr-2 h-4 w-4" />
                                  Ver detalle
                                </DropdownMenuItem>
                                {movimiento.comprobante && (
                                  <DropdownMenuItem onClick={() => verComprobante(movimiento.comprobante)}>
                                    <FileUp className="mr-2 h-4 w-4" />
                                    Ver comprobante
                                  </DropdownMenuItem>
                                )}
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Cierres */}
        <TabsContent value="cierres" className="mt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <CheckCircle className="mr-2 h-5 w-5" />
                    Cierres de caja
                  </CardTitle>
                  <CardDescription>Historial de cierres de caja realizados</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los cierres de caja han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Impresión iniciada",
                        description: "El reporte de cierres de caja se está imprimiendo",
                      })
                    }}
                  >
                    <Printer className="mr-2 h-4 w-4" />
                    Imprimir
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Sucursal</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todas las sucursales" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todas">Todas las sucursales</SelectItem>
                        {sucursales.map((s) => (
                          <SelectItem key={s.id} value={s.id}>
                            {s.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Usuario</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todos los usuarios" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todos">Todos los usuarios</SelectItem>
                        {usuarios.map((usuario) => (
                          <SelectItem key={usuario.id} value={usuario.id.toString()}>
                            {usuario.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Fecha desde</label>
                    <div className="flex">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input type="date" className="pl-8" />
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Fecha hasta</label>
                    <div className="flex">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input type="date" className="pl-8" />
                      </div>
                    </div>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">Filtrar</Button>
                  </div>
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Hora</TableHead>
                        <TableHead>Usuario</TableHead>
                        <TableHead>Sucursal</TableHead>
                        <TableHead>Total Sistema</TableHead>
                        <TableHead>Total Físico</TableHead>
                        <TableHead>Diferencia</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {cierresCaja.map((cierre) => (
                        <TableRow key={cierre.id}>
                          <TableCell>{new Date(cierre.fecha).toLocaleDateString()}</TableCell>
                          <TableCell>{cierre.hora}</TableCell>
                          <TableCell>{getNombreUsuario(cierre.usuario)}</TableCell>
                          <TableCell>{cierre.sucursal}</TableCell>
                          <TableCell className="font-medium">${cierre.saldoSistema.toLocaleString()}</TableCell>
                          <TableCell className="font-medium">${cierre.saldoFisico.toLocaleString()}</TableCell>
                          <TableCell>
                            {cierre.diferencia === 0 ? (
                              <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Sin diferencia</Badge>
                            ) : cierre.diferencia > 0 ? (
                              <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">
                                +${cierre.diferencia}
                              </Badge>
                            ) : (
                              <Badge className="bg-red-100 text-red-800 hover:bg-red-100">
                                -${Math.abs(cierre.diferencia)}
                              </Badge>
                            )}
                          </TableCell>
                          <TableCell className="text-right">
                            <Button variant="ghost" size="sm" onClick={() => verDetalleCierre(cierre)}>
                              <Search className="h-4 w-4" />
                              <span className="sr-only">Ver detalle</span>
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Asientos */}
        <TabsContent value="asientos" className="mt-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg flex items-center">
                    <BookOpen className="mr-2 h-5 w-5" />
                    Asientos contables
                  </CardTitle>
                  <CardDescription>Administre los asientos contables del sistema</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Exportación exitosa",
                        description: "Los asientos contables han sido exportados a Excel correctamente",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Exportar a Excel
                  </Button>
                  <Button className="bg-yellow-500 hover:bg-yellow-600 text-black" onClick={abrirDialogoAsiento}>
                    <PlusCircle className="mr-2 h-4 w-4" />
                    Nuevo asiento
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="space-y-2 flex-1">
                    <label className="text-sm font-medium">Estado</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Todos los estados" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todos">Todos los estados</SelectItem>
                        <SelectItem value="activo">Activo</SelectItem>
                        <SelectItem value="inactivo">Inactivo</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="self-end">
                    <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">Filtrar</Button>
                  </div>
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Nombre del asiento</TableHead>
                        <TableHead>Descripción</TableHead>
                        <TableHead>Estado</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {asientosContables.map((asiento) => (
                        <TableRow key={asiento.id}>
                          <TableCell>{asiento.cuenta_contable}</TableCell>
                          <TableCell>{asiento.descripcion}</TableCell>
                          <TableCell>
                            <Badge variant={asiento.activo ? "default" : "secondary"}>
                              {asiento.activo ? "Activo" : "Inactivo"}
                            </Badge>
                          </TableCell>
                          <TableCell className="text-right">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem onClick={() => editarAsiento(asiento)}>
                                  <Edit className="mr-2 h-4 w-4" />
                                  Editar
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => toggleAsientoActivo(asiento.id)}>
                                  <CheckCircle className="mr-2 h-4 w-4" />
                                  {asiento.activo ? "Desactivar" : "Activar"}
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => eliminarAsiento(asiento.id)} className="text-red-600">
                                  <Trash2 className="mr-2 h-4 w-4" />
                                  Eliminar
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Detalle cierre */}
      <Dialog open={cierreDetalleDialog} onOpenChange={setCierreDetalleDialog}>
        <DialogContent className="max-w-4xl">
          {cierreSeleccionado && (
            <>
              <DialogHeader>
                <DialogTitle>Detalle de cierre de caja</DialogTitle>
                <DialogDescription>
                  Cierre realizado el {new Date(cierreSeleccionado.fecha).toLocaleDateString()} a las{" "}
                  {cierreSeleccionado.hora}
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-6 py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Información general</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Fecha:</span>
                          <span className="font-medium">{new Date(cierreSeleccionado.fecha).toLocaleDateString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Hora:</span>
                          <span className="font-medium">{cierreSeleccionado.hora}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Usuario:</span>
                          <span className="font-medium">{getNombreUsuario(cierreSeleccionado.usuario)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Sucursal:</span>
                          <span className="font-medium">{cierreSeleccionado.sucursal}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Estado:</span>
                          <Badge className="bg-green-100 text-green-800 hover:bg-green-100">
                            {cierreSeleccionado.estado}
                          </Badge>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

<Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Montos por método de pago</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        {metodosPago.map((metodo) => {
                          const monto = cierreSeleccionado.montosPorMetodo[metodo.id] || 0
                          if (monto === 0) return null
                          const Icono = metodo.icono
                          return (
                            <div key={metodo.id} className="flex justify-between">
                              <div className="flex items-center">
                                <Icono className="mr-2 h-4 w-4" />
                                <span className="text-muted-foreground">{metodo.nombre}:</span>
                              </div>
                              <span className="font-medium">${monto.toLocaleString()}</span>
                            </div>
                          )
                        })}
                        <Separator />
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Total sistema:</span>
                          <span className="font-medium">${cierreSeleccionado.saldoSistema.toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Total físico:</span>
                          <span className="font-medium">${cierreSeleccionado.saldoFisico.toLocaleString()}</span>
                        </div>
                        <Separator />
                        <div className="flex justify-between">
                          <span className="font-medium">Diferencia:</span>
                          <span
                            className={`font-bold ${
                              cierreSeleccionado.diferencia === 0
                                ? "text-green-600"
                                : cierreSeleccionado.diferencia > 0
                                  ? "text-blue-600"
                                  : "text-red-600"
                            }`}
                          >
                            {cierreSeleccionado.diferencia === 0
                              ? "Sin diferencia"
                              : cierreSeleccionado.diferencia > 0
                                ? `+$${cierreSeleccionado.diferencia}`
                                : `-$${Math.abs(cierreSeleccionado.diferencia)}`}
                          </span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

{cierreSeleccionado.observaciones && (
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Observaciones</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p>{cierreSeleccionado.observaciones}</p>
                    </CardContent>
                  </Card>
                )}
              </div>
              <DialogFooter>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={() => setCierreDetalleDialog(false)}>
                    Cerrar
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Impresión iniciada",
                        description: "El detalle del cierre de caja se está imprimiendo",
                      })
                    }}
                  >
                    <Printer className="mr-2 h-4 w-4" />
                    Imprimir
                  </Button>
                </div>
              </DialogFooter>
            </>
          )}
        </DialogContent>
      </Dialog>

{/* Detalle de movimiento */}
      <Dialog open={showMovimientoDetalleDialog} onOpenChange={setShowMovimientoDetalleDialog}>
        <DialogContent className="max-w-2xl">
          {movimientoSeleccionado && (
            <>
              <DialogHeader>
                <DialogTitle>Detalle de movimiento</DialogTitle>
                <DialogDescription>
                  {movimientoSeleccionado.concepto} - {new Date(movimientoSeleccionado.fecha).toLocaleDateString()}{" "}
                  {movimientoSeleccionado.hora}
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-6 py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Información general</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Fecha:</span>
                          <span className="font-medium">
                            {new Date(movimientoSeleccionado.fecha).toLocaleDateString()}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Hora:</span>
                          <span className="font-medium">{movimientoSeleccionado.hora}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Concepto:</span>
                          <span className="font-medium">{movimientoSeleccionado.concepto}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Tipo:</span>
                          <Badge variant={movimientoSeleccionado.tipo === "Ingreso" ? "default" : "destructive"}>
                            {movimientoSeleccionado.tipo}
                          </Badge>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Método de pago:</span>
                          <div className="flex items-center">
                            {React.createElement(getIconoMetodoPago(movimientoSeleccionado.metodoPago), {
                              className: "mr-2 h-4 w-4",
                            })}
                            {getNombreMetodoPago(movimientoSeleccionado.metodoPago)}
                          </div>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Asiento contable:</span>
                          <span className="font-medium">
                            {getNombreCuentaContable(movimientoSeleccionado.asientoContable)}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Responsable:</span>
                          <span className="font-medium">{getNombreUsuario(movimientoSeleccionado.responsable)}</span>
                        </div>
                        <Separator />
                        <div className="flex justify-between">
                          <span className="font-medium">Monto:</span>
                          <span
                            className={`font-bold ${movimientoSeleccionado.tipo === "Ingreso" ? "text-green-600" : "text-red-600"}`}
                          >
                            {movimientoSeleccionado.tipo === "Ingreso" ? "+" : "-"}$
                            {movimientoSeleccionado.monto.toLocaleString()}
                          </span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

<Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Observaciones</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm">{movimientoSeleccionado.observaciones || "Sin observaciones"}</p>
                    </CardContent>
                  </Card>
                </div>

{movimientoSeleccionado.comprobante && (
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Comprobante</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="flex justify-center">
                        <Button variant="outline" onClick={() => verComprobante(movimientoSeleccionado.comprobante)}>
                          <FileUp className="mr-2 h-4 w-4" />
                          Ver comprobante
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setShowMovimientoDetalleDialog(false)}>
                  Cerrar
                </Button>
              </DialogFooter>
            </>
          )}
        </DialogContent>
      </Dialog>

{/* Ver comprobante */}
      <Dialog open={showComprobanteDialog} onOpenChange={setShowComprobanteDialog}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Comprobante</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <div className="flex justify-center">
              {comprobanteUrl && comprobanteUrl.endsWith(".pdf") ? (
                <div className="text-center">
                  <p className="mb-4">El archivo es un PDF. Haga clic para descargarlo.</p>
                  <Button
                    variant="outline"
                    onClick={() => {
                      toast({
                        title: "Descarga iniciada",
                        description: "El comprobante se está descargando",
                      })
                    }}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Descargar PDF
                  </Button>
                </div>
              ) : (
                <div className="border rounded-md p-2 max-w-full">
                  <img
                    src={`/placeholder.svg?height=400&width=600&query=comprobante-de-movimiento`}
                    alt="Comprobante"
                    className="max-h-[70vh] object-contain"
                  />
                </div>
              )}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowComprobanteDialog(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* ABM Asientos */}
      <Dialog open={showAsientoDialog} onOpenChange={setShowAsientoDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{asientoEditando ? "Editar asiento contable" : "Nuevo asiento contable"}</DialogTitle>
            <DialogDescription>
              {asientoEditando
                ? "Modifique los datos del asiento contable"
                : "Complete los datos del nuevo asiento contable"}
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="cuenta_contable">Nombre del asiento contable *</Label>
              <Input
                id="cuenta_contable"
                placeholder="Ej: Ventas, Compras, Servicios"
                value={formAsiento.cuenta_contable}
                onChange={(e) => setFormAsiento({ ...formAsiento, cuenta_contable: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="descripcion">Descripción *</Label>
              <Textarea
                id="descripcion"
                placeholder="Descripción del asiento contable"
                value={formAsiento.descripcion}
                onChange={(e) => setFormAsiento({ ...formAsiento, descripcion: e.target.value })}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAsientoDialog(false)}>
              Cancelar
            </Button>
            <Button
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
              onClick={asientoEditando ? actualizarAsiento : crearAsiento}
            >
              {asientoEditando ? "Actualizar" : "Crear"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/productos/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import { useState } from "react"
import { Package, Plus, Pencil, Trash2, Search, Download, RefreshCw, ArrowUpDown, X, ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Datos de ejemplo
const marcasDisponibles = [
  { id: 1, nombre: "Penguin Random House" },
  { id: 2, nombre: "Editorial Planeta" },
  { id: 3, nombre: "Anagrama" },
  { id: 4, nombre: "Alfaguara" },
  { id: 5, nombre: "Tusquets" },
  { id: 6, nombre: "Salamandra" },
]

const categoriasDisponibles = [
  { id: 1, nombre: "Literatura" },
  { id: 2, nombre: "Infantil" },
  { id: 3, nombre: "Académico" },
  { id: 4, nombre: "Autoayuda" },
  { id: 5, nombre: "Fantasía" },
]

const depositosDisponibles = [
  { id: 1, nombre: "Depósito Central" },
  { id: 2, nombre: "Depósito Norte" },
  { id: 3, nombre: "Depósito Sur" },
]

const productos = [
  {
    id: 1,
    codigo: "LIB001",
    nombre: "Cien años de soledad",
    descripcion: "Novela de Gabriel García Márquez",
    marca: "Editorial Planeta",
    categoria: "Literatura",
    precio_costo: 15.5,
    precio_minorista: 25.0,
    precio_mayorista: 22.0,
    precio_cuenta_corriente: 20.0,
    stock: 45,
    stock_minimo: 10,
    activo: true,
    discontinuado: false,
    es_bundle: false,
    margen_minorista_tipo: "Porcentual",
    margen_minorista_valor: 60,
    margen_mayorista_tipo: "Porcentual",
    margen_mayorista_valor: 40,
    margen_cuenta_corriente_tipo: "Porcentual",
    margen_cuenta_corriente_valor: 30,
    codigos_barra: ["9788497592208", "9788497592215"],
    productos_relacionados: [2, 4], // Ejemplo de productos relacionados
  },
  {
    id: 2,
    codigo: "LIB002",
    nombre: "El principito",
    descripcion: "Clásico de Antoine de Saint-Exupéry",
    marca: "Salamandra",
    categoria: "Infantil",
    precio_costo: 8.0,
    precio_minorista: 15.0,
    precio_mayorista: 13.0,
    precio_cuenta_corriente: 12.0,
    stock: 78,
    stock_minimo: 15,
    activo: true,
    discontinuado: false,
    es_bundle: false,
    margen_minorista_tipo: "Fijo",
    margen_minorista_valor: 7,
    margen_mayorista_tipo: "Fijo",
    margen_mayorista_valor: 5,
    margen_cuenta_corriente_tipo: "Fijo",
    margen_cuenta_corriente_valor: 4,
    codigos_barra: ["9788498381498"],
    productos_relacionados: [1],
  },
  {
    id: 3,
    codigo: "BUN001",
    nombre: "Colección Clásicos",
    descripcion: "Bundle de libros clásicos",
    marca: "Penguin Random House",
    categoria: "Literatura",
    precio_costo: 45.0,
    precio_minorista: 75.0,
    precio_mayorista: 65.0,
    precio_cuenta_corriente: 60.0,
    stock: 12,
    stock_minimo: 5,
    activo: true,
    discontinuado: false,
    es_bundle: true,
    margen_minorista_tipo: "Porcentual",
    margen_minorista_valor: 65,
    margen_mayorista_tipo: "Porcentual",
    margen_mayorista_valor: 45,
    margen_cuenta_corriente_tipo: "Porcentual",
    margen_cuenta_corriente_valor: 35,
    codigos_barra: [],
    productos_relacionados: [],
  },
]

const productosParaBundle = [
  { id: 1, codigo: "LIB001", nombre: "Cien años de soledad" },
  { id: 2, codigo: "LIB002", nombre: "El principito" },
  { id: 4, codigo: "LIB004", nombre: "Don Quijote" },
  { id: 5, codigo: "LIB005", nombre: "La Odisea" },
]

export default function ProductosPage() {
  const [showNewProductDialog, setShowNewProductDialog] = useState(false)
  const [showEditProductDialog, setShowEditProductDialog] = useState(false)
  const [showDeleteProductDialog, setShowDeleteProductDialog] = useState(false)
  const [selectedProduct, setSelectedProduct] = useState<any>(null)
  const [isEditMode, setIsEditMode] = useState(false)
  const [formData, setFormData] = useState({
    codigo: "",
    nombre: "",
    descripcion: "",
    marca_id: "",
    categoria_id: "",
    precio_costo: 0,
    precio_minorista: 0,
    precio_mayorista: 0,
    precio_cuenta_corriente: 0,
    stock_minimo: 0,
    activo: true,
    discontinuado: false,
    es_bundle: false,
    margen_minorista_tipo: "Porcentual",
    margen_minorista_valor: 60,
    margen_mayorista_tipo: "Porcentual",
    margen_mayorista_valor: 40,
    margen_cuenta_corriente_tipo: "Porcentual",
    margen_cuenta_corriente_valor: 30,
    bundle_productos: [] as any[],
    codigos_barra: [] as string[],
    productos_relacionados: [] as number[],
  })
  const [searchQuery, setSearchQuery] = useState("")
  const [sortColumn, setSortColumn] = useState<string | null>(null)
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
  const [bundleSearchQuery, setBundleSearchQuery] = useState("")
  const [nuevoCodigoBarra, setNuevoCodigoBarra] = useState("")
  const [relacionadosSearchQuery, setRelacionadosSearchQuery] = useState("")

// Calcular precios con descuento
  const calcularPrecioConMargen = (precioBase: number, tipoMargen: string, valorMargen: number) => {
    if (valorMargen === 0) return precioBase

if (tipoMargen === "Fijo") {
      return precioBase + valorMargen
    } else {
      // Porcentual
      return precioBase * (1 + valorMargen / 100)
    }
  }

// Actualizar precios cuando cambia el costo o descuento
  const actualizarPrecios = (
    nuevoCosto?: number,
    nuevoMargenMinoristaTipo?: string,
    nuevoMargenMinoristaValor?: number,
    nuevoMargenMayoristaTipo?: string,
    nuevoMargenMayoristaValor?: number,
    nuevoMargenCuentaCorrienteTipo?: string,
    nuevoMargenCuentaCorrienteValor?: number,
  ) => {
    const costo = nuevoCosto !== undefined ? nuevoCosto : formData.precio_costo

const margenMinoristaTipo = nuevoMargenMinoristaTipo || formData.margen_minorista_tipo
    const margenMinoristaValor =
      nuevoMargenMinoristaValor !== undefined ? nuevoMargenMinoristaValor : formData.margen_minorista_valor

const margenMayoristaTipo = nuevoMargenMayoristaTipo || formData.margen_mayorista_tipo
    const margenMayoristaValor =
      nuevoMargenMayoristaValor !== undefined ? nuevoMargenMayoristaValor : formData.margen_mayorista_valor

const margenCuentaCorrienteTipo = nuevoMargenCuentaCorrienteTipo || formData.margen_cuenta_corriente_tipo
    const margenCuentaCorrienteValor =
      nuevoMargenCuentaCorrienteValor !== undefined
        ? nuevoMargenCuentaCorrienteValor
        : formData.margen_cuenta_corriente_valor

// Calculate each price independently
    const precioMinorista = calcularPrecioConMargen(costo, margenMinoristaTipo, margenMinoristaValor)
    const precioMayorista = calcularPrecioConMargen(costo, margenMayoristaTipo, margenMayoristaValor)
    const precioCuentaCorriente = calcularPrecioConMargen(costo, margenCuentaCorrienteTipo, margenCuentaCorrienteValor)

setFormData((prev) => ({
      ...prev,
      precio_costo: costo,
      precio_minorista: Number(precioMinorista.toFixed(2)),
      precio_mayorista: Number(precioMayorista.toFixed(2)),
      precio_cuenta_corriente: Number(precioCuentaCorriente.toFixed(2)),
      margen_minorista_tipo: margenMinoristaTipo,
      margen_minorista_valor: margenMinoristaValor,
      margen_mayorista_tipo: margenMayoristaTipo,
      margen_mayorista_valor: margenMayoristaValor,
      margen_cuenta_corriente_tipo: margenCuentaCorrienteTipo,
      margen_cuenta_corriente_valor: margenCuentaCorrienteValor,
    }))
  }

// Manejar cambios en el formulario
  const handleFormChange = (field: string, value: any) => {
    if (field === "precio_costo") {
      actualizarPrecios(Number(value))
    } else if (field === "margen_minorista_tipo") {
      actualizarPrecios(undefined, value)
    } else if (field === "margen_minorista_valor") {
      actualizarPrecios(undefined, undefined, Number(value))
    } else if (field === "margen_mayorista_tipo") {
      actualizarPrecios(undefined, undefined, undefined, value)
    } else if (field === "margen_mayorista_valor") {
      actualizarPrecios(undefined, undefined, undefined, undefined, Number(value))
    } else if (field === "margen_cuenta_corriente_tipo") {
      actualizarPrecios(undefined, undefined, undefined, undefined, undefined, value)
    } else if (field === "margen_cuenta_corriente_valor") {
      actualizarPrecios(undefined, undefined, undefined, undefined, undefined, undefined, Number(value))
    } else {
      setFormData({
        ...formData,
        [field]: value,
      })
    }
  }

const agregarCodigoBarra = () => {
    if (nuevoCodigoBarra.trim() === "") {
      toast({
        title: "Error",
        description: "El código de barra no puede estar vacío",
        variant: "destructive",
      })
      return
    }

if (formData.codigos_barra.includes(nuevoCodigoBarra.trim())) {
      toast({
        title: "Error",
        description: "Este código de barra ya existe",
        variant: "destructive",
      })
      return
    }

setFormData({
      ...formData,
      codigos_barra: [...formData.codigos_barra, nuevoCodigoBarra.trim()],
    })
    setNuevoCodigoBarra("")
  }

const removerCodigoBarra = (index: number) => {
    setFormData({
      ...formData,
      codigos_barra: formData.codigos_barra.filter((_, i) => i !== index),
    })
  }

const agregarProductoRelacionado = (productoId: number) => {
    if (!formData.productos_relacionados.includes(productoId)) {
      setFormData({
        ...formData,
        productos_relacionados: [...formData.productos_relacionados, productoId],
      })
    }
  }

const removerProductoRelacionado = (productoId: number) => {
    setFormData({
      ...formData,
      productos_relacionados: formData.productos_relacionados.filter((id) => id !== productoId),
    })
  }

// Abrir diálogo de nuevo producto
  const openNewDialog = () => {
    setIsEditMode(false)
    setFormData({
      codigo: "",
      nombre: "",
      descripcion: "",
      marca_id: "",
      categoria_id: "",
      precio_costo: 0,
      precio_minorista: 0,
      precio_mayorista: 0,
      precio_cuenta_corriente: 0,
      stock_minimo: 0,
      activo: true,
      discontinuado: false,
      es_bundle: false,
      margen_minorista_tipo: "Porcentual",
      margen_minorista_valor: 60,
      margen_mayorista_tipo: "Porcentual",
      margen_mayorista_valor: 40,
      margen_cuenta_corriente_tipo: "Porcentual",
      margen_cuenta_corriente_valor: 30,
      bundle_productos: [],
      codigos_barra: [],
      productos_relacionados: [],
    })
    setNuevoCodigoBarra("")
    setShowNewProductDialog(true)
  }

// Abrir diálogo de edición
  const openEditDialog = (producto: any) => {
    setIsEditMode(true)
    setSelectedProduct(producto)
    setFormData({
      codigo: producto.codigo,
      nombre: producto.nombre,
      descripcion: producto.descripcion,
      marca_id: producto.marca,
      categoria_id: producto.categoria,
      precio_costo: producto.precio_costo,
      precio_minorista: producto.precio_minorista,
      precio_mayorista: producto.precio_mayorista,
      precio_cuenta_corriente: producto.precio_cuenta_corriente,
      stock_minimo: producto.stock_minimo,
      activo: producto.activo,
      discontinuado: producto.discontinuado,
      es_bundle: producto.es_bundle,
      margen_minorista_tipo: producto.margen_minorista_tipo,
      margen_minorista_valor: producto.margen_minorista_valor,
      margen_mayorista_tipo: producto.margen_mayorista_tipo,
      margen_mayorista_valor: producto.margen_mayorista_valor,
      margen_cuenta_corriente_tipo: producto.margen_cuenta_corriente_tipo,
      margen_cuenta_corriente_valor: producto.margen_cuenta_corriente_valor,
      bundle_productos: producto.bundle_productos || [],
      codigos_barra: producto.codigos_barra || [],
      productos_relacionados: producto.productos_relacionados || [],
    })
    setNuevoCodigoBarra("")
    setShowEditProductDialog(true)
  }

// Abrir diálogo de eliminación
  const openDeleteDialog = (producto: any) => {
    setSelectedProduct(producto)
    setShowDeleteProductDialog(true)
  }

// Guardar producto
  const saveProduct = () => {
    console.log("Guardando producto:", formData)

if (showNewProductDialog) {
      setShowNewProductDialog(false)
    } else if (showEditProductDialog) {
      setShowEditProductDialog(false)
    }

// Reset form
    setFormData({
      codigo: "",
      nombre: "",
      descripcion: "",
      marca_id: "",
      categoria_id: "",
      precio_costo: 0,
      precio_minorista: 0,
      precio_mayorista: 0,
      precio_cuenta_corriente: 0,
      stock_minimo: 0,
      activo: true,
      discontinuado: false,
      es_bundle: false,
      margen_minorista_tipo: "Porcentual",
      margen_minorista_valor: 60,
      margen_mayorista_tipo: "Porcentual",
      margen_mayorista_valor: 40,
      margen_cuenta_corriente_tipo: "Porcentual",
      margen_cuenta_corriente_valor: 30,
      bundle_productos: [],
      codigos_barra: [],
      productos_relacionados: [],
    })
    setNuevoCodigoBarra("")
  }

// Eliminar producto
  const deleteProduct = () => {
    console.log("Eliminando producto:", selectedProduct)
    setShowDeleteProductDialog(false)
  }

// Agregar producto al bundle
  const agregarProductoBundle = (producto: any) => {
    const existe = formData.bundle_productos.find((p) => p.producto_id === producto.id)
    if (!existe) {
      setFormData({
        ...formData,
        bundle_productos: [
          ...formData.bundle_productos,
          {
            producto_id: producto.id,
            producto_nombre: producto.nombre,
            cantidad: 1,
          },
        ],
      })
    }
  }

// Remover producto del bundle
  const removerProductoBundle = (productoId: number) => {
    setFormData({
      ...formData,
      bundle_productos: formData.bundle_productos.filter((p) => p.producto_id !== productoId),
    })
  }

// Actualizar cantidad en bundle
  const actualizarCantidadBundle = (productoId: number, cantidad: number) => {
    setFormData({
      ...formData,
      bundle_productos: formData.bundle_productos.map((p) => (p.producto_id === productoId ? { ...p, cantidad } : p)),
    })
  }

// Función para refrescar los datos
  const refreshData = () => {
    toast({
      title: "Datos actualizados",
      description: "Los datos de productos se han actualizado",
    })
  }

// Filtrar productos
  const filteredProducts = productos.filter((producto) => {
    const searchTermLower = searchQuery.toLowerCase()
    return (
      producto.codigo.toLowerCase().includes(searchTermLower) ||
      producto.nombre.toLowerCase().includes(searchTermLower) ||
      producto.marca.toLowerCase().includes(searchTermLower) ||
      producto.categoria.toLowerCase().includes(searchTermLower)
    )
  })

// Filtrar productos para bundle
  const filteredBundleProducts = productosParaBundle.filter((producto) => {
    const searchTermLower = bundleSearchQuery.toLowerCase()
    return (
      producto.codigo.toLowerCase().includes(searchTermLower) || producto.nombre.toLowerCase().includes(searchTermLower)
    )
  })

const filteredRelacionadosProducts = productosParaBundle.filter((producto) => {
    const searchTermLower = relacionadosSearchQuery.toLowerCase()
    return (
      producto.codigo.toLowerCase().includes(searchTermLower) || producto.nombre.toLowerCase().includes(searchTermLower)
    )
  })

// Ordenar productos
  const sortedProducts = [...filteredProducts].sort((a, b) => {
    if (!sortColumn) return 0

let comparison = 0
    const aValue = a[sortColumn as keyof typeof a]
    const bValue = b[sortColumn as keyof typeof b]

if (typeof aValue === "string" && typeof bValue === "string") {
      comparison = aValue.localeCompare(bValue)
    } else if (typeof aValue === "number" && typeof bValue === "number") {
      comparison = aValue - bValue
    }

return sortOrder === "asc" ? comparison : -comparison
  })

const renderProductDialog = (isEdit: boolean) => (
    <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
      <DialogHeader>
        <DialogTitle>{isEdit ? "Editar producto" : "Crear nuevo producto"}</DialogTitle>
        <DialogDescription>
          {isEdit ? "Modifique los datos del producto" : "Complete los datos para crear un nuevo producto"}
        </DialogDescription>
      </DialogHeader>

<Tabs defaultValue="detalles" className="w-full">
        <TabsList className="grid w-full grid-cols-6 lg:grid-cols-8">
          <TabsTrigger value="detalles">Detalles</TabsTrigger>
          <TabsTrigger value="codigos">Códigos</TabsTrigger>
          <TabsTrigger value="precios">Precios</TabsTrigger>
          <TabsTrigger value="categorias">Categorías</TabsTrigger>
          <TabsTrigger value="bundle">Bundle</TabsTrigger>
          <TabsTrigger value="relacionados">Relacionados</TabsTrigger>
          {isEdit && <TabsTrigger value="umbrales">Umbrales</TabsTrigger>}
          {isEdit && <TabsTrigger value="depositos">Depósitos</TabsTrigger>}
        </TabsList>

<TabsContent value="detalles" className="space-y-4">
          {/* ... existing detalles content ... */}
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="codigo">Código</Label>
              <Input
                id="codigo"
                placeholder="Código del producto"
                value={formData.codigo}
                onChange={(e) => handleFormChange("codigo", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="nombre">Nombre</Label>
              <Input
                id="nombre"
                placeholder="Nombre del producto"
                value={formData.nombre}
                onChange={(e) => handleFormChange("nombre", e.target.value)}
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="descripcion">Descripción</Label>
            <Textarea
              id="descripcion"
              placeholder="Descripción del producto"
              value={formData.descripcion}
              onChange={(e) => handleFormChange("descripcion", e.target.value)}
            />
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="marca">Marca</Label>
              <Select value={formData.marca_id} onValueChange={(value) => handleFormChange("marca_id", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar marca" />
                </SelectTrigger>
                <SelectContent>
                  {marcasDisponibles.map((marca) => (
                    <SelectItem key={marca.id} value={marca.nombre}>
                      {marca.nombre}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="stock_minimo">Stock mínimo</Label>
              <Input
                id="stock_minimo"
                type="number"
                placeholder="Stock mínimo"
                value={formData.stock_minimo}
                onChange={(e) => handleFormChange("stock_minimo", Number(e.target.value))}
              />
            </div>
          </div>

<div className="flex items-center justify-between">
            <Label htmlFor="activo">Producto activo</Label>
            <Switch
              id="activo"
              checked={formData.activo}
              onCheckedChange={(checked) => handleFormChange("activo", checked)}
            />
          </div>

{isEdit && (
            <div className="flex items-center justify-between">
              <Label htmlFor="discontinuado">Producto discontinuado</Label>
              <Switch
                id="discontinuado"
                checked={formData.discontinuado}
                onCheckedChange={(checked) => handleFormChange("discontinuado", checked)}
              />
            </div>
          )}
        </TabsContent>

<TabsContent value="codigos" className="space-y-4">
          {/* ... existing codigos content ... */}
          <div className="space-y-4">
            <div>
              <Label htmlFor="nuevo_codigo_barra">Agregar código de barra</Label>
              <div className="flex gap-2 mt-2">
                <Input
                  id="nuevo_codigo_barra"
                  placeholder="Ingrese código de barra"
                  value={nuevoCodigoBarra}
                  onChange={(e) => setNuevoCodigoBarra(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault()
                      agregarCodigoBarra()
                    }
                  }}
                />
                <Button
                  type="button"
                  onClick={agregarCodigoBarra}
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  Agregar
                </Button>
              </div>
              <p className="text-sm text-muted-foreground mt-1">
                Presione Enter o haga clic en Agregar para añadir el código
              </p>
            </div>

{formData.codigos_barra.length > 0 ? (
              <div className="space-y-2">
                <Label>Códigos de barra registrados ({formData.codigos_barra.length})</Label>
                <div className="border rounded-lg divide-y">
                  {formData.codigos_barra.map((codigo, index) => (
                    <div key={index} className="flex items-center justify-between p-3 hover:bg-gray-50">
                      <span className="font-mono text-sm">{codigo}</span>
                      <Button
                        type="button"
                        size="sm"
                        variant="ghost"
                        className="text-red-500 hover:text-red-700 hover:bg-red-50"
                        onClick={() => removerCodigoBarra(index)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500 border rounded-lg bg-gray-50">
                <Package className="mx-auto h-12 w-12 mb-2 text-gray-400" />
                <p className="font-medium">No hay códigos de barra registrados</p>
                <p className="text-sm">Agregue códigos de barra para este producto</p>
              </div>
            )}
          </div>
        </TabsContent>

<TabsContent value="precios" className="space-y-4">
          {/* ... existing precios content ... */}
          <div className="space-y-2">
            <Label htmlFor="precio_costo">Precio de costo</Label>
            <Input
              id="precio_costo"
              type="number"
              step="0.01"
              placeholder="Precio de costo"
              value={formData.precio_costo}
              onChange={(e) => handleFormChange("precio_costo", Number(e.target.value))}
            />
          </div>

<div className="space-y-4">
            {/* Precio Minorista */}
            <div className="border rounded-lg p-4 space-y-4">
              <h4 className="font-medium text-lg">Precio Minorista</h4>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="margen_minorista_tipo">Tipo de margen</Label>
                  <Select
                    value={formData.margen_minorista_tipo}
                    onValueChange={(value) => handleFormChange("margen_minorista_tipo", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Fijo">Fijo ($)</SelectItem>
                      <SelectItem value="Porcentual">Porcentual (%)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="margen_minorista_valor">
                    Valor del margen {formData.margen_minorista_tipo === "Fijo" ? "($)" : "(%)"}
                  </Label>
                  <Input
                    id="margen_minorista_valor"
                    type="number"
                    step={formData.margen_minorista_tipo === "Fijo" ? "0.01" : "1"}
                    placeholder="0"
                    value={formData.margen_minorista_valor}
                    onChange={(e) => handleFormChange("margen_minorista_valor", Number(e.target.value))}
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Precio final minorista</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={formData.precio_minorista}
                  readOnly
                  className="bg-green-50 font-semibold text-lg"
                />
              </div>
            </div>

{/* Precio Mayorista */}
            <div className="border rounded-lg p-4 space-y-4">
              <h4 className="font-medium text-lg">Precio Mayorista</h4>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="margen_mayorista_tipo">Tipo de margen</Label>
                  <Select
                    value={formData.margen_mayorista_tipo}
                    onValueChange={(value) => handleFormChange("margen_mayorista_tipo", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Fijo">Fijo ($)</SelectItem>
                      <SelectItem value="Porcentual">Porcentual (%)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="margen_mayorista_valor">
                    Valor del margen {formData.margen_mayorista_tipo === "Fijo" ? "($)" : "(%)"}
                  </Label>
                  <Input
                    id="margen_mayorista_valor"
                    type="number"
                    step={formData.margen_mayorista_tipo === "Fijo" ? "0.01" : "1"}
                    placeholder="0"
                    value={formData.margen_mayorista_valor}
                    onChange={(e) => handleFormChange("margen_mayorista_valor", Number(e.target.value))}
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Precio final mayorista</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={formData.precio_mayorista}
                  readOnly
                  className="bg-blue-50 font-semibold text-lg"
                />
              </div>
            </div>

{/* Precio Cuenta Corriente */}
            <div className="border rounded-lg p-4 space-y-4">
              <h4 className="font-medium text-lg">Precio Cuenta Corriente</h4>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="margen_cuenta_corriente_tipo">Tipo de margen</Label>
                  <Select
                    value={formData.margen_cuenta_corriente_tipo}
                    onValueChange={(value) => handleFormChange("margen_cuenta_corriente_tipo", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Fijo">Fijo ($)</SelectItem>
                      <SelectItem value="Porcentual">Porcentual (%)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="margen_cuenta_corriente_valor">
                    Valor del margen {formData.margen_cuenta_corriente_tipo === "Fijo" ? "($)" : "(%)"}
                  </Label>
                  <Input
                    id="margen_cuenta_corriente_valor"
                    type="number"
                    step={formData.margen_cuenta_corriente_tipo === "Fijo" ? "0.01" : "1"}
                    placeholder="0"
                    value={formData.margen_cuenta_corriente_valor}
                    onChange={(e) => handleFormChange("margen_cuenta_corriente_valor", Number(e.target.value))}
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Precio final cuenta corriente</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={formData.precio_cuenta_corriente}
                  readOnly
                  className="bg-purple-50 font-semibold text-lg"
                />
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="categorias" className="space-y-4">
          {/* ... existing categorias content ... */}
          <div className="space-y-2">
            <Label htmlFor="categoria">Categoría</Label>
            <Select value={formData.categoria_id} onValueChange={(value) => handleFormChange("categoria_id", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Seleccionar categoría" />
              </SelectTrigger>
              <SelectContent>
                {categoriasDisponibles.map((categoria) => (
                  <SelectItem key={categoria.id} value={categoria.nombre}>
                    {categoria.nombre}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </TabsContent>

<TabsContent value="bundle" className="space-y-4">
          {/* ... existing bundle content ... */}
          <div className="flex items-center justify-between">
            <Label htmlFor="es_bundle">Este producto es un bundle</Label>
            <Switch
              id="es_bundle"
              checked={formData.es_bundle}
              onCheckedChange={(checked) => handleFormChange("es_bundle", checked)}
            />
          </div>

{formData.es_bundle && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>Buscar productos para agregar al bundle</Label>
                <div className="relative">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    type="search"
                    placeholder="Buscar productos..."
                    className="pl-8"
                    value={bundleSearchQuery}
                    onChange={(e) => setBundleSearchQuery(e.target.value)}
                  />
                </div>
              </div>

<div className="border rounded-lg max-h-48 overflow-y-auto">
                {filteredBundleProducts.map((producto) => (
                  <div key={producto.id} className="flex items-center justify-between p-2 border-b last:border-b-0">
                    <div>
                      <span className="font-medium">{producto.codigo}</span>
                      <span className="ml-2 text-sm text-gray-600">{producto.nombre}</span>
                    </div>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => agregarProductoBundle(producto)}
                      disabled={formData.bundle_productos.some((p) => p.producto_id === producto.id)}
                    >
                      Agregar
                    </Button>
                  </div>
                ))}
              </div>

{formData.bundle_productos.length > 0 && (
                <div className="space-y-2">
                  <Label>Productos en el bundle</Label>
                  <div className="border rounded-lg p-4 space-y-2">
                    {formData.bundle_productos.map((item) => (
                      <div key={item.producto_id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                        <span className="font-medium">{item.producto_nombre}</span>
                        <div className="flex items-center gap-2">
                          <Label className="text-sm">Cantidad:</Label>
                          <Input
                            type="number"
                            min="1"
                            value={item.cantidad}
                            onChange={(e) => actualizarCantidadBundle(item.producto_id, Number(e.target.value))}
                            className="w-20"
                          />
                          <Button size="sm" variant="ghost" onClick={() => removerProductoBundle(item.producto_id)}>
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </TabsContent>

<TabsContent value="relacionados" className="space-y-4">
          <div className="space-y-4">
            <div>
              <Label>Productos relacionados</Label>
              <p className="text-sm text-muted-foreground mt-1">
                Seleccione productos relacionados que aparecerán como sugerencias en las búsquedas
              </p>
            </div>

<div className="space-y-2">
              <Label>Buscar productos</Label>
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar productos..."
                  className="pl-8"
                  value={relacionadosSearchQuery}
                  onChange={(e) => setRelacionadosSearchQuery(e.target.value)}
                />
              </div>
            </div>

<div className="border rounded-lg max-h-48 overflow-y-auto">
              {filteredRelacionadosProducts.map((producto) => (
                <div key={producto.id} className="flex items-center justify-between p-2 border-b last:border-b-0">
                  <div>
                    <span className="font-medium">{producto.codigo}</span>
                    <span className="ml-2 text-sm text-gray-600">{producto.nombre}</span>
                  </div>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => agregarProductoRelacionado(producto.id)}
                    disabled={formData.productos_relacionados.includes(producto.id)}
                    className="bg-yellow-500 hover:bg-yellow-600 text-black disabled:opacity-50"
                  >
                    {formData.productos_relacionados.includes(producto.id) ? "Agregado" : "Agregar"}
                  </Button>
                </div>
              ))}
            </div>

{formData.productos_relacionados.length > 0 ? (
              <div className="space-y-2">
                <Label>Productos relacionados seleccionados ({formData.productos_relacionados.length})</Label>
                <div className="border rounded-lg divide-y">
                  {formData.productos_relacionados.map((productoId) => {
                    const producto = productosParaBundle.find((p) => p.id === productoId)
                    if (!producto) return null
                    return (
                      <div key={productoId} className="flex items-center justify-between p-3 hover:bg-gray-50">
                        <div>
                          <span className="font-medium">{producto.codigo}</span>
                          <span className="ml-2 text-sm text-gray-600">{producto.nombre}</span>
                        </div>
                        <Button
                          type="button"
                          size="sm"
                          variant="ghost"
                          className="text-red-500 hover:text-red-700 hover:bg-red-50"
                          onClick={() => removerProductoRelacionado(productoId)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    )
                  })}
                </div>
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500 border rounded-lg bg-gray-50">
                <Package className="mx-auto h-12 w-12 mb-2 text-gray-400" />
                <p className="font-medium">No hay productos relacionados</p>
                <p className="text-sm">Agregue productos relacionados para mostrar sugerencias</p>
              </div>
            )}
          </div>
        </TabsContent>

{isEdit && (
          <TabsContent value="umbrales" className="space-y-4">
            <div className="text-center py-8 text-gray-500">
              <Package className="mx-auto h-12 w-12 mb-4" />
              <p>Configuración de umbrales de stock</p>
              <p className="text-sm">Funcionalidad disponible próximamente</p>
            </div>
          </TabsContent>
        )}

{isEdit && (
          <TabsContent value="depositos" className="space-y-4">
            <div className="text-center py-8 text-gray-500">
              <Package className="mx-auto h-12 w-12 mb-4" />
              <p>Gestión de stock por depósitos</p>
              <p className="text-sm">Funcionalidad disponible próximamente</p>
            </div>
          </TabsContent>
        )}
      </Tabs>

<DialogFooter>
        <Button
          variant="outline"
          onClick={() => {
            if (isEdit) {
              setShowEditProductDialog(false)
            } else {
              setShowNewProductDialog(false)
            }
          }}
        >
          Cancelar
        </Button>
        <Button onClick={saveProduct} className="bg-yellow-500 hover:bg-yellow-600 text-black">
          {isEdit ? "Guardar cambios" : "Crear producto"}
        </Button>
      </DialogFooter>
    </DialogContent>
  )

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Productos</h1>
          <p className="text-muted-foreground">Administre el catálogo de productos</p>
        </div>
        <Dialog open={showNewProductDialog} onOpenChange={setShowNewProductDialog}>
          <DialogTrigger asChild>
            <Button onClick={openNewDialog} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Plus className="mr-2 h-4 w-4" />
              Nuevo producto
            </Button>
          </DialogTrigger>
          {renderProductDialog(false)}
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center">
              <Package className="mr-2 h-5 w-5" />
              Catálogo de productos
            </CardTitle>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  toast({
                    title: "Exportación exitosa",
                    description: "Los datos de productos han sido exportados a Excel correctamente",
                  })
                }}
              >
                <Download className="mr-2 h-4 w-4" />
                Exportar a Excel
              </Button>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger>
                    <Button variant="ghost" size="icon" onClick={refreshData}>
                      <RefreshCw className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Refrescar</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
          <CardDescription>Gestione el inventario y catálogo de productos</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar productos..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[80px]">Código</TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("nombre")
                          setSortOrder(sortColumn === "nombre" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Nombre
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Marca</TableHead>
                    <TableHead>Categoría</TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("precio_minorista")
                          setSortOrder(
                            sortColumn === "precio_minorista" ? (sortOrder === "asc" ? "desc" : "asc") : "asc",
                          )
                        }}
                      >
                        Precio
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>
                      <div
                        className="flex items-center cursor-pointer"
                        onClick={() => {
                          setSortColumn("stock")
                          setSortOrder(sortColumn === "stock" ? (sortOrder === "asc" ? "desc" : "asc") : "asc")
                        }}
                      >
                        Stock
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Estado</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sortedProducts.map((producto) => (
                    <TableRow key={producto.id}>
                      <TableCell className="font-mono">{producto.codigo}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <span className="font-medium">{producto.nombre}</span>
                          {producto.es_bundle && (
                            <Badge variant="secondary" className="bg-blue-100 text-blue-800">
                              <ShoppingCart className="w-3 h-3 mr-1" />
                              Bundle
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>{producto.marca}</TableCell>
                      <TableCell>{producto.categoria}</TableCell>
                      <TableCell>${producto.precio_minorista.toFixed(2)}</TableCell>
                      <TableCell>
                        <Badge
                          variant={producto.stock <= producto.stock_minimo ? "destructive" : "default"}
                          className={producto.stock <= producto.stock_minimo ? "" : "bg-green-100 text-green-800"}
                        >
                          {producto.stock}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex gap-1">
                          <Badge
                            variant={producto.activo ? "default" : "secondary"}
                            className={producto.activo ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
                          >
                            {producto.activo ? "Activo" : "Inactivo"}
                          </Badge>
                          {producto.discontinuado && <Badge variant="destructive">Discontinuado</Badge>}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="sm" onClick={() => openEditDialog(producto)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-red-500"
                            onClick={() => openDeleteDialog(producto)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Diálogo de edición */}
      <Dialog open={showEditProductDialog} onOpenChange={setShowEditProductDialog}>
        {renderProductDialog(true)}
      </Dialog>

{/* Diálogo de eliminación */}
      <Dialog open={showDeleteProductDialog} onOpenChange={setShowDeleteProductDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar eliminación</DialogTitle>
            <DialogDescription>
              ¿Está seguro que desea eliminar este producto? Esta acción no se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {selectedProduct && (
              <div className="p-4 border rounded-md bg-muted">
                <div className="font-medium">{selectedProduct.nombre}</div>
                <div className="text-sm text-muted-foreground">Código: {selectedProduct.codigo}</div>
                <div className="text-sm text-muted-foreground">Stock actual: {selectedProduct.stock} unidades</div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteProductDialog(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={deleteProduct}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ventas/page.tsx" isEdit="true" isQuickEdit="true" isLocked="true" isMerged="true"
"use client"

import { TooltipContent } from "@/components/ui/tooltip"

import { DialogTrigger } from "@/components/ui/dialog"

import { useState, useEffect } from "react"
import {
  Search,
  ShoppingCart,
  Plus,
  Minus,
  Trash2,
  CreditCard,
  DollarSign,
  Receipt,
  Filter,
  Calendar,
  ArrowUpDown,
  FileText,
  Download,
  RefreshCw,
  Percent,
  Tag,
  Clock,
  Truck,
  QrCode,
  Printer,
  Banknote,
  BarChart,
  Package,
  Clipboard,
  Eye,
  CheckCircle2,
  AlertCircle,
  XCircle,
  ArrowRight,
  ArrowLeft,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useSearchParams } from "next/navigation"
import { useToast } from "@/hooks/use-toast"
import { Tooltip, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"

// Datos de ejemplo
const productos = [
  {
    id: 1,
    codigo: "LIB001",
    nombre: "El principito",
    precio: 1500,
    stock: 10,
    precioMinorista: 1500,
    precioMayorista: 1300,
    precioCuentaCorriente: 1200,
  },
  {
    id: 2,
    codigo: "LIB002",
    nombre: "Cien años de soledad",
    precio: 2200,
    stock: 5,
    precioMinorista: 2200,
    precioMayorista: 1900,
    precioCuentaCorriente: 1800,
  },
  {
    id: 3,
    codigo: "LIB003",
    nombre: "Harry Potter y la piedra filosofal",
    precio: 1800,
    stock: 8,
    precioMinorista: 1800,
    precioMayorista: 1500,
    precioCuentaCorriente: 1400,
  },
  {
    id: 4,
    codigo: "LIB004",
    nombre: "El señor de los anillos",
    precio: 2500,
    stock: 3,
    precioMinorista: 2500,
    precioMayorista: 2100,
    precioCuentaCorriente: 2000,
  },
  {
    id: 5,
    codigo: "LIB005",
    nombre: "Don Quijote de la Mancha",
    precio: 1900,
    stock: 7,
    precioMinorista: 1900,
    precioMayorista: 1600,
    precioCuentaCorriente: 1500,
  },
]

const clientes = [
  { id: 1, dni: "12345678", nombre: "Juan", apellido: "Pérez", direccion: "Av. Siempreviva 123" },
  { id: 2, dni: "23456789", nombre: "María", apellido: "González", direccion: "Calle Falsa 123" },
  { id: 3, dni: "34567890", nombre: "Carlos", apellido: "Rodríguez", direccion: "Av. Rivadavia 1234" },
]

const sucursales = [
  { id: 1, nombre: "Centro", direccion: "Av. Corrientes 1234" },
  { id: 2, nombre: "Norte", direccion: "Av. Cabildo 2000" },
  { id: 3, nombre: "Sur", direccion: "Av. Mitre 750" },
]

// Añadir estos datos de ejemplo para los usuarios/vendedores después de los datos de sucursales
const usuarios = [
  { id: 1, nombre: "Admin", usuario: "admin", password: "admin123", rol: "admin" },
  { id: 2, nombre: "Vendedor 1", usuario: "vendedor1", password: "vend123", rol: "vendedor" },
  { id: 3, nombre: "Vendedor 2", usuario: "vendedor2", password: "vend456", rol: "vendedor" },
  { id: 4, nombre: "Cajero 1", usuario: "cajero1", password: "caja123", rol: "cajero" },
  { id: 5, nombre: "Cajero 2", usuario: "cajero2", password: "caja456", rol: "cajero" },
  { id: 6, nombre: "Despachante 1", usuario: "despacho1", password: "desp123", rol: "despachante" },
  { id: 7, nombre: "Despachante 2", usuario: "despacho2", password: "desp456", rol: "despachante" },
]

// Definir estados de venta
type EstadoVenta = "preforma" | "cobrada" | "entregada" | "cancelada"

// Modificar los datos de ejemplo para incluir el estado de la venta
const ventasData = [
  {
    id: 1,
    codigo: "VTA-001",
    fecha: "2023-12-10",
    hora: "09:15",
    cliente: "Juan Pérez",
    clienteId: 1,
    productos: [
      { id: 1, codigo: "LIB001", nombre: "El principito", precio: 1500, cantidad: 1, subtotal: 1500 },
      {
        id: 3,
        codigo: "LIB003",
        nombre: "Harry Potter y la piedra filosofal",
        precio: 1800,
        cantidad: 1,
        subtotal: 1800,
      },
    ],
    total: 3300,
    subtotal: 3300,
    descuentoProductos: 0,
    descuentoGeneral: 0,
    sucursal: "Centro",
    sucursalId: 1,
    vendedor: "Vendedor 1",
    estado: "entregada" as EstadoVenta,
    cajero: "Cajero 1",
    despachante: "Despachante 1",
    retiradoPor: "Juan Pérez",
    fechaCobro: "2023-12-10",
    fechaEntrega: "2023-12-10",
    tipoComprobante: "recibo",
    entrega: { tipo: "inmediata", fecha: "2023-12-10", hora: "09:15", notas: "" },
    codigoRetiro: "XYZ123ABC",
    metodosPago: [],
    metodosPagoPreforma: [],
    productosDetalle: [
      { id: 1, codigo: "LIB001", nombre: "El principito", precio: 1500, cantidad: 1 },
      { id: 3, codigo: "LIB003", nombre: "Harry Potter y la piedra filosofal", precio: 1800, cantidad: 1 },
    ],
  },
  {
    id: 2,
    codigo: "VTA-002",
    fecha: "2023-12-10",
    hora: "14:30",
    cliente: "María González",
    clienteId: 2,
    productos: [{ id: 2, codigo: "LIB002", nombre: "Cien años de soledad", precio: 2200, cantidad: 1, subtotal: 2200 }],
    total: 2200,
    subtotal: 2200,
    descuentoProductos: 0,
    descuentoGeneral: 0,
    sucursal: "Norte",
    sucursalId: 2,
    vendedor: "Vendedor 2",
    estado: "cobrada" as EstadoVenta,
    cajero: "Cajero 2",
    despachante: null,
    retiradoPor: null,
    fechaCobro: "2023-12-10",
    fechaEntrega: null,
    tipoComprobante: "recibo",
    entrega: { tipo: "inmediata", fecha: "2023-12-10", hora: "14:30", notas: "" },
    codigoRetiro: "DEF456GHI",
    metodosPago: [{ id: "abc", tipo: "efectivo", monto: 2200 }],
    metodosPagoPreforma: [],
    productosDetalle: [{ id: 2, codigo: "LIB002", nombre: "Cien años de soledad", precio: 2200, cantidad: 1 }],
  },
  {
    id: 3,
    codigo: "VTA-003",
    fecha: "2023-12-11",
    hora: "11:20",
    cliente: "Carlos Rodríguez",
    clienteId: 3,
    productos: [
      { id: 4, codigo: "LIB004", nombre: "El señor de los anillos", precio: 2500, cantidad: 1, subtotal: 2500 },
      { id: 5, codigo: "LIB005", nombre: "Don Quijote de la Mancha", precio: 1900, cantidad: 1, subtotal: 1900 },
    ],
    total: 4400,
    subtotal: 4400,
    descuentoProductos: 0,
    descuentoGeneral: 0,
    sucursal: "Sur",
    sucursalId: 3,
    vendedor: "Vendedor 1",
    estado: "preforma" as EstadoVenta,
    cajero: null,
    despachante: null,
    retiradoPor: null,
    fechaCobro: null,
    fechaEntrega: null,
    tipoComprobante: "recibo",
    entrega: { tipo: "inmediata", fecha: "2023-12-11", hora: "11:20", notas: "" },
    codigoRetiro: "JKL789MNO",
    metodosPago: [],
    metodosPagoPreforma: [],
    productosDetalle: [
      { id: 4, codigo: "LIB004", nombre: "El señor de los anillos", precio: 2500, cantidad: 1 },
      { id: 5, codigo: "LIB005", nombre: "Don Quijote de la Mancha", precio: 1900, cantidad: 1 },
    ],
  },
]

// Definir el tipo para los items del carrito con descuento individual
interface CarritoItem {
  id: number
  codigo: string
  nombre: string
  precio: number
  stock: number
  cantidad: number
  descuento?: {
    tipo: "porcentaje" | "monto"
    valor: number
  }
  precioMinorista?: number
  precioMayorista?: number
  // Added
  precioCuentaCorriente?: number
}

export default function VentasPage() {
  const { toast } = useToast()
  const searchParams = useSearchParams()
  const [activeTab, setActiveTab] = useState("listado")
  const [searchTerm, setSearchTerm] = useState("")
  const [clienteSearch, setClienteSearch] = useState("")
  const [selectedCliente, setSelectedCliente] = useState<any>(null)
  const [carrito, setCarrito] = useState<CarritoItem[]>([])
  const [sucursal, setSucursal] = useState("")
  const [tipoComprobante, setTipoComprobante] = useState("recibo")
  const [metodoPago, setMetodoPago] = useState("efectivo")
  const [tipoDescuento, setTipoDescuento] = useState<"porcentaje" | "monto">("porcentaje")
  const [valorDescuento, setValorDescuento] = useState<string>("")
  const [showClienteDialog, setShowClienteDialog] = useState(false)
  const [showSuccessDialog, setShowSuccessDialog] = useState(false)
  const [showNewClienteDialog, setShowNewClienteDialog] = useState(false)
  const [ventas, setVentas] = useState(ventasData)
  const [ventasFiltradas, setVentasFiltradas] = useState(ventasData)
  // Actualizar el estado de filtros para incluir código
  const [filtros, setFiltros] = useState({
    fechaDesde: "",
    fechaHasta: "",
    cliente: "",
    sucursal: "",
    producto: "",
    codigo: "",
    estado: "",
  })
  const [newClienteForm, setNewClienteForm] = useState({
    dni: "",
    nombre: "",
    apellido: "",
    direccion: "",
    telefono: "",
    email: "",
  })
  const [showDetalleVentaDialog, setShowDetalleVentaDialog] = useState(false)
  const [selectedVenta, setSelectedVenta] = useState<any>(null)

// Añadir estos estados después de los estados existentes
  const [vendedorActual, setVendedorActual] = useState(usuarios[0]) // Por defecto el Admin
  const [showVendedorDialog, setShowVendedorDialog] = useState(false)
  const [selectedVendedor, setSelectedVendedor] = useState<any>(null)
  const [vendedorPassword, setVendedorPassword] = useState("")
  const [vendedorPasswordError, setVendedorPasswordError] = useState("")
  const [showPasswordDialog, setShowPasswordDialog] = useState(false)

// Estados para el descuento por producto
  const [showDescuentoProductoDialog, setShowDescuentoProductoDialog] = useState(false)
  const [selectedProductoId, setSelectedProductoId] = useState<number | null>(null)
  const [descuentoProductoTipo, setDescuentoProductoTipo] = useState<"porcentaje" | "monto">("porcentaje")
  const [descuentoProductoValor, setDescuentoProductoValor] = useState<string>("")

// Estados para el plazo de entrega
  const [tipoEntrega, setTipoEntrega] = useState<"inmediata" | "programada">("inmediata")
  const [fechaEntrega, setFechaEntrega] = useState<string>("")
  const [horaEntrega, setHoraEntrega] = useState<string>("")
  const [notasEntrega, setNotasEntrega] = useState<string>("")

// Estados para el proceso de venta en 3 etapas
  const [showCobroDialog, setShowCobroDialog] = useState(false)
  const [showRetiroDialog, setShowRetiroDialog] = useState(false)
  const [ventaActual, setVentaActual] = useState<any>(null)
  const [retiradoPor, setRetiradoPor] = useState<string>("")
  const [esClienteQuienRetira, setEsClienteQuienRetira] = useState(true)
  const [codigoRetiro, setCodigoRetiro] = useState<string>("")
  const [codigoRetiroInput, setCodigoRetiroInput] = useState<string>("")
  const [showQrDialog, setShowQrDialog] = useState(false)
  const [rolActual, setRolActual] = useState<"vendedor" | "cajero" | "despachante" | "admin">("admin")

// Estados para múltiples métodos de pago
  const [metodosPago, setMetodosPago] = useState<Array<{ id: string; tipo: string; monto: number }>>([])
  const [nuevoMetodoPago, setNuevoMetodoPago] = useState<string>("efectivo")
  const [nuevoMontoPago, setNuevoMontoPago] = useState<string>("")

// Agregar estos estados después de los estados existentes para múltiples métodos de pago (cerca de la línea 120)
  const [metodosPagoPreforma, setMetodosPagoPreforma] = useState<Array<{ id: string; tipo: string; monto: number }>>([])
  const [nuevoMetodoPagoPreforma, setNuevoMetodoPagoPreforma] = useState<string>("efectivo")
  const [nuevoMontoPagoPreforma, setNuevoMontoPagoPreforma] = useState<string>("")

// Estados para el modal de agregar producto
  const [showAgregarProductoDialog, setShowAgregarProductoDialog] = useState(false)
  const [selectedProductoParaAgregar, setSelectedProductoParaAgregar] = useState<any>(null)
  const [modoModal, setModoModal] = useState<"agregar" | "ver">("agregar")
  const [cantidadAAgregar, setCantidadAAgregar] = useState<string>("1")
  const [descuentoProductoModal, setDescuentoProductoModal] = useState<{
    tipo: "porcentaje" | "monto"
    valor: string
  }>({ tipo: "porcentaje", valor: "" })

// Añadir estos estados después de los estados existentes (cerca de la línea 100)
  const [showAlertaMayorista, setShowAlertaMayorista] = useState(false)
  const [alertaMayoristaInfo, setAlertaMayoristaInfo] = useState({ faltante: 0, ahorroTotal: 0 })
  const [tipoPrecioActual, setTipoPrecioActual] = useState<"minorista" | "mayorista" | "cuenta_corriente">("minorista")
  const [umbralMayorista, setUmbralMayorista] = useState(100000)
  const [precioManualmenteSeleccionado, setPrecioManualmenteSeleccionado] = useState(false)

const [validacionStep, setValidacionStep] = useState<"validacion" | "accion">("validacion")
  const [productosValidados, setProductosValidados] = useState<{ [key: string]: number }>({})
  const [codigoBarraInput, setCodigoBarraInput] = useState("")
  const [cantidadValidacion, setCantidadValidacion] = useState("1")

// Verificar si se debe mostrar la pestaña de nueva venta
  useEffect(() => {
    const nueva = searchParams.get("nueva")
    if (nueva === "true") {
      setActiveTab("nueva")
    }
  }, [searchParams])

// Agregar este useEffect después de los otros useEffect existentes
  useEffect(() => {
    if (ventaActual && showCobroDialog) {
      setTipoComprobante(ventaActual.tipoComprobante || "recibo")
      // Limpiar métodos de pago al abrir el diálogo
      // if (ventaActual.metodosPagoPreforma && ventaActual.metodosPagoPreforma.length > 0) {
      //   setMetodosPago(ventaActual.metodosPagoPreforma)
      // } else {
      //   setMetodosPago([])
      // }
      setMetodosPago([])
      setNuevoMontoPago("")
    }
  }, [ventaActual, showCobroDialog])

// Añadir this useEffect after the useEffects
  useEffect(() => {
    if (ventaActual && showCobroDialog) {
      setTipoComprobante(ventaActual.tipoComprobante || "recibo")
      // Limpiar métodos de pago al abrir el diálogo
      if (ventaActual.metodosPagoPreforma && ventaActual.metodosPagoPreforma.length > 0) {
        setMetodosPago([...ventaActual.metodosPagoPreforma])
      } else {
        setMetodosPago([])
      }
      setNuevoMontoPago("")
    }
  }, [ventaActual, showCobroDialog])

// Agregar este useEffect después de los useEffect existentes (cerca de la línea 150)
  // Verificar alerta mayorista y actualizar tipo de precio cuando cambia el carrito
  useEffect(() => {
    verificarAlertaMayorista()

if (!precioManualmenteSeleccionado) {
      // Actualizar tipo de precio automáticamente
      if (aplicaPrecioMayorista()) {
        setTipoPrecioActual("mayorista")
      } else {
        setTipoPrecioActual("minorista")
      }
    }
  }, [carrito, valorDescuento, tipoDescuento, precioManualmenteSeleccionado])

// Filtrar clientes basados en la búsqueda
  const filteredClientes = clientes.filter(
    (cliente) =>
      cliente.nombre.toLowerCase().includes(clienteSearch.toLowerCase()) ||
      cliente.apellido.toLowerCase().includes(clienteSearch.toLowerCase()) ||
      cliente.dni.includes(clienteSearch),
  )

// Añadir estas funciones después de la función eliminarDelCarrito (cerca de la línea 230)
  // Función para determinar si aplica precio mayorista
  const aplicaPrecioMayorista = () => {
    const totalFacturacion = calcularTotalConDescuento()
    return totalFacturacion >= umbralMayorista
  }

const obtenerPrecioProducto = (producto: any) => {
    if (tipoPrecioActual === "mayorista" && producto.precioMayorista) {
      return producto.precioMayorista
    } else if (tipoPrecioActual === "cuenta_corriente" && producto.precioCuentaCorriente) {
      return producto.precioCuentaCorriente
    } else {
      return producto.precioMinorista || producto.precio
    }
  }

// Función para verificar alerta mayorista
  const verificarAlertaMayorista = () => {
    const totalActual = calcularTotalConDescuento()

if (totalActual < umbralMayorista && totalActual > umbralMayorista * 0.7) {
      // Alerta cuando está al 70% del umbral
      const faltante = umbralMayorista - totalActual

// Calcular ahorro potencial
      const ahorroTotal = carrito.reduce((ahorro, item) => {
        const precioMinorista = item.precioMinorista || item.precio
        const precioMayorista =
          item.precioMayorista || (item.precioMinorista ? item.precioMinorista * 0.85 : item.precio * 0.85)
        const diferencia = (precioMinorista - precioMayorista) * item.cantidad
        return ahorro + diferencia
      }, 0)

setAlertaMayoristaInfo({ faltante, ahorroTotal })
      setShowAlertaMayorista(true)
    } else {
      setShowAlertaMayorista(false)
    }
  }

// Modificar la función agregarAlCarrito para usar el precio correcto (cerca de la línea 180)
  // Reemplazar la función completa
  // Abrir modal para agregar producto
  const abrirModalAgregarProducto = (producto: any) => {
    setSelectedProductoParaAgregar(producto)
    setCantidadAAgregar("1")
    setDescuentoProductoModal({ tipo: "porcentaje", valor: "" })
    setModoModal("agregar")
    setShowAgregarProductoDialog(true)
  }

// Función para ver producto del carrito
  const verProductoDelCarrito = (item: CarritoItem) => {
    const productoCompleto = productos.find((p) => p.id === item.id)
    if (productoCompleto) {
      setSelectedProductoParaAgregar({
        ...productoCompleto,
        cantidadEnCarrito: item.cantidad,
        descuentoAplicado: item.descuento,
      })
      setCantidadAAgregar(item.cantidad.toString())
      setDescuentoProductoModal({
        tipo: item.descuento?.tipo || "porcentaje",
        valor: item.descuento?.valor?.toString() || "",
      })
      setModoModal("ver")
      setShowAgregarProductoDialog(true)
    }
  }

// Confirmar y agregar producto al carrito desde el modal
  const confirmarAgregarProducto = () => {
    if (!selectedProductoParaAgregar) return

const cantidad = Number.parseInt(cantidadAAgregar)
    if (isNaN(cantidad) || cantidad <= 0) {
      toast({
        title: "Error",
        description: "Ingrese una cantidad válida",
        variant: "destructive",
      })
      return
    }

if (cantidad > selectedProductoParaAgregar.stock) {
      toast({
        title: "Error",
        description: "No hay suficiente stock disponible",
        variant: "destructive",
      })
      return
    }

const existeEnCarrito = carrito.find((item) => item.id === selectedProductoParaAgregar.id)
    const precioAplicado = obtenerPrecioProducto(selectedProductoParaAgregar)

// Preparar descuento si se especificó
    let descuento = undefined
    if (descuentoProductoModal.valor && Number.parseFloat(descuentoProductoModal.valor) > 0) {
      descuento = {
        tipo: descuentoProductoModal.tipo,
        valor:
          descuentoProductoModal.tipo === "porcentaje"
            ? Math.min(Number.parseFloat(descuentoProductoModal.valor), 100)
            : Number.parseFloat(descuentoProductoModal.valor),
      }
    }

if (existeEnCarrito) {
      setCarrito(
        carrito.map((item) =>
          item.id === selectedProductoParaAgregar.id
            ? {
                ...item,
                cantidad: item.cantidad + cantidad,
                descuento: descuento || item.descuento,
              }
            : item,
        ),
      )
    } else {
      setCarrito([
        ...carrito,
        {
          ...selectedProductoParaAgregar,
          cantidad: cantidad,
          precio: precioAplicado,
          precioMinorista: selectedProductoParaAgregar.precioMinorista || selectedProductoParaAgregar.precio,
          precioMayorista:
            selectedProductoParaAgregar.precioMayorista || selectedProductoParaAgregar.precioMinorista * 0.85,
          precioCuentaCorriente:
            selectedProductoParaAgregar.precioCuentaCorriente || selectedProductoParaAgregar.precioMinorista * 0.8,
          descuento: descuento,
        },
      ])
    }

setShowAgregarProductoDialog(false)
    toast({
      title: "Producto agregado",
      description: `Se agregaron ${cantidad} unidades de ${selectedProductoParaAgregar.nombre}`,
    })
  }

// Cambiar cantidad de un producto en el carrito
  const cambiarCantidad = (id: number, cambio: number) => {
    setCarrito(
      carrito.map((item) => {
        if (item.id === id) {
          const nuevaCantidad = item.cantidad + cambio
          return nuevaCantidad > 0 ? { ...item, cantidad: nuevaCantidad } : item
        }
        return item
      }),
    )
  }

// Eliminar producto del carrito
  const eliminarDelCarrito = (id: number) => {
    setCarrito(carrito.filter((item) => item.id !== id))
  }

// Seleccionar cliente
  const seleccionarCliente = (cliente: any) => {
    setSelectedCliente(cliente)
    setShowClienteDialog(false)
  }

// Calcular precio con descuento para un producto individual
  const calcularPrecioConDescuentoProducto = (item: CarritoItem) => {
    if (!item.descuento) return item.precio

if (item.descuento.tipo === "porcentaje") {
      return item.precio * (1 - item.descuento.valor / 100)
    } else {
      return Math.max(0, item.precio - item.descuento.valor)
    }
  }

// Calcular subtotal para un producto (precio con descuento * cantidad)
  const calcularSubtotalProducto = (item: CarritoItem) => {
    const precioConDescuento = calcularPrecioConDescuentoProducto(item)
    return precioConDescuento * item.cantidad
  }

// Calcular total de descuentos por producto
  const calcularTotalDescuentosProductos = () => {
    return carrito.reduce((total, item) => {
      if (!item.descuento) return total
      const descuento = item.precio * item.cantidad - calcularSubtotalProducto(item)
      return total + descuento
    }, 0)
  }

// Calcular subtotal (suma de todos los productos con sus descuentos individuales)
  const calcularSubtotal = () => {
    return carrito.reduce((total, item) => total + calcularSubtotalProducto(item), 0)
  }

// Calcular descuento general
  const calcularDescuentoGeneral = () => {
    const subtotal = calcularSubtotal()
    if (!valorDescuento || Number.parseFloat(valorDescuento) <= 0) return 0

if (tipoDescuento === "porcentaje") {
      const porcentaje = Math.min(Number.parseFloat(valorDescuento), 100) // Limitar a 100%
      return (subtotal * porcentaje) / 100
    } else {
      // Para descuento de monto fijo, no puede ser mayor que el subtotal
      return Math.min(Number.parseFloat(valorDescuento), subtotal)
    }
  }

// Calcular total con descuento
  const calcularTotalConDescuento = () => {
    return calcularSubtotal() - calcularDescuentoGeneral()
  }

// Abrir diálogo de descuento por producto
  const abrirDescuentoProducto = (id: number) => {
    const producto = carrito.find((item) => item.id === id)
    if (producto) {
      setSelectedProductoId(id)
      if (producto.descuento) {
        setDescuentoProductoTipo(producto.descuento.tipo)
        setDescuentoProductoValor(producto.descuento.valor.toString())
      } else {
        setDescuentoProductoTipo("porcentaje")
        setDescuentoProductoValor("")
      }
      setShowDescuentoProductoDialog(true)
    }
  }

// Aplicar descuento a un producto
  const aplicarDescuentoProducto = () => {
    if (!selectedProductoId) return

const valor = Number.parseFloat(descuentoProductoValor)
    if (isNaN(valor) || valor <= 0) {
      // Si el valor es inválido o cero, eliminar el descuento
      setCarrito(carrito.map((item) => (item.id === selectedProductoId ? { ...item, descuento: undefined } : item)))
    } else {
      // Aplicar el descuento
      setCarrito(
        carrito.map((item) =>
          item.id === selectedProductoId
            ? {
                ...item,
                descuento: {
                  tipo: descuentoProductoTipo,
                  valor: descuentoProductoTipo === "porcentaje" ? Math.min(valor, 100) : valor,
                },
              }
            : item,
        ),
      )
    }

setShowDescuentoProductoDialog(false)
    toast({
      title: "Descuento aplicado",
      description: "El descuento ha sido aplicado al producto",
    })
  }

// Eliminar descuento de un producto
  const eliminarDescuentoProducto = () => {
    if (!selectedProductoId) return

setCarrito(carrito.map((item) => (item.id === selectedProductoId ? { ...item, descuento: undefined } : item)))

setShowDescuentoProductoDialog(false)
    toast({
      title: "Descuento eliminado",
      description: "El descuento ha sido eliminado del producto",
    })
  }

// Añadir esta función para validar la contraseña del vendedor
  const validarPasswordVendedor = () => {
    if (selectedVendedor && vendedorPassword === selectedVendedor.password) {
      setVendedorActual(selectedVendedor)
      setVendedorPassword("")
      setVendedorPasswordError("")
      setShowPasswordDialog(false)
      toast({
        title: "Vendedor cambiado",
        description: `Ahora ${selectedVendedor.nombre} es el vendedor de esta venta`,
      })
    } else {
      setVendedorPasswordError("Contraseña incorrecta")
    }
  }

// Añadir esta función para seleccionar un vendedor
  const seleccionarVendedor = (vendedor: any) => {
    setSelectedVendedor(vendedor)
    setShowVendedorDialog(false)
    setShowPasswordDialog(true)
  }

// Generar código único para retiro
  const generarCodigoRetiro = () => {
    return Math.random().toString(36).substring(2, 10).toUpperCase()
  }

// Crear preforma (primera etapa)
  const crearPreforma = () => {
    // Generar código de venta
    const codigoVenta = `VTA-${String(ventas.length + 1).padStart(3, "0")}`
    // Generar código de retiro
    const codigoRetiroGenerado = generarCodigoRetiro()
    setCodigoRetiro(codigoRetiroGenerado)

// Crear nueva venta en estado preforma
    const nuevaVenta = {
      id: ventas.length + 1,
      codigo: codigoVenta,
      fecha: new Date().toISOString().split("T")[0],
      hora: new Date().toTimeString().split(" ")[0].substring(0, 5),
      cliente: `${selectedCliente.nombre} ${selectedCliente.apellido}`,
      clienteId: selectedCliente.id,
      productos: carrito.map((item) => ({
        id: item.id,
        codigo: item.codigo,
        nombre: item.nombre,
        precio: item.precio,
        cantidad: item.cantidad,
        descuento: item.descuento,
        subtotal: calcularSubtotalProducto(item),
      })),
      subtotal: calcularSubtotal(),
      descuentoProductos: calcularTotalDescuentosProductos(),
      descuentoGeneral: calcularDescuentoGeneral(),
      total: calcularTotalConDescuento(),
      sucursal: sucursales.find((s) => s.id.toString() === sucursal)?.nombre || "",
      sucursalId: sucursal,
      vendedor: vendedorActual.nombre,
      estado: "preforma" as EstadoVenta,
      tipoComprobante: tipoComprobante,
      entrega: {
        tipo: tipoEntrega,
        fecha: tipoEntrega === "programada" ? fechaEntrega : new Date().toISOString().split("T")[0],
        hora: tipoEntrega === "programada" ? horaEntrega : new Date().toTimeString().split(" ")[0].substring(0, 5),
        notas: notasEntrega,
      },
      codigoRetiro: codigoRetiroGenerado,
      cajero: null,
      despachante: null,
      retiradoPor: null,
      fechaCobro: null,
      fechaEntrega: null,
      metodosPagoPreforma: metodosPagoPreforma,
      productosDetalle: carrito.map((item) => ({
        id: item.id,
        codigo: item.codigo,
        nombre: item.nombre,
        precio: item.precio, // This should be the price applied to the item
        cantidad: item.cantidad,
      })),
    }

// Agregar la venta a la lista
    setVentas([nuevaVenta, ...ventas])
    setVentasFiltradas([nuevaVenta, ...ventas])
    setVentaActual(nuevaVenta)

// Mostrar diálogo de éxito y código QR
    setShowSuccessDialog(true)
  }

// Agregar estas funciones después de las funciones existentes de métodos de pago (cerca de la línea 400)

// Calcular total pagado con múltiples métodos en preforma
  const calcularTotalPagadoPreforma = () => {
    return metodosPagoPreforma.reduce((total, metodo) => total + metodo.monto, 0)
  }

// Calcular saldo restante en preforma
  const calcularSaldoRestantePreforma = () => {
    return calcularTotalConDescuento() - calcularTotalPagadoPreforma()
  }

// Agregar método de pago en preforma
  const agregarMetodoPagoPreforma = () => {
    const monto = Number.parseFloat(nuevoMontoPagoPreforma)
    if (isNaN(monto) || monto <= 0) {
      toast({
        title: "Error",
        description: "Ingrese un monto válido",
        variant: "destructive",
      })
      return
    }

const saldoRestante = calcularSaldoRestantePreforma()
    if (monto > saldoRestante) {
      toast({
        title: "Error",
        description: "El monto no puede ser mayor al saldo restante",
        variant: "destructive",
      })
      return
    }

const nuevoMetodo = {
      id: Math.random().toString(36).substring(7),
      tipo: nuevoMetodoPagoPreforma,
      monto: monto,
    }

setMetodosPagoPreforma([...metodosPagoPreforma, nuevoMetodo])
    setNuevoMontoPagoPreforma("")

toast({
      title: "Método agregado",
      description: `Se agregó ${nuevoMetodoPagoPreforma} por $${monto.toLocaleString()}`,
    })
  }

// Eliminar método de pago en preforma
  const eliminarMetodoPagoPreforma = (id: string) => {
    setMetodosPagoPreforma(metodosPagoPreforma.filter((metodo) => metodo.id !== id))
  }

// Calcular total pagado con múltiples métodos
  const calcularTotalPagado = () => {
    return metodosPago.reduce((total, metodo) => total + metodo.monto, 0)
  }

// Calcular saldo restante
  const calcularSaldoRestante = () => {
    return (ventaActual?.total || 0) - calcularTotalPagado()
  }

// Agregar método de pago
  const agregarMetodoPago = () => {
    const monto = Number.parseFloat(nuevoMontoPago)
    if (isNaN(monto) || monto <= 0) {
      toast({
        title: "Error",
        description: "Ingrese un monto válido",
        variant: "destructive",
      })
      return
    }

const saldoRestante = calcularSaldoRestante()
    if (monto > saldoRestante) {
      toast({
        title: "Error",
        description: "El monto no puede ser mayor al saldo restante",
        variant: "destructive",
      })
      return
    }

const nuevoMetodo = {
      id: Math.random().toString(36).substring(7),
      tipo: nuevoMetodoPago,
      monto: monto,
    }

setMetodosPago([...metodosPago, nuevoMetodo])
    setNuevoMontoPago("")

toast({
      title: "Método agregado",
      description: `Se agregó ${nuevoMetodoPago} por $${monto.toLocaleString()}`,
    })
  }

// Eliminar método de pago
  const eliminarMetodoPago = (id: string) => {
    setMetodosPago(metodosPago.filter((metodo) => metodo.id !== id))
  }

// Obtener nombre del método de pago
  const getNombreMetodoPago = (tipo: string) => {
    switch (tipo) {
      case "efectivo":
        return "Efectivo"
      case "tarjeta":
        return "Tarjeta"
      case "transferencia":
        return "Transferencia"
      case "cheque":
        return "Cheque"
      case "credito":
        return "Cuenta Corriente"
      default:
        return tipo
    }
  }

// Procesar cobro (segunda etapa) - REEMPLAZAR la función existente
  const procesarCobro = () => {
    if (!ventaActual) return

// Validar que el total pagado sea igual al total de la venta
    const totalPagado = calcularTotalPagado()
    if (totalPagado !== ventaActual.total) {
      toast({
        title: "Error en el pago",
        description: `El total pagado ($${totalPagado.toLocaleString()}) debe ser igual al total de la venta ($${ventaActual.total.toLocaleString()})`,
        variant: "destructive",
      })
      return
    }

// Actualizar estado de la venta a cobrada
    const ventaActualizada = {
      ...ventaActual,
      estado: "cobrada" as EstadoVenta,
      cajero: vendedorActual.nombre,
      fechaCobro: new Date().toISOString().split("T")[0],
      metodosPago: metodosPago, // Guardar múltiples métodos
      tipoComprobante: tipoComprobante,
    }

// Actualizar la venta en la lista
    setVentas(ventas.map((venta) => (venta.id === ventaActualizada.id ? ventaActualizada : venta)))
    setVentasFiltradas(ventasFiltradas.map((venta) => (venta.id === ventaActualizada.id ? ventaActualizada : venta)))
    setVentaActual(ventaActualizada)

// Limpiar métodos de pago
    setMetodosPago([])
    setNuevoMontoPago("")

setValidacionStep("validacion")
    setProductosValidados({})

// Cerrar diálogo de cobro
    setShowCobroDialog(false)

// Mostrar mensaje de éxito
    toast({
      title: "Cobro procesado",
      description: `La venta ${ventaActualizada.codigo} ha sido cobrada correctamente`,
    })

// Mostrar diálogo de código QR para retiro
    setShowQrDialog(true)
  }

// Procesar retiro (tercera etapa)
  const procesarRetiro = () => {
    if (!ventaActual) return

// Verificar código de retiro
    if (codigoRetiroInput !== ventaActual.codigoRetiro) {
      toast({
        title: "Código inválido",
        description: "El código de retiro no es válido",
        variant: "destructive",
      })
      return
    }

// Determinar quién retira
    const nombreRetiro = esClienteQuienRetira ? ventaActual.cliente : retiradoPor

// Actualizar estado de la venta a entregada
    const ventaActualizada = {
      ...ventaActual,
      estado: "entregada" as EstadoVenta,
      despachante: vendedorActual.nombre,
      retiradoPor: nombreRetiro,
      fechaEntrega: new Date().toISOString().split("T")[0],
    }

setValidacionStep("validacion")
    setProductosValidados({})

// Cerrar diálogo de retiro
    setShowRetiroDialog(false)

// Mostrar mensaje de éxito
    toast({
      title: "Retiro procesado",
      description: `La venta ${ventaActualizada.codigo} ha sido entregada a ${nombreRetiro}`,
    })

// Limpiar datos
    setCodigoRetiroInput("")
    setRetiradoPor("")
    setEsClienteQuienRetira(true)
  }

const validarProductoPorCodigo = () => {
    if (!ventaActual || !codigoBarraInput) return

// Find product in the sale by barcode
    const productoEnVenta = ventaActual.productosDetalle?.find(
      (p: any) => p.codigo.toLowerCase() === codigoBarraInput.toLowerCase(),
    )

if (!productoEnVenta) {
      toast({
        title: "Producto no encontrado",
        description: "El código ingresado no corresponde a ningún producto de esta venta",
        variant: "destructive",
      })
      return
    }

const cantidad = Number.parseInt(cantidadValidacion)
    if (isNaN(cantidad) || cantidad <= 0) {
      toast({
        title: "Cantidad inválida",
        description: "Ingrese una cantidad válida",
        variant: "destructive",
      })
      return
    }

const cantidadActual = productosValidados[productoEnVenta.codigo] || 0
    const nuevaCantidad = cantidadActual + cantidad

if (nuevaCantidad > productoEnVenta.cantidad) {
      toast({
        title: "Cantidad excedida",
        description: `Solo hay ${productoEnVenta.cantidad} unidades de este producto en la venta`,
        variant: "destructive",
      })
      return
    }

setProductosValidados({
      ...productosValidados,
      [productoEnVenta.codigo]: nuevaCantidad,
    })

setCodigoBarraInput("")
    setCantidadValidacion("1")

toast({
      title: "Producto validado",
      description: `${cantidad} unidad(es) de ${productoEnVenta.nombre} validada(s)`,
    })
  }

const todosProductosValidados = () => {
    if (!ventaActual?.productosDetalle) return false

return ventaActual.productosDetalle.every((producto: any) => {
      const validado = productosValidados[producto.codigo] || 0
      return validado === producto.cantidad
    })
  }

// Abrir diálogo de cobro
  const abrirDialogoCobro = (venta: any) => {
    setVentaActual(venta)
    setValidacionStep("validacion")
    setProductosValidados({})
    setCodigoBarraInput("")
    setCantidadValidacion("1")
    setShowCobroDialog(true)
  }

// Abrir diálogo de retiro
  const abrirDialogoRetiro = (venta: any) => {
    setVentaActual(venta)
    setValidacionStep("validacion")
    setProductosValidados({})
    setCodigoBarraInput("")
    setCantidadValidacion("1")
    setShowRetiroDialog(true)
  }

// Mostrar código QR
  const mostrarCodigoQR = (venta: any) => {
    setVentaActual(venta)
    setCodigoRetiro(venta.codigoRetiro)
    setShowQrDialog(true)
  }

// Reiniciar venta
  const nuevaVenta = () => {
    setCarrito([])
    setSelectedCliente(null)
    setSucursal("")
    setTipoComprobante("recibo")
    setMetodoPago("efectivo")
    setTipoDescuento("porcentaje")
    setValorDescuento("")
    setShowSuccessDialog(false)
    setVendedorActual(usuarios[0]) // Resetear al vendedor por defecto
    setTipoEntrega("inmediata")
    setFechaEntrega("")
    setHoraEntrega("")
    setNotasEntrega("")
    setVentaActual(null)
    setCodigoRetiro("")
    setMetodosPagoPreforma([])
    setNuevoMontoPagoPreforma("")
    // Reset price type selection
    setTipoPrecioActual("minorista")
    setPrecioManualmenteSeleccionado(false)
    setValidacionStep("validacion")
    setProductosValidados({})
    setCodigoBarraInput("")
    setCantidadValidacion("1")
  }

// Manejar cambios en el formulario de nuevo cliente
  const handleNewClienteFormChange = (field: string, value: string) => {
    setNewClienteForm({
      ...newClienteForm,
      [field]: value,
    })
  }

// Guardar nuevo cliente
  const saveNewCliente = () => {
    // Validar campos obligatorios
    if (!newClienteForm.dni || !newClienteForm.nombre || !newClienteForm.apellido) {
      toast({
        title: "Error",
        description: "Por favor complete los campos obligatorios",
        variant: "destructive",
      })
      return
    }

// Crear nuevo cliente
    const nuevoCliente = {
      id: clientes.length + 1,
      dni: newClienteForm.dni,
      nombre: newClienteForm.nombre,
      apellido: newClienteForm.apellido,
      direccion: newClienteForm.direccion,
    }

// Seleccionar el nuevo cliente
    setSelectedCliente(nuevoCliente)

toast({
      title: "Cliente creado",
      description: "El cliente ha sido creado y seleccionado",
    })

// Cerrar diálogos
    setShowNewClienteDialog(false)
    setShowClienteDialog(false)

// Resetear formulario
    setNewClienteForm({
      dni: "",
      nombre: "",
      apellido: "",
      direccion: "",
      telefono: "",
      email: "",
    })
  }

// Actualizar la función de aplicar filtros para incluir código
  const aplicarFiltros = () => {
    let ventasFiltradas = [...ventas]

// Filtrar por fecha desde
    if (filtros.fechaDesde) {
      ventasFiltradas = ventasFiltradas.filter((venta) => venta.fecha >= filtros.fechaDesde)
    }

// Filtrar por fecha hasta
    if (filtros.fechaHasta) {
      ventasFiltradas = ventasFiltradas.filter((venta) => venta.fecha <= filtros.fechaHasta)
    }

// Filtrar por cliente
    if (filtros.cliente) {
      ventasFiltradas = ventasFiltradas.filter((venta) =>
        venta.cliente.toLowerCase().includes(filtros.cliente.toLowerCase()),
      )
    }

// Filtrar por sucursal
    if (filtros.sucursal) {
      ventasFiltradas = ventasFiltradas.filter(
        (venta) => venta.sucursal === sucursales.find((s) => s.id.toString() === filtros.sucursal)?.nombre,
      )
    }

// Filtrar por producto
    if (filtros.producto) {
      ventasFiltradas = ventasFiltradas.filter((venta) =>
        venta.productos.some((producto: any) =>
          typeof producto === "string"
            ? producto.toLowerCase().includes(filtros.producto.toLowerCase())
            : producto.nombre.toLowerCase().includes(filtros.producto.toLowerCase()),
        ),
      )
    }

// Filtrar por código
    if (filtros.codigo) {
      ventasFiltradas = ventasFiltradas.filter((venta) =>
        venta.codigo.toLowerCase().includes(filtros.codigo.toLowerCase()),
      )
    }

// Filtrar por estado
    if (filtros.estado && filtros.estado !== "todos") {
      ventasFiltradas = ventasFiltradas.filter((venta) => venta.estado === filtros.estado)
    }

setVentasFiltradas(ventasFiltradas)

toast({
      title: "Filtros aplicados",
      description: `Se encontraron ${ventasFiltradas.length} ventas`,
    })
  }

// Actualizar la función de resetear filtros
  const resetearFiltros = () => {
    setFiltros({
      fechaDesde: "",
      fechaHasta: "",
      cliente: "",
      sucursal: "",
      producto: "",
      codigo: "",
      estado: "",
    })
    setVentasFiltradas(ventas)
  }

// Ver detalle de venta
  const verDetalleVenta = (venta: any) => {
    setSelectedVenta(venta)
    setShowDetalleVentaDialog(true)
  }

// Exportar a Excel
  const exportarExcel = () => {
    // En un entorno real, aquí se generaría un archivo Excel
    // Para este ejemplo, simplemente mostraremos un mensaje de éxito
    toast({
      title: "Exportación exitosa",
      description: "Los datos han sido exportados a Excel correctamente",
    })
  }

// Función para refrescar los datos (simulación)
  const refreshData = () => {
    // Simular la recarga de datos (aquí iría la llamada a la API)
    toast({
      title: "Datos actualizados",
      description: "Los datos de ventas se han actualizado",
    })
    // En un entorno real, aquí se actualizaría el estado 'ventas' con los nuevos datos
  }

// Función para imprimir preforma
  const imprimirPreforma = () => {
    toast({
      title: "Imprimiendo preforma",
      description: `La preforma ${ventaActual?.codigo} se está imprimiendo`,
    })
  }

// Función para imprimir comprobante
  const imprimirComprobante = () => {
    toast({
      title: "Imprimiendo comprobante",
      description: `El comprobante ${ventaActual?.codigo} se está imprimiendo`,
    })
  }

// Función para cambiar el rol actual (simulación)
  const cambiarRol = (rol: "vendedor" | "cajero" | "despachante" | "admin") => {
    setRolActual(rol)
    toast({
      title: "Rol cambiado",
      description: `Ahora estás operando como ${rol}`,
    })
  }

// Función para obtener el color de la badge según el estado
  const getEstadoColor = (estado: EstadoVenta) => {
    switch (estado) {
      case "preforma":
        return "bg-blue-100 text-blue-800"
      case "cobrada":
        return "bg-yellow-100 text-yellow-800"
      case "entregada":
        return "bg-green-100 text-green-800"
      case "cancelada":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

// Función para obtener el texto del estado
  const getEstadoTexto = (estado: EstadoVenta) => {
    switch (estado) {
      case "preforma":
        return "Preforma"
      case "cobrada":
        return "Cobrada"
      case "entregada":
        return "Entregada"
      case "cancelada":
        return "Cancelada"
      default:
        return estado
    }
  }

const cambiarTipoPrecio = (nuevoTipo: "minorista" | "mayorista" | "cuenta_corriente") => {
    setTipoPrecioActual(nuevoTipo)
    setPrecioManualmenteSeleccionado(true)

// Update prices of all products in cart
    setCarrito(
      carrito.map((item) => {
        let nuevoPrecio = item.precioMinorista || item.precio

if (nuevoTipo === "mayorista" && item.precioMayorista) {
          nuevoPrecio = item.precioMayorista
        } else if (nuevoTipo === "cuenta_corriente" && item.precioCuentaCorriente) {
          nuevoPrecio = item.precioCuentaCorriente
        }

return {
          ...item,
          precio: nuevoPrecio,
        }
      }),
    )

toast({
      title: "Tipo de precio actualizado",
      description: `Los precios se actualizaron a ${nuevoTipo === "minorista" ? "Minorista" : nuevoTipo === "mayorista" ? "Mayorista" : "Cuenta Corriente"}`,
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Ventas</h1>
          <p className="text-muted-foreground">Realice ventas de forma rápida y eficiente</p>
        </div>

{/* Selector de rol (simulación) */}
        <div className="flex items-center gap-2">
          <Label>Rol actual:</Label>
          <Select value={rolActual} onValueChange={(value: any) => cambiarRol(value)}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Seleccione rol" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="admin">Administrador</SelectItem>
              <SelectItem value="vendedor">Vendedor</SelectItem>
              <SelectItem value="cajero">Cajero</SelectItem>
              <SelectItem value="despachante">Despachante</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="listado">Listado de Ventas</TabsTrigger>
          <TabsTrigger value="nueva" disabled={rolActual !== "vendedor" && rolActual !== "admin"}>
            Nueva Venta (Preforma)
          </TabsTrigger>
          <TabsTrigger value="pendientes">
            {rolActual === "cajero"
              ? "Pendientes de Cobro"
              : rolActual === "despachante"
                ? "Pendientes de Entrega"
                : "Pendientes"}
          </TabsTrigger>
        </TabsList>

<TabsContent value="listado" className="space-y-4 pt-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle className="text-lg flex items-center">
                  <FileText className="mr-2 h-5 w-5" />
                  Ventas realizadas
                </CardTitle>
                <CardDescription>Consulte y filtre las ventas realizadas</CardDescription>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="outline" onClick={exportarExcel}>
                  <Download className="mr-2 h-4 w-4" />
                  Exportar a Excel
                </Button>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger>
                      <Button variant="ghost" size="icon" onClick={refreshData}>
                        <RefreshCw className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Añadir campo de búsqueda por código en los filtros */}
              <div className="grid grid-cols-1 md:grid-cols-7 gap-4">
                <div className="space-y-2">
                  <Label>Código</Label>
                  <Input
                    placeholder="Código de venta..."
                    value={filtros.codigo}
                    onChange={(e) => setFiltros({ ...filtros, codigo: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Fecha desde</Label>
                  <div className="relative">
                    <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      type="date"
                      className="pl-8"
                      value={filtros.fechaDesde}
                      onChange={(e) => setFiltros({ ...filtros, fechaDesde: e.target.value })}
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Fecha hasta</Label>
                  <div className="relative">
                    <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      type="date"
                      className="pl-8"
                      value={filtros.fechaHasta}
                      onChange={(e) => setFiltros({ ...filtros, fechaHasta: e.target.value })}
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Cliente</Label>
                  <Input
                    placeholder="Buscar cliente..."
                    value={filtros.cliente}
                    onChange={(e) => setFiltros({ ...filtros, cliente: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Sucursal</Label>
                  <Select
                    value={filtros.sucursal}
                    onValueChange={(value) => setFiltros({ ...filtros, sucursal: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Todas" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todas</SelectItem>
                      {sucursales.map((sucursal) => (
                        <SelectItem key={sucursal.id} value={sucursal.id.toString()}>
                          {sucursal.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Producto</Label>
                  <Input
                    placeholder="Buscar producto..."
                    value={filtros.producto}
                    onChange={(e) => setFiltros({ ...filtros, producto: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Estado</Label>
                  <Select value={filtros.estado} onValueChange={(value) => setFiltros({ ...filtros, estado: value })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Todos" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="todos">Todos</SelectItem>
                      <SelectItem value="preforma">Preforma</SelectItem>
                      <SelectItem value="cobrada">Cobrada</SelectItem>
                      <SelectItem value="entregada">Entregada</SelectItem>
                      <SelectItem value="cancelada">Cancelada</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="flex justify-end gap-2">
                <Button variant="outline" onClick={resetearFiltros}>
                  Resetear filtros
                </Button>
                <Button className="bg-yellow-500 hover:bg-yellow-600 text-black" onClick={aplicarFiltros}>
                  <Filter className="mr-2 h-4 w-4" />
                  Aplicar filtros
                </Button>
              </div>

<div className="rounded-md border">
                {/* Actualizar la tabla para mostrar el código de venta */}
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Código</TableHead>
                      <TableHead>
                        <div className="flex items-center">
                          Fecha
                          <ArrowUpDown className="ml-2 h-4 w-4" />
                        </div>
                      </TableHead>
                      <TableHead>Cliente</TableHead>
                      <TableHead>Productos</TableHead>
                      <TableHead>Sucursal</TableHead>
                      <TableHead>
                        <div className="flex items-center">
                          Total
                          <ArrowUpDown className="ml-2 h-4 w-4" />
                        </div>
                      </TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead className="text-right">Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {ventasFiltradas.map((venta) => (
                      <TableRow key={venta.id}>
                        <TableCell className="font-medium">{venta.codigo}</TableCell>
                        <TableCell>
                          <div className="font-medium">{new Date(venta.fecha).toLocaleDateString()}</div>
                          <div className="text-sm text-muted-foreground">{venta.hora}</div>
                        </TableCell>
                        <TableCell>{venta.cliente}</TableCell>
                        <TableCell>
                          <div className="max-w-[200px] truncate">
                            {Array.isArray(venta.productos) &&
                              venta.productos.length > 0 &&
                              (typeof venta.productos[0] === "string"
                                ? venta.productos.join(", ")
                                : venta.productos.map((p: any) => p.nombre).join(", "))}
                          </div>
                        </TableCell>
                        <TableCell>{venta.sucursal}</TableCell>
                        <TableCell className="font-medium">${venta.total.toLocaleString()}</TableCell>
                        <TableCell>
                          <Badge className={getEstadoColor(venta.estado)}>{getEstadoTexto(venta.estado)}</Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="sm" onClick={() => verDetalleVenta(venta)}>
                              Ver detalle
                            </Button>
                            {venta.estado === "preforma" && (rolActual === "cajero" || rolActual === "admin") && (
                              <Button
                                variant="outline"
                                size="sm"
                                className="text-yellow-600 bg-transparent"
                                onClick={() => abrirDialogoCobro(venta)}
                              >
                                Cobrar
                              </Button>
                            )}
                            {venta.estado === "cobrada" && (rolActual === "despachante" || rolActual === "admin") && (
                              <Button
                                variant="outline"
                                size="sm"
                                className="text-green-600 bg-transparent"
                                onClick={() => abrirDialogoRetiro(venta)}
                              >
                                Entregar
                              </Button>
                            )}
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="nueva" className="pt-4">
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {/* Panel de búsqueda de productos */}
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle className="text-lg flex items-center">
                  <ShoppingCart className="mr-2 h-5 w-5" />
                  Productos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      type="search"
                      placeholder="Buscar por nombre o código..."
                      className="pl-8"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>

{/* CHANGE: Added price type selector after Sucursal and before Productos seleccionados */}
                  <div className="space-y-2">
                    <Label>Tipo de precio aplicado</Label>
                    <Select value={tipoPrecioActual} onValueChange={(value: any) => cambiarTipoPrecio(value)}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="minorista">
                          <div className="flex items-center gap-2">
                            <Badge className="bg-blue-100 text-blue-800">Minorista</Badge>
                            <span className="text-sm text-muted-foreground">Precio estándar</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="mayorista">
                          <div className="flex items-center gap-2">
                            <Badge className="bg-green-100 text-green-800">Mayorista</Badge>
                            <span className="text-sm text-muted-foreground">Precio por volumen</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="cuenta_corriente">
                          <div className="flex items-center gap-2">
                            <Badge className="bg-purple-100 text-purple-800">Cuenta Corriente</Badge>
                            <span className="text-sm text-muted-foreground">Precio especial</span>
                          </div>
                        </SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Los precios de los productos se actualizarán según el tipo seleccionado
                    </p>
                  </div>

<div className="border rounded-md">
                    <div className="grid grid-cols-12 bg-muted px-4 py-2 text-sm font-medium">
                      <div className="col-span-2">Código</div>
                      <div className="col-span-5">Nombre</div>
                      <div className="col-span-2">Precio</div>
                      <div className="col-span-1">Stock</div>
                      <div className="col-span-2"></div>
                    </div>
                    <div className="divide-y max-h-[400px] overflow-y-auto">
                      {filteredProductos.map((producto) => (
                        <div key={producto.id} className="grid grid-cols-12 px-4 py-3 items-center">
                          <div className="col-span-2 text-sm">{producto.codigo}</div>
                          <div className="col-span-5">{producto.nombre}</div>
                          <div className="col-span-2">${producto.precio.toLocaleString()}</div>
                          <div className="col-span-1">{producto.stock}</div>
                          <div className="col-span-2 text-right">
                            <Button
                              size="sm"
                              onClick={() => abrirModalAgregarProducto(producto)}
                              disabled={producto.stock === 0}
                              className="bg-yellow-500 hover:bg-yellow-600 text-black"
                            >
                              Agregar
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Panel de carrito y cliente */}
            <Card className="lg:row-span-2">
              <CardHeader>
                <CardTitle className="text-lg">Detalle de preforma</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Selección de cliente */}
                <div className="space-y-2">
                  <Label>Cliente</Label>
                  <div className="flex gap-2">
                    <div className="flex-1 p-2 border rounded-md bg-muted">
                      {selectedCliente ? (
                        <div>
                          <div className="font-medium">{`${selectedCliente.apellido}, ${selectedCliente.nombre}`}</div>
                          <div className="text-sm text-muted-foreground">DNI: {selectedCliente.dni}</div>
                        </div>
                      ) : (
                        <div className="text-muted-foreground">Seleccione un cliente</div>
                      )}
                    </div>
                    <Dialog open={showClienteDialog} onOpenChange={setShowClienteDialog}>
                      <DialogTrigger asChild>
                        <Button variant="outline">Buscar</Button>
                      </DialogTrigger>
                      <DialogContent className="sm:max-w-md">
                        <DialogHeader>
                          <DialogTitle>Seleccionar cliente</DialogTitle>
                          <DialogDescription>Busque por nombre, apellido o DNI</DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4 py-4">
                          <div className="relative">
                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                            <Input
                              type="search"
                              placeholder="Buscar cliente..."
                              className="pl-8"
                              value={clienteSearch}
                              onChange={(e) => setClienteSearch(e.target.value)}
                            />
                          </div>
                          <div className="border rounded-md max-h-[200px] overflow-y-auto">
                            {filteredClientes.map((cliente) => (
                              <div
                                key={cliente.id}
                                className="p-2 hover:bg-muted cursor-pointer"
                                onClick={() => seleccionarCliente(cliente)}
                              >
                                <div className="font-medium">{`${cliente.apellido}, ${cliente.nombre}`}</div>
                                <div className="text-sm text-muted-foreground">DNI: {cliente.dni}</div>
                              </div>
                            ))}
                          </div>
                          <div className="flex justify-center">
                            <Button variant="outline" onClick={() => setShowNewClienteDialog(true)} className="w-full">
                              <Plus className="mr-2 h-4 w-4" />
                              Nuevo cliente
                            </Button>
                          </div>
                        </div>
                      </DialogContent>
                    </Dialog>
                  </div>
                </div>

{/* Selección de sucursal */}
                <div className="space-y-2">
                  <Label>Sucursal *</Label>
                  <Select value={sucursal} onValueChange={setSucursal}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar sucursal" />
                    </SelectTrigger>
                    <SelectContent>
                      {sucursales.map((suc) => (
                        <SelectItem key={suc.id} value={suc.id.toString()}>
                          {suc.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

{/* Carrito */}
                <div className="space-y-2">
                  <Label>Productos seleccionados</Label>
                  {carrito.length === 0 ? (
                    <div className="text-center p-4 border rounded-md bg-muted">
                      <p className="text-muted-foreground">No hay productos en el carrito</p>
                    </div>
                  ) : (
                    <div className="border rounded-md divide-y max-h-[250px] overflow-y-auto">
                      {carrito.map((item) => (
                        <div key={item.id} className="p-2">
                          <div className="flex items-center justify-between mb-1">
                            <div className="flex-1">
                              <div className="font-medium">{item.nombre}</div>
                              {/* Modificar la visualización de productos en el carrito para mostrar el tipo de precio */}
                              {/* Buscar la sección donde se muestra el precio en el carrito (cerca de la línea 600) */}
                              {/* Reemplazar: */}
                              {/* <div className="text-sm text-muted-foreground flex items-center">
                                {item.descuento ? (
                                  <>
                                    <span className="line-through mr-1">${item.precio.toLocaleString()}</span>
                                    <span className="text-green-600">
                                      ${calcularPrecioConDescuentoProducto(item).toLocaleString()}
                                    </span>
                                    <Badge className="ml-2 bg-green-100 text-green-800 text-xs">
                                      {item.descuento.tipo === "porcentaje"
                                        ? `-${item.descuento.valor}%`
                                        : `-$${item.descuento.valor}`}
                                    </Badge>
                                  </>
                                ) : (
                                  <span>${item.precio.toLocaleString()}</span>
                                )}
                                <span className="mx-1">x</span>
                                <span>{item.cantidad}</span>
                                <span className="mx-1">=</span>
                                <span>${calcularSubtotalProducto(item).toLocaleString()}</span>
                              </div> */}

{/* Con: */}
                              <div className="text-sm text-muted-foreground flex items-center">
                                {item.descuento ? (
                                  <>
                                    <span className="line-through mr-1">${item.precio.toLocaleString()}</span>
                                    <span className="text-green-600">
                                      ${calcularPrecioConDescuentoProducto(item).toLocaleString()}
                                    </span>
                                    <Badge className="ml-2 bg-green-100 text-green-800 text-xs">
                                      {item.descuento.tipo === "porcentaje"
                                        ? `-${item.descuento.valor}%`
                                        : `-$${item.descuento.valor}`}
                                    </Badge>
                                  </>
                                ) : (
                                  <>
                                    <span>${item.precio.toLocaleString()}</span>
                                    {tipoPrecioActual === "mayorista" && item.precioMayorista && (
                                      <Badge className="ml-2 bg-green-100 text-green-800 text-xs">Mayorista</Badge>
                                    )}
                                    {tipoPrecioActual === "cuenta_corriente" && item.precioCuentaCorriente && (
                                      <Badge className="ml-2 bg-purple-100 text-purple-800 text-xs">Cta. Cte.</Badge>
                                    )}
                                    {tipoPrecioActual === "minorista" && (
                                      <Badge className="ml-2 bg-blue-100 text-blue-800 text-xs">Minorista</Badge>
                                    )}
                                  </>
                                )}
                                <span className="mx-1">x</span>
                                <span>{item.cantidad}</span>
                                <span className="mx-1">=</span>
                                <span>${calcularSubtotalProducto(item).toLocaleString()}</span>
                              </div>
                            </div>
                            <div className="flex items-center gap-1">
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="outline"
                                      size="icon"
                                      className="h-6 w-6 bg-transparent"
                                      onClick={() => verProductoDelCarrito(item)}
                                    >
                                      <Eye className="h-3 w-3" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>Ver producto</TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="outline"
                                      size="icon"
                                      className="h-6 w-6 bg-transparent"
                                      onClick={() => abrirDescuentoProducto(item.id)}
                                    >
                                      <Tag className="h-3 w-3" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>Aplicar descuento</TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                              <Button
                                variant="outline"
                                size="icon"
                                className="h-6 w-6 bg-transparent"
                                onClick={() => cambiarCantidad(item.id, -1)}
                                disabled={item.cantidad <= 1}
                              >
                                <Minus className="h-3 w-3" />
                              </Button>
                              <span className="w-8 text-center">{item.cantidad}</span>
                              <Button
                                variant="outline"
                                size="icon"
                                className="h-6 w-6 bg-transparent"
                                onClick={() => cambiarCantidad(item.id, 1)}
                                disabled={item.cantidad >= item.stock}
                              >
                                <Plus className="h-3 w-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6 text-red-500"
                                onClick={() => eliminarDelCarrito(item.id)}
                              >
                                <Trash2 className="h-3 w-3" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

{/* Tipo de comprobante */}
                <div className="space-y-2">
                  <Label>Tipo de comprobante</Label>
                  <Select value={tipoComprobante} onValueChange={setTipoComprobante}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione tipo de comprobante" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="recibo">Recibo</SelectItem>
                      <SelectItem value="facturaA">Factura A</SelectItem>
                      <SelectItem value="facturaB">Factura B</SelectItem>
                      <SelectItem value="facturaC">Factura C</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

{/* Plazo de entrega */}
                <div className="space-y-2">
                  <Label>Plazo de entrega</Label>
                  <RadioGroup
                    value={tipoEntrega}
                    onValueChange={(value: "inmediata" | "programada") => setTipoEntrega(value)}
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="inmediata" id="inmediata" />
                      <Label htmlFor="inmediata" className="flex items-center">
                        <Truck className="h-4 w-4 mr-2" />
                        Entrega inmediata
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="programada" id="programada" />
                      <Label htmlFor="programada" className="flex items-center">
                        <Calendar className="h-4 w-4 mr-2" />
                        Entrega programada
                      </Label>
                    </div>
                  </RadioGroup>
                </div>

{/* Campos adicionales para entrega programada */}
                {tipoEntrega === "programada" && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="fechaEntrega">Fecha de entrega</Label>
                        <div className="relative">
                          <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                          <Input
                            id="fechaEntrega"
                            type="date"
                            className="pl-8"
                            value={fechaEntrega}
                            onChange={(e) => setFechaEntrega(e.target.value)}
                            min={new Date().toISOString().split("T")[0]}
                          />
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="horaEntrega">Hora de entrega</Label>
                        <div className="relative">
                          <Clock className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                          <Input
                            id="horaEntrega"
                            type="time"
                            className="pl-8"
                            value={horaEntrega}
                            onChange={(e) => setHoraEntrega(e.target.value)}
                          />
                        </div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="notasEntrega">Notas de entrega</Label>
                      <Input
                        id="notasEntrega"
                        placeholder="Dirección, instrucciones especiales, etc."
                        value={notasEntrega}
                        onChange={(e) => setNotasEntrega(e.target.value)}
                      />
                    </div>
                  </div>
                )}

{/* Selección de vendedor */}
                <div className="space-y-2">
                  <Label>Vendedor</Label>
                  <div className="flex gap-2">
                    <div className="flex-1 p-2 border rounded-md bg-muted">
                      <div className="font-medium">{vendedorActual.nombre}</div>
                      <div className="text-sm text-muted-foreground">Usuario: {vendedorActual.usuario}</div>
                    </div>
                    <Button variant="outline" onClick={() => setShowVendedorDialog(true)}>
                      Cambiar
                    </Button>
                  </div>
                </div>

{/* Descuento general */}
                <div className="space-y-2">
                  <Label className="flex items-center">
                    Descuento general
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger>
                          <span className="ml-1 text-muted-foreground">
                            <Percent className="h-4 w-4 inline" />
                          </span>
                        </TooltipTrigger>
                        <TooltipContent>
                          Este descuento se aplica sobre el total después de los descuentos por producto
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </Label>
                  <div className="flex gap-2">
                    <Select
                      value={tipoDescuento}
                      onValueChange={(value: "porcentaje" | "monto") => setTipoDescuento(value)}
                    >
                      <SelectTrigger className="w-[140px]">
                        <SelectValue placeholder="Tipo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="porcentaje">Porcentaje (%)</SelectItem>
                        <SelectItem value="monto">Monto fijo ($)</SelectItem>
                      </SelectContent>
                    </Select>
                    <div className="relative flex-1">
                      <Input
                        type="number"
                        min="0"
                        max={tipoDescuento === "porcentaje" ? "100" : undefined}
                        placeholder={tipoDescuento === "porcentaje" ? "0-100%" : "$0"}
                        value={valorDescuento}
                        onChange={(e) => setValorDescuento(e.target.value)}
                      />
                      {tipoDescuento === "porcentaje" && (
                        <div className="absolute inset-y-0 right-3 flex items-center">
                          <span className="text-muted-foreground">%</span>
                        </div>
                      )}
                      {tipoDescuento === "monto" && (
                        <div className="absolute inset-y-0 left-3 flex items-center">
                          <span className="text-muted-foreground">$</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

{/* Métodos de pago */}
                <div className="space-y-2">
                  <Label className="flex items-center">
                    Métodos de pago
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger>
                          <span className="ml-1 text-muted-foreground">
                            <CreditCard className="h-4 w-4 inline" />
                          </span>
                        </TooltipTrigger>
                        <TooltipContent>
                          Configure los métodos de pago para facilitar el proceso de cobro
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </Label>

{/* Métodos de pago agregados en preforma */}
                  {metodosPagoPreforma.length > 0 && (
                    <div className="space-y-2">
                      <div className="border rounded-md divide-y max-h-[120px] overflow-y-auto">
                        {metodosPagoPreforma.map((metodo) => (
                          <div key={metodo.id} className="flex items-center justify-between p-2">
                            <div className="flex items-center gap-2">
                              {metodo.tipo === "efectivo" && <DollarSign className="h-4 w-4" />}
                              {metodo.tipo === "tarjeta" && <CreditCard className="h-4 w-4" />}
                              {metodo.tipo === "transferencia" && <BarChart className="h-4 w-4" />}
                              {metodo.tipo === "cheque" && <FileText className="h-4 w-4" />}
                              {metodo.tipo === "credito" && <Clock className="h-4 w-4" />}
                              <span className="text-sm">{getNombreMetodoPago(metodo.tipo)}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <span className="text-sm font-medium">${metodo.monto.toLocaleString()}</span>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-5 w-5 text-red-500"
                                onClick={() => eliminarMetodoPagoPreforma(metodo.id)}
                              >
                                <Trash2 className="h-3 w-3" />
                              </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        Total configurado: ${calcularTotalPagadoPreforma().toLocaleString()} | Saldo restante: $
                        {calcularSaldoRestantePreforma().toLocaleString()}
                      </div>
                    </div>
                  )}

{/* Agregar nuevo método de pago en preforma */}
                  {calcularSaldoRestantePreforma() > 0 && (
                    <div className="space-y-3 p-3 border rounded-md bg-gray-50">
                      <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1">
                          <Label className="text-xs">Método</Label>
                          <Select value={nuevoMetodoPagoPreforma} onValueChange={setNuevoMetodoPagoPreforma}>
                            <SelectTrigger className="h-8">
                              <SelectValue placeholder="Método" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="efectivo">
                                <div className="flex items-center">
                                  <DollarSign className="h-3 w-3 mr-1" />
                                  Efectivo
                                </div>
                              </SelectItem>
                              <SelectItem value="tarjeta">
                                <div className="flex items-center">
                                  <CreditCard className="h-3 w-3 mr-1" />
                                  Tarjeta
                                </div>
                              </SelectItem>
                              <SelectItem value="transferencia">
                                <div className="flex items-center">
                                  <BarChart className="h-3 w-3 mr-1" />
                                  Transferencia
                                </div>
                              </SelectItem>
                              <SelectItem value="cheque">
                                <div className="flex items-center">
                                  <FileText className="h-3 w-3 mr-1" />
                                  Cheque
                                </div>
                              </SelectItem>
                              <SelectItem value="credito">
                                <div className="flex items-center">
                                  <Clock className="h-3 w-3 mr-1" />
                                  Cuenta Corriente
                                </div>
                              </SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs">Monto</Label>
                          <div className="flex gap-1">
                            <div className="relative flex-1">
                              <span className="absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground text-xs">
                                $
                              </span>
                              <Input
                                type="number"
                                placeholder="0.00"
                                className="pl-6 h-8 text-sm"
                                value={nuevoMontoPagoPreforma}
                                onChange={(e) => setNuevoMontoPagoPreforma(e.target.value)}
                                max={calcularSaldoRestantePreforma()}
                              />
                            </div>
                            <Button
                              variant="outline"
                              size="sm"
                              className="h-8 px-2 text-xs bg-transparent"
                              onClick={() => setNuevoMontoPagoPreforma(calcularSaldoRestantePreforma().toString())}
                              disabled={calcularSaldoRestantePreforma() <= 0}
                            >
                              Todo
                            </Button>
                          </div>
                        </div>
                      </div>
                      <Button
                        onClick={agregarMetodoPagoPreforma}
                        className="w-full h-8 text-xs"
                        size="sm"
                        disabled={!nuevoMontoPagoPreforma || Number.parseFloat(nuevoMontoPagoPreforma) <= 0}
                      >
                        <Plus className="mr-1 h-3 w-3" />
                        Agregar método
                      </Button>
                    </div>
                  )}

{metodosPagoPreforma.length === 0 && (
                    <div className="text-center p-3 border rounded-md bg-muted text-sm text-muted-foreground">
                      No hay métodos de pago configurados
                    </div>
                  )}
                </div>

{/* Total */}
                <div className="pt-4 border-t space-y-2">
                  <div className="flex justify-between">
                    <span>Subtotal:</span>
                    <span>${calcularSubtotal().toLocaleString()}</span>
                  </div>
                  {calcularTotalDescuentosProductos() > 0 && (
                    <div className="flex justify-between text-green-600">
                      <span>Descuentos por producto:</span>
                      <span>-${calcularTotalDescuentosProductos().toLocaleString()}</span>
                    </div>
                  )}
                  {calcularDescuentoGeneral() > 0 && (
                    <div className="flex justify-between text-green-600">
                      <span>Descuento general:</span>
                      <span>-${calcularDescuentoGeneral().toLocaleString()}</span>
                    </div>
                  )}
                  <div className="flex justify-between text-lg font-bold">
                    <span>Total final:</span>
                    <span>${calcularTotalConDescuento().toLocaleString()}</span>
                  </div>
                </div>
                {/* Añadir este código justo antes de </CardContent> en la sección del carrito (cerca de la línea 1000) */}
                {showAlertaMayorista && (
                  <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-md mt-4">
                    <div className="flex items-start">
                      <div className="flex-shrink-0">
                        <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                          <path
                            fillRule="evenodd"
                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </div>
                      <div className="ml-3">
                        <h3 className="text-sm font-medium text-yellow-800">¡Está cerca del precio mayorista!</h3>
                        <div className="mt-2 text-sm text-yellow-700">
                          <p>
                            Le faltan <strong>${alertaMayoristaInfo.faltante.toLocaleString()}</strong> para obtener
                            precios mayoristas.
                          </p>
                          <p>
                            Ahorro potencial: <strong>${alertaMayoristaInfo.ahorroTotal.toLocaleString()}</strong>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
              {/* Añadir la alerta de precio mayorista justo antes del componente CardFooter en la sección de carrito */}
              {/* Buscar la línea que contiene "<CardFooter>" (cerca de la línea 1000) y añadir justo antes: */}
              <CardFooter>
                <Button
                  className="w-full bg-yellow-500 hover:bg-yellow-600 text-black"
                  disabled={carrito.length === 0 || !selectedCliente || !sucursal}
                  onClick={crearPreforma}
                >
                  Generar Preforma
                </Button>
              </CardFooter>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="pendientes" className="space-y-4 pt-4">
          {/* Título y descripción según el rol */}
          <div className="mb-4">
            {rolActual === "cajero" && (
              <>
                <h2 className="text-xl font-semibold flex items-center">
                  <Banknote className="mr-2 h-5 w-5" />
                  Panel de Cobros
                </h2>
                <p className="text-muted-foreground">Gestione las preformas pendientes de cobro</p>
              </>
            )}
            {rolActual === "despachante" && (
              <>
                <h2 className="text-xl font-semibold flex items-center">
                  <Package className="mr-2 h-5 w-5" />
                  Panel de Entregas
                </h2>
                <p className="text-muted-foreground">Gestione las ventas pendientes de entrega</p>
              </>
            )}
            {(rolActual === "admin" || rolActual === "vendedor") && (
              <>
                <h2 className="text-xl font-semibold flex items-center">
                  <Clipboard className="mr-2 h-5 w-5" />
                  Panel de Seguimiento
                </h2>
                <p className="text-muted-foreground">Seguimiento de ventas en proceso</p>
              </>
            )}
          </div>

{/* Estadísticas rápidas */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardContent className="pt-6">
                <div className="flex justify-between items-center">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Preformas pendientes</p>
                    <p className="text-2xl font-bold">{ventas.filter((v) => v.estado === "preforma").length}</p>
                  </div>
                  <div className="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
                    <Clipboard className="h-6 w-6 text-blue-600" />
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="pt-6">
                <div className="flex justify-between items-center">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Pendientes de entrega</p>
                    <p className="text-2xl font-bold">{ventas.filter((v) => v.estado === "cobrada").length}</p>
                  </div>
                  <div className="h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center">
                    <Package className="h-6 w-6 text-yellow-600" />
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="pt-6">
                <div className="flex justify-between items-center">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Monto por cobrar</p>
                    <p className="text-2xl font-bold">
                      $
                      {ventas
                        .filter((v) => v.estado === "preforma")
                        .reduce((sum, v) => sum + v.total, 0)
                        .toLocaleString()}
                    </p>
                  </div>
                  <div className="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
                    <DollarSign className="h-6 w-6 text-green-600" />
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="pt-6">
                <div className="flex justify-between items-center">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Completadas hoy</p>
                    <p className="text-2xl font-bold">
                      {
                        ventas.filter(
                          (v) => v.estado === "entregada" && v.fechaEntrega === new Date().toISOString().split("T")[0],
                        ).length
                      }
                    </p>
                  </div>
                  <div className="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center">
                    <BarChart className="h-6 w-6 text-purple-600" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Contenido específico según el rol */}
          {(rolActual === "cajero" || rolActual === "admin") && (
            <Card className="mb-6">
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center">
                  <Banknote className="mr-2 h-5 w-5" />
                  Preformas Pendientes de Cobro
                </CardTitle>
                <CardDescription>Preformas que necesitan ser procesadas para su cobro</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4 flex items-center gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input type="search" placeholder="Buscar por código o cliente..." className="pl-8" />
                  </div>
                  <Select defaultValue="fecha-desc">
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Ordenar por" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="fecha-desc">Más recientes</SelectItem>
                      <SelectItem value="fecha-asc">Más antiguas</SelectItem>
                      <SelectItem value="monto-desc">Mayor monto</SelectItem>
                      <SelectItem value="monto-asc">Menor monto</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Código</TableHead>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Cliente</TableHead>
                        <TableHead>Vendedor</TableHead>
                        <TableHead>Total</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {ventas
                        .filter((venta) => venta.estado === "preforma")
                        .map((venta) => (
                          <TableRow key={venta.id}>
                            <TableCell className="font-medium">{venta.codigo}</TableCell>
                            <TableCell>
                              <div>{new Date(venta.fecha).toLocaleDateString()}</div>
                              <div className="text-xs text-muted-foreground">{venta.hora}</div>
                            </TableCell>
                            <TableCell>{venta.cliente}</TableCell>
                            <TableCell>{venta.vendedor}</TableCell>
                            <TableCell className="font-semibold">${venta.total.toLocaleString()}</TableCell>
                            <TableCell className="text-right">
                              <div className="flex justify-end gap-2">
                                <Button variant="ghost" size="sm" onClick={() => verDetalleVenta(venta)}>
                                  Ver
                                </Button>
                                <Button
                                  variant="default"
                                  size="sm"
                                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                                  onClick={() => abrirDialogoCobro(venta)}
                                >
                                  Cobrar
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))}
                      {ventas.filter((venta) => venta.estado === "preforma").length === 0 && (
                        <TableRow>
                          <TableCell colSpan={6} className="text-center py-6 text-muted-foreground">
                            <div className="flex flex-col items-center justify-center">
                              <Clipboard className="h-8 w-8 mb-2 text-muted-foreground/60" />
                              <p>No hay preformas pendientes de cobro</p>
                            </div>
                          </TableCell>
                        </TableRow>
                      )}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          )}

{(rolActual === "despachante" || rolActual === "admin") && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center">
                  <Package className="mr-2 h-5 w-5" />
                  Ventas Pendientes de Entrega
                </CardTitle>
                <CardDescription>Ventas cobradas que necesitan ser entregadas al cliente</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4 flex items-center gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                    <Input type="search" placeholder="Buscar por código o cliente..." className="pl-8" />
                  </div>
                  <Select defaultValue="fecha-desc">
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Ordenar por" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="fecha-desc">Más recientes</SelectItem>
                      <SelectItem value="fecha-asc">Más antiguas</SelectItem>
                      <SelectItem value="monto-desc">Mayor monto</SelectItem>
                      <SelectItem value="monto-asc">Menor monto</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Código</TableHead>
                        <TableHead>Fecha Cobro</TableHead>
                        <TableHead>Cliente</TableHead>
                        <TableHead>Cajero</TableHead>
                        <TableHead>Total</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {ventas
                        .filter((venta) => venta.estado === "cobrada")
                        .map((venta) => (
                          <TableRow key={venta.id}>
                            <TableCell className="font-medium">{venta.codigo}</TableCell>
                            <TableCell>
                              <div>{new Date(venta.fechaCobro).toLocaleDateString()}</div>
                              <div className="text-xs text-muted-foreground">
                                {venta.entrega?.tipo === "programada"
                                  ? `Programada: ${new Date(venta.entrega.fecha).toLocaleDateString()}`
                                  : "Entrega inmediata"}
                              </div>
                            </TableCell>
                            <TableCell>{venta.cliente}</TableCell>
                            <TableCell>{venta.cajero}</TableCell>
                            <TableCell className="font-semibold">${venta.total.toLocaleString()}</TableCell>
                            <TableCell className="text-right">
                              <div className="flex justify-end gap-2">
                                <Button variant="outline" size="sm" onClick={() => mostrarCodigoQR(venta)}>
                                  <QrCode className="h-4 w-4 mr-1" />
                                  QR
                                </Button>
                                <Button
                                  variant="default"
                                  size="sm"
                                  className="bg-green-500 hover:bg-green-600 text-black"
                                  onClick={() => abrirDialogoRetiro(venta)}
                                >
                                  Entregar
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))}
                      {ventas.filter((venta) => venta.estado === "cobrada").length === 0 && (
                        <TableRow>
                          <TableCell colSpan={6} className="text-center py-6 text-muted-foreground">
                            <div className="flex flex-col items-center justify-center">
                              <Package className="h-8 w-8 mb-2 text-muted-foreground/60" />
                              <p>No hay ventas pendientes de entrega</p>
                            </div>
                          </TableCell>
                        </TableRow>
                      )}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>

{/* Diálogo de preforma exitosa */}
      <Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center text-blue-600">
              <Clipboard className="mr-2 h-5 w-5" />
              Preforma generada con éxito
            </DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p>La preforma ha sido registrada correctamente.</p>
            <div className="mt-4 p-4 bg-muted rounded-md">
              <div className="flex justify-between">
                <span>Código:</span>
                <span className="font-medium">{ventaActual?.codigo}</span>
              </div>
              <div className="flex justify-between">
                <span>Cliente:</span>
                <span className="font-medium">
                  {selectedCliente ? `${selectedCliente.apellido}, ${selectedCliente.nombre}` : ""}
                </span>
              </div>
              <div className="flex justify-between">
                <span>Comprobante:</span>
                <span>
                  {tipoComprobante === "recibo"
                    ? "Recibo"
                    : tipoComprobante === "facturaA"
                      ? "Factura A"
                      : tipoComprobante === "facturaB"
                        ? "Factura B"
                        : "Factura C"}
                </span>
              </div>
              <div className="flex justify-between">
                <span>Subtotal:</span>
                <span>${calcularSubtotal().toLocaleString()}</span>
              </div>
              {calcularTotalDescuentosProductos() > 0 && (
                <div className="flex justify-between text-green-600">
                  <span>Descuentos por producto:</span>
                  <span>-${calcularTotalDescuentosProductos().toLocaleString()}</span>
                </div>
              )}
              {calcularDescuentoGeneral() > 0 && (
                <div className="flex justify-between text-green-600">
                  <span>Descuento general:</span>
                  <span>-${calcularDescuentoGeneral().toLocaleString()}</span>
                </div>
              )}
              <div className="flex justify-between font-bold">
                <span>Total final:</span>
                <span>${calcularTotalConDescuento().toLocaleString()}</span>
              </div>
              <div className="flex justify-between">
                <span>Entrega:</span>
                <span>
                  {tipoEntrega === "inmediata"
                    ? "Inmediata"
                    : `Programada para ${new Date(fechaEntrega).toLocaleDateString()} a las ${horaEntrega}`}
                </span>
              </div>
              {tipoEntrega === "programada" && notasEntrega && (
                <div className="flex justify-between">
                  <span>Notas:</span>
                  <span className="text-right max-w-[200px]">{notasEntrega}</span>
                </div>
              )}
            </div>
            {tipoEntrega === "programada" && (
              <div className="mt-4 p-4 bg-blue-50 rounded-md border border-blue-200">
                <div className="flex items-center text-blue-700 mb-2">
                  <QrCode className="h-5 w-5 mr-2" />
                  <span className="font-medium">Código de retiro: {codigoRetiro}</span>
                </div>
                <p className="text-sm text-blue-600">
                  Este código será necesario para que el cliente pueda retirar sus productos después del pago.
                </p>
              </div>
            )}
          </div>
          <DialogFooter className="flex gap-2">
            {tipoEntrega === "inmediata" ? (
              <Button onClick={() => setShowSuccessDialog(false)}>Finalizar</Button>
            ) : (
              <>
                <Button variant="outline" onClick={nuevaVenta}>
                  Nueva venta
                </Button>
                <Button className="bg-yellow-500 hover:bg-yellow-600 text-black" onClick={imprimirPreforma}>
                  <Printer className="mr-2 h-4 w-4" />
                  Imprimir preforma
                </Button>
              </>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de nuevo cliente */}
      <Dialog open={showNewClienteDialog} onOpenChange={setShowNewClienteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Nuevo cliente</DialogTitle>
            <DialogDescription>Complete los datos para crear un nuevo cliente</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="dni">DNI *</Label>
                <Input
                  id="dni"
                  value={newClienteForm.dni}
                  onChange={(e) => handleNewClienteFormChange("dni", e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="telefono">Teléfono</Label>
                <Input
                  id="telefono"
                  value={newClienteForm.telefono}
                  onChange={(e) => handleNewClienteFormChange("telefono", e.target.value)}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="direccion">Dirección</Label>
              <Input
                id="direccion"
                value={newClienteForm.direccion}
                onChange={(e) => handleNewClienteFormChange("direccion", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                value={newClienteForm.email}
                onChange={(e) => handleNewClienteFormChange("email", e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowNewClienteDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={saveNewCliente} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Guardar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de detalle de venta */}
      <Dialog open={showDetalleVentaDialog} onOpenChange={setShowDetalleVentaDialog}>
        <DialogContent className="sm:max-w-md">
          {/* Actualizar el diálogo de detalle de venta para mostrar el código */}
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <Receipt className="mr-2 h-5 w-5" />
              Detalle de Venta {selectedVenta?.codigo}
            </DialogTitle>
          </DialogHeader>
          {selectedVenta && (
            <div className="py-4">
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Código</p>
                    <p className="font-medium">{selectedVenta.codigo}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Estado</p>
                    <Badge className={getEstadoColor(selectedVenta.estado)}>
                      {getEstadoTexto(selectedVenta.estado)}
                    </Badge>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Fecha</p>
                    <p>{new Date(selectedVenta.fecha).toLocaleDateString()}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Hora</p>
                    <p>{selectedVenta.hora}</p>
                  </div>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Cliente</p>
                  <p>{selectedVenta.cliente}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Sucursal</p>
                  <p>{selectedVenta.sucursal}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Vendedor</p>
                  <p>{selectedVenta.vendedor}</p>
                </div>
                {selectedVenta.cajero && (
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Cajero</p>
                    <p>{selectedVenta.cajero}</p>
                  </div>
                )}
                {selectedVenta.despachante && (
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Despachante</p>
                    <p>{selectedVenta.despachante}</p>
                  </div>
                )}
                {selectedVenta.retiradoPor && (
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Retirado por</p>
                    <p>{selectedVenta.retiradoPor}</p>
                  </div>
                )}
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Productos</p>
                  <ul className="list-disc pl-5 space-y-1">
                    {Array.isArray(selectedVenta.productos) &&
                      selectedVenta.productos.map((producto: any, index: number) => (
                        <li key={index}>
                          {typeof producto === "string"
                            ? producto
                            : `${producto.nombre} (${producto.cantidad}x) - $${producto.subtotal?.toLocaleString() || (producto.precio * producto.cantidad).toLocaleString()}`}
                        </li>
                      ))}
                  </ul>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Entrega</p>
                  <p>
                    {selectedVenta.entrega?.tipo === "inmediata"
                      ? "Inmediata"
                      : `Programada para ${new Date(selectedVenta.entrega?.fecha).toLocaleDateString()} a las ${selectedVenta.entrega?.hora}`}
                  </p>
                  {selectedVenta.entrega?.tipo === "programada" && selectedVenta.entrega?.notas && (
                    <div className="mt-1">
                      <p className="text-sm font-medium text-muted-foreground">Notas de entrega</p>
                      <p className="text-sm">{selectedVenta.entrega.notas}</p>
                    </div>
                  )}
                </div>
                <div className="pt-4 border-t">
                  <div className="flex justify-between">
                    <span>Subtotal:</span>
                    <span>${selectedVenta.subtotal?.toLocaleString() || selectedVenta.total.toLocaleString()}</span>
                  </div>
                  {selectedVenta.descuentoProductos > 0 && (
                    <div className="flex justify-between text-green-600">
                      <span>Descuentos por producto:</span>
                      <span>-${selectedVenta.descuentoProductos.toLocaleString()}</span>
                    </div>
                  )}
                  {selectedVenta.descuentoGeneral > 0 && (
                    <div className="flex justify-between text-green-600">
                      <span>Descuento general:</span>
                      <span>-${selectedVenta.descuentoGeneral.toLocaleString()}</span>
                    </div>
                  )}
                  <div className="flex justify-between text-lg font-bold">
                    <span>Total final:</span>
                    <span>${selectedVenta.total.toLocaleString()}</span>
                  </div>
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            {selectedVenta?.estado === "preforma" && (rolActual === "cajero" || rolActual === "admin") && (
              <Button
                variant="outline"
                className="text-yellow-600 bg-transparent"
                onClick={() => {
                  setShowDetalleVentaDialog(false)
                  abrirDialogoCobro(selectedVenta)
                }}
              >
                <Banknote className="mr-2 h-4 w-4" />
                Cobrar
              </Button>
            )}
            {selectedVenta?.estado === "cobrada" && (rolActual === "despachante" || rolActual === "admin") && (
              <Button
                variant="outline"
                className="text-green-600 bg-transparent"
                onClick={() => {
                  setShowDetalleVentaDialog(false)
                  abrirDialogoRetiro(selectedVenta)
                }}
              >
                <Package className="mr-2 h-4 w-4" />
                Entregar
              </Button>
            )}
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Printer className="mr-2 h-4 w-4" />
              Imprimir
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de selección de vendedor */}
      <Dialog open={showVendedorDialog} onOpenChange={setShowVendedorDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Seleccionar Vendedor</DialogTitle>
            <DialogDescription>Seleccione el vendedor que realiza la venta</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="border rounded-md max-h-[200px] overflow-y-auto">
              {usuarios
                .filter((u) => u.rol === "vendedor" || u.rol === "admin")
                .map((vendedor) => (
                  <div
                    key={vendedor.id}
                    className="p-2 hover:bg-muted cursor-pointer"
                    onClick={() => seleccionarVendedor(vendedor)}
                  >
                    <div className="font-medium">{vendedor.nombre}</div>
                    <div className="text-sm text-muted-foreground">Usuario: {vendedor.usuario}</div>
                  </div>
                ))}
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Diálogo de contraseña de vendedor */}
      <Dialog open={showPasswordDialog} onOpenChange={setShowPasswordDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Confirmar Contraseña</DialogTitle>
            <DialogDescription>
              Ingrese la contraseña de {selectedVendedor?.nombre} para confirmar la venta
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="password">Contraseña</Label>
              <Input
                id="password"
                type="password"
                value={vendedorPassword}
                onChange={(e) => setVendedorPassword(e.target.value)}
              />
              {vendedorPasswordError && <p className="text-red-500 text-sm">{vendedorPasswordError}</p>}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPasswordDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={validarPasswordVendedor} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Confirmar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de descuento por producto */}
      <Dialog open={showDescuentoProductoDialog} onOpenChange={setShowDescuentoProductoDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Aplicar Descuento al Producto</DialogTitle>
            <DialogDescription>Configure el descuento que desea aplicar a este producto</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Tipo de descuento</Label>
              <Select
                value={descuentoProductoTipo}
                onValueChange={(value: "porcentaje" | "monto") => setDescuentoProductoTipo(value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione tipo de descuento" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="porcentaje">Porcentaje (%)</SelectItem>
                  <SelectItem value="monto">Monto fijo ($)</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Valor del descuento</Label>
              <div className="relative">
                <Input
                  type="number"
                  min="0"
                  max={descuentoProductoTipo === "porcentaje" ? "100" : undefined}
                  placeholder={descuentoProductoTipo === "porcentaje" ? "0-100%" : "$0"}
                  value={descuentoProductoValor}
                  onChange={(e) => setDescuentoProductoValor(e.target.value)}
                />
                {descuentoProductoTipo === "porcentaje" && (
                  <div className="absolute inset-y-0 right-3 flex items-center">
                    <span className="text-muted-foreground">%</span>
                  </div>
                )}
                {descuentoProductoTipo === "monto" && (
                  <div className="absolute inset-y-0 left-3 flex items-center">
                    <span className="text-muted-foreground">$</span>
                  </div>
                )}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => eliminarDescuentoProducto()}>
              Eliminar descuento
            </Button>
            <Button onClick={aplicarDescuentoProducto} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Aplicar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={showCobroDialog} onOpenChange={setShowCobroDialog}>
        <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <Banknote className="mr-2 h-5 w-5" />
              {validacionStep === "validacion" ? "Validar Productos" : "Procesar Cobro"}
            </DialogTitle>
            <DialogDescription>
              {validacionStep === "validacion"
                ? "Escanee o ingrese el código de cada producto para validar"
                : `Complete los datos para procesar el cobro de la venta ${ventaActual?.codigo}`}
            </DialogDescription>
          </DialogHeader>

{validacionStep === "validacion" ? (
            <div className="space-y-4 py-4">
              {/* Sale info summary */}
              <div className="p-4 bg-muted rounded-md space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Venta:</span>
                  <span className="font-medium">{ventaActual?.codigo}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Cliente:</span>
                  <span className="font-medium">{ventaActual?.cliente}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Vendedor:</span>
                  <span className="font-medium">{ventaActual?.vendedor}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Total:</span>
                  <span className="font-bold">${ventaActual?.total.toLocaleString()}</span>
                </div>
              </div>

{/* Barcode input */}
              <div className="space-y-4 p-4 border rounded-md bg-blue-50">
                <Label>Escanear producto</Label>
                <div className="grid grid-cols-3 gap-2">
                  <div className="col-span-2 space-y-2">
                    <Input
                      placeholder="Código de barra"
                      value={codigoBarraInput}
                      onChange={(e) => setCodigoBarraInput(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          validarProductoPorCodigo()
                        }
                      }}
                      autoFocus
                    />
                  </div>
                  <div className="space-y-2">
                    <Input
                      type="number"
                      placeholder="Cant."
                      value={cantidadValidacion}
                      onChange={(e) => setCantidadValidacion(e.target.value)}
                      min="1"
                    />
                  </div>
                </div>
                <Button onClick={validarProductoPorCodigo} className="w-full" disabled={!codigoBarraInput}>
                  <CheckCircle2 className="mr-2 h-4 w-4" />
                  Validar Producto
                </Button>
              </div>

{/* Products list with validation status */}
              <div className="space-y-2">
                <Label>Productos de la venta</Label>
                <div className="border rounded-md divide-y max-h-[300px] overflow-y-auto">
                  {ventaActual?.productosDetalle?.map((producto: any) => {
                    const validado = productosValidados[producto.codigo] || 0
                    const completo = validado === producto.cantidad
                    const parcial = validado > 0 && validado < producto.cantidad

return (
                      <div key={producto.codigo} className="p-3 space-y-1">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            {completo ? (
                              <CheckCircle2 className="h-5 w-5 text-green-600" />
                            ) : parcial ? (
                              <AlertCircle className="h-5 w-5 text-yellow-600" />
                            ) : (
                              <XCircle className="h-5 w-5 text-red-600" />
                            )}
                            <div>
                              <div className="font-medium">{producto.nombre}</div>
                              <div className="text-xs text-muted-foreground">Código: {producto.codigo}</div>
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="font-medium">
                              {validado} / {producto.cantidad}
                            </div>
                            <div className="text-xs text-muted-foreground">${producto.precio.toLocaleString()}</div>
                          </div>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>

{/* Validation progress */}
              <div className="p-3 bg-muted rounded-md">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium">Progreso de validación</span>
                  <span className="text-sm">
                    {Object.keys(productosValidados).length} / {ventaActual?.productosDetalle?.length || 0} productos
                  </span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div
                    className={`h-2 rounded-full transition-all ${todosProductosValidados() ? "bg-green-600" : "bg-blue-600"}`}
                    style={{
                      width: `${((Object.keys(productosValidados).length / (ventaActual?.productosDetalle?.length || 1)) * 100).toFixed(0)}%`,
                    }}
                  />
                </div>
              </div>
            </div>
          ) : (
            <div className="space-y-4 py-4">
              {/* Detailed sale information */}
              <div className="p-4 bg-muted rounded-md space-y-2">
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <span className="text-xs text-muted-foreground">Venta</span>
                    <div className="font-medium">{ventaActual?.codigo}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Fecha</span>
                    <div className="font-medium">{ventaActual?.fecha}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Cliente</span>
                    <div className="font-medium">{ventaActual?.cliente}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Vendedor</span>
                    <div className="font-medium">{ventaActual?.vendedor}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Sucursal</span>
                    <div className="font-medium">{ventaActual?.sucursal}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Tipo de entrega</span>
                    <div className="font-medium capitalize">{ventaActual?.tipoEntrega}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Cajero</span>
                    <div className="font-medium">{ventaActual?.cajero || "N/A"}</div>
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground">Fecha de cobro</span>
                    <div className="font-medium">
                      {ventaActual?.fechaCobro ? new Date(ventaActual.fechaCobro).toLocaleDateString() : "N/A"}
                    </div>
                  </div>
                </div>
              </div>

{/* Products list */}
              <div className="space-y-2">
                <Label>Productos</Label>
                <div className="border rounded-md divide-y max-h-[150px] overflow-y-auto">
                  {ventaActual?.productosDetalle?.map((producto: any) => (
                    <div key={producto.codigo} className="p-2 flex justify-between items-center">
                      <div>
                        <div className="font-medium text-sm">{producto.nombre}</div>
                        <div className="text-xs text-muted-foreground">
                          {producto.cantidad} x ${producto.precio.toLocaleString()}
                        </div>
                      </div>
                      <div className="font-medium">${(producto.cantidad * producto.precio).toLocaleString()}</div>
                    </div>
                  ))}
                </div>
              </div>

{/* Payment summary */}
              <div className="p-4 bg-muted rounded-md">
                <div className="flex justify-between mb-2">
                  <span>Total a cobrar:</span>
                  <span className="font-bold">${ventaActual?.total.toLocaleString()}</span>
                </div>
                <div className="flex justify-between mb-2">
                  <span>Total pagado:</span>
                  <span className="font-bold text-green-600">${calcularTotalPagado().toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span>Saldo restante:</span>
                  <span className={`font-bold ${calcularSaldoRestante() > 0 ? "text-red-600" : "text-green-600"}`}>
                    ${calcularSaldoRestante().toLocaleString()}
                  </span>
                </div>
              </div>

{/* Payment methods used */}
              {ventaActual?.metodosPago && ventaActual.metodosPago.length > 0 && (
                <div className="space-y-2">
                  <Label>Métodos de pago utilizados</Label>
                  <div className="border rounded-md divide-y">
                    {ventaActual.metodosPago.map((metodo: any, index: number) => (
                      <div key={index} className="flex items-center justify-between p-3">
                        <div className="flex items-center gap-2">
                          {metodo.tipo === "efectivo" && <DollarSign className="h-4 w-4" />}
                          {metodo.tipo === "tarjeta" && <CreditCard className="h-4 w-4" />}
                          {metodo.tipo === "transferencia" && <BarChart className="h-4 w-4" />}
                          {metodo.tipo === "cheque" && <FileText className="h-4 w-4" />}
                          {metodo.tipo === "credito" && <Clock className="h-4 w-4" />}
                          <span>{getNombreMetodoPago(metodo.tipo)}</span>
                        </div>
                        <span className="font-medium">${metodo.monto.toLocaleString()}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* Pickup code */}
              <div className="space-y-2">
                <Label>Código de retiro</Label>
                <Input
                  placeholder="Ingrese el código de retiro"
                  value={codigoRetiroInput}
                  onChange={(e) => setCodigoRetiroInput(e.target.value)}
                />
              </div>

{/* Who picks up */}
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="cliente-retira"
                  checked={esClienteQuienRetira}
                  onCheckedChange={(checked) => setEsClienteQuienRetira(checked as boolean)}
                />
                <Label htmlFor="cliente-retira">El cliente retira personalmente</Label>
              </div>

{!esClienteQuienRetira && (
                <div className="space-y-2">
                  <Label>Nombre de quien retira</Label>
                  <Input
                    placeholder="Ingrese el nombre completo"
                    value={retiradoPor}
                    onChange={(e) => setRetiradoPor(e.target.value)}
                  />
                </div>
              )}

{/* Observations */}
              <div className="space-y-2">
                <Label>Observaciones</Label>
                <Textarea placeholder="Ingrese observaciones sobre la entrega (opcional)" />
              </div>
            </div>
          )}

<DialogFooter>
            {validacionStep === "validacion" ? (
              <>
                <Button variant="outline" onClick={() => setShowCobroDialog(false)}>
                  Cancelar
                </Button>
                <Button onClick={() => setValidacionStep("accion")} disabled={!todosProductosValidados()}>
                  Continuar al Cobro
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </>
            ) : (
              <>
                <Button variant="outline" onClick={() => setValidacionStep("validacion")}>
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Volver
                </Button>
                <Button
                  onClick={procesarCobro}
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  disabled={calcularSaldoRestante() !== 0}
                >
                  Confirmar Cobro
                </Button>
              </>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={showRetiroDialog} onOpenChange={setShowRetiroDialog}>
        <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <Package className="mr-2 h-5 w-5" />
              {validacionStep === "validacion" ? "Validar Productos" : "Procesar Entrega"}
            </DialogTitle>
            <DialogDescription>
              {validacionStep === "validacion"
                ? "Escanee o ingrese el código de cada producto para validar"
                : `Complete los datos para procesar la entrega de la venta ${ventaActual?.codigo}`}
            </DialogDescription>
          </DialogHeader>

<DialogFooter>
            {validacionStep === "validacion" ? (
              <>
                <Button variant="outline" onClick={() => setShowRetiroDialog(false)}>
                  Cancelar
                </Button>
                <Button onClick={() => setValidacionStep("accion")} disabled={!todosProductosValidados()}>
                  Continuar a Entrega
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </>
            ) : (
              <>
                <Button variant="outline" onClick={() => setValidacionStep("validacion")}>
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Volver
                </Button>
                <Button
                  onClick={procesarRetiro}
                  className="bg-yellow-500 hover:bg-yellow-600 text-black"
                  disabled={!codigoRetiroInput || (!esClienteQuienRetira && !retiradoPor)}
                >
                  Confirmar Entrega
                </Button>
              </>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de código QR */}
      <Dialog open={showQrDialog} onOpenChange={setShowQrDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <QrCode className="mr-2 h-5 w-5" />
              Código de Retiro
            </DialogTitle>
            <DialogDescription>Este código es necesario para retirar los productos</DialogDescription>
          </DialogHeader>
          <div className="py-4 flex flex-col items-center">
            <div className="bg-white p-4 rounded-md border mb-4">
              {/* Aquí iría el componente real de QR */}
              <div className="w-48 h-48 bg-gray-200 flex items-center justify-center">
                <QrCode className="h-24 w-24 text-gray-500" />
              </div>
            </div>
            <div className="text-center">
              <p className="text-lg font-bold">{codigoRetiro}</p>
              <p className="text-sm text-muted-foreground mt-2">
                Proporcione este código al cliente para que pueda retirar sus productos
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black" onClick={imprimirComprobante}>
              <Printer className="mr-2 h-4 w-4" />
              Imprimir
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Modal de agregar producto */}
      <Dialog open={showAgregarProductoDialog} onOpenChange={setShowAgregarProductoDialog}>
        <DialogContent className="sm:max-w-2xl">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <ShoppingCart className="mr-2 h-5 w-5" />
              {modoModal === "agregar" ? "Agregar Producto al Carrito" : "Detalle del Producto"}
            </DialogTitle>
            <DialogDescription>
              {modoModal === "agregar"
                ? `Configure la cantidad y descuento para ${selectedProductoParaAgregar?.nombre}`
                : `Información completa de ${selectedProductoParaAgregar?.nombre}`}
            </DialogDescription>
          </DialogHeader>

{selectedProductoParaAgregar && (
            <div className="space-y-6 py-4">
              {/* Información del producto */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Imagen del producto */}
                <div className="space-y-4">
                  <div className="aspect-square rounded-lg border bg-muted flex items-center justify-center">
                    <img
                      src={`/placeholder_image.png?height=300&width=300&text=${encodeURIComponent(selectedProductoParaAgregar.nombre)}`}
                      alt={selectedProductoParaAgregar.nombre}
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>
                  {/* Imágenes adicionales */}
                  <div className="grid grid-cols-3 gap-2">
                    {[1, 2, 3].map((i) => (
                      <div
                        key={i}
                        className="aspect-square rounded border bg-muted/50 flex items-center justify-center"
                      >
                        <img
                          src={`/ceholder-svg-height-100-width-100-text-vista-.jpg?height=100&width=100&text=Vista ${i}`}
                          alt={`Vista ${i}`}
                          className="w-full h-full object-cover rounded"
                        />
                      </div>
                    ))}
                  </div>
                </div>

{/* Detalles del producto */}
                <div className="space-y-4">
                  <div>
                    <h3 className="text-xl font-semibold">{selectedProductoParaAgregar.nombre}</h3>
                    <p className="text-muted-foreground">Código: {selectedProductoParaAgregar.codigo}</p>
                  </div>

<div className="space-y-2">
                    <div className="flex justify-between">
                      <span>Stock disponible:</span>
                      <span
                        className={`font-medium ${selectedProductoParaAgregar.stock <= 5 ? "text-red-600" : "text-green-600"}`}
                      >
                        {selectedProductoParaAgregar.stock} unidades
                      </span>
                    </div>

<div className="flex justify-between">
                      <span>Precio minorista:</span>
                      <span className="font-medium">
                        $
                        {(
                          selectedProductoParaAgregar.precioMinorista || selectedProductoParaAgregar.precio
                        ).toLocaleString()}
                      </span>
                    </div>

{selectedProductoParaAgregar.precioMayorista && (
                      <div className="flex justify-between">
                        <span>Precio mayorista:</span>
                        <span className="font-medium text-green-600">
                          ${selectedProductoParaAgregar.precioMayorista.toLocaleString()}
                        </span>
                      </div>
                    )}

{selectedProductoParaAgregar.precioCuentaCorriente && (
                      <div className="flex justify-between">
                        <span>Precio cuenta corriente:</span>
                        <span className="font-medium text-purple-600">
                          ${selectedProductoParaAgregar.precioCuentaCorriente.toLocaleString()}
                        </span>
                      </div>
                    )}

<div className="flex justify-between">
                      <span>Precio aplicado:</span>
                      <span className="font-bold text-lg">
                        $
                        {(tipoPrecioActual === "mayorista"
                          ? selectedProductoParaAgregar.precioMayorista || selectedProductoParaAgregar.precio
                          : tipoPrecioActual === "cuenta_corriente"
                            ? selectedProductoParaAgregar.precioCuentaCorriente ||
                              selectedProductoParaAgregar.precioMinorista ||
                              selectedProductoParaAgregar.precio
                            : selectedProductoParaAgregar.precioMinorista || selectedProductoParaAgregar.precio
                        ).toLocaleString()}
                        {tipoPrecioActual === "mayorista" && (
                          <Badge className="ml-2 bg-green-100 text-green-800 text-xs">Mayorista</Badge>
                        )}
                        {tipoPrecioActual === "minorista" &&
                          selectedProductoParaAgregar.precioMinorista &&
                          selectedProductoParaAgregar.precioMayorista && (
                            <Badge className="ml-2 bg-blue-100 text-blue-800 text-xs">Minorista</Badge>
                          )}
                        {tipoPrecioActual === "cuenta_corriente" &&
                          selectedProductoParaAgregar.precioCuentaCorriente && (
                            <Badge className="ml-2 bg-purple-100 text-purple-800 text-xs">Cta. Cte.</Badge>
                          )}
                      </span>
                    </div>
                  </div>

{/* Descripción del producto */}
                  <div className="p-3 bg-muted rounded-md">
                    <p className="text-sm text-muted-foreground">
                      Descripción del producto, características principales, autor, editorial, etc.
                    </p>
                  </div>
                </div>
              </div>

{/* Configuración de cantidad y descuento */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t">
                {/* Cantidad */}
                <div className="space-y-4">
                  <Label className="text-lg font-medium">Cantidad a agregar</Label>
                  <div className="flex items-center gap-4">
                    <Button
                      variant="outline"
                      size="icon"
                      className="h-12 w-12 bg-transparent"
                      onClick={() => {
                        const cantidad = Math.max(1, Number.parseInt(cantidadAAgregar) - 1)
                        setCantidadAAgregar(cantidad.toString())
                      }}
                      disabled={Number.parseInt(cantidadAAgregar) <= 1}
                    >
                      <Minus className="h-6 w-6" />
                    </Button>

<Input
                      type="number"
                      min="1"
                      max={selectedProductoParaAgregar.stock}
                      value={cantidadAAgregar}
                      onChange={(e) => setCantidadAAgregar(e.target.value)}
                      className="text-center text-2xl font-bold h-12 w-24"
                    />

<Button
                      variant="outline"
                      size="icon"
                      className="h-12 w-12 bg-transparent"
                      onClick={() => {
                        const cantidad = Math.min(
                          selectedProductoParaAgregar.stock,
                          Number.parseInt(cantidadAAgregar) + 1,
                        )
                        setCantidadAAgregar(cantidad.toString())
                      }}
                      disabled={Number.parseInt(cantidadAAgregar) >= selectedProductoParaAgregar.stock}
                    >
                      <Plus className="h-6 w-6" />
                    </Button>
                  </div>

<div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCantidadAAgregar("5")}
                      disabled={selectedProductoParaAgregar.stock < 5}
                    >
                      5
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCantidadAAgregar("10")}
                      disabled={selectedProductoParaAgregar.stock < 10}
                    >
                      10
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCantidadAAgregar(selectedProductoParaAgregar.stock.toString())}
                    >
                      Todo ({selectedProductoParaAgregar.stock})
                    </Button>
                  </div>
                </div>

{/* Descuento */}
                <div className="space-y-4">
                  <Label className="text-lg font-medium">Descuento (opcional)</Label>
                  <div className="space-y-3">
                    <Select
                      value={descuentoProductoModal.tipo}
                      onValueChange={(value: "porcentaje" | "monto") =>
                        setDescuentoProductoModal({ ...descuentoProductoModal, tipo: value })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Tipo de descuento" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="porcentaje">Porcentaje (%)</SelectItem>
                        <SelectItem value="monto">Monto fijo ($)</SelectItem>
                      </SelectContent>
                    </Select>

<div className="relative">
                      <Input
                        type="number"
                        min="0"
                        max={descuentoProductoModal.tipo === "porcentaje" ? "100" : undefined}
                        placeholder={descuentoProductoModal.tipo === "porcentaje" ? "0-100%" : "$0"}
                        value={descuentoProductoModal.valor}
                        onChange={(e) =>
                          setDescuentoProductoModal({ ...descuentoProductoModal, valor: e.target.value })
                        }
                        className="text-center"
                      />
                      {descuentoProductoModal.tipo === "porcentaje" && (
                        <div className="absolute inset-y-0 right-3 flex items-center">
                          <span className="text-muted-foreground">%</span>
                        </div>
                      )}
                      {descuentoProductoModal.tipo === "monto" && (
                        <div className="absolute inset-y-0 left-3 flex items-center">
                          <span className="text-muted-foreground">$</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>

{modoModal === "ver" && (
                <div className="space-y-4 pt-4 border-t">
                  <h4 className="font-semibold">Información adicional</h4>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="font-medium">Cantidad en carrito:</span>
                      <span className="ml-2">{selectedProductoParaAgregar?.cantidadEnCarrito}</span>
                    </div>
                    <div>
                      <span className="font-medium">Descuento aplicado:</span>
                      <span className="ml-2">
                        {selectedProductoParaAgregar?.descuentoAplicado
                          ? `${selectedProductoParaAgregar.descuentoAplicado.valor}${selectedProductoParaAgregar.descuentoAplicado.tipo === "porcentaje" ? "%" : "$"}`
                          : "Sin descuento"}
                      </span>
                    </div>
                  </div>

{/* Productos relacionados */}
                  <div className="space-y-3">
                    <h4 className="font-semibold">Productos relacionados</h4>
                    <div className="grid grid-cols-2 gap-3">
                      {productos
                        .filter((p) => p.id !== selectedProductoParaAgregar?.id)
                        .slice(0, 4)
                        .map((producto) => (
                          <div key={producto.id} className="border rounded-lg p-3 space-y-2">
                            <img
                              src={`/placeholder-80x80.png?height=80&width=80&text=${encodeURIComponent(producto.nombre)}`}
                              alt={producto.nombre}
                              className="w-full h-16 object-cover rounded"
                            />
                            <div className="text-xs">
                              <p className="font-medium truncate">{producto.nombre}</p>
                              <p className="text-muted-foreground">${producto.precio.toLocaleString()}</p>
                            </div>
                            <Button
                              size="sm"
                              variant="outline"
                              className="w-full text-xs h-6 bg-transparent"
                              onClick={() => {
                                setShowAgregarProductoDialog(false)
                                setTimeout(() => abrirModalAgregarProducto(producto), 100)
                              }}
                              disabled={producto.stock === 0}
                            >
                              Agregar
                            </Button>
                          </div>
                        ))}
                    </div>
                  </div>
                </div>
              )}

{/* Resumen */}
              <div className="p-4 bg-blue-50 rounded-md border border-blue-200">
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span>Precio unitario:</span>
                    <span>
                      $
                      {(tipoPrecioActual === "mayorista"
                        ? selectedProductoParaAgregar.precioMayorista || selectedProductoParaAgregar.precio
                        : tipoPrecioActual === "cuenta_corriente"
                          ? selectedProductoParaAgregar.precioCuentaCorriente ||
                            selectedProductoParaAgregar.precioMinorista ||
                            selectedProductoParaAgregar.precio
                          : selectedProductoParaAgregar.precioMinorista || selectedProductoParaAgregar.precio
                      ).toLocaleString()}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Cantidad:</span>
                    <span>{cantidadAAgregar} unidades</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Subtotal:</span>
                    <span>
                      $
                      {(
                        (tipoPrecioActual === "mayorista"
                          ? selectedProductoParaAgregar.precioMayorista || selectedProductoParaAgregar.precio
                          : tipoPrecioActual === "cuenta_corriente"
                            ? selectedProductoParaAgregar.precioCuentaCorriente ||
                              selectedProductoParaAgregar.precioMinorista ||
                              selectedProductoParaAgregar.precio
                            : selectedProductoParaAgregar.precioMinorista || selectedProductoParaAgregar.precio) *
                        Number.parseInt(cantidadAAgregar || "1")
                      ).toLocaleString()}
                    </span>
                  </div>
                  {descuentoProductoModal.valor && Number.parseFloat(descuentoProductoModal.valor) > 0 && (
                    <>
                      <div className="flex justify-between text-red-600">
                        <span>Descuento:</span>
                        <span>
                          {descuentoProductoModal.tipo === "porcentaje"
                            ? `-${descuentoProductoModal.valor}%`
                            : `-$${Number.parseFloat(descuentoProductoModal.valor).toLocaleString()}`}
                        </span>
                      </div>
                      <div className="flex justify-between font-bold text-lg border-t pt-2">
                        <span>Total final:</span>
                        <span>
                          ${(() => {
                            const precio =
                              tipoPrecioActual === "mayorista"
                                ? selectedProductoParaAgregar.precioMayorista || selectedProductoParaAgregar.precio
                                : tipoPrecioActual === "cuenta_corriente"
                                  ? selectedProductoParaAgregar.precioCuentaCorriente ||
                                    selectedProductoParaAgregar.precioMinorista ||
                                    selectedProductoParaAgregar.precio
                                  : selectedProductoParaAgregar.precioMinorista || selectedProductoParaAgregar.precio
                            const cantidad = Number.parseInt(cantidadAAgregar || "1")
                            const subtotal = precio * cantidad

if (descuentoProductoModal.tipo === "porcentaje") {
                              const descuento = (subtotal * Number.parseFloat(descuentoProductoModal.valor)) / 100
                              return (subtotal - descuento).toLocaleString()
                            } else {
                              const descuento = Number.parseFloat(descuentoProductoModal.valor) * cantidad
                              return Math.max(0, subtotal - descuento).toLocaleString()
                            }
                          })()}
                        </span>
                      </div>
                    </>
                  )}
                </div>
              </div>
            </div>
          )}

<DialogFooter>
            <Button variant="outline" onClick={() => setShowAgregarProductoDialog(false)}>
              {modoModal === "agregar" ? "Cancelar" : "Cerrar"}
            </Button>
            {modoModal === "agregar" && (
              <Button
                onClick={confirmarAgregarProducto}
                className="bg-yellow-500 hover:bg-yellow-600 text-black"
                disabled={
                  !cantidadAAgregar ||
                  Number.parseInt(cantidadAAgregar) <= 0 ||
                  Number.parseInt(cantidadAAgregar) > selectedProductoParaAgregar?.stock
                }
              >
                <ShoppingCart className="mr-2 h-4 w-4" />
                Agregar al carrito
              </Button>
            )}
            {modoModal === "ver" && (
              <Button
                onClick={() => abrirDescuentoProducto(selectedProductoParaAgregar?.id)}
                className="bg-yellow-500 hover:bg-yellow-600 text-black"
              >
                <Tag className="mr-2 h-4 w-4" />
                Editar descuento
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import {
  Users,
  Search,
  Plus,
  Pencil,
  Trash2,
  Filter,
  ArrowUpDown,
  ShoppingBag,
  Download,
  RefreshCw,
  Building2,
  User,
  StickyNote,
  AlertCircle,
  Send,
  Clock,
  CreditCard,
  DollarSign,
  Ban,
  History,
  X,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/components/ui/use-toast"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ScrollArea } from "@/components/ui/scroll-area"

// Tipos de cliente
type TipoCliente = "fisica" | "juridica"

// Tipo para notas
interface Nota {
  id: number
  texto: string
  fecha: string
  usuario: {
    id: number
    nombre: string
    avatar?: string
    iniciales: string
  }
}

// Tipo para línea de crédito
interface LineaCredito {
  id: number
  fechaInicio: string
  fechaCierre?: string
  montoMaximo: number
  totalAdeudado: number
  interesPoMora: number
  plazoMoraEnDias: number
  estado: "activa" | "cerrada"
  pagos: PagoLineaCredito[]
  compras: CompraLineaCredito[]
}

// Tipo para pagos de línea de crédito
interface PagoLineaCredito {
  id: number
  fecha: string
  monto: number
  metodoPago: string
  comprobante: string
  observaciones?: string
  compraAsociada?: {
    id: number
    fecha: string
    comprobante: string
    monto: number
  }
}

// Tipo para compras con línea de crédito
interface CompraLineaCredito {
  id: number
  fecha: string
  monto: number
  productos: string[]
  comprobante: string
}

// Tipos de venta
const tiposVenta = [
  { value: "contado", label: "Contado" },
  { value: "credito", label: "Crédito" },
  { value: "tarjeta", label: "Tarjeta" },
  { value: "transferencia", label: "Transferencia" },
  { value: "cheque", label: "Cheque" },
]

// Situaciones frente al IVA
const situacionesIVA = [
  { value: "responsable_inscripto", label: "Responsable Inscripto" },
  { value: "monotributo", label: "Monotributista" },
  { value: "exento", label: "Exento" },
  { value: "consumidor_final", label: "Consumidor Final" },
]

// Categorías de clientes
const categoriasClientes = [
  { id: 1, nombre: "VIP", color: "gold" },
  { id: 2, nombre: "Frecuente", color: "green" },
  { id: 3, nombre: "Educativo", color: "blue" },
  { id: 4, nombre: "Corporativo", color: "purple" },
  { id: 5, nombre: "Nuevo", color: "orange" },
]

// Usuarios del sistema (para las notas)
const usuarios = [
  { id: 1, nombre: "Rodrigo Pérez", iniciales: "RP", avatar: "/avatars/rodrigo.png" },
  { id: 2, nombre: "Luis Gómez", iniciales: "LG", avatar: "/avatars/luis.png" },
  { id: 3, nombre: "María Silva", iniciales: "MS", avatar: "/avatars/maria.png" },
  { id: 4, nombre: "Ana Torres", iniciales: "AT", avatar: "/avatars/ana.png" },
]

// Usuario actual simulado
const usuarioActual = usuarios[0]

// Datos de ejemplo - clientes físicos con notas como array
const clientesFisicos = [
  {
    id: 1,
    tipo: "fisica" as TipoCliente,
    dni: "12345678",
    nombre: "Juan",
    apellido: "Pérez",
    direccion: "Av. Siempreviva 123",
    fechaNacimiento: "1985-05-15",
    email: "juan.perez@email.com",
    telefono: "1122334455",
    compras: 12,
    tipoVentaDefecto: "contado",
    descuentoEstandar: 5,
    descuentoMaximo: 10,
    notas: [
      {
        id: 1,
        texto: "Cliente habitual. Prefiere ser contactado por WhatsApp. Suele comprar libros de historia.",
        fecha: "2023-10-15T14:30:00",
        usuario: usuarios[0],
      },
      {
        id: 2,
        texto: "Siempre paga con billetes grandes, tener cambio disponible.",
        fecha: "2023-11-20T09:15:00",
        usuario: usuarios[1],
      },
    ],
    lineasCredito: [
      {
        id: 1,
        fechaInicio: "2023-01-01T00:00:00",
        fechaCierre: "2023-01-31T23:59:59",
        montoMaximo: 5000,
        totalAdeudado: 0,
        interesPoMora: 5,
        plazoMoraEnDias: 10,
        estado: "cerrada",
        pagos: [
          {
            id: 1,
            fecha: "2023-01-15T14:30:00",
            monto: 2000,
            metodoPago: "Efectivo",
            comprobante: "PAG-00001",
            compraAsociada: {
              id: 1,
              fecha: "2023-01-05T11:30:00",
              comprobante: "FAC-00001",
              monto: 2500,
            },
          },
          {
            id: 2,
            fecha: "2023-01-28T10:15:00",
            monto: 3000,
            metodoPago: "Transferencia",
            comprobante: "PAG-00002",
            compraAsociada: {
              id: 2,
              fecha: "2023-01-20T16:45:00",
              comprobante: "FAC-00002",
              monto: 2500,
            },
          },
        ],
        compras: [
          {
            id: 1,
            fecha: "2023-01-05T11:30:00",
            monto: 2500,
            productos: ["El principito", "Harry Potter y la piedra filosofal"],
            comprobante: "FAC-00001",
          },
          {
            id: 2,
            fecha: "2023-01-20T16:45:00",
            monto: 2500,
            productos: ["Cien años de soledad", "Don Quijote de la Mancha"],
            comprobante: "FAC-00002",
          },
        ],
      },
      {
        id: 2,
        fechaInicio: "2023-05-01T00:00:00",
        montoMaximo: 10000,
        totalAdeudado: 4500,
        interesPoMora: 5,
        plazoMoraEnDias: 10,
        estado: "activa",
        pagos: [
          {
            id: 3,
            fecha: "2023-05-15T14:30:00",
            monto: 3000,
            metodoPago: "Efectivo",
            comprobante: "PAG-00003",
            compraAsociada: {
              id: 3,
              fecha: "2023-05-05T11:30:00",
              comprobante: "FAC-00003",
              monto: 3500,
            },
          },
        ],
        compras: [
          {
            id: 3,
            fecha: "2023-05-05T11:30:00",
            monto: 3500,
            productos: ["El señor de los anillos", "El Hobbit"],
            comprobante: "FAC-00003",
          },
          {
            id: 4,
            fecha: "2023-05-20T16:45:00",
            monto: 4000,
            productos: ["1984", "Un mundo feliz"],
            comprobante: "FAC-00004",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    tipo: "fisica" as TipoCliente,
    dni: "23456789",
    nombre: "María",
    apellido: "González",
    direccion: "Calle Falsa 123",
    fechaNacimiento: "1990-10-20",
    email: "maria.gonzalez@email.com",
    telefono: "1133445566",
    compras: 8,
    tipoVentaDefecto: "tarjeta",
    descuentoEstandar: 0,
    descuentoMaximo: 5,
    notas: [],
  },
  {
    id: 3,
    tipo: "fisica" as TipoCliente,
    dni: "34567890",
    nombre: "Carlos",
    apellido: "Rodríguez",
    direccion: "Av. Rivadavia 1234",
    fechaNacimiento: "1978-03-25",
    email: "carlos.rodriguez@email.com",
    telefono: "1144556677",
    compras: 15,
    tipoVentaDefecto: "contado",
    descuentoEstandar: 10,
    descuentoMaximo: 15,
    notas: [
      {
        id: 3,
        texto: "Tiene problemas de movilidad. Ofrecer ayuda para llevar los libros al auto.",
        fecha: "2023-09-05T16:45:00",
        usuario: usuarios[2],
      },
    ],
  },
]

// Datos de ejemplo - clientes jurídicos con notas como array
const clientesJuridicos = [
  {
    id: 4,
    tipo: "juridica" as TipoCliente,
    cuit: "30-71234567-9",
    razonSocial: "Librería El Ateneo S.A.",
    nombreFantasia: "El Ateneo",
    situacionIVA: "responsable_inscripto",
    direccion: "Av. Santa Fe 1860",
    email: "contacto@elateneo.com",
    telefono: "1155667788",
    compras: 45,
    tipoVentaDefecto: "credito",
    descuentoEstandar: 15,
    descuentoMaximo: 25,
    notas: [
      {
        id: 4,
        texto: "Requieren factura electrónica. Contacto principal: Martín Gutiérrez (martin.gutierrez@elateneo.com)",
        fecha: "2023-08-12T11:20:00",
        usuario: usuarios[0],
      },
      {
        id: 5,
        texto: "Realizan pedidos grandes los primeros días del mes.",
        fecha: "2023-12-01T10:30:00",
        usuario: usuarios[3],
      },
    ],
    lineasCredito: [
      {
        id: 3,
        fechaInicio: "2023-01-01T00:00:00",
        fechaCierre: "2023-03-31T23:59:59",
        montoMaximo: 50000,
        totalAdeudado: 0,
        interesPoMora: 3,
        plazoMoraEnDias: 30,
        estado: "cerrada",
        pagos: [
          {
            id: 4,
            fecha: "2023-02-15T14:30:00",
            monto: 25000,
            metodoPago: "Transferencia",
            comprobante: "PAG-00004",
            compraAsociada: {
              id: 5,
              fecha: "2023-01-10T11:30:00",
              comprobante: "FAC-00005",
              monto: 30000,
            },
          },
          {
            id: 5,
            fecha: "2023-03-28T10:15:00",
            monto: 25000,
            metodoPago: "Cheque",
            comprobante: "PAG-00005",
            compraAsociada: {
              id: 6,
              fecha: "2023-02-05T16:45:00",
              comprobante: "FAC-00006",
              monto: 20000,
            },
          },
        ],
        compras: [
          {
            id: 5,
            fecha: "2023-01-10T11:30:00",
            monto: 30000,
            productos: ["Lote libros escolares primaria", "Lote útiles escolares"],
            comprobante: "FAC-00005",
          },
          {
            id: 6,
            fecha: "2023-02-05T16:45:00",
            monto: 20000,
            productos: ["Lote libros escolares secundaria", "Lote material didáctico"],
            comprobante: "FAC-00006",
          },
        ],
      },
      {
        id: 4,
        fechaInicio: "2023-04-01T00:00:00",
        montoMaximo: 100000,
        totalAdeudado: 45000,
        interesPoMora: 3,
        plazoMoraEnDias: 30,
        estado: "activa",
        pagos: [
          {
            id: 6,
            fecha: "2023-05-15T14:30:00",
            monto: 35000,
            metodoPago: "Transferencia",
            comprobante: "PAG-00006",
            compraAsociada: {
              id: 7,
              fecha: "2023-04-10T11:30:00",
              comprobante: "FAC-00007",
              monto: 40000,
            },
          },
        ],
        compras: [
          {
            id: 7,
            fecha: "2023-04-10T11:30:00",
            monto: 40000,
            productos: ["Lote libros best-sellers", "Lote papelería premium"],
            comprobante: "FAC-00007",
          },
          {
            id: 8,
            fecha: "2023-05-05T16:45:00",
            monto: 40000,
            productos: ["Lote libros académicos", "Lote artículos de oficina"],
            comprobante: "FAC-00008",
          },
        ],
      },
    ],
  },
  {
    id: 5,
    tipo: "juridica" as TipoCliente,
    cuit: "30-58925614-5",
    razonSocial: "Colegio San Martín",
    nombreFantasia: "Instituto San Martín",
    situacionIVA: "exento",
    direccion: "Av. Libertador 4500",
    email: "administracion@sanmartin.edu.ar",
    telefono: "1166778899",
    compras: 23,
    tipoVentaDefecto: "transferencia",
    descuentoEstandar: 20,
    descuentoMaximo: 30,
    notas: [
      {
        id: 6,
        texto:
          "Realizan pedidos grandes al inicio del ciclo lectivo (febrero-marzo). Solicitan presupuesto con anticipación.",
        fecha: "2023-11-15T14:00:00",
        usuario: usuarios[1],
      },
    ],
  },
]

// Combinamos ambos tipos de clientes
const clientes = [...clientesFisicos, ...clientesJuridicos]

// Datos de compras de ejemplo
const comprasCliente = [
  {
    id: 1,
    fecha: "2023-05-15",
    total: 3500,
    productos: ["El principito", "Harry Potter y la piedra filosofal"],
    sucursal: "Centro",
  },
  {
    id: 2,
    fecha: "2023-06-20",
    total: 2200,
    productos: ["Cien años de soledad"],
    sucursal: "Norte",
  },
  {
    id: 3,
    fecha: "2023-07-10",
    total: 4300,
    productos: ["El señor de los anillos", "Don Quijote de la Mancha"],
    sucursal: "Centro",
  },
]

// Datos de pagos de ejemplo
const pagosCliente = [
  {
    id: 1,
    fecha: "2023-05-15",
    monto: 3500,
    metodoPago: "Efectivo",
    comprobante: "PAG-00123",
    estado: "completado",
  },
  {
    id: 2,
    fecha: "2023-06-20",
    monto: 2200,
    metodoPago: "Transferencia",
    comprobante: "PAG-00145",
    estado: "completado",
  },
  {
    id: 3,
    fecha: "2023-07-10",
    monto: 4300,
    metodoPago: "Tarjeta de crédito",
    comprobante: "PAG-00167",
    estado: "completado",
  },
  {
    id: 4,
    fecha: "2023-08-05",
    monto: 1800,
    metodoPago: "Cheque",
    comprobante: "PAG-00189",
    estado: "completado",
  },
  {
    id: 5,
    fecha: "2023-09-12",
    monto: 5200,
    metodoPago: "Efectivo",
    comprobante: "PAG-00201",
    estado: "completado",
  },
]

export default function ClientesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [showHistorialDialog, setShowHistorialDialog] = useState(false)
  const [showNotasDialog, setShowNotasDialog] = useState(false)
  const [showLineaCreditoDialog, setShowLineaCreditoDialog] = useState(false)
  const [showNuevaLineaCreditoDialog, setShowNuevaLineaCreditoDialog] = useState(false)
  const [showPagoLineaCreditoDialog, setShowPagoLineaCreditoDialog] = useState(false)
  const [selectedClient, setSelectedClient] = useState<any>(null)
  const [tipoCliente, setTipoCliente] = useState<TipoCliente>("fisica")
  const [nuevaNota, setNuevaNota] = useState("")
  const [formDataLineaCredito, setFormDataLineaCredito] = useState({
    montoMaximo: 0,
    interesPoMora: 0,
    plazoMoraEnDias: 0,
  })
  const [formDataPagoLineaCredito, setFormDataPagoLineaCredito] = useState({
    tipoOperacion: "pago",
    monto: 0,
    metodoPago: "efectivo",
    observaciones: "",
    comprasAsociadas: [] as string[],
    archivosAdjuntos: [] as Array<{ file: File; titulo: string }>,
    sinAsociarVentas: false,
  })

// Estado para formulario de persona física
  const [formDataFisica, setFormDataFisica] = useState({
    dni: "",
    nombre: "",
    apellido: "",
    direccion: "",
    fechaNacimiento: "",
    email: "",
    telefono: "",
    categoriaId: "",
    tipoVentaDefecto: "contado",
    descuentoEstandar: 0,
    descuentoMaximo: 0,
    notas: [] as Nota[],
  })

// Estado para formulario de persona jurídica
  const [formDataJuridica, setFormDataJuridica] = useState({
    cuit: "",
    razonSocial: "",
    nombreFantasia: "",
    situacionIVA: "responsable_inscripto",
    direccion: "",
    email: "",
    telefono: "",
    categoriaId: "",
    tipoVentaDefecto: "contado",
    descuentoEstandar: 0,
    descuentoMaximo: 0,
    notas: [] as Nota[],
  })

const [searchVentasAsociadas, setSearchVentasAsociadas] = useState("")

const { toast } = useToast()

// Filtrar clientes basados en la búsqueda
  const filteredClientes = clientes.filter((cliente) => {
    if (cliente.tipo === "fisica") {
      return (
        cliente.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cliente.apellido.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cliente.dni.includes(searchTerm)
      )
    } else {
      return (
        cliente.razonSocial.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cliente.nombreFantasia.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cliente.cuit.includes(searchTerm)
      )
    }
  })

// Manejar cambios en el formulario de persona física
  const handleFormChangeFisica = (field: string, value: any) => {
    setFormDataFisica({
      ...formDataFisica,
      [field]: value,
    })

// Si se cambia el descuento estándar, asegurarse de que el descuento máximo sea al menos igual
    if (field === "descuentoEstandar" && Number(value) > formDataFisica.descuentoMaximo) {
      setFormDataFisica((prev) => ({
        ...prev,
        descuentoMaximo: Number(value),
      }))
    }
  }

// Manejar cambios en el formulario de persona jurídica
  const handleFormChangeJuridica = (field: string, value: any) => {
    setFormDataJuridica({
      ...formDataJuridica,
      [field]: value,
    })

// Si se cambia el descuento estándar, asegurarse de que el descuento máximo sea al menos igual
    if (field === "descuentoEstandar" && Number(value) > formDataJuridica.descuentoMaximo) {
      setFormDataJuridica((prev) => ({
        ...prev,
        descuentoMaximo: Number(value),
      }))
    }
  }

// Abrir diálogo de edición
  const openEditDialog = (cliente: any) => {
    setSelectedClient(cliente)
    setTipoCliente(cliente.tipo)

if (cliente.tipo === "fisica") {
      setFormDataFisica({
        dni: cliente.dni,
        nombre: cliente.nombre,
        apellido: cliente.apellido,
        direccion: cliente.direccion,
        fechaNacimiento: cliente.fechaNacimiento,
        email: cliente.email,
        telefono: cliente.telefono,
        categoriaId: cliente.categoriaId || "",
        tipoVentaDefecto: cliente.tipoVentaDefecto || "contado",
        descuentoEstandar: cliente.descuentoEstandar || 0,
        descuentoMaximo: cliente.descuentoMaximo || 0,
        notas: cliente.notas || [],
      })
    } else {
      setFormDataJuridica({
        cuit: cliente.cuit,
        razonSocial: cliente.razonSocial,
        nombreFantasia: cliente.nombreFantasia,
        situacionIVA: cliente.situacionIVA,
        direccion: cliente.direccion,
        email: cliente.email,
        telefono: cliente.telefono,
        categoriaId: cliente.categoriaId || "",
        tipoVentaDefecto: cliente.tipoVentaDefecto || "contado",
        descuentoEstandar: cliente.descuentoEstandar || 0,
        descuentoMaximo: cliente.descuentoMaximo || 0,
        notas: cliente.notas || [],
      })
    }

setShowEditDialog(true)
  }

// Abrir diálogo de eliminación
  const openDeleteDialog = (cliente: any) => {
    setSelectedClient(cliente)
    setShowDeleteDialog(true)
  }

// Abrir historial de compras
  const openHistorialDialog = (cliente: any) => {
    setSelectedClient(cliente)
    setShowHistorialDialog(true)
  }

// Abrir diálogo de notas
  const openNotasDialog = (cliente: any) => {
    setSelectedClient(cliente)
    setNuevaNota("")
    setShowNotasDialog(true)
  }

// Abrir diálogo de línea de crédito
  const openLineaCreditoDialog = (cliente: any) => {
    setSelectedClient(cliente)
    setShowLineaCreditoDialog(true)
  }

// Abrir diálogo de nueva línea de crédito
  const openNuevaLineaCreditoDialog = () => {
    setFormDataLineaCredito({
      montoMaximo: 0,
      interesPoMora: 0,
      plazoMoraEnDias: 0,
    })
    setShowNuevaLineaCreditoDialog(true)
  }

// Abrir diálogo de pago de línea de crédito
  const openPagoLineaCreditoDialog = () => {
    setFormDataPagoLineaCredito({
      tipoOperacion: "pago",
      monto: 0,
      metodoPago: "efectivo",
      observaciones: "",
      comprasAsociadas: [],
      archivosAdjuntos: [],
      sinAsociarVentas: false,
    })
    setShowPagoLineaCreditoDialog(true)
  }

// Crear nueva línea de crédito
  const crearLineaCredito = () => {
    // Aquí iría la lógica para crear una nueva línea de crédito
    console.log("Creando nueva línea de crédito:", formDataLineaCredito)

toast({
      title: "Línea de crédito creada",
      description: "La línea de crédito ha sido creada correctamente",
    })

setShowNuevaLineaCreditoDialog(false)
  }

// Registrar pago a línea de crédito
  const registrarPagoLineaCredito = () => {
    console.log("Registrando operación en línea de crédito:", formDataPagoLineaCredito)

const tipoTexto =
      formDataPagoLineaCredito.tipoOperacion === "pago"
        ? "Pago registrado"
        : formDataPagoLineaCredito.tipoOperacion === "debito"
          ? "Débito registrado"
          : "Crédito registrado"

toast({
      title: tipoTexto,
      description: `La operación ha sido registrada correctamente`,
    })

setShowPagoLineaCreditoDialog(false)
  }

// Cerrar línea de crédito
  const cerrarLineaCredito = (lineaId: number) => {
    // Aquí iría la lógica para cerrar una línea de crédito
    console.log("Cerrando línea de crédito:", lineaId)

toast({
      title: "Línea de crédito cerrada",
      description: "La línea de crédito ha sido cerrada correctamente",
    })
  }

// Obtener línea de crédito activa
  const getLineaCreditoActiva = (cliente: any) => {
    if (!cliente || !cliente.lineasCredito) return null
    return cliente.lineasCredito.find((linea: LineaCredito) => linea.estado === "activa")
  }

// Calcular saldo disponible
  const calcularSaldoDisponible = (linea: LineaCredito) => {
    if (!linea) return 0
    return Math.max(0, linea.montoMaximo - linea.totalAdeudado)
  }

// Verificar si una línea está en mora
  const estaEnMora = (linea: LineaCredito) => {
    if (!linea || linea.estado !== "activa" || linea.totalAdeudado === 0) return false

// Obtener la fecha de la última compra
    const ultimaCompra = linea.compras.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())[0]

if (!ultimaCompra) return false

const fechaUltimaCompra = new Date(ultimaCompra.fecha)
    const hoy = new Date()
    const diasTranscurridos = Math.floor((hoy.getTime() - fechaUltimaCompra.getTime()) / (1000 * 60 * 60 * 24))

return diasTranscurridos > linea.plazoMoraEnDias
  }

// Calcular interés por mora
  const calcularInteresPorMora = (linea: LineaCredito) => {
    if (!estaEnMora(linea)) return 0
    return (linea.totalAdeudado * linea.interesPoMora) / 100
  }

// Agregar nueva nota
  const agregarNota = () => {
    if (!nuevaNota.trim()) return

// Crear nueva nota
    const nuevaNotaObj: Nota = {
      id: Date.now(), // ID único basado en timestamp
      texto: nuevaNota,
      fecha: new Date().toISOString(),
      usuario: usuarioActual,
    }

// Actualizar cliente seleccionado (simulado)
    if (selectedClient) {
      // En un entorno real, aquí se enviaría la nota al servidor
      console.log("Agregando nota para cliente:", selectedClient.id, nuevaNotaObj)

// Simulamos la actualización
      toast({
        title: "Nota agregada",
        description: "La nota ha sido agregada correctamente",
      })

// Limpiar campo de nueva nota
      setNuevaNota("")
    }
  }

// Resetear formularios
  const resetForms = () => {
    setFormDataFisica({
      dni: "",
      nombre: "",
      apellido: "",
      direccion: "",
      fechaNacimiento: "",
      email: "",
      telefono: "",
      categoriaId: "",
      tipoVentaDefecto: "contado",
      descuentoEstandar: 0,
      descuentoMaximo: 0,
      notas: [],
    })

setFormDataJuridica({
      cuit: "",
      razonSocial: "",
      nombreFantasia: "",
      situacionIVA: "responsable_inscripto",
      direccion: "",
      email: "",
      telefono: "",
      categoriaId: "",
      tipoVentaDefecto: "contado",
      descuentoEstandar: 0,
      descuentoMaximo: 0,
      notas: [],
    })

setTipoCliente("fisica")
  }

// Guardar cliente (nuevo o editado)
  const saveClient = () => {
    // Aquí iría la lógica para guardar el cliente según su tipo
    if (tipoCliente === "fisica") {
      console.log("Guardando cliente persona física:", formDataFisica)
    } else {
      console.log("Guardando cliente persona jurídica:", formDataJuridica)
    }

if (showAddDialog) {
      setShowAddDialog(false)
    } else if (showEditDialog) {
      setShowEditDialog(false)
    }

resetForms()
  }

// Eliminar cliente
  const deleteClient = () => {
    // Aquí iría la lógica para eliminar el cliente
    console.log("Eliminando cliente:", selectedClient)
    setShowDeleteDialog(false)
  }

// Refrescar listado de clientes
  const refreshClients = () => {
    // Aquí iría la lógica para recargar los clientes desde el servidor
    toast({
      title: "Listado actualizado",
      description: "La lista de clientes ha sido actualizada correctamente",
    })
  }

// Obtener el nombre para mostrar según el tipo de cliente
  const getClientDisplayName = (cliente: any) => {
    if (cliente.tipo === "fisica") {
      return `${cliente.apellido}, ${cliente.nombre}`
    } else {
      return cliente.razonSocial
    }
  }

// Obtener el identificador para mostrar según el tipo de cliente
  const getClientIdentifier = (cliente: any) => {
    if (cliente.tipo === "fisica") {
      return `DNI: ${cliente.dni}`
    } else {
      return `CUIT: ${cliente.cuit}`
    }
  }

// Obtener el color de badge según el color de la categoría
  const getBadgeVariant = (color: string) => {
    switch (color) {
      case "gold":
        return "bg-yellow-100 text-yellow-800 border-yellow-300"
      case "green":
        return "bg-green-100 text-green-800 border-green-300"
      case "blue":
        return "bg-blue-100 text-blue-800 border-blue-300"
      case "purple":
        return "bg-purple-100 text-purple-800 border-purple-300"
      case "orange":
        return "bg-orange-100 text-orange-800 border-orange-300"
      case "red":
        return "bg-red-100 text-red-800 border-red-300"
      case "gray":
        return "bg-gray-100 text-gray-800 border-gray-300"
      case "pink":
        return "bg-pink-100 text-pink-800 border-pink-300"
      default:
        return "bg-gray-100 text-gray-800 border-gray-300"
    }
  }

// Formatear fecha para mostrar
  const formatearFecha = (fechaISO: string) => {
    const fecha = new Date(fechaISO)
    return new Intl.DateTimeFormat("es-AR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(fecha)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Gestión de Clientes</h1>
          <p className="text-muted-foreground">Administre la información de sus clientes</p>
        </div>
        <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
          <DialogTrigger asChild>
            <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
              <Plus className="mr-2 h-4 w-4" />
              Nuevo cliente
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Agregar nuevo cliente</DialogTitle>
              <DialogDescription>
                Complete los datos del cliente. Haga clic en guardar cuando termine.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <RadioGroup
                value={tipoCliente}
                onValueChange={(value) => setTipoCliente(value as TipoCliente)}
                className="flex space-x-4"
              >
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="fisica" id="fisica" />
                  <Label htmlFor="fisica" className="flex items-center">
                    <User className="mr-2 h-4 w-4" />
                    Persona Física
                  </Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="juridica" id="juridica" />
                  <Label htmlFor="juridica" className="flex items-center">
                    <Building2 className="mr-2 h-4 w-4" />
                    Persona Jurídica
                  </Label>
                </div>
              </RadioGroup>

{tipoCliente === "fisica" ? (
                <>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="dni">DNI</Label>
                      <Input
                        id="dni"
                        value={formDataFisica.dni}
                        onChange={(e) => handleFormChangeFisica("dni", e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="fechaNacimiento">Fecha de nacimiento</Label>
                      <Input
                        id="fechaNacimiento"
                        type="date"
                        value={formDataFisica.fechaNacimiento}
                        onChange={(e) => handleFormChangeFisica("fechaNacimiento", e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="nombre">Nombre</Label>
                      <Input
                        id="nombre"
                        value={formDataFisica.nombre}
                        onChange={(e) => handleFormChangeFisica("nombre", e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="apellido">Apellido</Label>
                      <Input
                        id="apellido"
                        value={formDataFisica.apellido}
                        onChange={(e) => handleFormChangeFisica("apellido", e.target.value)}
                      />
                    </div>
                  </div>
                </>
              ) : (
                <>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="cuit">CUIT</Label>
                      <Input
                        id="cuit"
                        value={formDataJuridica.cuit}
                        onChange={(e) => handleFormChangeJuridica("cuit", e.target.value)}
                        placeholder="30-71234567-9"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="situacionIVA">Situación frente al IVA</Label>
                      <Select
                        value={formDataJuridica.situacionIVA}
                        onValueChange={(value) => handleFormChangeJuridica("situacionIVA", value)}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione situación IVA" />
                        </SelectTrigger>
                        <SelectContent>
                          {situacionesIVA.map((situacion) => (
                            <SelectItem key={situacion.value} value={situacion.value}>
                              {situacion.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="razonSocial">Razón Social</Label>
                      <Input
                        id="razonSocial"
                        value={formDataJuridica.razonSocial}
                        onChange={(e) => handleFormChangeJuridica("razonSocial", e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="nombreFantasia">Nombre de Fantasía</Label>
                      <Input
                        id="nombreFantasia"
                        value={formDataJuridica.nombreFantasia}
                        onChange={(e) => handleFormChangeJuridica("nombreFantasia", e.target.value)}
                      />
                    </div>
                  </div>
                </>
              )}

<div className="space-y-2">
                <Label htmlFor="categoria">Categoría</Label>
                <Select
                  value={tipoCliente === "fisica" ? formDataFisica.categoriaId : formDataJuridica.categoriaId}
                  onValueChange={(value) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("categoriaId", value)
                      : handleFormChangeJuridica("categoriaId", value)
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccione una categoría" />
                  </SelectTrigger>
                  <SelectContent>
                    {categoriasClientes.map((categoria) => (
                      <SelectItem key={categoria.id} value={categoria.id.toString()}>
                        <div className="flex items-center">
                          <Badge variant="outline" className={`mr-2 ${getBadgeVariant(categoria.color)}`}>
                            <span className="w-2 h-2"></span>
                          </Badge>
                          {categoria.nombre}
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="tipoVentaDefecto">Tipo de venta por defecto</Label>
                <Select
                  value={tipoCliente === "fisica" ? formDataFisica.tipoVentaDefecto : formDataJuridica.tipoVentaDefecto}
                  onValueChange={(value) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("tipoVentaDefecto", value)
                      : handleFormChangeJuridica("tipoVentaDefecto", value)
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccione tipo de venta" />
                  </SelectTrigger>
                  <SelectContent>
                    {tiposVenta.map((tipo) => (
                      <SelectItem key={tipo.value} value={tipo.value}>
                        {tipo.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="descuentoEstandar">Descuento estándar (%)</Label>
                  <Input
                    id="descuentoEstandar"
                    type="number"
                    min="0"
                    max="100"
                    value={
                      tipoCliente === "fisica" ? formDataFisica.descuentoEstandar : formDataJuridica.descuentoEstandar
                    }
                    onChange={(e) =>
                      tipoCliente === "fisica"
                        ? handleFormChangeFisica("descuentoEstandar", Number(e.target.value))
                        : handleFormChangeJuridica("descuentoEstandar", Number(e.target.value))
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="descuentoMaximo">Descuento máximo (%)</Label>
                  <Input
                    id="descuentoMaximo"
                    type="number"
                    min={
                      tipoCliente === "fisica" ? formDataFisica.descuentoEstandar : formDataJuridica.descuentoEstandar
                    }
                    max="100"
                    value={tipoCliente === "fisica" ? formDataFisica.descuentoMaximo : formDataJuridica.descuentoMaximo}
                    onChange={(e) =>
                      tipoCliente === "fisica"
                        ? handleFormChangeFisica("descuentoMaximo", Number(e.target.value))
                        : handleFormChangeJuridica("descuentoMaximo", Number(e.target.value))
                    }
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="direccion">Dirección</Label>
                <Input
                  id="direccion"
                  value={tipoCliente === "fisica" ? formDataFisica.direccion : formDataJuridica.direccion}
                  onChange={(e) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("direccion", e.target.value)
                      : handleFormChangeJuridica("direccion", e.target.value)
                  }
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    value={tipoCliente === "fisica" ? formDataFisica.email : formDataJuridica.email}
                    onChange={(e) =>
                      tipoCliente === "fisica"
                        ? handleFormChangeFisica("email", e.target.value)
                        : handleFormChangeJuridica("email", e.target.value)
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="telefono">Teléfono</Label>
                  <Input
                    id="telefono"
                    value={tipoCliente === "fisica" ? formDataFisica.telefono : formDataJuridica.telefono}
                    onChange={(e) =>
                      tipoCliente === "fisica"
                        ? handleFormChangeFisica("telefono", e.target.value)
                        : handleFormChangeJuridica("telefono", e.target.value)
                    }
                  />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowAddDialog(false)}>
                Cancelar
              </Button>
              <Button onClick={saveClient} className="bg-yellow-500 hover:bg-yellow-600 text-black">
                Guardar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center">
              <Users className="mr-2 h-5 w-5" />
              Listado de clientes
            </CardTitle>
            <div className="flex space-x-2">
              <Button
                variant="outline"
                size="icon"
                onClick={refreshClients}
                className="h-9 w-9 bg-transparent"
                title="Refrescar listado"
              >
                <RefreshCw className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                onClick={() => {
                  toast({
                    title: "Exportación exitosa",
                    description: "Los datos de clientes han sido exportados a Excel correctamente",
                  })
                }}
              >
                <Download className="mr-2 h-4 w-4" />
                Exportar a Excel
              </Button>
            </div>
          </div>
          <CardDescription>Gestione la información de sus clientes</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                <Input
                  type="search"
                  placeholder="Buscar por nombre, apellido, razón social, DNI o CUIT..."
                  className="pl-8"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
            </div>

<div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px]">ID</TableHead>
                    <TableHead className="w-[80px]">Tipo</TableHead>
                    <TableHead className="w-[120px]">Categoría</TableHead>
                    <TableHead className="w-[120px]">Identificación</TableHead>
                    <TableHead>
                      <div className="flex items-center">
                        Nombre / Razón Social
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Tipo Venta</TableHead>
                    <TableHead>Descuentos</TableHead>
                    <TableHead>Notas</TableHead>
                    <TableHead>
                      <div className="flex items-center">
                        Compras
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Línea Crédito</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredClientes.map((cliente) => (
                    <TableRow key={cliente.id}>
                      <TableCell className="font-medium">{cliente.id}</TableCell>
                      <TableCell>
                        {cliente.tipo === "fisica" ? (
                          <Badge variant="outline" className="bg-blue-50">
                            <User className="mr-1 h-3 w-3" />
                            Física
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="bg-amber-50">
                            <Building2 className="mr-1 h-3 w-3" />
                            Jurídica
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        {cliente.categoriaId && (
                          <Badge
                            variant="outline"
                            className={getBadgeVariant(
                              categoriasClientes.find((cat) => cat.id.toString() === cliente.categoriaId)?.color ||
                                "gray",
                            )}
                          >
                            {categoriasClientes.find((cat) => cat.id.toString() === cliente.categoriaId)?.nombre ||
                              "Sin categoría"}
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell className="font-medium">
                        {cliente.tipo === "fisica" ? cliente.dni : cliente.cuit}
                      </TableCell>
                      <TableCell>
                        {cliente.tipo === "fisica" ? (
                          `${cliente.apellido}, ${cliente.nombre}`
                        ) : (
                          <div>
                            <div>{cliente.razonSocial}</div>
                            {cliente.nombreFantasia && (
                              <div className="text-xs text-muted-foreground">{cliente.nombreFantasia}</div>
                            )}
                          </div>
                        )}
                      </TableCell>
                      <TableCell>
                        {tiposVenta.find((t) => t.value === cliente.tipoVentaDefecto)?.label || "Contado"}
                      </TableCell>
                      <TableCell>
                        <div className="text-xs">
                          <div>Estándar: {cliente.descuentoEstandar}%</div>
                          <div>Máximo: {cliente.descuentoMaximo}%</div>
                        </div>
                      </TableCell>
                      <TableCell>
                        {cliente.notas && cliente.notas.length > 0 ? (
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  className="text-amber-500 flex items-center"
                                  onClick={() => openNotasDialog(cliente)}
                                >
                                  <StickyNote className="h-4 w-4 mr-1" />
                                  <span className="font-medium">{cliente.notas.length}</span>
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent className="max-w-xs">
                                <p className="text-xs font-medium mb-1">Última nota:</p>
                                <p className="text-xs">
                                  {cliente.notas.length > 0
                                    ? cliente.notas
                                        .sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())[0]
                                        .texto.substring(0, 100) + (cliente.notas[0].texto.length > 100 ? "..." : "")
                                    : "Sin notas"}
                                </p>
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        ) : (
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-gray-400"
                            onClick={() => openNotasDialog(cliente)}
                          >
                            <StickyNote className="h-4 w-4 mr-1" />
                            <span>0</span>
                          </Button>
                        )}
                      </TableCell>
                      <TableCell>{cliente.compras}</TableCell>
                      <TableCell>
                        <Button variant="ghost" size="icon" onClick={() => openLineaCreditoDialog(cliente)}>
                          <CreditCard className="h-4 w-4" />
                        </Button>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="icon" onClick={() => openHistorialDialog(cliente)}>
                            <ShoppingBag className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" onClick={() => openEditDialog(cliente)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-red-500"
                            onClick={() => openDeleteDialog(cliente)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

{tipoCliente === "fisica" ? (
              <>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="edit-dni">DNI</Label>
                    <Input
                      id="edit-dni"
                      value={formDataFisica.dni}
                      onChange={(e) => handleFormChangeFisica("dni", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="edit-fechaNacimiento">Fecha de nacimiento</Label>
                    <Input
                      id="edit-fechaNacimiento"
                      type="date"
                      value={formDataFisica.fechaNacimiento}
                      onChange={(e) => handleFormChangeFisica("fechaNacimiento", e.target.value)}
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="edit-nombre">Nombre</Label>
                    <Input
                      id="edit-nombre"
                      value={formDataFisica.nombre}
                      onChange={(e) => handleFormChangeFisica("nombre", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="edit-apellido">Apellido</Label>
                    <Input
                      id="edit-apellido"
                      value={formDataFisica.apellido}
                      onChange={(e) => handleFormChangeFisica("apellido", e.target.value)}
                    />
                  </div>
                </div>
              </>
            ) : (
              <>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="edit-cuit">CUIT</Label>
                    <Input
                      id="edit-cuit"
                      value={formDataJuridica.cuit}
                      onChange={(e) => handleFormChangeJuridica("cuit", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="edit-situacionIVA">Situación frente al IVA</Label>
                    <Select
                      value={formDataJuridica.situacionIVA}
                      onChange={(value) => handleFormChangeJuridica("situacionIVA", value)}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccione situación IVA" />
                      </SelectTrigger>
                      <SelectContent>
                        {situacionesIVA.map((situacion) => (
                          <SelectItem key={situacion.value} value={situacion.value}>
                            {situacion.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="edit-razonSocial">Razón Social</Label>
                    <Input
                      id="edit-razonSocial"
                      value={formDataJuridica.razonSocial}
                      onChange={(e) => handleFormChangeJuridica("razonSocial", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="edit-nombreFantasia">Nombre de Fantasía</Label>
                    <Input
                      id="edit-nombreFantasia"
                      value={formDataJuridica.nombreFantasia}
                      onChange={(e) => handleFormChangeJuridica("nombreFantasia", e.target.value)}
                    />
                  </div>
                </div>
              </>
            )}

<div className="space-y-2">
              <Label htmlFor="edit-categoria">Categoría</Label>
              <Select
                value={tipoCliente === "fisica" ? formDataFisica.categoriaId : formDataJuridica.categoriaId}
                onChange={(value) =>
                  tipoCliente === "fisica"
                    ? handleFormChangeFisica("categoriaId", value)
                    : handleFormChangeJuridica("categoriaId", value)
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione una categoría" />
                </SelectTrigger>
                <SelectContent>
                  {categoriasClientes.map((categoria) => (
                    <SelectItem key={categoria.id} value={categoria.id.toString()}>
                      <div className="flex items-center">
                        <Badge variant="outline" className={`mr-2 ${getBadgeVariant(categoria.color)}`}>
                          <span className="w-2 h-2"></span>
                        </Badge>
                        {categoria.nombre}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="edit-tipoVentaDefecto">Tipo de venta por defecto</Label>
              <Select
                value={tipoCliente === "fisica" ? formDataFisica.tipoVentaDefecto : formDataJuridica.tipoVentaDefecto}
                onChange={(value) =>
                  tipoCliente === "fisica"
                    ? handleFormChangeFisica("tipoVentaDefecto", value)
                    : handleFormChangeJuridica("tipoVentaDefecto", value)
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione tipo de venta" />
                </SelectTrigger>
                <SelectContent>
                  {tiposVenta.map((tipo) => (
                    <SelectItem key={tipo.value} value={tipo.value}>
                      {tipo.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-descuentoEstandar">Descuento estándar (%)</Label>
                <Input
                  id="edit-descuentoEstandar"
                  type="number"
                  min="0"
                  max="100"
                  value={
                    tipoCliente === "fisica" ? formDataFisica.descuentoEstandar : formDataJuridica.descuentoEstandar
                  }
                  onChange={(e) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("descuentoEstandar", Number(e.target.value))
                      : handleFormChangeJuridica("descuentoEstandar", Number(e.target.value))
                  }
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-descuentoMaximo">Descuento máximo (%)</Label>
                <Input
                  id="edit-descuentoMaximo"
                  type="number"
                  min={tipoCliente === "fisica" ? formDataFisica.descuentoEstandar : formDataJuridica.descuentoEstandar}
                  max="100"
                  value={tipoCliente === "fisica" ? formDataFisica.descuentoMaximo : formDataJuridica.descuentoMaximo}
                  onChange={(e) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("descuentoMaximo", Number(e.target.value))
                      : handleFormChangeJuridica("descuentoMaximo", Number(e.target.value))
                  }
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="edit-direccion">Dirección</Label>
              <Input
                id="edit-direccion"
                value={tipoCliente === "fisica" ? formDataFisica.direccion : formDataJuridica.direccion}
                onChange={(e) =>
                  tipoCliente === "fisica"
                    ? handleFormChangeFisica("direccion", e.target.value)
                    : handleFormChangeJuridica("direccion", e.target.value)
                }
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-email">Email</Label>
                <Input
                  id="edit-email"
                  type="email"
                  value={tipoCliente === "fisica" ? formDataFisica.email : formDataJuridica.email}
                  onChange={(e) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("email", e.target.value)
                      : handleFormChangeJuridica("email", e.target.value)
                  }
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-telefono">Teléfono</Label>
                <Input
                  id="edit-telefono"
                  value={tipoCliente === "fisica" ? formDataFisica.telefono : formDataJuridica.telefono}
                  onChange={(e) =>
                    tipoCliente === "fisica"
                      ? handleFormChangeFisica("telefono", e.target.value)
                      : handleFormChangeJuridica("telefono", e.target.value)
                  }
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={saveClient} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Guardar cambios
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de historial de compras */}
      <Dialog open={showHistorialDialog} onOpenChange={setShowHistorialDialog}>
        <DialogContent className="sm:max-w-[700px]">
          <DialogHeader>
            <DialogTitle>Historial de compras</DialogTitle>
            <DialogDescription>
              {selectedClient && `Compras realizadas por ${getClientDisplayName(selectedClient)}`}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <Tabs defaultValue="compras">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="compras">Compras</TabsTrigger>
                <TabsTrigger value="pagos">Pagos</TabsTrigger>
                <TabsTrigger value="estadisticas">Estadísticas</TabsTrigger>
              </TabsList>
              <TabsContent value="compras" className="mt-4">
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Productos</TableHead>
                        <TableHead>Sucursal</TableHead>
                        <TableHead className="text-right">Total</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {comprasCliente.map((compra) => (
                        <TableRow key={compra.id}>
                          <TableCell>{new Date(compra.fecha).toLocaleDateString()}</TableCell>
                          <TableCell>
                            <ul className="list-disc list-inside">
                              {compra.productos.map((prod, index) => (
                                <li key={index}>{prod}</li>
                              ))}
                            </ul>
                          </TableCell>
                          <TableCell>{compra.sucursal}</TableCell>
                          <TableCell className="text-right">${compra.total.toLocaleString()}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </TabsContent>
              <TabsContent value="pagos" className="mt-4">
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Método de pago</TableHead>
                        <TableHead>Comprobante</TableHead>
                        <TableHead className="text-right">Monto</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {pagosCliente.map((pago) => (
                        <TableRow key={pago.id}>
                          <TableCell>{new Date(pago.fecha).toLocaleDateString()}</TableCell>
                          <TableCell>{pago.metodoPago}</TableCell>
                          <TableCell>{pago.comprobante}</TableCell>
                          <TableCell className="text-right">${pago.monto.toLocaleString()}</TableCell>
                          <TableCell className="text-right">
                            <Button
                              variant="outline"
                              size="sm"
                              className="flex items-center bg-transparent"
                              onClick={() => {
                                toast({
                                  title: "Comprobante abierto",
                                  description: `Visualizando comprobante ${pago.comprobante}`,
                                })
                              }}
                            >
                              <Download className="mr-2 h-3 w-3" />
                              Ver comprobante
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </TabsContent>
              <TabsContent value="estadisticas" className="mt-4">
                <div className="grid gap-4">
                  <Card>
                    <CardContent className="pt-6">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <p className="text-sm text-muted-foreground">Total gastado</p>
                          <p className="text-2xl font-bold">$10,000</p>
                        </div>
                        <div className="space-y-2">
                          <p className="text-sm text-muted-foreground">Compras totales</p>
                          <p className="text-2xl font-bold">15</p>
                        </div>
                        <div className="space-y-2">
                          <p className="text-sm text-muted-foreground">Primera compra</p>
                          <p className="text-lg">15/03/2022</p>
                        </div>
                        <div className="space-y-2">
                          <p className="text-sm text-muted-foreground">Última compra</p>
                          <p className="text-lg">10/07/2023</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-base">Categorías más compradas</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span>Literatura</span>
                          <span>45%</span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2">
                          <div className="bg-yellow-500 h-2 rounded-full" style={{ width: "45%" }}></div>
                        </div>
                        <div className="flex justify-between">
                          <span>Infantil</span>
                          <span>30%</span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2">
                          <div className="bg-yellow-500 h-2 rounded-full" style={{ width: "30%" }}></div>
                        </div>
                        <div className="flex justify-between">
                          <span>Fantasía</span>
                          <span>25%</span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2">
                          <div className="bg-yellow-500 h-2 rounded-full" style={{ width: "25%" }}></div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>
            </Tabs>
          </div>
          <DialogFooter>
            <Button onClick={() => setShowHistorialDialog(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de notas */}
      <Dialog open={showNotasDialog} onOpenChange={setShowNotasDialog}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <StickyNote className="mr-2 h-5 w-5" />
              Notas del cliente
            </DialogTitle>
            <DialogDescription>
              {selectedClient && `Consideraciones especiales para ${getClientDisplayName(selectedClient)}`}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {selectedClient && (
              <div className="space-y-4">
                <div className="p-3 border rounded-md bg-amber-50 flex items-start">
                  <AlertCircle className="h-5 w-5 text-amber-500 mr-2 mt-0.5" />
                  <div className="text-sm text-amber-800">
                    Las notas ayudan a recordar información importante sobre el cliente y se muestran al realizar
                    ventas.
                  </div>
                </div>

{/* Historial de notas */}
                <div className="border rounded-md">
                  <div className="p-3 bg-muted font-medium flex items-center justify-between">
                    <span>Historial de notas</span>
                    <Badge variant="outline" className="bg-amber-50 text-amber-800">
                      {selectedClient.notas ? selectedClient.notas.length : 0} notas
                    </Badge>
                  </div>
                  <ScrollArea className="h-[250px] p-3">
                    {selectedClient.notas && selectedClient.notas.length > 0 ? (
                      <div className="space-y-4">
                        {selectedClient.notas
                          .sort((a: Nota, b: Nota) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                          .map((nota: Nota) => (
                            <div key={nota.id} className="border rounded-md p-3">
                              <div className="flex items-center justify-between mb-2">
                                <div className="flex items-center">
                                  <Avatar className="h-6 w-6 mr-2">
                                    <AvatarImage
                                      src={nota.usuario.avatar || "/placeholder.svg"}
                                      alt={nota.usuario.nombre}
                                    />
                                    <AvatarFallback>{nota.usuario.iniciales}</AvatarFallback>
                                  </Avatar>
                                  <span className="font-medium text-sm">{nota.usuario.nombre}</span>
                                </div>
                                <div className="flex items-center text-muted-foreground text-xs">
                                  <Clock className="h-3 w-3 mr-1" />
                                  <span>{formatearFecha(nota.fecha)}</span>
                                </div>
                              </div>
                              <p className="text-sm">{nota.texto}</p>
                            </div>
                          ))}
                      </div>
                    ) : (
                      <div className="flex flex-col items-center justify-center h-full text-center p-6 text-muted-foreground">
                        <StickyNote className="h-8 w-8 mb-2 opacity-50" />
                        <p>No hay notas registradas para este cliente</p>
                        <p className="text-xs mt-1">Agregue una nota utilizando el formulario de abajo</p>
                      </div>
                    )}
                  </ScrollArea>
                </div>

{/* Formulario para agregar nueva nota */}
                <div className="space-y-2">
                  <Label htmlFor="nueva-nota" className="flex items-center">
                    <Plus className="mr-2 h-4 w-4" />
                    Agregar nueva nota
                  </Label>
                  <div className="flex gap-2">
                    <Textarea
                      id="nueva-nota"
                      placeholder="Escriba una nueva nota o consideración sobre este cliente..."
                      className="min-h-[80px] flex-1"
                      value={nuevaNota}
                      onChange={(e) => setNuevaNota(e.target.value)}
                    />
                    <Button
                      className="self-end bg-yellow-500 hover:bg-yellow-600 text-black"
                      size="icon"
                      onClick={agregarNota}
                      disabled={!nuevaNota.trim()}
                    >
                      <Send className="h-4 w-4" />
                    </Button>
                  </div>
                  <p className="text-xs text-muted-foreground">
                    La nota será registrada con su usuario ({usuarioActual.nombre}) y la fecha actual.
                  </p>
                </div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button onClick={() => setShowNotasDialog(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de línea de crédito */}
      <Dialog open={showLineaCreditoDialog} onOpenChange={setShowLineaCreditoDialog}>
        <DialogContent className="sm:max-w-[800px]">
          <DialogHeader>
            <DialogTitle className="flex items-center">
              <CreditCard className="mr-2 h-5 w-5" />
              Línea de crédito
            </DialogTitle>
            <DialogDescription>
              {selectedClient && `Gestión de línea de crédito para ${getClientDisplayName(selectedClient)}`}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {selectedClient && (
              <div className="space-y-6">
                {/* Información de línea activa */}
                {getLineaCreditoActiva(selectedClient) ? (
                  <Card>
                    <CardHeader className="pb-3">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg">Línea de crédito activa</CardTitle>
                        <Badge className="bg-green-100 text-green-800 border-green-300">Activa</Badge>
                      </div>
                      <CardDescription>
                        Iniciada el{" "}
                        {new Date(getLineaCreditoActiva(selectedClient)?.fechaInicio || "").toLocaleDateString()}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-muted-foreground">Límite de crédito</p>
                          <p className="text-2xl font-bold">
                            ${getLineaCreditoActiva(selectedClient)?.montoMaximo.toLocaleString()}
                          </p>
                        </div>
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-muted-foreground">Saldo disponible</p>
                          <p className="text-2xl font-bold">
                            ${calcularSaldoDisponible(getLineaCreditoActiva(selectedClient)!).toLocaleString()}
                          </p>
                        </div>
                      </div>

<div className="space-y-1">
                        <div className="flex justify-between text-sm">
                          <span>Utilizado</span>
                          <span>
                            ${getLineaCreditoActiva(selectedClient)?.totalAdeudado.toLocaleString()}(
                            {Math.round(
                              ((getLineaCreditoActiva(selectedClient)?.totalAdeudado || 0) /
                                (getLineaCreditoActiva(selectedClient)?.montoMaximo || 1)) *
                                100,
                            )}
                            %)
                          </span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2.5">
                          <div
                            className={`h-2.5 rounded-full ${
                              (getLineaCreditoActiva(selectedClient)?.totalAdeudado || 0) /
                                (getLineaCreditoActiva(selectedClient)?.montoMaximo || 1) >
                              0.8
                                ? "bg-red-500"
                                : "bg-yellow-500"
                            }`}
                            style={{
                              width: `${Math.min(
                                100,
                                Math.round(
                                  ((getLineaCreditoActiva(selectedClient)?.totalAdeudado || 0) /
                                    (getLineaCreditoActiva(selectedClient)?.montoMaximo || 1)) *
                                    100,
                                ),
                              )}%`,
                            }}
                          ></div>
                        </div>
                      </div>

<div className="grid grid-cols-3 gap-4 pt-2">
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-muted-foreground">Interés por mora</p>
                          <p className="text-base">{getLineaCreditoActiva(selectedClient)?.interesPoMora}%</p>
                        </div>
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-muted-foreground">Plazo de mora</p>
                          <p className="text-base">{getLineaCreditoActiva(selectedClient)?.plazoMoraEnDias} días</p>
                        </div>
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-muted-foreground">Estado</p>
                          <div>
                            {estaEnMora(getLineaCreditoActiva(selectedClient)!) ? (
                              <Badge variant="outline" className="bg-red-100 text-red-800 border-red-300">
                                En mora
                              </Badge>
                            ) : (
                              <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
                                Al día
                              </Badge>
                            )}
                          </div>
                        </div>
                      </div>

{estaEnMora(getLineaCreditoActiva(selectedClient)!) && (
                        <div className="p-3 border rounded-md bg-red-50 flex items-start">
                          <AlertCircle className="h-5 w-5 text-red-500 mr-2 mt-0.5" />
                          <div className="text-sm text-red-800">
                            <p className="font-medium">Cliente en mora</p>
                            <p>
                              Interés por mora aplicable: $
                              {calcularInteresPorMora(getLineaCreditoActiva(selectedClient)!).toLocaleString()}
                            </p>
                            <p className="text-xs text-red-600 mt-1 italic">
                              * Valor indicativo. El sistema no genera mora automáticamente.
                            </p>
                          </div>
                        </div>
                      )}

<div className="flex justify-end gap-2 pt-2">
                        {/* Updated button text to "Registrar operación" */}
                        <Button variant="outline" onClick={() => openPagoLineaCreditoDialog()}>
                          <DollarSign className="mr-2 h-4 w-4" />
                          Registrar operación
                        </Button>
                        <Button
                          variant="destructive"
                          onClick={() => cerrarLineaCredito(getLineaCreditoActiva(selectedClient)!.id)}
                        >
                          <Ban className="mr-2 h-4 w-4" />
                          Cerrar línea
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ) : (
                  <Card>
                    <CardContent className="pt-6 pb-4">
                      <div className="flex flex-col items-center justify-center text-center p-6">
                        <CreditCard className="h-12 w-12 mb-4 text-muted-foreground" />
                        <h3 className="text-lg font-medium mb-2">Sin línea de crédito activa</h3>
                        <p className="text-muted-foreground mb-4">
                          Este cliente no tiene una línea de crédito activa actualmente.
                        </p>
                        <Button onClick={() => openNuevaLineaCreditoDialog()}>
                          <Plus className="mr-2 h-4 w-4" />
                          Crear nueva línea de crédito
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )}

{/* Pestañas para historial */}
                <Tabs defaultValue="compras">
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="compras">Compras a crédito</TabsTrigger>
                    <TabsTrigger value="pagos">Pagos realizados</TabsTrigger>
                    <TabsTrigger value="historial">Historial de líneas</TabsTrigger>
                  </TabsList>

<TabsContent value="compras" className="mt-4">
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Compras con línea de crédito actual</CardTitle>
                      </CardHeader>
                      <CardContent>
                        {getLineaCreditoActiva(selectedClient) &&
                        getLineaCreditoActiva(selectedClient)!.compras.length > 0 ? (
                          <div className="rounded-md border">
                            <Table>
                              <TableHeader>
                                <TableRow>
                                  <TableHead>Fecha</TableHead>
                                  <TableHead>Productos</TableHead>
                                  <TableHead>Comprobante</TableHead>
                                  <TableHead className="text-right">Monto</TableHead>
                                </TableRow>
                              </TableHeader>
                              <TableBody>
                                {getLineaCreditoActiva(selectedClient)!
                                  .compras.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                                  .map((compra) => (
                                    <TableRow key={compra.id}>
                                      <TableCell>{new Date(compra.fecha).toLocaleDateString()}</TableCell>
                                      <TableCell>
                                        <ul className="list-disc list-inside">
                                          {compra.productos.map((prod, index) => (
                                            <li key={index}>{prod}</li>
                                          ))}
                                        </ul>
                                      </TableCell>
                                      <TableCell>{compra.comprobante}</TableCell>
                                      <TableCell className="text-right">${compra.monto.toLocaleString()}</TableCell>
                                    </TableRow>
                                  ))}
                              </TableBody>
                            </Table>
                          </div>
                        ) : (
                          <div className="flex flex-col items-center justify-center text-center p-6 text-muted-foreground">
                            <ShoppingBag className="h-8 w-8 mb-2 opacity-50" />
                            <p>No hay compras registradas para esta línea de crédito</p>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  </TabsContent>

<TabsContent value="pagos" className="mt-4">
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Pagos a línea de crédito actual</CardTitle>
                      </CardHeader>
                      <CardContent>
                        {getLineaCreditoActiva(selectedClient) &&
                        getLineaCreditoActiva(selectedClient)!.pagos.length > 0 ? (
                          <div className="rounded-md border">
                            <Table>
                              <TableHeader>
                                <TableRow>
                                  <TableHead>Fecha</TableHead>
                                  <TableHead>Método de pago</TableHead>
                                  <TableHead>Comprobante</TableHead>
                                  <TableHead>Compra asociada</TableHead>
                                  <TableHead>Observaciones</TableHead>
                                  <TableHead className="text-right">Monto</TableHead>
                                </TableRow>
                              </TableHeader>
                              <TableBody>
                                {getLineaCreditoActiva(selectedClient)!
                                  .pagos.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                                  .map((pago) => (
                                    <TableRow key={pago.id}>
                                      <TableCell>{new Date(pago.fecha).toLocaleDateString()}</TableCell>
                                      <TableCell>{pago.metodoPago}</TableCell>
                                      <TableCell>{pago.comprobante}</TableCell>
                                      <TableCell>
                                        {pago.compraAsociada ? (
                                          <div className="space-y-1">
                                            <div className="font-medium text-sm">{pago.compraAsociada.comprobante}</div>
                                            <div className="text-xs text-muted-foreground">
                                              {new Date(pago.compraAsociada.fecha).toLocaleDateString()} - $
                                              {pago.compraAsociada.monto.toLocaleString()}
                                            </div>
                                          </div>
                                        ) : (
                                          <span className="text-muted-foreground">Sin asociar</span>
                                        )}
                                      </TableCell>
                                      <TableCell>{pago.observaciones || "-"}</TableCell>
                                      <TableCell className="text-right">${pago.monto.toLocaleString()}</TableCell>
                                    </TableRow>
                                  ))}
                              </TableBody>
                            </Table>
                          </div>
                        ) : (
                          <div className="flex flex-col items-center justify-center text-center p-6 text-muted-foreground">
                            <DollarSign className="h-8 w-8 mb-2 opacity-50" />
                            <p>No hay pagos registrados para esta línea de crédito</p>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  </TabsContent>

<TabsContent value="historial" className="mt-4">
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Historial de líneas de crédito</CardTitle>
                      </CardHeader>
                      <CardContent>
                        {selectedClient.lineasCredito && selectedClient.lineasCredito.length > 0 ? (
                          <div className="rounded-md border">
                            <Table>
                              <TableHeader>
                                <TableRow>
                                  <TableHead>Período</TableHead>
                                  <TableHead>Estado</TableHead>
                                  <TableHead>Límite</TableHead>
                                  <TableHead>Interés</TableHead>
                                  <TableHead className="text-right">Total utilizado</TableHead>
                                </TableRow>
                              </TableHeader>
                              <TableBody>
                                {selectedClient.lineasCredito
                                  .sort(
                                    (a: LineaCredito, b: LineaCredito) =>
                                      new Date(b.fechaInicio).getTime() - new Date(a.fechaInicio).getTime(),
                                  )
                                  .map((linea: LineaCredito) => (
                                    <TableRow key={linea.id}>
                                      <TableCell>
                                        {new Date(linea.fechaInicio).toLocaleDateString()}
                                        {linea.fechaCierre && ` - ${new Date(linea.fechaCierre).toLocaleDateString()}`}
                                      </TableCell>
                                      <TableCell>
                                        {linea.estado === "activa" ? (
                                          <Badge className="bg-green-100 text-green-800 border-green-300">Activa</Badge>
                                        ) : (
                                          <Badge variant="outline">Cerrada</Badge>
                                        )}
                                      </TableCell>
                                      <TableCell>${linea.montoMaximo.toLocaleString()}</TableCell>
                                      <TableCell>{linea.interesPoMora}%</TableCell>
                                      <TableCell className="text-right">
                                        $
                                        {linea.estado === "activa"
                                          ? linea.totalAdeudado.toLocaleString()
                                          : linea.compras
                                              .reduce((sum, compra) => sum + compra.monto, 0)
                                              .toLocaleString()}
                                      </TableCell>
                                    </TableRow>
                                  ))}
                              </TableBody>
                            </Table>
                          </div>
                        ) : (
                          <div className="flex flex-col items-center justify-center text-center p-6 text-muted-foreground">
                            <History className="h-8 w-8 mb-2 opacity-50" />
                            <p>No hay historial de líneas de crédito para este cliente</p>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  </TabsContent>
                </Tabs>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button onClick={() => setShowLineaCreditoDialog(false)}>Cerrar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de nueva línea de crédito */}
      <Dialog open={showNuevaLineaCreditoDialog} onOpenChange={setShowNuevaLineaCreditoDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Nueva línea de crédito</DialogTitle>
            <DialogDescription>Configure los parámetros para la nueva línea de crédito.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="montoMaximo">Monto máximo ($)</Label>
              <Input
                id="montoMaximo"
                type="number"
                min="0"
                value={formDataLineaCredito.montoMaximo}
                onChange={(e) =>
                  setFormDataLineaCredito({
                    ...formDataLineaCredito,
                    montoMaximo: Number(e.target.value),
                  })
                }
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="interesPoMora">Interés por mora (%)</Label>
                <Input
                  id="interesPoMora"
                  type="number"
                  min="0"
                  max="100"
                  value={formDataLineaCredito.interesPoMora}
                  onChange={(e) =>
                    setFormDataLineaCredito({
                      ...formDataLineaCredito,
                      interesPoMora: Number(e.target.value),
                    })
                  }
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="plazoMoraEnDias">Plazo de mora (días)</Label>
                <Input
                  id="plazoMoraEnDias"
                  type="number"
                  min="0"
                  value={formDataLineaCredito.plazoMoraEnDias}
                  onChange={(e) =>
                    setFormDataLineaCredito({
                      ...formDataLineaCredito,
                      plazoMoraEnDias: Number(e.target.value),
                    })
                  }
                />
              </div>
            </div>
            <div className="p-3 border rounded-md bg-amber-50 flex items-start">
              <AlertCircle className="h-5 w-5 text-amber-500 mr-2 mt-0.5" />
              <div className="text-sm text-amber-800">
                <p>Al crear una nueva línea de crédito, se establecerá como la línea activa para este cliente.</p>
                <p className="mt-1">La fecha de inicio será la fecha actual.</p>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowNuevaLineaCreditoDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={crearLineaCredito} className="bg-yellow-500 hover:bg-yellow-600 text-black">
              Crear línea de crédito
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Diálogo de pago a línea de crédito */}
      {/* Updated dialog for operation registration with new fields */}
      <Dialog open={showPagoLineaCreditoDialog} onOpenChange={setShowPagoLineaCreditoDialog}>
        <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Registrar operación</DialogTitle>
            <DialogDescription>Ingrese los detalles de la operación en la línea de crédito.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="tipoOperacion">Tipo de operación</Label>
              <Select
                value={formDataPagoLineaCredito.tipoOperacion}
                onValueChange={(value) =>
                  setFormDataPagoLineaCredito({
                    ...formDataPagoLineaCredito,
                    tipoOperacion: value,
                  })
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione tipo de operación" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pago">Pago</SelectItem>
                  <SelectItem value="debito">Débito</SelectItem>
                  <SelectItem value="credito">Crédito</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="montoPago">Monto de la operación ($)</Label>
              <Input
                id="montoPago"
                type="number"
                min="0"
                value={formDataPagoLineaCredito.monto}
                onChange={(e) =>
                  setFormDataPagoLineaCredito({
                    ...formDataPagoLineaCredito,
                    monto: Number(e.target.value),
                  })
                }
              />
              {formDataPagoLineaCredito.tipoOperacion === "pago" && (
                <p className="text-xs text-muted-foreground">
                  Monto adeudado: ${getLineaCreditoActiva(selectedClient)?.totalAdeudado.toLocaleString() || 0}
                </p>
              )}
            </div>

<div className="space-y-2">
              <Label htmlFor="metodoPago">Método de pago</Label>
              <Select
                value={formDataPagoLineaCredito.metodoPago}
                onValueChange={(value) =>
                  setFormDataPagoLineaCredito({
                    ...formDataPagoLineaCredito,
                    metodoPago: value,
                  })
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione método de pago" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="efectivo">Efectivo</SelectItem>
                  <SelectItem value="transferencia">Transferencia</SelectItem>
                  <SelectItem value="tarjeta">Tarjeta de crédito/débito</SelectItem>
                  <SelectItem value="cheque">Cheque</SelectItem>
                  <SelectItem value="otro">Otro</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Ventas asociadas (opcional)</Label>

{/* Sin asociar checkbox at the top */}
              <div className="flex items-center space-x-2 p-3 border rounded-md bg-muted/50">
                <input
                  type="checkbox"
                  id="sin-asociar"
                  checked={formDataPagoLineaCredito.sinAsociarVentas}
                  onChange={(e) => {
                    setFormDataPagoLineaCredito({
                      ...formDataPagoLineaCredito,
                      sinAsociarVentas: e.target.checked,
                      comprasAsociadas: e.target.checked ? [] : formDataPagoLineaCredito.comprasAsociadas,
                    })
                    if (e.target.checked) {
                      setSearchVentasAsociadas("")
                    }
                  }}
                  className="rounded"
                />
                <Label htmlFor="sin-asociar" className="font-normal cursor-pointer">
                  Sin asociar a ventas específicas
                </Label>
              </div>

{/* Search and results only when not "sin asociar" */}
              {!formDataPagoLineaCredito.sinAsociarVentas && (
                <>
                  <Input
                    placeholder="Buscar por comprobante o fecha..."
                    value={searchVentasAsociadas}
                    onChange={(e) => setSearchVentasAsociadas(e.target.value)}
                  />

{searchVentasAsociadas.trim() !== "" && (
                    <div className="border rounded-md p-3 max-h-48 overflow-y-auto space-y-2">
                      {getLineaCreditoActiva(selectedClient)
                        ?.compras.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
                        .filter((compra) => {
                          const searchLower = searchVentasAsociadas.toLowerCase()
                          return (
                            compra.comprobante.toLowerCase().includes(searchLower) ||
                            new Date(compra.fecha).toLocaleDateString().includes(searchLower) ||
                            compra.monto.toString().includes(searchLower)
                          )
                        })
                        .map((compra) => (
                          <div key={compra.id} className="flex items-center space-x-2">
                            <input
                              type="checkbox"
                              id={`compra-${compra.id}`}
                              checked={formDataPagoLineaCredito.comprasAsociadas.includes(compra.id.toString())}
                              onChange={(e) => {
                                if (e.target.checked) {
                                  setFormDataPagoLineaCredito({
                                    ...formDataPagoLineaCredito,
                                    comprasAsociadas: [
                                      ...formDataPagoLineaCredito.comprasAsociadas,
                                      compra.id.toString(),
                                    ],
                                  })
                                } else {
                                  setFormDataPagoLineaCredito({
                                    ...formDataPagoLineaCredito,
                                    comprasAsociadas: formDataPagoLineaCredito.comprasAsociadas.filter(
                                      (id) => id !== compra.id.toString(),
                                    ),
                                  })
                                }
                              }}
                              className="rounded"
                            />
                            <Label htmlFor={`compra-${compra.id}`} className="font-normal cursor-pointer flex-1">
                              <div className="flex flex-col">
                                <span className="font-medium text-sm">{compra.comprobante}</span>
                                <span className="text-xs text-muted-foreground">
                                  {new Date(compra.fecha).toLocaleDateString()} - ${compra.monto.toLocaleString()}
                                </span>
                              </div>
                            </Label>
                          </div>
                        ))}
                    </div>
                  )}

{searchVentasAsociadas.trim() === "" && (
                    <p className="text-sm text-muted-foreground p-4 text-center border rounded-md bg-muted/30">
                      Ingrese un término de búsqueda para ver las ventas disponibles
                    </p>
                  )}

{formDataPagoLineaCredito.comprasAsociadas.length > 0 && (
                    <p className="text-xs text-muted-foreground">
                      {formDataPagoLineaCredito.comprasAsociadas.length} venta(s) seleccionada(s)
                    </p>
                  )}
                </>
              )}
            </div>

<div className="space-y-2">
              <Label htmlFor="archivosAdjuntos">Archivos adjuntos (opcional)</Label>
              <Input
                id="archivosAdjuntos"
                type="file"
                multiple
                onChange={(e) => {
                  const files = Array.from(e.target.files || [])
                  const newFiles = files.map((file) => ({
                    file,
                    titulo: "",
                  }))
                  setFormDataPagoLineaCredito({
                    ...formDataPagoLineaCredito,
                    archivosAdjuntos: [...formDataPagoLineaCredito.archivosAdjuntos, ...newFiles],
                  })
                }}
              />
              {formDataPagoLineaCredito.archivosAdjuntos.length > 0 && (
                <div className="mt-2 space-y-2">
                  <p className="text-sm font-medium">
                    {formDataPagoLineaCredito.archivosAdjuntos.length} archivo(s) seleccionado(s):
                  </p>
                  <div className="space-y-2">
                    {formDataPagoLineaCredito.archivosAdjuntos.map((attachment, index) => (
                      <div key={index} className="border rounded-md p-3 space-y-2">
                        <div className="flex items-center justify-between">
                          <div className="flex-1">
                            <span className="text-sm font-medium truncate block">{attachment.file.name}</span>
                            <span className="text-xs text-muted-foreground">
                              ({(attachment.file.size / 1024).toFixed(1)} KB)
                            </span>
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              setFormDataPagoLineaCredito({
                                ...formDataPagoLineaCredito,
                                archivosAdjuntos: formDataPagoLineaCredito.archivosAdjuntos.filter(
                                  (_, i) => i !== index,
                                ),
                              })
                            }}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                        <Input
                          placeholder="Título del archivo (opcional)"
                          value={attachment.titulo}
                          onChange={(e) => {
                            const updatedFiles = [...formDataPagoLineaCredito.archivosAdjuntos]
                            updatedFiles[index] = { ...updatedFiles[index], titulo: e.target.value }
                            setFormDataPagoLineaCredito({
                              ...formDataPagoLineaCredito,
                              archivosAdjuntos: updatedFiles,
                            })
                          }}
                          className="text-sm"
                        />
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

<div className="space-y-2">
              <Label htmlFor="observacionesPago">Observaciones (opcional)</Label>
              <Textarea
                id="observacionesPago"
                placeholder="Ingrese observaciones adicionales sobre la operación..."
                value={formDataPagoLineaCredito.observaciones}
                onChange={(e) =>
                  setFormDataPagoLineaCredito({
                    ...formDataPagoLineaCredito,
                    observaciones: e.target.value,
                  })
                }
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPagoLineaCreditoDialog(false)}>
              Cancelar
            </Button>
            <Button
              onClick={registrarPagoLineaCredito}
              className="bg-yellow-500 hover:bg-yellow-600 text-black"
              disabled={formDataPagoLineaCredito.monto <= 0}
            >
              Registrar operación
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}120:Tfb0f3,[V0_FILE]typescriptreact:file="app/dashboard/ventas/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/productos/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/recuperar-contrasena/page.tsx" isMerged="true" isLocked="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { BookOpen, ArrowLeft } from "lucide-react"

export default function RecuperarContrasenaPage() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50">
      <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
        <div className="flex flex-col items-center justify-center text-center">
          <div className="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-yellow-400">
            <BookOpen className="w-8 h-8 text-black" />
          </div>
          <h1 className="text-2xl font-bold">Recuperar contraseña</h1>
          <p className="mt-2 text-gray-600">
            Ingrese su correo electrónico y le enviaremos un enlace para restablecer su contraseña.
          </p>
        </div>

<form className="mt-8 space-y-6">
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Correo electrónico</Label>
              <Input id="email" type="email" placeholder="usuario@libreria-leon.com" required className="w-full" />
            </div>
          </div>

<Button type="submit" className="w-full bg-yellow-500 hover:bg-yellow-600 text-black">
            Enviar enlace de recuperación
          </Button>
        </form>

<div className="mt-4 text-center">
          <Link href="/" className="inline-flex items-center text-sm text-yellow-600 hover:text-yellow-800">
            <ArrowLeft className="w-4 h-4 mr-1" />
            Volver al inicio de sesión
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isLocked="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    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))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        yellow: {
          50: "#fffbeb",
          100: "#fef3c7",
          200: "#fde68a",
          300: "#fcd34d",
          400: "#fbbf24",
          500: "#f59e0b",
          600: "#d97706",
          700: "#b45309",
          800: "#92400e",
          900: "#78350f",
          950: "#451a03",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { BookOpen } from "lucide-react"

export default function LoginPage() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50">
      <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
        <div className="flex flex-col items-center justify-center text-center">
          <div className="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-yellow-400">
            <BookOpen className="w-8 h-8 text-black" />
          </div>
          <h1 className="text-2xl font-bold">Librería León</h1>
          <p className="mt-2 text-gray-600">Sistema de Gestión</p>
        </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Contraseña</Label>
                <Link href="/recuperar-contrasena" className="text-sm text-yellow-600 hover:text-yellow-800">
                  ¿Olvidó su contraseña?
                </Link>
              </div>
              <Input id="password" type="password" required className="w-full" />
            </div>
          </div>

<Button
            type="submit"
            className="w-full bg-yellow-500 hover:bg-yellow-600 text-black"
            onClick={(e) => {
              e.preventDefault()
              window.location.href = "/dashboard"
            }}
          >
            Iniciar sesión
          </Button>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/usuarios/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/depositos/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/promociones/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/proveedores/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/stock/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/reportes/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/caja/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/sucursales/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/categorias/loading.tsx" isFixed="true" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/perfil/loading.tsx" isMerged="true" isLocked="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" isLocked="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts"
import { ShoppingCart, Package, TrendingUp, Users, DollarSign, RefreshCw, FileSpreadsheet } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { useToast } from "@/components/ui/use-toast"
import { useState } from "react"

// Datos de ejemplo para los gráficos
const salesData = [
  { name: "Ene", ventas: 4000 },
  { name: "Feb", ventas: 3000 },
  { name: "Mar", ventas: 5000 },
  { name: "Abr", ventas: 4500 },
  { name: "May", ventas: 6000 },
  { name: "Jun", ventas: 5500 },
]

const categoryData = [
  { name: "Literatura", value: 35 },
  { name: "Infantil", value: 25 },
  { name: "Académico", value: 20 },
  { name: "Autoayuda", value: 15 },
  { name: "Otros", value: 5 },
]

const COLORS = ["#FFBB28", "#FF8042", "#0088FE", "#00C49F", "#FFBB28"]

const lowStockProducts = [
  { id: 1, name: "El principito", stock: 3, threshold: 5 },
  { id: 2, name: "Cien años de soledad", stock: 2, threshold: 5 },
  { id: 3, name: "Harry Potter y la piedra filosofal", stock: 4, threshold: 10 },
]

export default function Dashboard() {
  const { toast } = useToast()
  const [dailySales, setDailySales] = useState("$12,580")
  const [dailySalesGrowth, setDailySalesGrowth] = useState("+12%")
  const [productsCount, setProductsCount] = useState("1,245")
  const [productsGrowth, setProductsGrowth] = useState("+8%")
  const [clientsCount, setClientsCount] = useState("3,587")
  const [clientsGrowth, setClientsGrowth] = useState("+5%")
  const [monthlyIncome, setMonthlyIncome] = useState("$245,890")
  const [monthlyIncomeGrowth, setMonthlyIncomeGrowth] = useState("+18%")

function refreshSales() {
    toast({
      title: "Actualizando ventas",
      description: "Obteniendo datos más recientes...",
    })

setTimeout(() => {
      // Simulación de nuevos datos
      const newSales = `$${(12000 + Math.floor(Math.random() * 2000)).toLocaleString()}`
      const newGrowth = `+${10 + Math.floor(Math.random() * 5)}%`

setDailySales(newSales)
      setDailySalesGrowth(newGrowth)

toast({
        title: "Datos actualizados",
        description: "Ventas del día actualizadas correctamente",
        variant: "success",
      })
    }, 1000)
  }

function refreshProducts() {
    toast({
      title: "Actualizando productos",
      description: "Obteniendo datos más recientes...",
    })

setTimeout(() => {
      // Simulación de nuevos datos
      const newCount = `${(1200 + Math.floor(Math.random() * 100)).toLocaleString()}`
      const newGrowth = `+${7 + Math.floor(Math.random() * 3)}%`

setProductsCount(newCount)
      setProductsGrowth(newGrowth)

toast({
        title: "Datos actualizados",
        description: "Conteo de productos actualizado correctamente",
        variant: "success",
      })
    }, 1000)
  }

function refreshClients() {
    toast({
      title: "Actualizando clientes",
      description: "Obteniendo datos más recientes...",
    })

setTimeout(() => {
      // Simulación de nuevos datos
      const newCount = `${(3500 + Math.floor(Math.random() * 200)).toLocaleString()}`
      const newGrowth = `+${4 + Math.floor(Math.random() * 3)}%`

setClientsCount(newCount)
      setClientsGrowth(newGrowth)

toast({
        title: "Datos actualizados",
        description: "Conteo de clientes actualizado correctamente",
        variant: "success",
      })
    }, 1000)
  }

function refreshIncome() {
    toast({
      title: "Actualizando ingresos",
      description: "Obteniendo datos más recientes...",
    })

setTimeout(() => {
      // Simulación de nuevos datos
      const newIncome = `$${(240000 + Math.floor(Math.random() * 10000)).toLocaleString()}`
      const newGrowth = `+${15 + Math.floor(Math.random() * 5)}%`

setMonthlyIncome(newIncome)
      setMonthlyIncomeGrowth(newGrowth)

toast({
        title: "Datos actualizados",
        description: "Ingresos mensuales actualizados correctamente",
        variant: "success",
      })
    }, 1000)
  }

function exportLowStockToExcel() {
    toast({
      title: "Exportando datos",
      description: "Preparando archivo Excel para descargar...",
    })

// Simulación de tiempo de procesamiento
    setTimeout(() => {
      toast({
        title: "Exportación completada",
        description: "El archivo ha sido descargado correctamente",
        variant: "success",
      })
    }, 1500)
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground">Bienvenido al sistema de gestión de Librería León</p>
      </div>

{/* Tarjetas de estadísticas */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between space-y-0">
              <p className="text-sm font-medium text-muted-foreground">Ventas del día</p>
              <div className="flex items-center space-x-1">
                <TooltipProvider>
                  <UITooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-5 w-5" onClick={refreshSales}>
                        <RefreshCw className="h-3.5 w-3.5" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar ventas</TooltipContent>
                  </UITooltip>
                </TooltipProvider>
                <ShoppingCart className="h-5 w-5 text-yellow-500" />
              </div>
            </div>
            <div className="flex items-baseline justify-between pt-4">
              <h3 className="text-2xl font-bold">{dailySales}</h3>
              <div className="text-sm text-green-500 flex items-center">
                <TrendingUp className="h-4 w-4 mr-1" />
                {dailySalesGrowth}
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between space-y-0">
              <p className="text-sm font-medium text-muted-foreground">Productos</p>
              <div className="flex items-center space-x-1">
                <TooltipProvider>
                  <UITooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-5 w-5" onClick={refreshProducts}>
                        <RefreshCw className="h-3.5 w-3.5" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar productos</TooltipContent>
                  </UITooltip>
                </TooltipProvider>
                <Package className="h-5 w-5 text-yellow-500" />
              </div>
            </div>
            <div className="flex items-baseline justify-between pt-4">
              <h3 className="text-2xl font-bold">{productsCount}</h3>
              <div className="text-sm text-green-500 flex items-center">
                <TrendingUp className="h-4 w-4 mr-1" />
                {productsGrowth}
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between space-y-0">
              <p className="text-sm font-medium text-muted-foreground">Clientes</p>
              <div className="flex items-center space-x-1">
                <TooltipProvider>
                  <UITooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-5 w-5" onClick={refreshClients}>
                        <RefreshCw className="h-3.5 w-3.5" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar clientes</TooltipContent>
                  </UITooltip>
                </TooltipProvider>
                <Users className="h-5 w-5 text-yellow-500" />
              </div>
            </div>
            <div className="flex items-baseline justify-between pt-4">
              <h3 className="text-2xl font-bold">{clientsCount}</h3>
              <div className="text-sm text-green-500 flex items-center">
                <TrendingUp className="h-4 w-4 mr-1" />
                {clientsGrowth}
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between space-y-0">
              <p className="text-sm font-medium text-muted-foreground">Ingresos mensuales</p>
              <div className="flex items-center space-x-1">
                <TooltipProvider>
                  <UITooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-5 w-5" onClick={refreshIncome}>
                        <RefreshCw className="h-3.5 w-3.5" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Refrescar ingresos</TooltipContent>
                  </UITooltip>
                </TooltipProvider>
                <DollarSign className="h-5 w-5 text-yellow-500" />
              </div>
            </div>
            <div className="flex items-baseline justify-between pt-4">
              <h3 className="text-2xl font-bold">{monthlyIncome}</h3>
              <div className="text-sm text-green-500 flex items-center">
                <TrendingUp className="h-4 w-4 mr-1" />
                {monthlyIncomeGrowth}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Gráficos y alertas */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        {/* Gráfico de ventas */}
        <Card className="lg:col-span-4">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle>Ventas por mes</CardTitle>
              <TooltipProvider>
                <UITooltip>
                  <TooltipTrigger>
                    <Button variant="ghost" size="icon">
                      <RefreshCw className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Refrescar</TooltipContent>
                </UITooltip>
              </TooltipProvider>
            </div>
            <CardDescription>Comparativa de ventas de los últimos 6 meses</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={salesData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Bar dataKey="ventas" fill="#FFBB28" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

{/* Gráfico de categorías */}
        <Card className="lg:col-span-3">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle>Ventas por categoría</CardTitle>
              <TooltipProvider>
                <UITooltip>
                  <TooltipTrigger>
                    <Button variant="ghost" size="icon">
                      <RefreshCw className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Refrescar</TooltipContent>
                </UITooltip>
              </TooltipProvider>
            </div>
            <CardDescription>Distribución de ventas por tipo de producto</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={categoryData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                    label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  >
                    {categoryData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Alertas de stock bajo */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle className="text-lg">Alertas de stock bajo</CardTitle>
            <CardDescription>Productos que requieren reposición</CardDescription>
          </div>
          <div className="flex space-x-2">
            <TooltipProvider>
              <UITooltip>
                <TooltipTrigger>
                  <Button variant="ghost" size="icon" onClick={exportLowStockToExcel}>
                    <FileSpreadsheet className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Exportar a Excel</TooltipContent>
              </UITooltip>
            </TooltipProvider>
            <TooltipProvider>
              <UITooltip>
                <TooltipTrigger>
                  <Button variant="ghost" size="icon">
                    <RefreshCw className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Refrescar</TooltipContent>
              </UITooltip>
            </TooltipProvider>
          </div>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="py-3 px-4 text-left font-medium">ID</th>
                  <th className="py-3 px-4 text-left font-medium">Producto</th>
                  <th className="py-3 px-4 text-left font-medium">Stock actual</th>
                  <th className="py-3 px-4 text-left font-medium">Umbral</th>
                  <th className="py-3 px-4 text-left font-medium">Estado</th>
                </tr>
              </thead>
              <tbody>
                {lowStockProducts.map((product) => (
                  <tr key={product.id} className="border-b">
                    <td className="py-3 px-4">{product.id}</td>
                    <td className="py-3 px-4">{product.name}</td>
                    <td className="py-3 px-4">{product.stock}</td>
                    <td className="py-3 px-4">{product.threshold}</td>
                    <td className="py-3 px-4">
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                        Stock bajo
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/presupuestos/loading.tsx" isMerged="true" isLocked="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function PresupuestosLoading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-48 mt-2" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <Skeleton className="h-5 w-40" />
            <div className="flex space-x-2">
              <Skeleton className="h-9 w-[300px]" />
              <Skeleton className="h-9 w-9" />
              <Skeleton className="h-9 w-9" />
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between border-b pb-4">
              <div className="flex items-center space-x-4">
                <Skeleton className="h-4 w-4" />
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-4 w-32" />
              </div>
              <div className="flex items-center space-x-4">
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-8 w-20" />
              </div>
            </div>
            {[...Array(5)].map((_, i) => (
              <div key={i} className="flex items-center justify-between border-b pb-4">
                <div className="flex items-center space-x-4">
                  <Skeleton className="h-4 w-4" />
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-4 w-32" />
                </div>
                <div className="flex items-center space-x-4">
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-8 w-20" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/presupuestos/nuevo/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isLocked="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import { Save, ArrowLeft, Plus, Trash, FileText, Search, X, ShoppingCart } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useToast } from "@/components/ui/use-toast"

// Datos de ejemplo para clientes
const clientesData = [
  { id: 1, nombre: "Juan Pérez", dni: "12345678", email: "juan@example.com", telefono: "1122334455" },
  { id: 2, nombre: "María González", dni: "23456789", email: "maria@example.com", telefono: "2233445566" },
  { id: 3, nombre: "Carlos Rodríguez", dni: "34567890", email: "carlos@example.com", telefono: "3344556677" },
  { id: 4, nombre: "Ana Martínez", dni: "45678901", email: "ana@example.com", telefono: "4455667788" },
  { id: 5, nombre: "Luis Sánchez", dni: "56789012", email: "luis@example.com", telefono: "5566778899" },
]

// Datos de ejemplo para productos
const productosData = [
  { id: 1, codigo: "LIB001", nombre: "El principito", precio: 2500, stock: 15, categoria: "Literatura" },
  { id: 2, codigo: "LIB002", nombre: "Cien años de soledad", precio: 3200, stock: 8, categoria: "Literatura" },
  {
    id: 3,
    codigo: "LIB003",
    nombre: "Harry Potter y la piedra filosofal",
    precio: 2800,
    stock: 12,
    categoria: "Infantil",
  },
  { id: 4, codigo: "LIB004", nombre: "El señor de los anillos", precio: 4500, stock: 5, categoria: "Fantasía" },
  { id: 5, codigo: "LIB005", nombre: "Don Quijote de la Mancha", precio: 3800, stock: 10, categoria: "Clásicos" },
  { id: 6, codigo: "ART001", nombre: "Lápiz HB", precio: 150, stock: 50, categoria: "Artículos escolares" },
  { id: 7, codigo: "ART002", nombre: "Cuaderno A4", precio: 450, stock: 30, categoria: "Artículos escolares" },
  { id: 8, codigo: "ART003", nombre: "Marcadores x12", precio: 1200, stock: 20, categoria: "Artículos escolares" },
]

// Interfaz para los items del presupuesto
interface PresupuestoItem {
  id: number
  producto: {
    id: number
    codigo: string
    nombre: string
    precio: number
  }
  cantidad: number
  precioUnitario: number
  descuento: number
  subtotal: number
}

export default function NuevoPresupuestoPage() {
  const router = useRouter()
  const { toast } = useToast()

// Estados para el formulario
  const [clienteId, setClienteId] = useState<string>("")
  const [validez, setValidez] = useState<string>("15")
  const [observaciones, setObservaciones] = useState<string>("")
  const [items, setItems] = useState<PresupuestoItem[]>([])

// Estados para el diálogo de búsqueda de productos
  const [productoDialogOpen, setProductoDialogOpen] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [filteredProductos, setFilteredProductos] = useState(productosData)

// Estados para el diálogo de búsqueda de clientes
  const [clienteDialogOpen, setClienteDialogOpen] = useState(false)
  const [clienteSearchTerm, setClienteSearchTerm] = useState("")
  const [filteredClientes, setFilteredClientes] = useState(clientesData)
  const [clienteSeleccionado, setClienteSeleccionado] = useState<any>(null)

// Calcular totales
  const subtotal = items.reduce((sum, item) => sum + item.subtotal, 0)
  const iva = subtotal * 0.21
  const total = subtotal + iva

// Filtrar productos según el término de búsqueda
  useEffect(() => {
    setFilteredProductos(
      productosData.filter(
        (producto) =>
          producto.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
          producto.codigo.toLowerCase().includes(searchTerm.toLowerCase()) ||
          producto.categoria.toLowerCase().includes(searchTerm.toLowerCase()),
      ),
    )
  }, [searchTerm])

// Filtrar clientes según el término de búsqueda
  useEffect(() => {
    setFilteredClientes(
      clientesData.filter(
        (cliente) =>
          cliente.nombre.toLowerCase().includes(clienteSearchTerm.toLowerCase()) ||
          cliente.dni.includes(clienteSearchTerm),
      ),
    )
  }, [clienteSearchTerm])

// Actualizar cliente seleccionado cuando cambia el ID
  useEffect(() => {
    if (clienteId) {
      const cliente = clientesData.find((c) => c.id.toString() === clienteId)
      setClienteSeleccionado(cliente || null)
    } else {
      setClienteSeleccionado(null)
    }
  }, [clienteId])

// Función para añadir un producto al presupuesto
  const addProducto = (producto: any) => {
    // Verificar si el producto ya está en la lista
    const existingItemIndex = items.findIndex((item) => item.producto.id === producto.id)

if (existingItemIndex >= 0) {
      // Si ya existe, incrementar la cantidad
      const updatedItems = [...items]
      updatedItems[existingItemIndex].cantidad += 1
      updatedItems[existingItemIndex].subtotal =
        updatedItems[existingItemIndex].cantidad *
        updatedItems[existingItemIndex].precioUnitario *
        (1 - updatedItems[existingItemIndex].descuento / 100)

setItems(updatedItems)
    } else {
      // Si no existe, añadir nuevo item
      const newItem: PresupuestoItem = {
        id: items.length + 1,
        producto: {
          id: producto.id,
          codigo: producto.codigo,
          nombre: producto.nombre,
          precio: producto.precio,
        },
        cantidad: 1,
        precioUnitario: producto.precio,
        descuento: 0,
        subtotal: producto.precio,
      }

setItems([...items, newItem])
    }

setProductoDialogOpen(false)
    setSearchTerm("")
  }

// Función para actualizar la cantidad de un item
  const updateCantidad = (id: number, cantidad: number) => {
    if (cantidad < 1) return

const updatedItems = items.map((item) => {
      if (item.id === id) {
        const newCantidad = cantidad
        const newSubtotal = newCantidad * item.precioUnitario * (1 - item.descuento / 100)
        return { ...item, cantidad: newCantidad, subtotal: newSubtotal }
      }
      return item
    })

setItems(updatedItems)
  }

// Función para actualizar el descuento de un item
  const updateDescuento = (id: number, descuento: number) => {
    if (descuento < 0 || descuento > 100) return

const updatedItems = items.map((item) => {
      if (item.id === id) {
        const newDescuento = descuento
        const newSubtotal = item.cantidad * item.precioUnitario * (1 - newDescuento / 100)
        return { ...item, descuento: newDescuento, subtotal: newSubtotal }
      }
      return item
    })

setItems(updatedItems)
  }

// Función para eliminar un item
  const removeItem = (id: number) => {
    setItems(items.filter((item) => item.id !== id))
  }

// Función para guardar el presupuesto
  const savePresupuesto = () => {
    // Validar que haya un cliente seleccionado
    if (!clienteId) {
      toast({
        title: "Error",
        description: "Debe seleccionar un cliente para el presupuesto",
        variant: "destructive",
      })
      return
    }

// Validar que haya al menos un producto
    if (items.length === 0) {
      toast({
        title: "Error",
        description: "Debe agregar al menos un producto al presupuesto",
        variant: "destructive",
      })
      return
    }

toast({
      title: "Guardando presupuesto",
      description: "Procesando información...",
    })

// Simulación de guardado
    setTimeout(() => {
      toast({
        title: "Presupuesto guardado",
        description: "El presupuesto ha sido creado correctamente",
        variant: "success",
      })

// Redireccionar a la lista de presupuestos
      router.push("/dashboard/presupuestos")
    }, 1500)
  }

// Función para convertir directamente a venta
  const convertToVenta = () => {
    // Validar que haya un cliente seleccionado
    if (!clienteId) {
      toast({
        title: "Error",
        description: "Debe seleccionar un cliente para crear la venta",
        variant: "destructive",
      })
      return
    }

// Validar que haya al menos un producto
    if (items.length === 0) {
      toast({
        title: "Error",
        description: "Debe agregar al menos un producto a la venta",
        variant: "destructive",
      })
      return
    }

toast({
      title: "Creando venta",
      description: "Procesando información...",
    })

// Simulación de creación de venta
    setTimeout(() => {
      toast({
        title: "Venta creada",
        description: "La venta ha sido creada correctamente",
        variant: "success",
      })

// Redireccionar a la lista de ventas
      router.push("/dashboard/ventas")
    }, 1500)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Nuevo Presupuesto</h1>
          <p className="text-muted-foreground">Crea un nuevo presupuesto para un cliente</p>
        </div>
        <div className="flex space-x-2">
          <Button variant="outline" onClick={() => router.push("/dashboard/presupuestos")}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Volver
          </Button>
          <Button className="bg-yellow-500 hover:bg-yellow-600 text-black" onClick={savePresupuesto}>
            <Save className="mr-2 h-4 w-4" />
            Guardar Presupuesto
          </Button>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        {/* Información del presupuesto */}
        <Card>
          <CardHeader>
            <CardTitle>Información del Presupuesto</CardTitle>
            <CardDescription>Datos generales del presupuesto</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="fecha">Fecha de emisión</Label>
              <Input id="fecha" value={format(new Date(), "dd/MM/yyyy", { locale: es })} disabled />
            </div>

<div className="space-y-2">
              <Label htmlFor="validez">Validez (días)</Label>
              <Select value={validez} onValueChange={setValidez}>
                <SelectTrigger id="validez">
                  <SelectValue placeholder="Seleccionar validez" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="7">7 días</SelectItem>
                  <SelectItem value="15">15 días</SelectItem>
                  <SelectItem value="30">30 días</SelectItem>
                  <SelectItem value="60">60 días</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="cliente">Cliente</Label>
                <Button variant="ghost" size="sm" onClick={() => setClienteDialogOpen(true)}>
                  <Search className="mr-2 h-4 w-4" />
                  Buscar cliente
                </Button>
              </div>

{clienteSeleccionado ? (
                <div className="border rounded-md p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">{clienteSeleccionado.nombre}</span>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setClienteId("")
                        setClienteSeleccionado(null)
                      }}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="text-sm text-muted-foreground">
                    <div>DNI: {clienteSeleccionado.dni}</div>
                    <div>Email: {clienteSeleccionado.email}</div>
                    <div>Teléfono: {clienteSeleccionado.telefono}</div>
                  </div>
                </div>
              ) : (
                <Select value={clienteId} onValueChange={setClienteId}>
                  <SelectTrigger id="cliente">
                    <SelectValue placeholder="Seleccionar cliente" />
                  </SelectTrigger>
                  <SelectContent>
                    {clientesData.map((cliente) => (
                      <SelectItem key={cliente.id} value={cliente.id.toString()}>
                        {cliente.nombre} - DNI: {cliente.dni}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              )}
            </div>

<div className="space-y-2">
              <Label htmlFor="observaciones">Observaciones</Label>
              <Textarea
                id="observaciones"
                placeholder="Ingrese observaciones o notas adicionales"
                value={observaciones}
                onChange={(e) => setObservaciones(e.target.value)}
                rows={4}
              />
            </div>
          </CardContent>
        </Card>