"use client";

import { DashboardEmptyState, DashboardListRow, DashboardPageIntro, DashboardSection, DashboardToolbar } from "@/components/dashboard-page";
import { useAuth } from "@/components/providers";
import { useConfirm } from "@/components/confirm-provider";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ErrorState } from "@/components/ui/error-state";
import { Input } from "@/components/ui/input";
import { SkeletonListRow } from "@/components/ui/skeleton";
import { useToast } from "@/hooks/use-toast";
import { configuracionApi, productosApi } from "@/lib/api";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, MoreVertical, Package, Plus } from "lucide-react";
import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";

type ProductoForm = {
  plu: string;
  desclarga: string;
  desccorta: string;
  alterno: string;
  precio: string;
  costo: string;
  esServicio: boolean;
  pagaiva: boolean;
  iva: string;
  usainventario: boolean;
};

function emptyForm(): ProductoForm {
  return {
    plu: "",
    desclarga: "",
    desccorta: "",
    alterno: "",
    precio: "0",
    costo: "0",
    esServicio: false,
    pagaiva: false,
    iva: "0",
    usainventario: true,
  };
}

function toForm(producto: any): ProductoForm {
  return {
    plu: producto?.plu || "",
    desclarga: producto?.desclarga || "",
    desccorta: producto?.desccorta || "",
    alterno: producto?.alterno || "",
    precio: String(producto?.precio ?? 0),
    costo: String(producto?.costo ?? 0),
    esServicio: Boolean(producto?.es_servicio),
    pagaiva: Boolean(producto?.pagaiva),
    iva: String(producto?.iva ?? 0),
    usainventario: producto?.usainventario ?? true,
  };
}

