import React from "react";
import { Models } from "appwrite";
import TableActions from "./TableActions";

interface CatalogoProdutosListProps {
  produtos: Models.Document[];
  loading: boolean;
  isChangingPage?: boolean;
  totalProdutos: number;
  currentPage: number;
  pageSize: number;
  onEdit: (produto: Models.Document) => void;
  onDelete: (id: string) => void;
  onView: (produto: Models.Document) => void;
  onPrevPage: () => void;
  onNextPage: () => void;
  onRowClick?: (produto: Models.Document) => void;
}

const CatalogoProdutosList: React.FC<CatalogoProdutosListProps> = ({
  produtos,
  loading,
  isChangingPage = false,
  totalProdutos,
  currentPage,
  pageSize,
  onEdit,
  onDelete,
  onView,
  onPrevPage,
  onNextPage,
  onRowClick,
}) => {
  const totalPages = Math.ceil(totalProdutos / pageSize);
  const startItem = (currentPage - 1) * pageSize + 1;
  const endItem = Math.min(currentPage * pageSize, totalProdutos);

  const columns = [
    {
      key: "nome-produto",
      header: "Nome do Produto",
      render: (produto: Models.Document) => {
        // Extrair o nome do produto do catálogo
        let nomeProduto = "";
        const produtoData = produto as any;

        if (produtoData.catalogoDescricao) {
          nomeProduto = produtoData.catalogoDescricao;
        } else if (produtoData["catalogo-produtos"]) {
          if (
            typeof produtoData["catalogo-produtos"] === "object" &&
            produtoData["catalogo-produtos"].nome
          ) {
            nomeProduto = produtoData["catalogo-produtos"].nome;
          } else if (typeof produtoData["catalogo-produtos"] === "string") {
            nomeProduto = produtoData["catalogo-produtos"];
          }
        }

        return (
          <div className="font-medium text-gray-900 line-clamp-2 max-w-xs">
            {nomeProduto || "N/A"}
          </div>
        );
      },
      width: "w-80",
    },
    {
      key: "codigo-interno",
      header: "Código Interno",
      render: (produto: Models.Document) => (
        <div className="font-medium text-gray-900">
          {(produto as any)["codigo-interno"] ||
            (produto as any)["catalogo-produtos"]?.["codigo-interno"] ||
            "N/A"}
        </div>
      ),
      width: "w-32",
    },
    {
      key: "codigo-ean",
      header: "Código EAN",
      render: (produto: Models.Document) => (
        <div className="text-sm text-gray-700">
          {(produto as any)["codigo-ean"] ||
            (produto as any)["catalogo-produtos"]?.["codigo-ean"] ||
            "N/A"}
        </div>
      ),
      width: "w-32",
    },
    {
      key: "descricao",
      header: "Descrição",
      render: (produto: Models.Document) => (
        <div className="font-medium text-gray-900 line-clamp-2 max-w-xs">
          {(produto as any).descricao ||
            (produto as any)["catalogo-produtos"]?.descricao ||
            "N/A"}
        </div>
      ),
      width: "w-80",
    },
    {
      key: "preco-original",
      header: "Preço Original",
      render: (produto: Models.Document) => (
        <div className="text-sm">
          {(produto as any)["preco-original"] ? (
            <span className="font-medium text-green-600">
              R$ {(produto as any)["preco-original"].toFixed(2)}
            </span>
          ) : (
            <span className="text-gray-400">N/A</span>
          )}
        </div>
      ),
      width: "w-28",
    },
    {
      key: "preco-atual",
      header: "Preço Atual",
      render: (produto: Models.Document) => (
        <div className="text-sm">
          {(produto as any)["preco-atual"] ? (
            <span className="font-medium text-blue-600">
              R$ {(produto as any)["preco-atual"].toFixed(2)}
            </span>
          ) : (
            <span className="text-gray-400">N/A</span>
          )}
        </div>
      ),
      width: "w-24",
    },
    {
      key: "quantidade",
      header: "Quantidade",
      render: (produto: Models.Document) => (
        <div className="text-sm">
          {(produto as any).quantidade ? (
            <span className="font-medium text-indigo-600">
              {(produto as any).quantidade}
            </span>
          ) : (
            <span className="text-gray-400">N/A</span>
          )}
        </div>
      ),
      width: "w-24",
    },
    {
      key: "valor-substituicao-tributaria",
      header: "Subst. Tributária",
      render: (produto: Models.Document) => {
        const produtoData = produto as any;
        const valor = produtoData["valor-substituicao-tributaria"];
        return (
          <div className="text-sm">
            {valor ? (
              <span className="font-medium text-purple-600">
                R$ {valor.toFixed(2)}
              </span>
            ) : (
              <span className="text-gray-400">N/A</span>
            )}
          </div>
        );
      },
      width: "w-32",
    },
    {
      key: "preco-nf",
      header: "Preço NF",
      render: (produto: Models.Document) => {
        const produtoData = produto as any;
        const preco = produtoData["preco-nf"];
        return (
          <div className="text-sm">
            {preco ? (
              <span className="font-medium text-indigo-600">
                R$ {preco.toFixed(2)}
              </span>
            ) : (
              <span className="text-gray-400">N/A</span>
            )}
          </div>
        );
      },
      width: "w-24",
    },
    {
      key: "laboratorios",
      header: "Laboratórios",
      render: (produto: Models.Document) => {
        const produtoData = produto as any;
        let laboratorios = [];

        // Tentar pegar laboratórios de diferentes fontes
        if (
          produtoData.catalogoLaboratorios &&
          Array.isArray(produtoData.catalogoLaboratorios)
        ) {
          laboratorios = produtoData.catalogoLaboratorios;
        } else if (
          produtoData.laboratorios &&
          Array.isArray(produtoData.laboratorios)
        ) {
          laboratorios = produtoData.laboratorios;
        } else if (produtoData.laboratorio) {
          laboratorios = [{ nome: produtoData.laboratorio }];
        }

        return (
          <div className="text-sm">
            {laboratorios.length > 0 ? (
              <div className="space-y-1">
                {laboratorios.map((lab: any, index: number) => (
                  <span
                    key={lab.$id || index}
                    className="inline-block bg-gray-800 text-white px-2 py-1 rounded-full text-xs font-medium"
                  >
                    {lab.nome || lab}
                  </span>
                ))}
              </div>
            ) : (
              <span className="text-gray-400">N/A</span>
            )}
          </div>
        );
      },
      width: "w-32",
    },
    {
      key: "categorias",
      header: "Categoria",
      render: (produto: Models.Document) => {
        const produtoData = produto as any;
        let categorias = [];

        // Tentar pegar categorias de diferentes fontes
        if (
          produtoData.catalogoCategorias &&
          Array.isArray(produtoData.catalogoCategorias)
        ) {
          categorias = produtoData.catalogoCategorias;
        } else if (
          produtoData.categorias &&
          Array.isArray(produtoData.categorias)
        ) {
          categorias = produtoData.categorias;
        } else if (produtoData.categoria) {
          categorias = [{ nome: produtoData.categoria }];
        }

        return (
          <div className="text-sm">
            {categorias.length > 0 ? (
              <div className="space-y-1">
                {categorias.map((cat: any, index: number) => (
                  <span
                    key={cat.$id || index}
                    className="inline-block bg-blue-600 text-white px-2 py-1 rounded-full text-xs font-medium"
                  >
                    {cat.nome || cat}
                  </span>
                ))}
              </div>
            ) : (
              <span className="text-gray-400">N/A</span>
            )}
          </div>
        );
      },
      width: "w-24",
    },
    {
      key: "subcategoria",
      header: "Subcategoria",
      render: (produto: Models.Document) => {
        const produtoData = produto as any;
        let subcategorias = [];

        // Tentar pegar subcategorias de diferentes fontes
        if (
          produtoData.catalogoSubcategorias &&
          Array.isArray(produtoData.catalogoSubcategorias)
        ) {
          subcategorias = produtoData.catalogoSubcategorias;
        } else if (
          produtoData.subcategorias &&
          Array.isArray(produtoData.subcategorias)
        ) {
          subcategorias = produtoData.subcategorias;
        } else if (produtoData.subcategoria) {
          subcategorias = [{ nome: produtoData.subcategoria }];
        }

        return (
          <div className="text-sm">
            {subcategorias.length > 0 ? (
              <div className="space-y-1">
                {subcategorias.map((subcat: any, index: number) => (
                  <span
                    key={subcat.$id || index}
                    className="inline-block bg-green-600 text-white px-2 py-1 rounded-full text-xs font-medium"
                  >
                    {subcat.nome || subcat}
                  </span>
                ))}
              </div>
            ) : (
              <span className="text-gray-400">N/A</span>
            )}
          </div>
        );
      },
      width: "w-28",
    },
    {
      key: "acoes",
      header: "Ações",
      render: (produto: Models.Document) => (
        <TableActions
          onView={() => onView(produto)}
          onEdit={() => onEdit(produto)}
          onDelete={() => onDelete(produto.$id)}
        />
      ),
      width: "w-24",
    },
  ];

  return (
    <div className="laboratory-management-container">
      <div className="table-content-card backdrop-blur-sm bg-white/70 border border-gray-200/50">
        <div className="overflow-x-auto">
          <table className="laboratory-table w-full">
            <thead>
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Nome do Produto
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Código Interno
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Código EAN
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Descrição
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Preço Fábrica
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  PMC
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Desc. Comercial
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Subst. Tributária
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Preço NF
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Laboratórios
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Categoria
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Subcategoria
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Ações
                </th>
              </tr>
            </thead>
            <tbody className="bg-white/60 divide-y divide-gray-200/60">
              {produtos.map((produto) => (
                <tr
                  key={produto.$id}
                  className="hover:bg-gray-50/40 cursor-pointer transition-colors duration-200"
                  onClick={() => onRowClick && onRowClick(produto)}
                >
                  {columns.map((column) => (
                    <td
                      key={column.key}
                      className={`px-6 py-4 ${column.width}`}
                    >
                      {(column as any).render(produto)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Paginação com layout de laboratório */}
        <div className="action-buttons-container bg-gray-50/40 border-t border-gray-200/50">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center space-x-2">
              <button
                onClick={onPrevPage}
                disabled={currentPage === 1 || isChangingPage}
                className="px-3 py-2 text-sm font-medium text-gray-700 bg-white/70 border border-gray-300/60 rounded-md hover:bg-gray-50/60 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
              >
                Anterior
              </button>
              <span className="px-3 py-2 text-sm text-gray-700 font-medium">
                Página {currentPage} de {Math.ceil(totalProdutos / pageSize)}
              </span>
              <button
                onClick={onNextPage}
                disabled={
                  currentPage >= Math.ceil(totalProdutos / pageSize) ||
                  isChangingPage
                }
                className="px-3 py-2 text-sm font-medium text-gray-700 bg-white/70 border border-gray-300/60 rounded-md hover:bg-gray-50/60 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
              >
                Próxima
              </button>
            </div>
            <div className="text-sm text-gray-700 font-medium">
              Total: {totalProdutos} produtos
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CatalogoProdutosList;
