import { Button as UIButton } from "@/components/ui/button";
import { Card as UICard, CardContent as UICardContent, CardHeader as UICardHeader, CardTitle as UICardTitle } from "@/components/ui/card";
import { Badge as UIBadge } from "@/components/ui/badge";
import { Input as UIInput } from "@/components/ui/input";
import { Label as UILabel } from "@/components/ui/label";
import { Textarea as UITextarea } from "@/components/ui/textarea";
import { Select as UISelect, SelectContent as UISelectContent, SelectItem as UISelectItem, SelectTrigger as UISelectTrigger, SelectValue as UISelectValue } from "@/components/ui/select";
import { Plus, Package, Edit, Search, History, FileDown, Trash2 } from "lucide-react";
import { Switch as UISwitch } from "@/components/ui/switch";
import { Table as UITable, TableBody as UITableBody, TableCell as UITableCell, TableHead as UITableHead, TableHeader as UITableHeader, TableRow as UITableRow } from "@/components/ui/table";
import { useProduct } from "@/hooks/useProduct";
import type { AdjustmentData, ProductRecord } from "@/types/modules/commerce";
import type { ChangeEvent, FormEvent } from "react";
import { toast } from "sonner";

import QuickStockEdit from "../components/inventory/QuickStockEdit";
import InventoryAdjustmentModal from "../components/inventory/InventoryAdjustmentModal";
import StockAlerts from "../components/inventory/StockAlerts";

const Button = UIButton as any;
const Card = UICard as any;
const CardContent = UICardContent as any;
const CardHeader = UICardHeader as any;
const CardTitle = UICardTitle as any;
const Badge = UIBadge as any;
const Input = UIInput as any;
const Label = UILabel as any;
const Textarea = UITextarea as any;
const Select = UISelect as any;
const SelectContent = UISelectContent as any;
const SelectItem = UISelectItem as any;
const SelectTrigger = UISelectTrigger as any;
const SelectValue = UISelectValue as any;
const Switch = UISwitch as any;
const Table = UITable as any;
const TableBody = UITableBody as any;
const TableCell = UITableCell as any;
const TableHead = UITableHead as any;
const TableHeader = UITableHeader as any;
const TableRow = UITableRow as any;

