"use client"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Eye, Edit, Share2, FileDown, Trash2 } from "lucide-react"
import { useAuth } from "@/lib/auth-context"
import Link from "next/link"
import { createPortal } from "react-dom"
import { toJpeg } from "html-to-image"
import { jsPDF } from "jspdf"
import { RecetaDocumento } from "@/components/receta-documento"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { useEffect } from "react"
import { PaginationControl } from "@/components/ui/pagination-control"

interface Producto {
  nombre: string
  dosis: string
  unidad: string
}

interface Receta {
  id: string
  nombre: string
  productor: string
  establecimiento: string
  lote: string
  cultivo: string
  hectareas: number
  fechaCreacion: string
  creador: string
  productos: Producto[]
  observaciones: string
  estado?: string
  raw?: any
}

// ... imports
import { useApi } from "@/lib/use-api"
import { useTableSort } from "@/lib/use-table-sort"
import { toast } from "sonner"

export default function RecetasPage() {
  const { user } = useAuth()
  const { sortBy, sortDir, handleSort, appendSortParams, SortIcon } = useTableSort("fecha", "desc")
  const [currentPage, setCurrentPage] = useState(1)
  // Use SWR for fetching with pagination
  const [searchTerm, setSearchTerm] = useState("")

  const [filterCultivo, setFilterCultivo] = useState("")
  
  const [selectedRecetaForPdf, setSelectedRecetaForPdf] = useState<{ receta: any, action: 'descarga' | 'compartir' } | null>(null)

  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [recetaToDelete, setRecetaToDelete] = useState<string | null>(null)

  const handleDeleteReceta = async () => {
    if (!recetaToDelete) return
    try {
      const res = await apiFetch(`/recetas/${recetaToDelete}`, {
        method: "DELETE",
      })
      if (res.ok) {
        toast.success("Receta eliminada exitosamente")
        await mutate()
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }
    } catch (e) {
      console.error(e)
      toast.error("Error al eliminar la receta")
    } finally {
      setIsDeleteDialogOpen(false)
      setRecetaToDelete(null)
    }
  }

  useEffect(() => {
    if (selectedRecetaForPdf) {
      const { receta, action } = selectedRecetaForPdf
      // Esperamos un instante para asegurarnos de que el portal oculto se renderizó en el DOM
      setTimeout(async () => {
        const elementId = `hidden-pdf-container-${receta.id}`
        const element = document.getElementById(elementId)
        if (!element) return

        const filename = `Receta-${receta.numero || receta.id}.pdf`

        try {
          toast.loading("Generando archivo PDF...", { id: "pdfToast" })
          
          let dataUrl = ""
          try {
            dataUrl = await toJpeg(element, { quality: 0.95, pixelRatio: 2 })
          } catch (internalErr) {
            console.warn("html-to-image falló (posible bug en Firefox), reintentando sin cargar tipografías externas", internalErr)
            dataUrl = await toJpeg(element, { quality: 0.95, pixelRatio: 2, fontEmbedCSS: '', skipFonts: true })
          }
          const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' })
          
          const imgProps = pdf.getImageProperties(dataUrl)
          const pdfPageWidth = pdf.internal.pageSize.getWidth()
          const pdfPageHeight = pdf.internal.pageSize.getHeight()

          let finalWidth = pdfPageWidth
          let finalHeight = (imgProps.height * finalWidth) / imgProps.width
          
          if (finalHeight > pdfPageHeight) {
            finalHeight = pdfPageHeight
            finalWidth = (imgProps.width * finalHeight) / imgProps.height
          }

          const marginLeft = (pdfPageWidth - finalWidth) / 2
          pdf.addImage(dataUrl, 'JPEG', marginLeft, 0, finalWidth, finalHeight)
          
          const blob = pdf.output('blob')
          const file = new File([blob], filename, { type: 'application/pdf' })

          toast.dismiss("pdfToast")
          
          if (action === 'compartir' && navigator.canShare && navigator.canShare({ files: [file] })) {
            try {
              await navigator.share({
                files: [file],
                title: filename,
                text: `Te envío la receta ${filename} adjunta.`
              })
              toast.success("Abriendo menú de compartir...")
            } catch (err) {
              console.log("El usuario canceló el Share Sheet", err)
            }
          } else {
            const url = URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            URL.revokeObjectURL(url)
            toast.success("El PDF ha sido descargado.")
          }
        } catch(e) {
          console.error(e)
          toast.dismiss("pdfToast")
          toast.error("Error crítico al procesar el archivo.")
        } finally {
          setSelectedRecetaForPdf(null)
        }
      }, 100)
    }
  }, [selectedRecetaForPdf])

  // Debounce search term could be good, but for now direct binding or simple timeout
  // Building query string
  const queryParams = new URLSearchParams()
  queryParams.append("page", String(currentPage))
  if (searchTerm) queryParams.append("search", searchTerm)

  if (filterCultivo) queryParams.append("cultivo", filterCultivo)
  appendSortParams(queryParams)

  const { data: rawData, isLoading, mutate } = useApi(`/recetas?${queryParams.toString()}`)

  // Fetch Cultivos for dynamic filter and management
  const { data: cultivosRaw, mutate: mutateCultivos } = useApi("/cultivos")
  const cultivosList = Array.isArray(cultivosRaw) ? cultivosRaw : (cultivosRaw?.data || [])

  const [isCultivoDialogOpen, setIsCultivoDialogOpen] = useState(false)
  const [newCultivoName, setNewCultivoName] = useState("")

  const handleCreateCultivo = async () => {
    if (!newCultivoName) return
    try {
      const res = await apiFetch("/cultivos", {
        method: "POST",
        body: JSON.stringify({ nombre: newCultivoName })
      })
      if (res.ok) {
        await mutateCultivos()
        setNewCultivoName("")
        setIsCultivoDialogOpen(false)
        // Optionally alert success?
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }
    } catch (e) {
      console.error(e)
    }
  }



  const dataList = rawData?.data || []
  const lastPage = rawData?.last_page || 1
  const total = rawData?.total || 0

  // Map data
  const recetas: Receta[] = dataList.map((r: any) => ({
    id: String(r.id),
    nombre: r.numero || `Receta #${r.id}`,
    productor: r.productor?.nombre || "N/A",
    establecimiento: r.establecimiento?.nombre || "N/A",
    lote: r.lote?.nombre || "N/A",
    cultivo: r.cultivo || (r.cultivoRel ? r.cultivoRel.nombre : "N/A"), // Handle both legacy string and relation
    hectareas: Number(r.superficie),
    fechaCreacion: r.fecha,
    creador: r.ingeniero_responsable,
    observaciones: r.observaciones,
    estado: r.estado || "borrador",
    productos: [],
    raw: r
  }))

  const filteredRecetas = recetas // No client-side filtering anymore






  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">Gestión de Recetas</h1>
            <p className="text-muted-foreground mt-2">Crea y administra recetas agronómicas para tus clientes</p>
          </div>
        </div>

        <div className="hidden md:grid gap-4 md:grid-cols-1">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total Recetas</CardTitle>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="h-8 w-24 bg-muted animate-pulse rounded" />
              ) : (
                <div className="text-2xl font-bold text-foreground">{rawData?.stats?.total || 0}</div>
              )}
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <div className="flex justify-between items-center">
              <div>
                <CardTitle>Lista de Recetas</CardTitle>
                <CardDescription>Administra todas las recetas agronómicas creadas</CardDescription>
              </div>
              <div className="flex flex-wrap gap-2 items-center">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                  <Input
                    placeholder="Buscar..."
                    value={searchTerm}
                    onChange={(e) => {
                      setSearchTerm(e.target.value)
                      setCurrentPage(1) // Reset to page 1 on search
                    }}
                    className="pl-10 w-40 sm:w-64"
                  />
                </div>



                <Select value={filterCultivo} onValueChange={(val) => { setFilterCultivo(val === "todos" ? "" : val); setCurrentPage(1); }}>
                  <SelectTrigger className="w-[140px]">
                    <SelectValue placeholder="Cultivo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todos">Todos</SelectItem>
                    {cultivosList.map((c: any) => (
                      <SelectItem key={c.id} value={c.nombre}>
                        {c.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                <Link href="/dashboard/recetas/nueva">
                  <Button className="bg-emerald-600 hover:bg-emerald-800 hover:scale-105 hover:shadow-lg transition-all duration-300 text-white font-bold shadow-md">
                    <Plus className="mr-2 h-4 w-4" />
                    NUEVA RECETA
                  </Button>
                </Link>

                <Dialog open={isCultivoDialogOpen} onOpenChange={setIsCultivoDialogOpen}>
                  <DialogTrigger asChild>
                    <Button variant="outline" className="gap-2">
                      <Plus className="h-4 w-4" />
                      Nuevo Cultivo
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Nuevo Cultivo</DialogTitle>
                      <DialogDescription>Agrega un nuevo cultivo al sistema.</DialogDescription>
                    </DialogHeader>
                    <div className="py-4">
                      <Label>Nombre</Label>
                      <Input
                        value={newCultivoName}
                        onChange={(e) => setNewCultivoName(e.target.value)}
                        placeholder="Ej: Soja"
                      />
                    </div>
                    <DialogFooter>
                      <Button onClick={handleCreateCultivo}>Guardar</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border border-border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("numero")}>
                      <div className="flex items-center">Nro Receta <SortIcon column="numero" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("productor")}>
                      <div className="flex items-center">Productor <SortIcon column="productor" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("establecimiento")}>
                      <div className="flex items-center">Establecimiento <SortIcon column="establecimiento" /></div>
                    </TableHead>
                    <TableHead>Lote</TableHead>
                    <TableHead>Cultivo</TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("superficie")}>
                      <div className="flex items-center">Hectáreas <SortIcon column="superficie" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("fecha")}>
                      <div className="flex items-center">Fecha <SortIcon column="fecha" /></div>
                    </TableHead>

                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {isLoading && recetas.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={8} className="text-center py-8">
                        Cargando recetas...
                      </TableCell>
                    </TableRow>
                  ) : filteredRecetas.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={8} className="text-center text-muted-foreground">
                        No se encontraron recetas
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredRecetas.map((receta) => (
                      <TableRow key={receta.id}>
                        <TableCell className="font-medium">{receta.nombre}</TableCell>
                        <TableCell>{receta.productor}</TableCell>
                        <TableCell>{receta.establecimiento}</TableCell>
                        <TableCell>{receta.lote}</TableCell>
                        <TableCell>{receta.cultivo}</TableCell>
                        <TableCell>{receta.hectareas} ha</TableCell>
                        <TableCell>{receta.fechaCreacion}</TableCell>

                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button 
                              onClick={() => setSelectedRecetaForPdf({ receta: receta.raw, action: 'descarga' })}
                              variant="outline" 
                              size="sm" 
                              title="Descargar PDF"
                              className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 bg-transparent flex"
                            >
                              <FileDown className="h-4 w-4" />
                            </Button>
                            <Button 
                              onClick={() => setSelectedRecetaForPdf({ receta: receta.raw, action: 'compartir' })}
                              variant="outline" 
                              size="sm" 
                              title="Compartir"
                              className="text-purple-600 hover:text-purple-700 hover:bg-purple-50 bg-transparent xl:hidden opacity-100"
                            >
                              <Share2 className="h-4 w-4" />
                            </Button>
                            <Link href={`/dashboard/recetas/ver?id=${receta.id}`}>
                              <Button
                                variant="outline"
                                size="sm"
                                title="Ver detalles"
                                className="text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 bg-transparent"
                              >
                                <Eye className="h-4 w-4" />
                              </Button>
                            </Link>
                            <Link href={`/dashboard/recetas/editar?id=${receta.id}`}>
                              <Button variant="outline" size="sm" title="Editar receta" className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 bg-transparent">
                                <Edit className="h-4 w-4" />
                              </Button>
                            </Link>
                            <Button
                              variant="outline"
                              size="sm"
                              title="Eliminar receta"
                              className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
                              onClick={() => {
                                setRecetaToDelete(receta.id)
                                setIsDeleteDialogOpen(true)
                              }}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
            <PaginationControl
              currentPage={currentPage}
              lastPage={lastPage}
              total={total}
              onPageChange={setCurrentPage}
              isLoading={isLoading}
            />
          </CardContent>
        </Card>
      </div>

      {selectedRecetaForPdf && createPortal(
        <div style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          width: '1024px', 
          opacity: 0.01, 
          pointerEvents: 'none', 
          zIndex: -9999,
          '--background': 'oklch(0.99 0 0)',
          '--foreground': 'oklch(0.25 0 0)',
          '--card': 'oklch(1 0 0)',
          '--card-foreground': 'oklch(0.25 0 0)',
          '--popover': 'oklch(1 0 0)',
          '--popover-foreground': 'oklch(0.25 0 0)',
          '--primary': 'oklch(0.55 0.13 150)',
          '--primary-foreground': 'oklch(0.99 0 0)',
          '--secondary': 'oklch(0.45 0.11 155)',
          '--secondary-foreground': 'oklch(0.99 0 0)',
          '--muted': 'oklch(0.96 0.005 150)',
          '--muted-foreground': 'oklch(0.5 0 0)',
          '--accent': 'oklch(0.48 0.12 152)',
          '--accent-foreground': 'oklch(0.99 0 0)',
          '--border': 'oklch(0.9 0.01 150)',
          '--input': 'oklch(0.9 0.01 150)',
          '--ring': 'oklch(0.55 0.13 150)'
        } as React.CSSProperties}>
          <div id={`hidden-pdf-container-${selectedRecetaForPdf.receta.id}`} className="bg-card text-foreground">
            <RecetaDocumento receta={selectedRecetaForPdf.receta} />
          </div>
        </div>,
        document.body
      )}

      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Eliminar Receta</DialogTitle>
            <DialogDescription>
              ¿Está seguro que desea eliminar esta receta? Esta acción no se puede deshacer.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="mt-4">
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={handleDeleteReceta}>
              Eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </DashboardLayout>
  )
}