export default function ProductosPage() {
  const router = useRouter();
  const { toast } = useToast();
  const confirm = useConfirm();
  const { canRead } = useAuth();
  const queryClient = useQueryClient();
  const canManage = canRead("productos");
  const [query, setQuery] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<any | null>(null);
  const [form, setForm] = useState<ProductoForm>(emptyForm());

  const { data: productos = [], isLoading, isError, refetch } = useQuery({
    queryKey: ["productos", "taller"],
    queryFn: () => productosApi.getTop(500, { soloTaller: true }),
    enabled: canManage,
  });

  // Sin @RequirePermission en el backend a propósito (ver taller-parametros.controller.ts)
  // -- cualquier usuario autenticado necesita saber si debe ocultar "Nuevo producto".
  const { data: flags } = useQuery({
    queryKey: ["configuracion", "flags"],
    queryFn: configuracionApi.flags,
  });
  const permiteCrearProductos = flags?.permiteProductosPropios ?? true;

  const filtered = useMemo(() => {
    const term = query.trim().toLowerCase();
    if (!term) return productos;
    return productos.filter((item: any) =>
      [item.plu, item.desclarga, item.desccorta, item.alterno]
        .filter(Boolean)
        .some((value: string) => value.toLowerCase().includes(term)),
    );
  }, [productos, query]);

  const closeForm = () => {
    setShowForm(false);
    setEditing(null);
    setForm(emptyForm());
  };

  const startCreate = () => {
    setEditing(null);
    setForm(emptyForm());
    setShowForm(true);
  };

  const startEdit = (producto: any) => {
    setEditing(producto);
    setForm(toForm(producto));
    setShowForm(true);
  };

  const saveMutation = useMutation({
    mutationFn: async () => {
      const desclarga = form.desclarga.trim();
      if (!desclarga) {
        throw new Error("Escribe la descripción del producto.");
      }

      const payload = {
        desclarga,
        desccorta: form.desccorta.trim() || undefined,
        alterno: form.alterno.trim() || undefined,
        precio: Number(form.precio) || 0,
        costo: Number(form.costo) || 0,
        esServicio: form.esServicio,
        pagaiva: form.pagaiva,
        iva: Number(form.iva) || 0,
        usainventario: form.usainventario,
      };

      if (editing) {
        return productosApi.update(editing.plu, payload);
      }

      return productosApi.create({
        ...payload,
        plu: form.plu.trim() || undefined,
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["productos"] });
      toast({ variant: "success", title: editing ? "Producto actualizado" : "Producto creado" });
      closeForm();
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "Error", description: error.message || "No se pudo guardar." }),
  });

  const deleteMutation = useMutation({
    mutationFn: (plu: string) => productosApi.delete(plu),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["productos"] });
      toast({ title: "Producto eliminado" });
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "Error", description: error.message || "No se pudo eliminar." }),
  });

  if (!canManage) {
    return (
      <main className="mx-auto max-w-4xl p-6">
        <DashboardEmptyState
          title="Sin acceso"
          description="No tienes permiso para administrar el catálogo de productos."
          icon={Package}
        />
      </main>
    );
  }

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-6xl flex-col gap-6 p-4 md:p-6">
        <DashboardPageIntro
          title="Productos"
          description="Catálogo de productos y servicios creados desde el taller (repuestos, mano de obra) para usar en cotizaciones."
          icon={Package}
          tone="slate"
          badge="Catálogo"
          onBack={() => router.push("/dashboard")}
          filters={
            <DashboardToolbar
              searchValue={query}
              onSearchChange={setQuery}
              searchPlaceholder="Buscar producto"
              action={
                permiteCrearProductos ? (
                  <Button onClick={startCreate}>
                    <Plus className="mr-2 h-4 w-4" />
                    Nuevo producto
                  </Button>
                ) : undefined
              }
            />
          }
          stats={[{ label: "Productos del taller", value: productos.length, hint: "Creados por el taller", icon: Package }]}
        />

        <Dialog open={showForm} onOpenChange={(open) => (open ? setShowForm(true) : closeForm())}>
          <DialogContent className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>{editing ? "Editar producto" : "Nuevo producto"}</DialogTitle>
              <DialogDescription>
                {editing
                  ? "Solo se pueden editar productos creados en el taller."
                  : "Si dejás el código en blanco, el sistema le asigna uno automáticamente."}
              </DialogDescription>
            </DialogHeader>
            
            <DialogBody>
            <div className="space-y-4">
              {!editing ? (
                <div className="space-y-1.5">
                  <label htmlFor="producto-plu" className="text-sm font-medium text-foreground">Código (PLU) — opcional</label>
                  <Input
                    id="producto-plu"
                    value={form.plu}
                    onChange={(e) => setForm({ ...form, plu: e.target.value })}
                    className="h-11 rounded-xl"
                    placeholder="Se genera automáticamente si lo dejás vacío"
                  />
                </div>
              ) : null}

              <div className="space-y-1.5">
                <label htmlFor="producto-descripcion" className="text-sm font-medium text-foreground">
                  Descripción <span className="text-destructive">*</span>
                </label>
                <Input
                  id="producto-descripcion"
                  value={form.desclarga}
                  onChange={(e) => setForm({ ...form, desclarga: e.target.value })}
                  className="h-11 rounded-xl"
                  placeholder="Cambio de aceite, Llanta 15 pulgadas, ..."
                />
              </div>

              <div className="grid gap-3 md:grid-cols-2">
                <div className="space-y-1.5">
                  <label htmlFor="producto-desccorta" className="text-sm font-medium text-foreground">Descripción corta</label>
                  <Input
                    id="producto-desccorta"
                    value={form.desccorta}
                    onChange={(e) => setForm({ ...form, desccorta: e.target.value })}
                    className="h-11 rounded-xl"
                  />
                </div>
                <div className="space-y-1.5">
                  <label htmlFor="producto-alterno" className="text-sm font-medium text-foreground">Código alterno</label>
                  <Input
                    id="producto-alterno"
                    value={form.alterno}
                    onChange={(e) => setForm({ ...form, alterno: e.target.value })}
                    className="h-11 rounded-xl"
                  />
                </div>
              </div>

              <div className="grid gap-3 md:grid-cols-2">
                <div className="space-y-1.5">
                  <label htmlFor="producto-precio" className="text-sm font-medium text-foreground">Precio</label>
                  <Input
                    id="producto-precio"
                    type="number"
                    step="0.01"
                    min={0}
                    value={form.precio}
                    onChange={(e) => setForm({ ...form, precio: e.target.value })}
                    className="h-11 rounded-xl"
                  />
                </div>
                <div className="space-y-1.5">
                  <label htmlFor="producto-costo" className="text-sm font-medium text-foreground">Costo mínimo</label>
                  <Input
                    id="producto-costo"
                    type="number"
                    step="0.01"
                    min={0}
                    value={form.costo}
                    onChange={(e) => setForm({ ...form, costo: e.target.value })}
                    className="h-11 rounded-xl"
                  />
                </div>
              </div>

              <div className="grid gap-3 sm:grid-cols-3">
                <label className="flex items-center gap-2 rounded-xl border border-border bg-muted p-3 text-sm font-medium text-foreground">
                  <input
                    type="checkbox"
                    checked={form.esServicio}
                    onChange={(e) => setForm({ ...form, esServicio: e.target.checked })}
                    className="h-4 w-4 rounded border-border-strong"
                  />
                  Es servicio
                </label>
                <label className="flex items-center gap-2 rounded-xl border border-border bg-muted p-3 text-sm font-medium text-foreground">
                  <input
                    type="checkbox"
                    checked={form.pagaiva}
                    onChange={(e) => setForm({ ...form, pagaiva: e.target.checked })}
                    className="h-4 w-4 rounded border-border-strong"
                  />
                  Paga IVA
                </label>
                <label className="flex items-center gap-2 rounded-xl border border-border bg-muted p-3 text-sm font-medium text-foreground">
                  <input
                    type="checkbox"
                    checked={form.usainventario}
                    onChange={(e) => setForm({ ...form, usainventario: e.target.checked })}
                    className="h-4 w-4 rounded border-border-strong"
                  />
                  Usa inventario
                </label>
              </div>
            </div>
            </DialogBody>

            <DialogFooter>
              <Button variant="outline" className="rounded-xl" onClick={closeForm}>
                Cancelar
              </Button>
              <Button
                className="rounded-xl"
                disabled={saveMutation.isPending}
                onClick={() => saveMutation.mutate()}
              >
                {saveMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
                {editing ? "Guardar cambios" : "Crear producto"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        <DashboardSection title="Catálogo" description="Busca por código, descripción o código alterno.">
          {isLoading ? (
            <div className="divide-y divide-border rounded-xl border border-border">
              {Array.from({ length: 5 }).map((_, index) => (
                <SkeletonListRow key={index} />
              ))}
            </div>
          ) : isError ? (
            <ErrorState onRetry={() => refetch()} description="No se pudo cargar el catálogo de productos." />
          ) : filtered.length === 0 ? (
            <DashboardEmptyState
              title={query.trim() ? "No se encontraron productos" : "Sin productos todavía"}
              description={
                query.trim()
                  ? "Prueba con otro código, descripción o código alterno."
                  : "Crea el primer producto o servicio del taller para poder usarlo en cotizaciones."
              }
              icon={Package}
              className="border-none bg-muted shadow-none"
              action={
                !query.trim() && permiteCrearProductos ? (
                  <Button onClick={startCreate}>
                    <Plus className="mr-2 h-4 w-4" />
                    Crear el primero
                  </Button>
                ) : undefined
              }
            />
          ) : (
            <div className="overflow-hidden rounded-xl border border-border">
              {filtered.map((item: any) => (
                <DashboardListRow
                  key={item.plu}
                  title={
                    <span className="flex min-w-0 items-center gap-2">
                      <span className="truncate">{item.desclarga}</span>
                      {item.es_servicio ? <Badge variant="neutral">Servicio</Badge> : null}
                    </span>
                  }
                  meta={
                    <span className="flex flex-wrap items-center gap-2">
                      <span className="font-mono">{item.plu}</span>
                      <span>Q {Number(item.precio || 0).toFixed(2)}</span>
                      {item.alterno ? <span>Alt: {item.alterno}</span> : null}
                    </span>
                  }
                  actions={
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" aria-label="Más acciones">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        {permiteCrearProductos ? (
                          <DropdownMenuItem onClick={() => startEdit(item)}>Editar</DropdownMenuItem>
                        ) : null}
                        <DropdownMenuItem
                          variant="destructive"
                          disabled={deleteMutation.isPending}
                          onClick={async () => {
                            const confirmed = await confirm({
                              title: `¿Eliminar "${item.desclarga}"?`,
                              description: "Esta acción no se puede deshacer.",
                              confirmLabel: "Eliminar",
                              tone: "destructive",
                            });
                            if (confirmed) deleteMutation.mutate(item.plu);
                          }}
                        >
                          Eliminar
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  }
                />
              ))}
            </div>
          )}
        </DashboardSection>
      </main>
    </div>
  );
}