"use client"

import { useEffect, useState, useCallback, useMemo } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { useAuth } from "@/lib/auth-context"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from "@/components/ui/dialog"
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel,
  AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
  AlertDialogHeader, AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { apiFetch } from "@/lib/apiutils"
import {
  Search, Download, RefreshCw, Tag, Pencil, Trash2, Plus, Share2,
  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ChevronDown, ChevronUp
} from "lucide-react"
import { cn } from "@/lib/utils"

interface Categoria {
  id: number
  nombre: string
}

interface Producto {
  id: number
  codigo: string | null
  nombre: string
  categoria_id: number
  categoria: Categoria
  precio: number
  ultima_actualizacion: string
}

interface ProductForm {
  codigo: string
  nombre: string
  categoria_id: string
  precio: string
}

const EMPTY_FORM: ProductForm = { codigo: "", nombre: "", categoria_id: "", precio: "" }
const PAGE_SIZE_OPTIONS = [10, 20, 50, 100]

function formatPrecio(p: number) {
  return new Intl.NumberFormat("es-AR", { style: "currency", currency: "ARS", maximumFractionDigits: 0 }).format(p)
}

export default function PreciosPage() {
  const { user } = useAuth()
  const isAdmin = user?.role === "admin"

  const [productos, setProductos]   = useState<Producto[]>([])
  const [categorias, setCategorias] = useState<Categoria[]>([])
  const [loading, setLoading]       = useState(true)
  const [search, setSearch]         = useState("")
  const [pageSize, setPageSize]     = useState(50)
  const [page, setPage]             = useState(1)

  // ABM State
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editTarget, setEditTarget] = useState<Producto | null>(null)
  const [form, setForm]             = useState<ProductForm>(EMPTY_FORM)
  const [saving, setSaving]         = useState(false)
  const [errors, setErrors]         = useState<Partial<ProductForm>>({})
  const [deleteTarget, setDeleteTarget] = useState<Producto | null>(null)
  const [downloading, setDownloading] = useState(false)
  
  // Accordion State
  const [expandedCats, setExpandedCats] = useState<Record<string, boolean>>({})

  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
      const [prodRes, catRes] = await Promise.all([
        apiFetch("/productos"),
        apiFetch("/categorias")
      ])
      if (prodRes.ok) setProductos(await prodRes.json())
      if (catRes.ok) setCategorias(await catRes.json())
    } catch (e) {
      console.error(e)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchData() }, [fetchData])
  useEffect(() => { setPage(1) }, [search, pageSize])

  const filtered = useMemo(() =>
    productos.filter((p) =>
      search === "" ||
      p.nombre.toLowerCase().includes(search.toLowerCase()) ||
      p.categoria?.nombre.toLowerCase().includes(search.toLowerCase()) ||
      (p.codigo ?? "").includes(search)
    ), [productos, search])

  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize))
  const safePage   = Math.min(page, totalPages)

  const paginated = useMemo(() =>
    filtered.slice((safePage - 1) * pageSize, safePage * pageSize),
    [filtered, safePage, pageSize])

  const grouped = useMemo(() =>
    paginated.reduce<Record<string, Producto[]>>((acc, p) => {
      const catName = p.categoria?.nombre || "Sin Categoría"
      acc[catName] = [...(acc[catName] ?? []), p]
      return acc
    }, {}), [paginated])

  const toggleCategory = (catName: string) => {
    setExpandedCats(prev => ({
      ...prev,
      [catName]: !prev[catName]
    }))
  }

  // ABM Methods
  const openCreate = () => {
    setEditTarget(null)
    setForm(EMPTY_FORM)
    setErrors({})
    setDialogOpen(true)
  }

  const openEdit = (p: Producto) => {
    setEditTarget(p)
    setForm({
      codigo: p.codigo ?? "",
      nombre: p.nombre,
      categoria_id: String(p.categoria_id),
      precio: String(p.precio)
    })
    setErrors({})
    setDialogOpen(true)
  }

  const validate = (): boolean => {
    const e: Partial<ProductForm> = {}
    if (!form.nombre.trim()) e.nombre = "La descripción es obligatoria."
    if (!form.categoria_id) e.categoria_id = "La categoría es obligatoria."
    const precioVal = parseFloat(form.precio)
    if (!form.precio || isNaN(precioVal) || precioVal <= 0) e.precio = "El precio debe ser un número mayor a 0."
    setErrors(e)
    return Object.keys(e).length === 0
  }

  const handleSave = async () => {
    if (!validate()) return
    setSaving(true)
    try {
      const body = {
        codigo: form.codigo.trim() || null,
        nombre: form.nombre.trim(),
        categoria_id: parseInt(form.categoria_id),
        precio: parseFloat(form.precio)
      }

      const res = editTarget
        ? await apiFetch(`/productos/${editTarget.id}`, { method: "PUT", body: JSON.stringify(body) })
        : await apiFetch("/productos", { method: "POST", body: JSON.stringify(body) })

      if (res.ok) {
        setDialogOpen(false)
        fetchData()
      } else {
        console.error(await res.text())
      }
    } catch (e) {
      console.error(e)
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!deleteTarget) return
    try {
      const res = await apiFetch(`/productos/${deleteTarget.id}`, { method: "DELETE" })
      if (res.ok) {
        setDeleteTarget(null)
        fetchData()
      }
    } catch (e) {
      console.error(e)
    }
  }

  const downloadPDF = async () => {
    setDownloading(true)
    try {
      const token = typeof window !== "undefined" ? localStorage.getItem("token") : null
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:88/api"}/productos/export/pdf`,
        { headers: { Authorization: `Bearer ${token}`, Accept: "application/pdf" } }
      )
      if (res.ok) {
        const blob = await res.blob()
        const url  = URL.createObjectURL(blob)
        const a    = document.createElement("a")
        a.href     = url
        a.download = `lista_precios_belen_${new Date().toISOString().slice(0, 10)}.pdf`
        a.click()
        URL.revokeObjectURL(url)
      }
    } catch (e) {
      console.error(e)
    } finally {
      setDownloading(false)
    }
  }

  const sharePDF = async () => {
    setDownloading(true)
    try {
      const token = typeof window !== "undefined" ? localStorage.getItem("token") : null
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:88/api"}/productos/export/pdf`,
        { headers: { Authorization: `Bearer ${token}`, Accept: "application/pdf" } }
      )
      if (res.ok) {
        const blob = await res.blob()
        const filename = `lista_precios_belen_${new Date().toISOString().slice(0, 10)}.pdf`
        const file = new File([blob], filename, { type: "application/pdf" })
        
        if (navigator.canShare && navigator.canShare({ files: [file] })) {
          await navigator.share({
            files: [file],
            title: "Lista de Precios - Acoplados Belén",
            text: "Adjunto la última lista de precios de Acoplados Belén."
          })
        } else {
          // Fallback if sharing files is not supported
          alert("Tu dispositivo o navegador no soporta compartir archivos directamente. El archivo será descargado en su lugar.")
          const url  = URL.createObjectURL(blob)
          const a    = document.createElement("a")
          a.href     = url
          a.download = filename
          a.click()
          URL.revokeObjectURL(url)
        }
      }
    } catch (e) {
      console.error(e)
    } finally {
      setDownloading(false)
    }
  }

  return (
    <DashboardLayout>
      <div className="space-y-5">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 className="text-xl font-bold text-foreground">Gestión de Productos</h2>
            <p className="text-sm text-muted-foreground">
              {loading
                ? "Cargando..."
                : `${filtered.length} de ${productos.length} productos en el catálogo`}
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
              <RefreshCw className={cn("mr-2 h-4 w-4", loading && "animate-spin")} />
              Actualizar
            </Button>
            <Button size="sm" variant="secondary" onClick={downloadPDF} disabled={downloading}>
              <Download className="mr-2 h-4 w-4" />
              {downloading ? "Generando..." : "Descargar PDF"}
            </Button>
            <Button size="sm" variant="secondary" className="bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 md:hidden" onClick={sharePDF} disabled={downloading}>
              <Share2 className="mr-2 h-4 w-4" />
              Compartir WhatsApp
            </Button>
            {isAdmin && (
              <Button size="sm" onClick={openCreate}>
                <Plus className="mr-2 h-4 w-4" />
                Nuevo Producto
              </Button>
            )}
          </div>
        </div>

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              className="pl-9"
              placeholder="Buscar por código, nombre o categoría..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-sm text-muted-foreground whitespace-nowrap">Filas por pág:</span>
            <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
              <SelectTrigger className="w-20 h-9"><SelectValue /></SelectTrigger>
              <SelectContent>
                {PAGE_SIZE_OPTIONS.map((s) => <SelectItem key={s} value={String(s)}>{s}</SelectItem>)}
              </SelectContent>
            </Select>
          </div>
        </div>

        {loading ? (
          <div className="py-16 text-center text-muted-foreground">Cargando productos...</div>
        ) : filtered.length === 0 ? (
          <div className="py-16 text-center text-muted-foreground">No se encontraron productos.</div>
        ) : (
          Object.entries(grouped).map(([cat, prods]) => {
            const isExpanded = expandedCats[cat] === true
            return (
              <Card key={cat} className="border-border/60 shadow-sm overflow-hidden">
                <CardHeader 
                  className="py-3 px-4 bg-muted/40 border-b border-border/60 cursor-pointer hover:bg-muted/60 transition-colors"
                  onClick={() => toggleCategory(cat)}
                >
                  <CardTitle className="flex items-center gap-2 text-sm font-semibold select-none">
                    <Tag className="h-4 w-4 text-primary" />
                    {cat}
                    <Badge variant="secondary" className="ml-3">{prods.length}</Badge>
                    <div className="ml-auto flex items-center text-muted-foreground">
                      {isExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
                    </div>
                  </CardTitle>
                </CardHeader>
                {isExpanded && (
                  <CardContent className="p-0">
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="border-b border-border/60 bg-muted/20">
                            <th className="px-4 py-2 text-left text-xs font-medium text-muted-foreground uppercase">Cód.</th>
                            <th className="px-4 py-2 text-left text-xs font-medium text-muted-foreground uppercase">Descripción</th>
                            <th className="px-4 py-2 text-right text-xs font-medium text-muted-foreground uppercase">Precio</th>
                            <th className="px-4 py-2 text-center text-xs font-medium text-muted-foreground uppercase">Últ. actualiz.</th>
                            {isAdmin && <th className="px-4 py-2 text-center text-xs font-medium text-muted-foreground uppercase">Acción</th>}
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-border/40">
                          {prods.map((p) => (
                            <tr key={p.id} className="hover:bg-muted/20 transition-colors">
                              <td className="px-4 py-2.5 font-mono font-bold text-primary text-xs">{p.codigo ?? "—"}</td>
                              <td className="px-4 py-2.5 text-foreground">{p.nombre}</td>
                              <td className="px-4 py-2.5 text-right font-semibold">{formatPrecio(p.precio)}</td>
                              <td className="px-4 py-2.5 text-center text-xs text-muted-foreground">
                                {new Date(p.ultima_actualizacion).toLocaleDateString("es-AR")}
                              </td>
                              {isAdmin && (
                                <td className="px-4 py-2.5 text-center">
                                  <div className="flex justify-center gap-1">
                                    <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => openEdit(p)}>
                                      <Pencil className="h-3.5 w-3.5" />
                                    </Button>
                                    <Button size="icon" variant="ghost" className="h-7 w-7 text-destructive hover:bg-destructive/10 hover:text-destructive" onClick={() => setDeleteTarget(p)}>
                                      <Trash2 className="h-3.5 w-3.5" />
                                    </Button>
                                  </div>
                                </td>
                              )}
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </CardContent>
                )}
              </Card>
            )
          })
        )}

        {/* Pagination */}
        {!loading && filtered.length > 0 && (
          <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
            <p className="text-sm text-muted-foreground">
              Mostrando <span className="font-medium text-foreground">{(safePage - 1) * pageSize + 1}–{Math.min(safePage * pageSize, filtered.length)}</span> de <span className="font-medium text-foreground">{filtered.length}</span>
            </p>
            <div className="flex items-center gap-1">
              <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setPage(1)} disabled={safePage === 1}><ChevronsLeft className="h-4 w-4" /></Button>
              <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={safePage === 1}><ChevronLeft className="h-4 w-4" /></Button>
              <span className="px-3 text-sm">Pág <span className="font-semibold">{safePage}</span> / {totalPages}</span>
              <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={safePage === totalPages}><ChevronRight className="h-4 w-4" /></Button>
              <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setPage(totalPages)} disabled={safePage === totalPages}><ChevronsRight className="h-4 w-4" /></Button>
            </div>
          </div>
        )}
      </div>

      {/* Create / Edit Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editTarget ? "Editar Producto" : "Nuevo Producto"}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label htmlFor="p-codigo">Código (Opcional)</Label>
              <Input
                id="p-codigo" placeholder="Ej: ACO-001"
                value={form.codigo} onChange={(e) => setForm(p => ({ ...p, codigo: e.target.value }))}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="p-nombre">Descripción del Producto <span className="text-destructive">*</span></Label>
              <Input
                id="p-nombre" placeholder="Ej: Acoplado Playo Rural 3 Tn."
                value={form.nombre} onChange={(e) => setForm(p => ({ ...p, nombre: e.target.value }))}
                className={cn(errors.nombre && "border-destructive")}
              />
              {errors.nombre && <p className="text-xs text-destructive">{errors.nombre}</p>}
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="p-cat">Categoría <span className="text-destructive">*</span></Label>
              <Select value={form.categoria_id} onValueChange={(v) => setForm(p => ({ ...p, categoria_id: v }))}>
                <SelectTrigger className={cn(errors.categoria_id && "border-destructive")}>
                  <SelectValue placeholder="Seleccioná una categoría..." />
                </SelectTrigger>
                <SelectContent>
                  {categorias.map((c) => (
                    <SelectItem key={c.id} value={String(c.id)}>{c.nombre}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
              {errors.categoria_id && <p className="text-xs text-destructive">{errors.categoria_id}</p>}
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="p-precio">Precio Final ($) <span className="text-destructive">*</span></Label>
              <Input
                id="p-precio" type="number" step="0.01" min="0.01" placeholder="Ej: 1500000"
                value={form.precio} onChange={(e) => setForm(p => ({ ...p, precio: e.target.value }))}
                className={cn(errors.precio && "border-destructive")}
              />
              {errors.precio && <p className="text-xs text-destructive">{errors.precio}</p>}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancelar</Button>
            <Button onClick={handleSave} disabled={saving}>
              {saving ? "Guardando..." : "Guardar Producto"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Dialog */}
      <AlertDialog open={!!deleteTarget} onOpenChange={(o) => !o && setDeleteTarget(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>¿Eliminar producto?</AlertDialogTitle>
            <AlertDialogDescription>
              Se eliminará el producto <strong>{deleteTarget?.nombre}</strong>. Esta acción no se puede deshacer.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction className="bg-destructive hover:bg-destructive/90" onClick={handleDelete}>
              Eliminar
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

    </DashboardLayout>
  )
}