"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/lib/auth-context"
import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { toast } from "sonner"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import { ClipboardList, Trash2, Pencil, Plus, MapPin, Calendar, Ruler, Search } from "lucide-react"
import { PaginationControl } from "@/components/ui/pagination-control"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Badge } from "@/components/ui/badge"

interface Establecimiento {
  id: number
  nombre: string
}

interface Lote {
  id: number
  nombre: string
  establecimiento_id: number
}

interface Visita {
  id: number
  establecimiento_id: number
  lote_id: number | null
  fecha: string
  estado_general: string | null
  altura_plantas_cm: number | null
  color_cultivo: string | null
  nivel_maleza: string | null
  nivel_plagas_enfermedades: string | null
  observaciones: string | null
  establecimiento?: Establecimiento
  lote?: Lote
}

export default function VisitasPage() {
  const { user } = useAuth()
  const [mounted, setMounted] = useState(false)
  
  // Data
  const [establecimientos, setEstablecimientos] = useState<Establecimiento[]>([])
  const [lotes, setLotes] = useState<Lote[]>([])
  const [visitas, setVisitas] = useState<Visita[]>([])
  
  // Filters and Pagination
  const [selectedEstablecimiento, setSelectedEstablecimiento] = useState<string>("all")
  const [selectedEstado, setSelectedEstado] = useState<string>("all")
  const [selectedMaleza, setSelectedMaleza] = useState<string>("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [loading, setLoading] = useState(false)
  
  // Modal Form State
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingId, setEditingId] = useState<number | null>(null)
  
  const [fecha, setFecha] = useState<string>(format(new Date(), "yyyy-MM-dd"))
  const [establecimientoId, setEstablecimientoId] = useState<string>("")
  const [loteId, setLoteId] = useState<string>("none")
  const [estadoGeneral, setEstadoGeneral] = useState<string>("Bueno")
  const [alturaPlantas, setAlturaPlantas] = useState<string>("")
  const [colorCultivo, setColorCultivo] = useState<string>("Verde Intenso")
  const [nivelMaleza, setNivelMaleza] = useState<string>("Nulo")
  const [nivelPlagas, setNivelPlagas] = useState<string>("Nulo")
  const [observaciones, setObservaciones] = useState<string>("")
  
  const [isSubmitting, setIsSubmitting] = useState(false)

  const itemsPerPage = 10

  useEffect(() => {
    setMounted(true)
    fetchEstablecimientos()
    fetchVisitas()
  }, [])

  useEffect(() => {
    if (mounted) {
      fetchVisitas()
    }
  }, [selectedEstablecimiento, selectedEstado, selectedMaleza])

  useEffect(() => {
    if (establecimientoId) {
      fetchLotes(establecimientoId)
    } else {
      setLotes([])
    }
  }, [establecimientoId])

  const fetchEstablecimientos = async () => {
    try {
      const response = await apiFetch("/establecimientos?all=1")
      if (response.ok) {
        const responseData = await response.json()
        const data = responseData.data || responseData
        setEstablecimientos(data)
      }
    } catch (error) {
      console.error("Error fetching establecimientos", error)
    }
  }

  const fetchLotes = async (estId: string) => {
    try {
      const response = await apiFetch(`/lotes?establecimiento_id=${estId}&all=1`)
      if (response.ok) {
        const responseData = await response.json()
        const data = responseData.data || responseData
        setLotes(data)
      }
    } catch (error) {
      console.error("Error fetching lotes", error)
    }
  }

  const fetchVisitas = async () => {
    setLoading(true)
    try {
      let url = "/visitas?"
      const params = new URLSearchParams()
      if (selectedEstablecimiento !== "all") params.append('establecimiento_id', selectedEstablecimiento)
      if (selectedEstado !== "all") params.append('estado_general', selectedEstado)
      if (selectedMaleza !== "all") params.append('nivel_maleza', selectedMaleza)
      
      url += params.toString()

      const response = await apiFetch(url)
      if (response.ok) {
        const data = await response.json()
        setVisitas(data)
        setCurrentPage(1)
      }
    } catch (error) {
      console.error("Error fetching visitas", error)
    } finally {
      setLoading(false)
    }
  }

  const handleOpenDialog = (v?: Visita) => {
    if (v) {
      setEditingId(v.id)
      setFecha(v.fecha.substring(0, 10))
      setEstablecimientoId(v.establecimiento_id.toString())
      setLoteId(v.lote_id ? v.lote_id.toString() : "none")
      setEstadoGeneral(v.estado_general || "Bueno")
      setAlturaPlantas(v.altura_plantas_cm?.toString() || "")
      setColorCultivo(v.color_cultivo || "Verde Intenso")
      setNivelMaleza(v.nivel_maleza || "Nulo")
      setNivelPlagas(v.nivel_plagas_enfermedades || "Nulo")
      setObservaciones(v.observaciones || "")
    } else {
      setEditingId(null)
      setFecha(format(new Date(), "yyyy-MM-dd"))
      setObservaciones("")
      setAlturaPlantas("")
      setEstadoGeneral("Bueno")
      setColorCultivo("Verde Intenso")
      setNivelMaleza("Nulo")
      setNivelPlagas("Nulo")
      if (establecimientos.length > 0) {
        setEstablecimientoId(establecimientos[0].id.toString())
      } else {
        setEstablecimientoId("")
      }
      setLoteId("none")
    }
    setIsDialogOpen(true)
  }

  const handleSubmit = async () => {
    if (!establecimientoId || !fecha) {
      toast.error("Complete los campos obligatorios (Establecimiento y Fecha)")
      return
    }

    setIsSubmitting(true)
    try {
      const method = editingId ? "PUT" : "POST"
      const url = editingId ? `/visitas/${editingId}` : "/visitas"

      const response = await apiFetch(url, {
        method,
        body: JSON.stringify({
          establecimiento_id: establecimientoId,
          lote_id: loteId === "none" ? null : loteId,
          fecha,
          estado_general: estadoGeneral,
          altura_plantas_cm: alturaPlantas ? parseFloat(alturaPlantas) : null,
          color_cultivo: colorCultivo,
          nivel_maleza: nivelMaleza,
          nivel_plagas_enfermedades: nivelPlagas,
          observaciones
        }),
      })

      if (response.ok) {
        toast.success(`Visita ${editingId ? 'actualizada' : 'registrada'} correctamente`)
        setIsDialogOpen(false)
        fetchVisitas()
      } else {
        const error = await getErrorMessage(response)
        toast.error(error)
      }
    } catch (error) {
      toast.error("Error de red al procesar")
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleDelete = async (id: number) => {
    if (!confirm("¿Está seguro de eliminar este registro de visita?")) return

    try {
      const response = await apiFetch(`/visitas/${id}`, {
        method: "DELETE",
      })

      if (response.ok) {
        toast.success("Registro eliminado")
        fetchVisitas()
      } else {
        const error = await getErrorMessage(response)
        toast.error(error)
      }
    } catch (error) {
      toast.error("Error al eliminar")
    }
  }

  if (!mounted) return null

  // Pagination logic
  const totalPages = Math.ceil(visitas.length / itemsPerPage)
  const paginatedVisitas = visitas.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  )

  const getStatusBadge = (status: string | null) => {
    switch (status) {
      case "Excelente": return <Badge className="bg-emerald-500 hover:bg-emerald-600">{status}</Badge>
      case "Bueno": return <Badge className="bg-blue-500 hover:bg-blue-600">{status}</Badge>
      case "Regular": return <Badge className="bg-amber-500 hover:bg-amber-600">{status}</Badge>
      case "Malo": return <Badge className="bg-rose-500 hover:bg-rose-600">{status}</Badge>
      default: return <Badge variant="outline">{status || "N/A"}</Badge>
    }
  }

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">Visitas y Observaciones</h1>
            <p className="text-muted-foreground mt-2">Seguimiento detallado del estado de los cultivos y lotes</p>
          </div>
          <div className="flex gap-2">
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button onClick={() => handleOpenDialog()} className="gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white">
                  <Plus className="h-4 w-4" />
                  NUEVA VISITA
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                <DialogHeader className="pb-2">
                  <DialogTitle>{editingId ? "Editar Visita" : "Nueva Visita de Campo"}</DialogTitle>
                  <DialogDescription>
                    Complete la información observada durante la recorrida
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-6 py-2">

                  {/* Sección 1: Ubicación */}
                  <div className="space-y-4">
                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b pb-1">Ubicación</p>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Establecimiento *</Label>
                        <Select value={establecimientoId} onValueChange={setEstablecimientoId} disabled={isSubmitting}>
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccione establecimiento" />
                          </SelectTrigger>
                          <SelectContent>
                            {establecimientos.map((est) => (
                              <SelectItem key={est.id} value={est.id.toString()}>
                                {est.nombre}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Lote (Opcional)</Label>
                        <Select value={loteId} onValueChange={setLoteId} disabled={isSubmitting || lotes.length === 0}>
                          <SelectTrigger>
                            <SelectValue placeholder="Sin lote específico" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="none">Sin lote específico</SelectItem>
                            {lotes.map((lote) => (
                              <SelectItem key={lote.id} value={lote.id.toString()}>
                                {lote.nombre}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  {/* Sección 2: Datos de la visita */}
                  <div className="space-y-4">
                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b pb-1">Datos de la Visita</p>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Fecha de Visita *</Label>
                        <Input 
                          type="date" 
                          value={fecha} 
                          onChange={(e) => setFecha(e.target.value)} 
                          disabled={isSubmitting}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Altura de Plantas (cm)</Label>
                        <Input 
                          type="text" 
                          inputMode="decimal"
                          placeholder="Ej. 45.5" 
                          value={alturaPlantas} 
                          onChange={(e) => {
                            const val = e.target.value;
                            const sanitized = val.replace(',', '.');
                            if (sanitized === '' || /^\d*\.?\d*$/.test(sanitized)) {
                              setAlturaPlantas(sanitized);
                            }
                          }} 
                          disabled={isSubmitting}
                        />
                      </div>
                    </div>
                  </div>

                  {/* Sección 3: Estado del cultivo */}
                  <div className="space-y-4">
                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b pb-1">Estado del Cultivo</p>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Estado General</Label>
                        <Select value={estadoGeneral} onValueChange={setEstadoGeneral} disabled={isSubmitting}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Excelente">Excelente</SelectItem>
                            <SelectItem value="Bueno">Bueno</SelectItem>
                            <SelectItem value="Regular">Regular</SelectItem>
                            <SelectItem value="Malo">Malo</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Color del Cultivo</Label>
                        <Select value={colorCultivo} onValueChange={setColorCultivo} disabled={isSubmitting}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Verde Intenso">Verde Intenso</SelectItem>
                            <SelectItem value="Verde Pálido">Verde Pálido</SelectItem>
                            <SelectItem value="Amarillento">Amarillento</SelectItem>
                            <SelectItem value="Otro">Otro</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Nivel de Maleza</Label>
                        <Select value={nivelMaleza} onValueChange={setNivelMaleza} disabled={isSubmitting}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Nulo">Nulo</SelectItem>
                            <SelectItem value="Bajo">Bajo</SelectItem>
                            <SelectItem value="Medio">Medio</SelectItem>
                            <SelectItem value="Alto">Alto</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Plagas / Enfermedades</Label>
                        <Select value={nivelPlagas} onValueChange={setNivelPlagas} disabled={isSubmitting}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Nulo">Nulo</SelectItem>
                            <SelectItem value="Bajo">Bajo</SelectItem>
                            <SelectItem value="Medio">Medio</SelectItem>
                            <SelectItem value="Alto">Alto</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  {/* Sección 4: Observaciones */}
                  <div className="space-y-4">
                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b pb-1">Observaciones</p>
                    <div className="space-y-2">
                      <Label>Notas Detalladas</Label>
                      <Textarea 
                        placeholder="Describa lo observado en el campo: malezas específicas, anomalías, recomendaciones..." 
                        value={observaciones} 
                        onChange={(e) => setObservaciones(e.target.value)} 
                        disabled={isSubmitting}
                        className="min-h-[100px] resize-none"
                      />
                    </div>
                  </div>

                </div>
                <DialogFooter className="pt-2">
                  <Button variant="outline" onClick={() => setIsDialogOpen(false)} disabled={isSubmitting}>
                    Cancelar
                  </Button>
                  <Button onClick={handleSubmit} disabled={isSubmitting || establecimientos.length === 0} className="bg-[#16a34a] hover:bg-[#15803d] text-white">
                    {isSubmitting ? "Guardando..." : (editingId ? "Actualizar Visita" : "Registrar Visita")}
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Historial de Visitas</CardTitle>
            <CardDescription>Registros de monitoreo realizados</CardDescription>
            <div className="pt-4 flex flex-col sm:flex-row gap-4">
              <div className="w-full sm:w-64">
                <Label className="text-xs mb-1 block">Establecimiento</Label>
                <Select value={selectedEstablecimiento} onValueChange={setSelectedEstablecimiento}>
                  <SelectTrigger>
                    <SelectValue placeholder="Todos los campos" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos los campos</SelectItem>
                    {establecimientos.map((est) => (
                      <SelectItem key={est.id} value={est.id.toString()}>
                        {est.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="w-full sm:w-48">
                <Label className="text-xs mb-1 block">Estado General</Label>
                <Select value={selectedEstado} onValueChange={setSelectedEstado}>
                  <SelectTrigger>
                    <SelectValue placeholder="Estado" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos los estados</SelectItem>
                    <SelectItem value="Excelente">Excelente</SelectItem>
                    <SelectItem value="Bueno">Bueno</SelectItem>
                    <SelectItem value="Regular">Regular</SelectItem>
                    <SelectItem value="Malo">Malo</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="w-full sm:w-48">
                <Label className="text-xs mb-1 block">Nivel Maleza</Label>
                <Select value={selectedMaleza} onValueChange={setSelectedMaleza}>
                  <SelectTrigger>
                    <SelectValue placeholder="Nivel Maleza" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Cualquier nivel</SelectItem>
                    <SelectItem value="Nulo">Nulo</SelectItem>
                    <SelectItem value="Bajo">Bajo</SelectItem>
                    <SelectItem value="Medio">Medio</SelectItem>
                    <SelectItem value="Alto">Alto</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-end">
                <Button 
                  variant="ghost" 
                  size="sm" 
                  className="text-xs text-muted-foreground"
                  onClick={() => {
                    setSelectedEstablecimiento("all")
                    setSelectedEstado("all")
                    setSelectedMaleza("all")
                  }}
                >
                  Limpiar filtros
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border border-border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fecha</TableHead>
                    <TableHead>Establecimiento / Lote</TableHead>
                    <TableHead>Estado</TableHead>
                    <TableHead>Maleza</TableHead>
                    <TableHead>Altura</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loading ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                        Cargando registros...
                      </TableCell>
                    </TableRow>
                  ) : visitas.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                        No se encontraron registros de visitas.
                      </TableCell>
                    </TableRow>
                  ) : (
                    paginatedVisitas.map((v) => (
                      <TableRow key={v.id}>
                        <TableCell className="font-medium whitespace-nowrap">
                          {format(new Date(v.fecha.substring(0, 10) + "T12:00:00"), "dd MMM yyyy", { locale: es })}
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-col">
                            <span className="font-medium">{v.establecimiento?.nombre}</span>
                            {v.lote && <span className="text-xs text-muted-foreground">Lote: {v.lote.nombre}</span>}
                          </div>
                        </TableCell>
                        <TableCell>{getStatusBadge(v.estado_general)}</TableCell>
                        <TableCell>
                          <span className={`text-sm ${v.nivel_maleza === 'Alto' ? 'text-rose-500 font-semibold' : ''}`}>
                            {v.nivel_maleza}
                          </span>
                        </TableCell>
                        <TableCell>
                          {v.altura_plantas_cm ? (
                            <span className="font-mono text-sm">{v.altura_plantas_cm} cm</span>
                          ) : "-"}
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="outline"
                              size="sm"
                              title="Editar visita"
                              onClick={() => handleOpenDialog(v)}
                              className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 bg-transparent"
                            >
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              title="Eliminar visita"
                              onClick={() => handleDelete(v.id)}
                              className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
            <PaginationControl
              currentPage={currentPage}
              lastPage={totalPages}
              total={visitas.length}
              onPageChange={setCurrentPage}
              isLoading={loading}
            />
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}