"use client"

import { useState } from "react"
import { useApi } from "@/lib/use-api"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Search, Plus, Edit, Trash2, Save } from "lucide-react"
import { apiFetch } from "@/lib/apiutils"
import { useSWRConfig } from "swr"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { toast } from "sonner"

interface Prestador {
    id: number
    nombre: string
    email: string | null
    telefono: string | null
    tipo_producto: string | null
    status: string
}

export default function PrestadoresPage() {
    const { data: prestadores, isLoading, error } = useApi("/prestadores")
    const [searchTerm, setSearchTerm] = useState("")
    const { mutate } = useSWRConfig()
    
    const [isDialogOpen, setIsDialogOpen] = useState(false)
    const [editingPrestador, setEditingPrestador] = useState<Prestador | null>(null)
    const [formData, setFormData] = useState({
        nombre: "",
        email: "",
        telefono: "",
        tipo_producto: "",
        status: "activo",
    })
    const [loading, setLoading] = useState(false)

    const filteredPrestadores = prestadores
        ? prestadores.filter((p: any) =>
            p.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
            p.email?.toLowerCase().includes(searchTerm.toLowerCase())
        )
        : []

    const handleDelete = async (id: number) => {
        if (confirm("¿Estás seguro de eliminar este prestador?")) {
            try {
                const res = await apiFetch(`/prestadores/${id}`, { method: "DELETE" })
                if (res.ok) {
                    mutate("/prestadores")
                } else {
                    toast.error("Error al eliminar")
                }
            } catch (e) {
                toast.error("Error de conexión")
            }
        }
    }

    const handleOpenDialog = (prestador?: Prestador) => {
        if (prestador) {
            setEditingPrestador(prestador)
            setFormData({
                nombre: prestador.nombre,
                email: prestador.email || "",
                telefono: prestador.telefono || "",
                tipo_producto: prestador.tipo_producto || "",
                status: prestador.status || "activo",
            })
        } else {
            setEditingPrestador(null)
            setFormData({ nombre: "", email: "", telefono: "", tipo_producto: "", status: "activo" })
        }
        setIsDialogOpen(true)
    }

    const handleSave = async (e: React.FormEvent) => {
        e.preventDefault()
        if (!formData.nombre) {
            toast.error("El Nombre / Razón Social es obligatorio.")
            return
        }

        setLoading(true)
        try {
            const url = editingPrestador ? `/prestadores/${editingPrestador.id}` : "/prestadores"
            const method = editingPrestador ? "PUT" : "POST"

            const res = await apiFetch(url, {
                method,
                body: JSON.stringify(formData),
            })

            if (res.ok) {
                mutate("/prestadores")
                setIsDialogOpen(false)
            } else {
                toast.error("Error al guardar prestador")
            }
        } catch (error) {
            toast.error("Error de conexión")
        } finally {
            setLoading(false)
        }
    }

    return (
        <DashboardLayout>
            <div className="space-y-6">
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight text-foreground">Prestadores</h1>
                        <p className="text-muted-foreground mt-2">Gestión de contratistas y fumigadores</p>
                    </div>
                    
                    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                        <DialogTrigger asChild>
                            <Button onClick={() => handleOpenDialog()} className="gap-2">
                                <Plus className="h-4 w-4" />
                                Nuevo Prestador
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="max-w-xl">
                            <DialogHeader>
                                <DialogTitle>{editingPrestador ? "Editar Prestador" : "Nuevo Prestador"}</DialogTitle>
                                <DialogDescription>
                                    {editingPrestador ? "Modifica los datos del prestador" : "Registra un nuevo prestador o contratista"}
                                </DialogDescription>
                            </DialogHeader>
                            
                            <div className="grid gap-4 py-4">
                                        <div className="space-y-2">
                                            <Label htmlFor="nombre">Nombre / Razón Social *</Label>
                                            <Input
                                                id="nombre"
                                                value={formData.nombre}
                                                onChange={(e) => {
                                                    if (e.target.value.length <= 100) {
                                                        setFormData({ ...formData, nombre: e.target.value })
                                                    }
                                                }}
                                                maxLength={100}
                                                placeholder="Ej: AgroServicios S.A."
                                                required
                                                className={formData.nombre.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                            />
                                            {formData.nombre.length >= 100 && (
                                                <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                                            )}
                                        </div>

                                        <div className="grid gap-4 sm:grid-cols-2">
                                            <div className="space-y-2">
                                                <Label htmlFor="email">Email</Label>
                                                <Input
                                                    id="email"
                                                    type="email"
                                                    value={formData.email}
                                                    onChange={(e) => {
                                                        if (e.target.value.length <= 100) {
                                                            setFormData({ ...formData, email: e.target.value })
                                                        }
                                                    }}
                                                    maxLength={100}
                                                    placeholder="contacto@ejemplo.com"
                                                    className={
                                                        ((formData.email || "").length >= 100 || (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))) 
                                                            ? 'border-red-500 focus-visible:ring-red-500' 
                                                            : ''
                                                    }
                                                />
                                                {(formData.email || "").length >= 100 && (
                                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                                                )}
                                                {formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) && (
                                                    <p className="text-xs text-red-500 mt-1">Formato de correo inválido.</p>
                                                )}
                                            </div>
                                            <div className="space-y-2">
                                                <Label htmlFor="telefono">Teléfono</Label>
                                                <Input
                                                    id="telefono"
                                                    value={formData.telefono}
                                                    onChange={(e) => {
                                                        const val = e.target.value.replace(/[^\d\s\+\(\)\-]/g, '')
                                                        if (val.length <= 20) {
                                                            setFormData({ ...formData, telefono: val })
                                                        }
                                                    }}
                                                    maxLength={20}
                                                    placeholder="+54 11 1234-5678"
                                                    className={(formData.telefono || "").length >= 20 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                                />
                                                {(formData.telefono || "").length >= 20 && (
                                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 20 caracteres.</p>
                                                )}
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <Label htmlFor="tipo_producto">Tipo de Servicio / Producto</Label>
                                            <Input
                                                id="tipo_producto"
                                                placeholder="Ej: Fumigación Aérea, Contratista de Siembra"
                                                value={formData.tipo_producto}
                                                onChange={(e) => {
                                                    if (e.target.value.length <= 100) {
                                                        setFormData({ ...formData, tipo_producto: e.target.value })
                                                    }
                                                }}
                                                maxLength={100}
                                                className={formData.tipo_producto.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                            />
                                            {formData.tipo_producto.length >= 100 && (
                                                <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <Label htmlFor="status">Estado</Label>
                                            <Select
                                                value={formData.status}
                                                onValueChange={(val) => setFormData({ ...formData, status: val })}
                                            >
                                                <SelectTrigger className="w-[180px]">
                                                    <SelectValue placeholder="Seleccionar estado" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="activo">Activo</SelectItem>
                                                    <SelectItem value="inactivo">Inactivo</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </div>
                                    </div>
                            
                            <DialogFooter>
                                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                                    Cancelar
                                </Button>
                                <Button onClick={handleSave} disabled={loading}>
                                    {loading ? "Guardando..." : editingPrestador ? "Guardar cambios" : "Crear prestador"}
                                </Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>
                </div>

                <div className="flex items-center space-x-2">
                    <div className="relative flex-1 max-w-sm">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder="Buscar prestador..."
                            className="pl-8"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                        />
                    </div>
                </div>

                <div className="rounded-md border border-border bg-card">
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Nombre</TableHead>
                                <TableHead>Contacto</TableHead>
                                <TableHead>Estado</TableHead>
                                <TableHead className="text-right">Acciones</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {isLoading ? (
                                <TableRow>
                                    <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                                        Cargando prestadores...
                                    </TableCell>
                                </TableRow>
                            ) : filteredPrestadores.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                                        No se encontraron prestadores
                                    </TableCell>
                                </TableRow>
                            ) : (
                                filteredPrestadores.map((prestador: any) => (
                                    <TableRow key={prestador.id}>
                                        <TableCell className="font-medium text-foreground">{prestador.nombre}</TableCell>
                                        <TableCell>
                                            <div className="flex flex-col text-sm">
                                                <span>{prestador.email}</span>
                                                <span className="text-muted-foreground">{prestador.telefono}</span>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <Badge variant={prestador.status === "activo" ? "default" : "secondary"}>
                                                {prestador.status === "activo" ? "Activo" : "Inactivo"}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="text-right">
                                            <div className="flex justify-end gap-2">
                                                <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(prestador)}>
                                                    <Edit className="h-4 w-4" />
                                                </Button>
                                                <Button variant="ghost" size="icon" onClick={() => handleDelete(prestador.id)}>
                                                    <Trash2 className="h-4 w-4 text-red-500" />
                                                </Button>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </DashboardLayout>
    )
}