"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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import { CloudRain, Trash2, Calendar, Droplets, Plus, Pencil } from "lucide-react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer, Cell } from "recharts"
import { PaginationControl } from "@/components/ui/pagination-control"
import { DashboardLayout } from "@/components/dashboard-layout"

interface Establecimiento {
  id: number
  nombre: string
}

interface Precipitacion {
  id: number
  establecimiento_id: number
  fecha: string
  milimetros: number
  observaciones: string | null
  establecimiento?: Establecimiento
}

export default function PrecipitacionesPage() {
  const { user } = useAuth()
  const [mounted, setMounted] = useState(false)
  
  // Data
  const [establecimientos, setEstablecimientos] = useState<Establecimiento[]>([])
  const [precipitaciones, setPrecipitaciones] = useState<Precipitacion[]>([])
  const [stats, setStats] = useState<any>(null)
  
  // Filters and Pagination
  const [selectedEstablecimiento, setSelectedEstablecimiento] = useState<string>("all")
  const [selectedYear, setSelectedYear] = useState<string>(new Date().getFullYear().toString())
  const [currentPage, setCurrentPage] = useState(1)
  const [loading, setLoading] = useState(false)
  
  // Modal Form State
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [fecha, setFecha] = useState<string>(format(new Date(), "yyyy-MM-dd"))
  const [milimetros, setMilimetros] = useState<string>("")
  const [establecimientoId, setEstablecimientoId] = useState<string>("")
  const [observaciones, setObservaciones] = useState<string>("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [editingId, setEditingId] = useState<number | null>(null)

  const itemsPerPage = 10

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

  useEffect(() => {
    if (mounted) {
      fetchPrecipitaciones()
      fetchStats()
    }
  }, [selectedEstablecimiento, selectedYear])

  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)
        if (data.length > 0) setEstablecimientoId(data[0].id.toString())
      }
    } catch (error) {
      console.error("Error fetching establecimientos", error)
    }
  }

  const fetchPrecipitaciones = async () => {
    setLoading(true)
    try {
      let url = "/precipitaciones"
      const params = new URLSearchParams()
      if (selectedEstablecimiento !== "all") params.append("establecimiento_id", selectedEstablecimiento)
      if (selectedYear !== "all") params.append("year", selectedYear)
      
      if (params.toString()) {
        url += `?${params.toString()}`
      }

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

  const fetchStats = async () => {
    try {
      let url = `/precipitaciones/stats?year=${selectedYear === "all" ? new Date().getFullYear() : selectedYear}`
      if (selectedEstablecimiento !== "all") {
        url += `&establecimiento_id=${selectedEstablecimiento}`
      }
      const response = await apiFetch(url)
      if (response.ok) {
        const data = await response.json()
        setStats(data)
      }
    } catch (error) {
      console.error("Error fetching stats", error)
    }
  }

  const handleOpenDialog = (p?: Precipitacion) => {
    if (p) {
      setEditingId(p.id)
      setFecha(p.fecha.substring(0, 10))
      setMilimetros(p.milimetros.toString())
      setEstablecimientoId(p.establecimiento_id.toString())
      setObservaciones(p.observaciones || "")
    } else {
      setEditingId(null)
      setFecha(format(new Date(), "yyyy-MM-dd"))
      setMilimetros("")
      setObservaciones("")
      if (establecimientos.length > 0) {
        setEstablecimientoId(establecimientos[0].id.toString())
      }
    }
    setIsDialogOpen(true)
  }

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

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

      const response = await apiFetch(url, {
        method,
        body: JSON.stringify({
          establecimiento_id: establecimientoId,
          fecha,
          milimetros: parseFloat(milimetros),
          observaciones
        }),
      })

      if (response.ok) {
        toast.success(`Precipitación ${editingId ? 'actualizada' : 'registrada'} correctamente`)
        setIsDialogOpen(false)
        fetchPrecipitaciones()
        fetchStats()
      } else {
        const error = await getErrorMessage(response)
        toast.error(error)
      }
    } catch (error) {
      toast.error("Error de red al registrar")
    } finally {
      setIsSubmitting(false)
    }
  }

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

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

      if (response.ok) {
        toast.success("Registro eliminado")
        fetchPrecipitaciones()
        fetchStats()
      } 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(precipitaciones.length / itemsPerPage)
  const paginatedPrecipitaciones = precipitaciones.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  )

  const availableYears = ["all", ...Array.from({ length: 10 }, (_, i) => (new Date().getFullYear() - i).toString())]

  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">Registro de Precipitaciones</h1>
          <p className="text-muted-foreground mt-2">Administra y visualice los registros de lluvia de sus campos</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 MEDICIÓN
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
              <DialogHeader>
                <DialogTitle>{editingId ? "Editar Medición" : "Nueva Medición"}</DialogTitle>
                <DialogDescription>
                  Cargue los mm llovidos
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-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="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Fecha</Label>
                    <Input 
                      type="date" 
                      value={fecha} 
                      onChange={(e) => setFecha(e.target.value)} 
                      disabled={isSubmitting}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Milímetros (mm)</Label>
                    <Input 
                      type="text" 
                      inputMode="decimal"
                      placeholder="Ej. 15.5" 
                      value={milimetros} 
                      onChange={(e) => {
                        const val = e.target.value;
                        const sanitized = val.replace(',', '.');
                        if (sanitized === '' || /^\d*\.?\d*$/.test(sanitized)) {
                          setMilimetros(sanitized);
                        }
                      }} 
                      onBlur={(e) => {
                        const num = parseFloat(e.target.value);
                        if (!isNaN(num)) setMilimetros(num.toString());
                      }}
                      disabled={isSubmitting}
                      required
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Observaciones (Opcional)</Label>
                  <Input 
                    placeholder="Ej. Tormenta de granizo, lluvia fuerte..." 
                    value={observaciones} 
                    onChange={(e) => setObservaciones(e.target.value)} 
                    disabled={isSubmitting}
                  />
                </div>
              </div>
              <DialogFooter>
                <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 Lluvia" : "Registrar Lluvia")}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-3 flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-sm font-medium text-muted-foreground">Acumulado {selectedYear !== "all" ? selectedYear : "General"}</CardTitle>
            <Droplets className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="h-8 w-24 bg-muted animate-pulse rounded" />
            ) : (
              <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
                {stats?.totalYear !== undefined ? Number(stats.totalYear).toFixed(1) : "0.0"} <span className="text-lg font-normal text-muted-foreground">mm</span>
              </div>
            )}
            <p className="text-xs text-muted-foreground mt-1">Lluvia total acumulada</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3 flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-sm font-medium text-muted-foreground">Mes Más Lluvioso</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="h-8 w-24 bg-muted animate-pulse rounded" />
            ) : (
              <div className="text-2xl font-bold text-foreground">
                {stats?.maxMonth !== undefined ? Number(stats.maxMonth).toFixed(1) : "0.0"} <span className="text-lg font-normal text-muted-foreground">mm</span>
              </div>
            )}
            <p className="text-xs text-muted-foreground mt-1">Mayor registro mensual</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3 flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-sm font-medium text-muted-foreground">Eventos de Lluvia</CardTitle>
            <CloudRain className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="h-8 w-24 bg-muted animate-pulse rounded" />
            ) : (
              <div className="text-2xl font-bold text-foreground">
                {stats?.eventsCount || 0}
              </div>
            )}
            <p className="text-xs text-muted-foreground mt-1">Registros en el periodo</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Historial de Precipitaciones</CardTitle>
          <CardDescription>Lista de precipitaciones cargadas</CardDescription>
          <div className="pt-4 flex flex-col sm:flex-row gap-4">
            <div className="w-full sm:w-64">
              <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">
              <Select value={selectedYear} onValueChange={setSelectedYear}>
                <SelectTrigger>
                  <SelectValue placeholder="Filtrar por Año" />
                </SelectTrigger>
                <SelectContent>
                  {availableYears.map(year => (
                    <SelectItem key={year} value={year}>{year === "all" ? "Todos los años" : year}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="rounded-lg border border-border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Fecha</TableHead>
                  <TableHead>Establecimiento</TableHead>
                  <TableHead>Milímetros</TableHead>
                  <TableHead>Observaciones</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-8">
                      Cargando registros...
                    </TableCell>
                  </TableRow>
                ) : precipitaciones.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center text-muted-foreground">
                      No hay precipitaciones registradas.
                    </TableCell>
                  </TableRow>
                ) : (
                  paginatedPrecipitaciones.map((p) => (
                    <TableRow key={p.id}>
                      <TableCell className="font-medium">
                        {format(new Date(p.fecha.substring(0, 10) + "T12:00:00"), "dd MMM yyyy", { locale: es })}
                      </TableCell>
                      <TableCell>{p.establecimiento?.nombre}</TableCell>
                      <TableCell className="font-mono font-semibold text-blue-600 dark:text-blue-400">
                        {p.milimetros} mm
                      </TableCell>
                      <TableCell className="text-muted-foreground text-sm max-w-[200px] truncate">
                        {p.observaciones || "-"}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            title="Editar medición"
                            onClick={() => handleOpenDialog(p)}
                            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 medición"
                            onClick={() => handleDelete(p.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={precipitaciones.length}
            onPageChange={setCurrentPage}
            isLoading={loading}
          />
        </CardContent>
      </Card>

      {/* Chart is shown ONLY if a specific year is selected, as month aggregation over 'all' years is confusing */}
      {selectedYear !== "all" && stats?.monthly && (
        <Card>
          <CardHeader>
            <CardTitle>Análisis Mensual ({selectedYear})</CardTitle>
            <CardDescription>Distribución de precipitaciones durante el año</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[350px] w-full mt-4">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={stats.monthly} margin={{ top: 10, right: 10, left: -20, bottom: 20 }}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--muted-foreground)/0.2)" />
                  <XAxis 
                    dataKey="name" 
                    axisLine={false} 
                    tickLine={false} 
                    tick={{ fill: '#888888', fontSize: 12 }} 
                    dy={10}
                  />
                  <YAxis 
                    axisLine={false} 
                    tickLine={false} 
                    tick={{ fill: '#888888', fontSize: 12 }} 
                  />
                  <RechartsTooltip 
                    cursor={{ fill: 'rgba(150, 150, 150, 0.15)' }}
                    content={({ active, payload, label }) => {
                      if (active && payload && payload.length) {
                        return (
                          <div className="rounded-lg border bg-background p-3 shadow-md">
                            <p className="font-medium text-foreground mb-1">{label}</p>
                            <p className="text-sm text-blue-600 dark:text-blue-400 font-bold">
                              Lluvia: {payload[0].value} mm
                            </p>
                          </div>
                        )
                      }
                      return null
                    }}
                  />
                  <Bar dataKey="mm" radius={[4, 4, 0, 0]} maxBarSize={50}>
                    {stats.monthly.map((entry: any, index: number) => (
                      <Cell key={`cell-${index}`} fill={entry.mm > 0 ? '#3b82f6' : 'rgba(150, 150, 150, 0.2)'} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      )}
      </div>
    </DashboardLayout>
  )
}