"use client"

import { useState, Suspense } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Pencil, Eye } from "lucide-react"
import Link from "next/link"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

import { apiFetch } from "@/lib/apiutils"
import { PaginationControl } from "@/components/ui/pagination-control"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { getErrorMessage } from "@/lib/apiutils"
import { Plus } from "lucide-react"


import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { useApi } from "@/lib/use-api"
import { toast } from "sonner"

interface Establecimiento {
  id: string
  nombre: string
  productor_id: string
  ubicacion: string
  hectareas: number
  productor?: {
    nombre: string
  }
}

interface Campana {
  id: string
  nombre: string
  establecimiento_id: string
  cultivo: string
  fecha_inicio: string // snake_case from API
  fecha_fin: string   // snake_case from API
  status: "activa" | "finalizada"
  rinde_qq_ha?: number
  produccion_total?: number
  rinde_estimado?: number
  produccion_estimada?: number
  rinde_por_cultivo?: {
    cultivo: string
    superficie: number
    produccion: number
    rinde: number
  }[]
  cultivos_unicos?: string[]
  labores_count: number
  establecimiento?: {
    hectareas: number
  }
}


function CampanasContent() {
  // Dialog Logic (Create & Edit)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    fecha_inicio: "",
    fecha_fin: "",
    estado: "activa"
  })

  // Global Campanas (Main View)
  const [page, setPage] = useState(1)
  const { data: campanasData, mutate } = useApi(`/campanas?limit=10&page=${page}`)

  const campanas = (campanasData?.data || []).map((c: any) => ({
    ...c,
    status: c.estado
  })) as Campana[]

  const total = campanasData?.total || 0
  const lastPage = campanasData?.last_page || 1

  const getStatusColor = (status: string) => {
    const colors = {
      activa: "bg-green-100 text-green-800 border-green-300",
      finalizada: "bg-gray-100 text-gray-800 border-gray-300",
    }
    return colors[status as keyof typeof colors] || colors.activa
  }

  const handleOpenCreate = () => {
    setEditingId(null)
    setFormData({
      nombre: "",
      fecha_inicio: "",
      fecha_fin: "",
      estado: "activa"
    })
    setIsDialogOpen(true)
  }

  const handleOpenEdit = (campana: Campana) => {
    setEditingId(campana.id)
    setFormData({
      nombre: campana.nombre,
      fecha_inicio: campana.fecha_inicio.split('T')[0],
      fecha_fin: campana.fecha_fin.split('T')[0],
      estado: campana.status
    })
    setIsDialogOpen(true)
  }

  const handleSaveCampaign = async (forceActivation = false) => {
    if (!formData.nombre || !formData.fecha_inicio || !formData.fecha_fin) {
      toast.error("Por favor completa todos los campos requeridos")
      return
    }

    try {
      const bodyPayload = { ...formData, force_activation: forceActivation }
      let res;
      if (editingId) {
        res = await apiFetch(`/campanas/${editingId}`, {
          method: "PUT",
          body: JSON.stringify(bodyPayload)
        })
      } else {
        res = await apiFetch("/campanas", {
          method: "POST",
          body: JSON.stringify(bodyPayload)
        })
      }

      if (res.ok) {
        toast.success(editingId ? "Campaña actualizada exitosamente." : "Campaña creada exitosamente.")
        setIsDialogOpen(false)
        setEditingId(null)
        setFormData({
          nombre: "",
          fecha_inicio: "",
          fecha_fin: "",
          estado: "activa"
        })
        mutate()
      } else if (res.status === 409) {
        const errorData = await res.json()
        if (errorData.error_code === 'ACTIVE_CAMPAIGN_EXISTS') {
          if (window.confirm(errorData.message)) {
            // User agreed to auto-deactivate other campaigns
            handleSaveCampaign(true)
          }
        } else {
          toast.error(errorData.message || "Error al guardar la campaña")
        }
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }
    } catch (e) {
      console.error(e)
      toast.error("Error de conexión")
    }
  }

  return (
    <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">Gestión de Campañas</h1>
          <p className="text-muted-foreground mt-2">Administra las campañas agrícolas.</p>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button className="gap-2" onClick={handleOpenCreate}>
              <Plus className="h-4 w-4" />
              Nueva Campaña
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>{editingId ? "Editar Campaña" : "Nueva Campaña"}</DialogTitle>
              <DialogDescription>{editingId ? "Modifica los datos de la campaña." : "Crea una nueva campaña (período)."}</DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="nombre">Nombre</Label>
                <Input
                  id="nombre"
                  placeholder="Ej: Trigo 2024"
                  value={formData.nombre}
                  onChange={(e) => {
                    if (e.target.value.length <= 50) {
                      setFormData({ ...formData, nombre: e.target.value })
                    }
                  }}
                  maxLength={50}
                  className={formData.nombre.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                />
                {formData.nombre.length >= 50 && (
                  <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 50 caracteres.</p>
                )}
              </div>
              <div className="space-y-2">
                <Label htmlFor="estado">Estado</Label>
                <Select
                  value={formData.estado}
                  onValueChange={(val) => setFormData({ ...formData, estado: val })}
                >
                  <SelectTrigger id="estado">
                    <SelectValue placeholder="Seleccionar estado" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="activa">Activa</SelectItem>
                    <SelectItem value="finalizada">Finalizada</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="fecha_inicio">Fecha Inicio</Label>
                  <Input
                    id="fecha_inicio"
                    type="date"
                    value={formData.fecha_inicio}
                    onChange={(e) => setFormData({ ...formData, fecha_inicio: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="fecha_fin">Fecha Fin</Label>
                  <Input
                    id="fecha_fin"
                    type="date"
                    value={formData.fecha_fin}
                    onChange={(e) => setFormData({ ...formData, fecha_fin: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button onClick={() => handleSaveCampaign(false)}>{editingId ? "Guardar Cambios" : "Crear Campaña"}</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Nombre</TableHead>
              <TableHead>Fecha Inicio</TableHead>
              <TableHead>Fecha Fin</TableHead>
              <TableHead>Estado</TableHead>
              <TableHead>Rendimientos</TableHead>
              <TableHead className="text-right">Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {campanas.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                  No se encontraron campañas.
                </TableCell>
              </TableRow>
            ) : (
              campanas.map((campana) => (
                <TableRow key={campana.id}>
                  <TableCell className="font-medium">{campana.nombre}</TableCell>
                  <TableCell>{new Date(campana.fecha_inicio).toLocaleDateString()}</TableCell>
                  <TableCell>{new Date(campana.fecha_fin).toLocaleDateString()}</TableCell>
                  <TableCell>
                    <Badge variant="outline" className={getStatusColor(campana.status)}>
                      {campana.status}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col gap-1">
                      {!campana.rinde_por_cultivo || campana.rinde_por_cultivo.length === 0 ? (
                        <span className="text-xs text-muted-foreground">-</span>
                      ) : (
                        campana.rinde_por_cultivo.map((rc, idx) => (
                          <div key={idx} className="flex items-center gap-2 text-xs">
                            <span className="font-semibold">{rc.cultivo}:</span>
                            <span>{rc.rinde} <span className="text-[10px] text-muted-foreground">qq/ha</span></span>
                          </div>
                        ))
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Link href={`/dashboard/campanas/detalle?id=${campana.id}`}>
                        <Button variant="ghost" size="sm">
                          <Eye className="h-4 w-4 mr-2" />
                          Ver
                        </Button>
                      </Link>
                      <Button variant="ghost" size="sm" onClick={() => handleOpenEdit(campana)}>
                        <Pencil className="h-4 w-4 mr-2" />
                        Editar
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <div className="mt-4">
        <PaginationControl
          currentPage={page}
          lastPage={lastPage}
          total={total}
          onPageChange={setPage}
        />
      </div>
    </div>
  )
}

export default function CampanasPage() {
  return (
    <DashboardLayout>
      <Suspense fallback={<div className="p-6 text-center">Cargando filtros...</div>}>
        <CampanasContent />
      </Suspense>
    </DashboardLayout>
  )
}