import React from 'react';
import { Models } from 'appwrite';
import { XMarkIcon } from '@heroicons/react/24/outline';

interface DetalheProdutoModalProps {
  produto: Models.Document | null;
  isOpen: boolean;
  onClose: () => void;
}

export const DetalheProdutoModal: React.FC<DetalheProdutoModalProps> = ({
  produto,
  isOpen,
  onClose
}) => {
  if (!isOpen || !produto) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 className="text-xl font-semibold text-gray-900">
            Detalhes do Produto
          </h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <XMarkIcon className="w-5 h-5 text-gray-500" />
          </button>
        </div>

        {/* Content */}
        <div className="p-6">
          <div className="space-y-4">
            {/* Nome do Produto */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Nome do Produto
              </label>
              <p className="text-gray-900 font-semibold">{produto.nome}</p>
            </div>

            {/* Descrição */}
            {produto.descricao && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Descrição
                </label>
                <p className="text-gray-600">{produto.descricao}</p>
              </div>
            )}

            {/* Código Interno */}
            {produto['codigo-interno'] && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Código Interno
                </label>
                <p className="text-gray-600 font-mono">{produto['codigo-interno']}</p>
              </div>
            )}

            {/* Preços */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* Preço Fábrica */}
              {produto['preco-fabrica'] && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Preço Fábrica
                  </label>
                  <p className="text-green-600 font-semibold">
                    {new Intl.NumberFormat('pt-BR', {
                      style: 'currency',
                      currency: 'BRL'
                    }).format(produto['preco-fabrica'])}
                  </p>
                </div>
              )}

              {/* PMC */}
              {produto.pmc && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    PMC
                  </label>
                  <p className="text-blue-600 font-semibold">
                    {new Intl.NumberFormat('pt-BR', {
                      style: 'currency',
                      currency: 'BRL'
                    }).format(produto.pmc)}
                  </p>
                </div>
              )}

              {/* Desconto Comercial */}
              {produto['desconto-comercial'] !== undefined && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Desconto Comercial
                  </label>
                  <p className="text-orange-600 font-semibold">
                    {new Intl.NumberFormat('pt-BR', {
                      style: 'currency',
                      currency: 'BRL'
                    }).format(produto['desconto-comercial'])}
                  </p>
                </div>
              )}

              {/* Valor Substituição Tributária */}
              {produto['valor-substituicao-tributaria'] && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Valor Subst. Tributária
                  </label>
                  <p className="text-purple-600 font-semibold">
                    {new Intl.NumberFormat('pt-BR', {
                      style: 'currency',
                      currency: 'BRL'
                    }).format(produto['valor-substituicao-tributaria'])}
                  </p>
                </div>
              )}

              {/* Preço NF */}
              {produto['preco-nf'] && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Preço NF
                  </label>
                  <p className="text-indigo-600 font-semibold">
                    {new Intl.NumberFormat('pt-BR', {
                      style: 'currency',
                      currency: 'BRL'
                    }).format(produto['preco-nf'])}
                  </p>
                </div>
              )}
            </div>

            {/* Código EAN */}
            {produto['codigo-ean'] && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Código EAN
                </label>
                <p className="text-gray-600 font-mono">{produto['codigo-ean']}</p>
              </div>
            )}

            {/* Laboratório */}
            {produto.laboratorios && produto.laboratorios.length > 0 && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Laboratório(s)
                </label>
                <div className="flex flex-wrap gap-2">
                  {produto.laboratorios.map((lab: any, index: number) => (
                    <span
                      key={index}
                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
                    >
                      {typeof lab === 'object' ? lab.nome : lab}
                    </span>
                  ))}
                </div>
              </div>
            )}

            {/* Categoria */}
            {produto.categoria && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Categoria
                </label>
                <p className="text-gray-600">
                  {typeof produto.categoria === 'object' ? produto.categoria.nome : produto.categoria}
                </p>
              </div>
            )}

            {/* Subcategoria */}
            {produto.subcategoria && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Subcategoria
                </label>
                <p className="text-gray-600">
                  {typeof produto.subcategoria === 'object' ? produto.subcategoria.nome : produto.subcategoria}
                </p>
              </div>
            )}

            {/* Estoque */}
            {produto.estoque !== undefined && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Estoque
                </label>
                <p className={`font-semibold ${
                  produto.estoque > 10 ? 'text-green-600' : 
                  produto.estoque > 0 ? 'text-yellow-600' : 'text-red-600'
                }`}>
                  {produto.estoque} unidades
                </p>
              </div>
            )}

            {/* Data de Criação */}
            {produto.$createdAt && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Data de Cadastro
                </label>
                <p className="text-gray-600">
                  {new Date(produto.$createdAt).toLocaleDateString('pt-BR')}
                </p>
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="flex justify-end p-6 border-t border-gray-200">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
          >
            Fechar
          </button>
        </div>
      </div>
    </div>
  );
};

export default DetalheProdutoModal;