"use client"

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

interface Lote {
    id: string
    nombre: string
    superficie: number
    establecimientoId: string
    cultivoId?: string
    cultivoNombre?: string
}

interface LotesDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    establecimientoId: string | null
    establecimientoNombre: string | null
    maxHectareas: number
}

export function LotesDialog({
    open,
    onOpenChange,
    establecimientoId,
    establecimientoNombre,
    maxHectareas
}: LotesDialogProps) {
    const [lotes, setLotes] = useState<Lote[]>([])
    const [lotesLoading, setLotesLoading] = useState(false)
    const [newLote, setNewLote] = useState<{ nombre: string; superficie: string; cultivoId: string }>({ nombre: "", superficie: "", cultivoId: "" })
    const [editingLoteId, setEditingLoteId] = useState<string | null>(null)

    const { data: cultData } = useApi("/cultivos")
    const cultivos = Array.isArray(cultData) ? cultData : (cultData?.data || [])

    const fetchLotes = async () => {
        if (!establecimientoId) return
        setLotesLoading(true)
        try {
            const res = await apiFetch(`/lotes?establecimiento_id=${establecimientoId}`)
            if (res.ok) {
                const data = await res.json()
                if (Array.isArray(data)) {
                    setLotes(data.map((l: any) => ({
                        id: String(l.id),
                        nombre: l.nombre,
                        superficie: Number(l.superficie),
                        establecimientoId: String(l.establecimiento_id),
                        cultivoId: l.cultivo_id ? String(l.cultivo_id) : "",
                        cultivoNombre: l.cultivo?.nombre || "-"
                    })))
                } else {
                    setLotes([])
                }
            }
        } catch (e) {
            console.error(e)
        } finally {
            setLotesLoading(false)
        }
    }

    useEffect(() => {
        if (open && establecimientoId) {
            fetchLotes()
            setNewLote({ nombre: "", superficie: "", cultivoId: "" })
            setEditingLoteId(null)
        }
    }, [open, establecimientoId])

    const handleCreateLote = async () => {
        if (!establecimientoId || !newLote.nombre || !newLote.superficie || !newLote.cultivoId) {
            toast.error("Por favor complete todos los campos requeridos, incluyendo el cultivo.")
            return
        }

        try {
            const res = await apiFetch("/lotes", {
                method: "POST",
                body: JSON.stringify({
                    establecimiento_id: establecimientoId,
                    nombre: newLote.nombre,
                    superficie: Number(newLote.superficie),
                    cultivo_id: newLote.cultivoId
                })
            })

            if (res.ok) {
                fetchLotes()
                setNewLote({ nombre: "", superficie: "", cultivoId: "" })
            } else {
                const error = await res.json()
                toast.error("Error al crear lote: " + (error.message || "Desconocido"))
            }
        } catch (e) {
            console.error(e)
        }
    }

    const handleEditLote = (lote: Lote) => {
        setNewLote({ nombre: lote.nombre, superficie: String(lote.superficie), cultivoId: lote.cultivoId || "" })
        setEditingLoteId(lote.id)
    }

    const handleUpdateLote = async () => {
        if (!editingLoteId || !newLote.nombre || !newLote.superficie || !newLote.cultivoId) {
            toast.error("Por favor complete todos los campos requeridos, incluyendo el cultivo.")
            return
        }

        try {
            const res = await apiFetch(`/lotes/${editingLoteId}`, {
                method: "PUT",
                body: JSON.stringify({
                    nombre: newLote.nombre,
                    superficie: Number(newLote.superficie),
                    cultivo_id: newLote.cultivoId
                })
            })

            if (res.ok) {
                fetchLotes()
                setNewLote({ nombre: "", superficie: "", cultivoId: "" })
                setEditingLoteId(null)
            } else {
                const error = await res.json()
                toast.error("Error al actualizar lote: " + (error.message || "Desconocido"))
            }
        } catch (e) {
            console.error(e)
        }
    }

    const handleCancelEdit = () => {
        setNewLote({ nombre: "", superficie: "", cultivoId: "" })
        setEditingLoteId(null)
    }

    const handleCultivoChange = async (loteId: string, cultivoId: string) => {
        const cultivo_id = cultivoId === "ninguno" ? null : cultivoId
        try {
            const res = await apiFetch(`/lotes/${loteId}`, {
                method: "PUT",
                body: JSON.stringify({ cultivo_id })
            })
            if (res.ok) {
                fetchLotes()
                toast.success("Cultivo actualizado")
            } else {
                const err = await res.json()
                toast.error("Error: " + (err.message || "No se pudo guardar"))
            }
        } catch (e) {
            console.error(e)
        }
    }

    const handleDeleteLote = async (id: string) => {
        if (!confirm("¿Eliminar lote?")) return

        try {
            const res = await apiFetch(`/lotes/${id}`, { method: "DELETE" })
            if (res.ok) {
                fetchLotes()
                if (editingLoteId === id) {
                    handleCancelEdit()
                }
                toast.success("Lote eliminado")
            } else {
                const err = await res.json()
                toast.error("Error: " + (err.message || "No se pudo eliminar el lote"))
            }
        } catch (e) {
            console.error(e)
            toast.error("Error de conexión al intentar eliminar")
        }
    }

    // Calculate available surface
    // If editing, we should temporarily add back the current lote's original surface to available?
    // Actually, available is (Total - Sum(All)).
    // Check constraint:
    // If Creating: New <= Available
    // If Updating: New <= Available + Old_Size_of_Updating_Lote
    // But simplified check in disabled Logic:
    // New validation allows sum > total, but we still want to show "Available" correctly.
    // And disables if *individual* lote > total (which is handled by backend too, but good for UI).

    const currentTotalUsed = lotes.reduce((acc, l) => acc + l.superficie, 0)
    const available = maxHectareas - currentTotalUsed
    const availableFormatted = Number(available.toFixed(2))

    // For disabling button:
    // Backend rule: Un lote individual <= Max Hectareas.
    // Cumulative rule: Permitted (Available can be negative).

    // However, UX wise, maybe we want to show red if negative?

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-xl bg-background border-border shadow-lg">
                <DialogHeader>
                    <DialogTitle>Gestión de Lotes - {establecimientoNombre}</DialogTitle>
                    <DialogDescription>
                        Administra los lotes asociados a este establecimiento.
                    </DialogDescription>
                </DialogHeader>
                <div className="py-4 space-y-6">
                    {/* Formulario Nuevo Lote */}
                    <div className="flex gap-4 items-end bg-muted/30 p-4 rounded-lg border border-border flex-wrap">
                        <div className="w-full flex justify-between items-center text-sm text-muted-foreground mb-2">
                            <span>Superficie Total: {maxHectareas} ha</span>
                            <span className={availableFormatted < 0 ? "text-destructive" : ""}>
                                Disponible: {availableFormatted.toFixed(2)} ha
                            </span>
                        </div>
                        <div className="space-y-2 flex-1 min-w-[200px]">
                            <Label htmlFor="lote-nombre">{editingLoteId ? "Editar Nombre" : "Nombre del Lote"}</Label>
                            <Input
                                id="lote-nombre"
                                placeholder="Ej: Lote 1"
                                value={newLote.nombre}
                                onChange={(e) => setNewLote({ ...newLote, nombre: e.target.value })}
                                className="bg-background"
                            />
                        </div>
                        <div className="space-y-2 w-32">
                            <Label htmlFor="lote-sup">Superficie (ha)</Label>
                            <Input
                                id="lote-sup"
                                type="text"
                                inputMode="decimal"
                                placeholder="0"
                                value={newLote.superficie}
                                onChange={(e) => {
                                  const val = e.target.value.replace(',', '.');
                                  if (val === '' || /^\d*\.?\d*$/.test(val)) {
                                    setNewLote({ ...newLote, superficie: val as any });
                                  }
                                }}
                                onKeyDown={(e) => {
                                  if (e.ctrlKey || e.metaKey || e.key.length > 1) return;
                                  if (!/[0-9.,]/.test(e.key)) {
                                    e.preventDefault();
                                  }
                                }}
                                className="bg-background"
                            />
                        </div>
                        <div className="space-y-2 flex-1 min-w-[150px]">
                            <Label>Cultivo *</Label>
                            <Select
                                value={newLote.cultivoId}
                                onValueChange={(val) => setNewLote({ ...newLote, cultivoId: val })}
                            >
                                <SelectTrigger className="bg-background">
                                    <SelectValue placeholder="Seleccionar" />
                                </SelectTrigger>
                                <SelectContent>
                                    {cultivos.map((c: any) => (
                                        <SelectItem key={c.id} value={String(c.id)}>{c.nombre}</SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                        {editingLoteId ? (
                            <div className="flex gap-1">
                                <Button
                                    onClick={handleUpdateLote}
                                    size="icon"
                                    className="mb-0.5"
                                    title="Guardar Cambios"
                                    disabled={
                                        !newLote.superficie ||
                                        Number(newLote.superficie) <= 0
                                    }
                                >
                                    <Plus className="h-4 w-4 rotate-0 hidden" /> {/* Hack to reuse icon size or just use Save/Check */}
                                    <span className="sr-only">Guardar</span>
                                    <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" className="lucide lucide-save"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M17 21v-8H7v8" /><path d="M7 3v5h8" /></svg>
                                </Button>
                                <Button
                                    onClick={handleCancelEdit}
                                    size="icon"
                                    variant="ghost"
                                    className="mb-0.5"
                                    title="Cancelar Edición"
                                >
                                    <span className="sr-only">Cancelar</span>
                                    <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" className="lucide lucide-x"><path d="M18 6 6 18" /><path d="m6 6 18 18" /></svg>
                                </Button>
                            </div>
                        ) : (
                            <Button
                                onClick={handleCreateLote}
                                size="icon"
                                className="mb-0.5"
                                disabled={!newLote.superficie || Number(newLote.superficie) <= 0 || (Number(newLote.superficie) + currentTotalUsed > maxHectareas + 0.001)}
                            >
                                <Plus className="h-4 w-4" />
                            </Button>
                        )}
                    </div>

                    {/* Listado de Lotes */}
                    <div className="rounded-md border bg-background">
                        <Table>
                            <TableHeader>
                                <TableRow className="bg-muted/50">
                                    <TableHead>Nombre</TableHead>
                                    <TableHead>Cultivo</TableHead>
                                    <TableHead className="text-right">Superficie</TableHead>
                                    <TableHead className="w-[100px] text-right">Acciones</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {lotesLoading ? (
                                    <TableRow>
                                        <TableCell colSpan={3} className="text-center py-4">Cargando...</TableCell>
                                    </TableRow>
                                ) : lotes.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={3} className="text-center py-4 text-muted-foreground">No hay lotes registrados</TableCell>
                                    </TableRow>
                                ) : (
                                    lotes.map((lote) => (
                                        <TableRow key={lote.id} className={editingLoteId === lote.id ? "bg-muted/50" : ""}>
                                            <TableCell className="font-medium">{lote.nombre}</TableCell>
                                            <TableCell>
                                                <Select
                                                    value={lote.cultivoId || "ninguno"}
                                                    onValueChange={(val) => handleCultivoChange(lote.id, val)}
                                                    disabled={!!editingLoteId}
                                                >
                                                    <SelectTrigger className="h-7 w-[130px] text-xs border-dashed">
                                                        <SelectValue />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="ninguno">Ninguno</SelectItem>
                                                        {cultivos.map((c: any) => (
                                                            <SelectItem key={c.id} value={String(c.id)}>{c.nombre}</SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                            </TableCell>
                                            <TableCell className="text-right">{lote.superficie} ha</TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-1">
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        className="h-8 w-8 text-primary"
                                                        onClick={() => handleEditLote(lote)}
                                                        disabled={!!editingLoteId && editingLoteId !== lote.id}
                                                    >
                                                        <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" className="lucide lucide-pencil"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg>
                                                    </Button>
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        className="h-8 w-8 text-destructive"
                                                        onClick={() => handleDeleteLote(lote.id)}
                                                        disabled={!!editingLoteId}
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                    </Button>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </div>
                </div>
                <DialogFooter>
                    <Button onClick={() => onOpenChange(false)}>Cerrar</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}