export default function ProductsPage() {
  const {
    selectedCompany,
    products,
    categories,
    filteredProducts,
    isLoading,
    isSaving,
    showForm,
    editingProduct,
    searchTerm,
    editingStock,
    adjustingProduct,
    formData,
    setSearchTerm,
    setEditingStock,
    setAdjustingProduct,
    setFormData,
    openCreateForm,
    openEditForm,
    closeForm,
    submitForm,
    updateStock,
    adjustInventory,
    availableComponents,
    addComponent,
    updateComponent,
    removeComponent,
  } = useProduct();

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    try {
      await submitForm();
    } catch (error) {
      toast.error(String((error as Error)?.message || "Error al guardar producto"));
    }
  };

  const toNumber = (value: unknown): number => {
    const parsed = Number(value);
    return Number.isFinite(parsed) ? parsed : 0;
  };

  const getCategoryName = (product: ProductRecord): string => {
    const productCategoryId = String(product.idcategory ?? product.category_id ?? "").trim();
    if (product.category_name) {
      return String(product.category_name);
    }
    if (product.category) {
      return String(product.category);
    }
    if (!productCategoryId) {
      return "";
    }
    const category = categories.find((item) => String(item.id ?? "").trim() === productCategoryId);
    return String(category?.name || "");
  };

  const exportToExcel = async () => {
    const XLSX = await import("xlsx");
    const activeProducts = products.filter((p) => p.is_active !== false);
    const inactiveProducts = products.filter((p) => p.is_active === false);

    const formatProductsForExcel = (prods: ProductRecord[]) => {
      return prods.map((p) => ({
        SKU: p.sku,
        Nombre: p.name,
        Categoria: getCategoryName(p),
        Genero: p.gender || "",
        Volumen: p.volume || "",
        "Inspirado en": p.inspired_by || "",
        Precio: p.price,
        Costo: p.cost || 0,
        Stock: p.stock || 0,
        "Stock Minimo": p.min_stock || 0,
        Unidad: p.unit || "",
        "Codigo de Barras": p.barcode || "",
        "Tasa Impuesto (%)": p.tax_rate || 0,
        Moneda: p.currency || "",
      }));
    };

    const wb = XLSX.utils.book_new();
    const wsActive = XLSX.utils.json_to_sheet(formatProductsForExcel(activeProducts));
    XLSX.utils.book_append_sheet(wb, wsActive, "Productos Activos");

    const wsInactive = XLSX.utils.json_to_sheet(formatProductsForExcel(inactiveProducts));
    XLSX.utils.book_append_sheet(wb, wsInactive, "Productos Desactivados");

    XLSX.writeFile(wb, `Catalogo_Productos_${new Date().toISOString().split("T")[0]}.xlsx`);
  };

  const exportToPDF = async () => {
    const { default: jsPDF } = await import("jspdf");
    await import("jspdf-autotable");
    const activeProducts = products.filter((p) => p.is_active !== false);
    const inactiveProducts = products.filter((p) => p.is_active === false);

    const doc = new jsPDF("l", "mm", "a4");

    const formatProductsForPDF = (prods: ProductRecord[]) => {
      return prods.map((p) => [
        p.sku,
        p.name,
        getCategoryName(p),
        p.gender || "",
        p.volume || "",
        `$${toNumber(p.price).toLocaleString()}`,
        p.stock || 0,
        p.unit || "",
      ]);
    };

    doc.setFontSize(16);
    doc.text("Catalogo de Productos - Productos Activos", 14, 15);
    doc.setFontSize(10);
    doc.text(`Empresa: ${String(selectedCompany?.name || "")}`, 14, 22);
    doc.text(`Fecha: ${new Date().toLocaleDateString()}`, 14, 27);
    doc.text(`Total: ${activeProducts.length} productos`, 14, 32);

    (doc as any).autoTable({
      startY: 35,
      head: [["SKU", "Nombre", "Categoria", "Genero", "Volumen", "Precio", "Stock", "Unidad"]],
      body: formatProductsForPDF(activeProducts),
      styles: { fontSize: 8 },
      headStyles: { fillColor: [59, 130, 246] },
    });

    doc.addPage();
    doc.setFontSize(16);
    doc.text("Catalogo de Productos - Productos Desactivados", 14, 15);
    doc.setFontSize(10);
    doc.text(`Empresa: ${String(selectedCompany?.name || "")}`, 14, 22);
    doc.text(`Fecha: ${new Date().toLocaleDateString()}`, 14, 27);
    doc.text(`Total: ${inactiveProducts.length} productos`, 14, 32);

    (doc as any).autoTable({
      startY: 35,
      head: [["SKU", "Nombre", "Categoria", "Genero", "Volumen", "Precio", "Stock", "Unidad"]],
      body: formatProductsForPDF(inactiveProducts),
      styles: { fontSize: 8 },
      headStyles: { fillColor: [239, 68, 68] },
    });

    doc.save(`Catalogo_Productos_${new Date().toISOString().split("T")[0]}.pdf`);
  };

  if (isLoading) {
    return (
      <div className="p-8">
        <div className="animate-pulse space-y-6">
          <div className="h-8 bg-gray-200 rounded w-1/4" />
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 lg:p-8 space-y-8">
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gradient">Productos</h1>
          <p className="text-gray-600 mt-1">
            {String(selectedCompany?.name || "")} • {products.length} productos
          </p>
        </div>
        <div className="flex gap-2">
          <Button onClick={() => void exportToExcel()} variant="outline" disabled={!selectedCompany || products.length === 0}>
            <FileDown className="w-4 h-4 mr-2" />
            Excel
          </Button>
          <Button onClick={() => void exportToPDF()} variant="outline" disabled={!selectedCompany || products.length === 0}>
            <FileDown className="w-4 h-4 mr-2" />
            PDF
          </Button>
          <Button onClick={openCreateForm} className="bg-gradient-to-r from-blue-500 to-blue-600" disabled={!selectedCompany}>
            <Plus className="w-4 h-4 mr-2" />
            Nuevo Producto
          </Button>
        </div>
      </div>

      {showForm && (
        <Card className="glass-card border-white/20">
          <CardHeader>
            <CardTitle>{editingProduct ? "Editar" : "Nuevo"} Producto</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>SKU *</Label>
                  <Input
                    value={formData.sku}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, sku: e.target.value })}
                    placeholder="Ej: PROD-001"
                    required
                  />
                </div>

                <div>
                  <Label>Codigo de Barras</Label>
                  <Input
                    value={formData.barcode}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, barcode: e.target.value })}
                    placeholder="Codigo de barras"
                  />
                </div>

                <div className="col-span-2">
                  <Label>Nombre *</Label>
                  <Input
                    value={formData.name}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="Nombre del producto"
                    required
                  />
                </div>

                <div className="col-span-2">
                  <Label>Descripcion</Label>
                  <Textarea
                    value={formData.description}
                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setFormData({ ...formData, description: e.target.value })}
                    placeholder="Descripcion"
                    rows={2}
                  />
                </div>

                <div>
                  <Label>Categoria</Label>
                  <Select
                    value={String(formData.idcategory || "")}
                    onValueChange={(value: string) => setFormData({ ...formData, idcategory: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar categoria" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={String(category.id || "")} value={String(category.id || "")}>
                          {String(category.name || "Categoria")}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label>Unidad</Label>
                  <Input
                    value={formData.unit}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, unit: e.target.value })}
                    placeholder="unidad, kg, litro"
                  />
                </div>

                <div>
                  <Label>Precio *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={formData.price === 0 ? "" : formData.price}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })}
                    required
                  />
                </div>

                <div>
                  <Label>Costo</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={formData.cost === 0 ? "" : formData.cost}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, cost: parseFloat(e.target.value) || 0 })}
                  />
                </div>

                <div>
                  <Label>Stock</Label>
                  <Input
                    type="number"
                    value={formData.stock === 0 ? "" : formData.stock}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, stock: parseInt(e.target.value, 10) || 0 })}
                  />
                </div>

                <div>
                  <Label>Stock Minimo</Label>
                  <Input
                    type="number"
                    value={formData.min_stock === 0 ? "" : formData.min_stock}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, min_stock: parseInt(e.target.value, 10) || 0 })}
                  />
                </div>

                <div>
                  <Label>Tasa de Impuesto (%)</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={formData.tax_rate}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, tax_rate: parseFloat(e.target.value) || 0 })}
                  />
                </div>
              </div>

              {/* Switch combo */}
              <div className="flex items-center gap-3 pt-2 border-t">
                <Switch
                  id="is_combo"
                  checked={formData.is_combo}
                  onCheckedChange={(checked: boolean) =>
                    setFormData({ ...formData, is_combo: checked, components: checked ? formData.components : [] })
                  }
                />
                <Label htmlFor="is_combo" className="font-medium cursor-pointer">
                  Es un combo (agrupa otros productos)
                </Label>
              </div>

              {/* Sección de componentes del combo */}
              {formData.is_combo && (
                <div className="p-4 border rounded-lg bg-amber-50 space-y-3">
                  <div className="flex items-center gap-3">
                    <Switch
                      id="deducts_component_stock"
                      checked={formData.deducts_component_stock}
                      onCheckedChange={(checked: boolean) =>
                        setFormData({ ...formData, deducts_component_stock: checked })
                      }
                    />
                    <Label htmlFor="deducts_component_stock" className="text-sm cursor-pointer">
                      Descontar stock de componentes al vender
                    </Label>
                  </div>

                  <p className="text-sm font-medium text-amber-900">Componentes del combo</p>

                  {formData.components.length > 0 && (
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Producto</TableHead>
                          <TableHead className="w-28">Cantidad</TableHead>
                          <TableHead>Notas</TableHead>
                          <TableHead className="w-12"></TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {formData.components.map((component, index) => (
                          <TableRow key={index}>
                            <TableCell>
                              <Select
                                value={String(component.idproduct || "")}
                                onValueChange={(val: string) => updateComponent(index, "idproduct", val)}
                              >
                                <SelectTrigger className="w-full">
                                  <SelectValue placeholder="Seleccionar producto..." />
                                </SelectTrigger>
                                <SelectContent>
                                  {availableComponents.map((p: ProductRecord) => (
                                    <SelectItem key={String(p.id)} value={String(p.id)}>
                                      {p.name}{p.sku ? ` (${p.sku})` : ""}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </TableCell>
                            <TableCell>
                              <Input
                                type="number"
                                min="0.0001"
                                step="0.0001"
                                value={component.quantity}
                                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                                  updateComponent(index, "quantity", parseFloat(e.target.value) || 1)
                                }
                              />
                            </TableCell>
                            <TableCell>
                              <Input
                                type="text"
                                placeholder="Opcional..."
                                value={component.notes}
                                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                                  updateComponent(index, "notes", e.target.value)
                                }
                              />
                            </TableCell>
                            <TableCell>
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                onClick={() => removeComponent(index)}
                                className="text-red-500 hover:text-red-700"
                              >
                                <Trash2 className="w-4 h-4" />
                              </Button>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  )}

                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={addComponent}
                    className="w-full border-dashed"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Agregar componente
                  </Button>
                </div>
              )}

              <div className="flex justify-end gap-3">
                <Button type="button" variant="outline" onClick={closeForm}>
                  Cancelar
                </Button>
                <Button type="submit" className="bg-gradient-to-r from-blue-500 to-blue-600" disabled={isSaving}>
                  {editingProduct ? "Actualizar" : "Crear"} Producto
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

      <StockAlerts products={products} onManageStock={(product: ProductRecord) => setAdjustingProduct(product)} />

      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
        <Input
          value={searchTerm}
          onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
          placeholder="Buscar productos..."
          className="pl-10"
        />
      </div>

      {filteredProducts.length === 0 ? (
        <div className="text-center py-16">
          <Package className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">No hay productos</h2>
          <p className="text-gray-500 mb-6">Agrega productos para usar en el POS</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {filteredProducts.map((product) => (
            <Card key={product.id} className="glass-card border-white/20 hover:shadow-lg transition-all">
              <CardContent className="p-4">
                <div className="flex justify-between items-start mb-3">
                  <div>
                    <h3 className="font-semibold">{product.name}</h3>
                    <Badge variant="outline" className="mt-1">
                      {product.sku}
                    </Badge>
                  </div>
                  <Button variant="ghost" size="icon" onClick={() => void openEditForm(product)}>
                    <Edit className="w-4 h-4" />
                  </Button>
                </div>

                <div className="flex flex-wrap gap-1 mb-2">
                  {getCategoryName(product) && (
                    <Badge variant="secondary">{getCategoryName(product)}</Badge>
                  )}
                  {product.is_combo && (
                    <Badge className="bg-amber-100 text-amber-800 border-amber-200">Combo</Badge>
                  )}
                </div>

                <div className="space-y-1 text-sm text-gray-600 mb-3">
                  <p>
                    <strong>Precio:</strong> ${toNumber(product.price).toFixed(2)}
                  </p>
                  {toNumber(product.cost) > 0 && (
                    <p>
                      <strong>Costo:</strong> ${toNumber(product.cost).toFixed(2)}
                    </p>
                  )}
                  <div className="flex items-center justify-between">
                    <strong>Stock:</strong>
                    {editingStock === product.id ? (
                      <QuickStockEdit
                        product={product}
                        onSave={(productId: string, newStock: number) => {
                          updateStock(productId, newStock);
                        }}
                        onCancel={() => setEditingStock(null)}
                      />
                    ) : (
                      <div className="flex items-center gap-2">
                        <span>
                          {product.stock} {product.unit}
                        </span>
                        <Button size="icon" variant="ghost" className="h-6 w-6" onClick={() => setEditingStock(String(product.id || ""))}>
                          <Edit className="w-3 h-3" />
                        </Button>
                      </div>
                    )}
                  </div>
                </div>

                <div className="flex gap-2">
                  {toNumber(product.stock) <= toNumber(product.min_stock) && (
                    <Badge variant="secondary" className="bg-red-100 text-red-800">
                      Stock Bajo
                    </Badge>
                  )}
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => setAdjustingProduct(product)}
                    className="text-xs"
                  >
                    <History className="w-3 h-3 mr-1" />
                    Ajustar
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {adjustingProduct && (
        <InventoryAdjustmentModal
          product={adjustingProduct}
          onSave={(adjustmentData: AdjustmentData) => {
            adjustInventory(adjustingProduct, adjustmentData);
          }}
          onCancel={() => setAdjustingProduct(null)}
          onClose={() => setAdjustingProduct(null)}
        />
      )}
    </div>
  );
}