"use client"

import { useSearchParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Leaf, Printer } from "lucide-react"
import { apiFetch } from "@/lib/apiutils"
import { useEffect, useState } from "react"
import { ModeToggle } from "@/components/mode-toggle"
import { createPortal } from "react-dom"
import { toJpeg } from "html-to-image"
import { jsPDF } from "jspdf"
import { toast } from "sonner"
import { RecetaDocumento } from "@/components/receta-documento"
import { Share2, FileDown } from "lucide-react"

export default function VerRecetaPage() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const recetaId = searchParams.get("id") as string
  const [receta, setReceta] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchReceta = async () => {
      try {
        const res = await apiFetch(`/recetas/${recetaId}`)
        if (res.ok) {
          const data = await res.json()
          setReceta(data)
        } else {
          setReceta(null)
        }
      } catch (e) {
        console.error(e)
      } finally {
        setLoading(false)
      }
    }
    fetchReceta()
  }, [recetaId])

  if (loading) {
    return <div className="p-8 text-center">Cargando receta...</div>
  }

  if (!receta) {
    return (
      <div className="p-8">
        <Button onClick={() => router.back()} variant="outline" className="mb-4">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Volver
        </Button>
        <Card className="p-6">
          <p>Receta no encontrada</p>
        </Card>
      </div>
    )
  }

  const handlePrint = () => {
    window.print()
  }

  const handleSharePdf = async (action: 'descarga' | 'compartir') => {
    const elementId = `hidden-pdf-container-${receta.id}`
    const element = document.getElementById(elementId)
    if (!element) return

    const filename = `Receta-${receta.numero}.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 })
      }
      // 2. Instanciar un PDF en formato A4 (210x297mm)
      const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' })

      // 3. Calcular la escala para que encaje horizontal y verticalmente EN UNA SOLA PÁGINA
      const imgProps = pdf.getImageProperties(dataUrl)
      
      const pdfPageWidth = pdf.internal.pageSize.getWidth()
      const pdfPageHeight = pdf.internal.pageSize.getHeight() // A4 height es ~297mm

      let finalWidth = pdfPageWidth
      let finalHeight = (imgProps.height * finalWidth) / imgProps.width
      
      // Si la receta es muy larga y se pasaría de hoja (provocando el corte por la mitad en la foto),
      // escalamos inversamente para que encaje en el total del alto de una sola carilla A4.
      if (finalHeight > pdfPageHeight) {
        finalHeight = pdfPageHeight
        finalWidth = (imgProps.width * finalHeight) / imgProps.height
      }

      // Centramos horizontalmente si hubo que achicar a lo alto
      const marginLeft = (pdfPageWidth - finalWidth) / 2

      pdf.addImage(dataUrl, 'JPEG', marginLeft, 0, finalWidth, finalHeight)

      // 4. Extraer el archivo físico Blob en memoria RAM
      const blob = pdf.output('blob')
      const file = new File([blob], filename, { type: 'application/pdf' })

      toast.dismiss("pdfToast")
      // -------------------------------------------------------------
      // LÓGICA MULTIPLATAFORMA (Experiencia de Usuario Segura)
      // -------------------------------------------------------------
      // A. NATIVE SHARE (SMARTPHONE): Si soporta API de Compartición Remota
      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...")
          return
        } catch (err) {
          console.log("El usuario canceló el Share Sheet", err)
          return
        }
      }

      // B. DESKTOP FALLBACK: En PC o si falla el share nativo, forzamos Descarga.
      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.")
    }
  }

  return (
    <div className="min-h-screen bg-muted/40 dark:bg-background">
      {/* Botones de acción - No se imprimen */}
      <div className="print:hidden sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b border-border p-4 flex justify-between items-center z-10 shadow-sm">
        <Button onClick={() => router.back()} variant="outline">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Volver a Recetas
        </Button>
        <div className="flex items-center gap-2">
          {/* Botón Descargar Genérico (Visible siempre en PC, Opcional en móviles) */}
          <Button onClick={() => handleSharePdf('descarga')} variant="outline" className="text-blue-600 border-blue-600/50 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/30 px-2 sm:px-4">
            <FileDown className="sm:mr-2 h-4 w-4" />
            <span className="hidden sm:inline">Descargar PDF</span>
          </Button>
          {/* Botón Compartir Nativos (Oculto en PC [xl:hidden], visible en Tablet/Celular) */}
          <Button onClick={() => handleSharePdf('compartir')} variant="outline" className="xl:hidden opacity-100 text-purple-600 border-purple-600/50 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-950/30 px-2 sm:px-4">
            <Share2 className="sm:mr-2 h-4 w-4" />
            <span className="hidden sm:inline">Compartir</span>
          </Button>

          <Button
            onClick={() => router.push(`/dashboard/recetas/editar?id=${recetaId}`)}
            variant="outline"
            className="border-emerald-600/50 text-emerald-700 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/30 hidden sm:flex"
          >
            Editar
          </Button>
          <Button onClick={handlePrint} className="bg-emerald-600 hover:bg-emerald-700 text-white hidden sm:flex">
            <Printer className="mr-2 h-4 w-4" />
            Imprimir
          </Button>
          <ModeToggle />
        </div>
      </div>

      {/* Documento de Receta - Diseño tipo planilla digital profesional */}
      {/* Agregado overflow-x-auto y min-width fijo para no colapsar la vista en móviles, simulando la lectura de un PDF real pidiéndole al usuario que haga un swipe para explorar el archivo horizontalmente */}
      <div className="max-w-5xl mx-auto p-4 sm:p-8 print:p-0 overflow-x-auto pb-4">
        <div className="min-w-[800px]">
          <RecetaDocumento receta={receta} />
        </div>
      </div>

      {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-${receta.id}`} className="bg-card text-foreground">
            <RecetaDocumento receta={receta} />
          </div>
        </div>,
        document.body
      )}

      {/* Estilos de impresión */}
      <style jsx global>{`
        @media print {
          html, body {
            height: auto !important;
            min-height: 0 !important;
          }
          body {
            background: white !important;
            color: black !important;
            margin: 1.5cm !important;
          }
           * {
            background: transparent !important;
            color: black !important;
            box-shadow: none !important;
            text-shadow: none !important;
          }
          @page {
            margin: 0mm;
          }
          /* Re-apply crucial backgrounds/borders for readability on paper */
          .border-b, .border-t, .border, .border-y {
            border-color: #e5e5e5 !important;
          }
        }
      `}</style>
    </div>
  )
}