'use client';

import React, { useState } from 'react';
import { toast } from 'react-hot-toast';
import { catalogoProdutoService } from '@/services/catalogoProdutoService';

interface ProdutoMocado {
  $id: string;
  nome: string;
  descricao: string;
  'codigo-interno': string;
  'codigo-ean': string;
  'principio-ativo': string;
  concentracao: string;
  'forma-farmaceutica': string;
  'preco-atual': number;
  'preco-original': number;
  'preco-unitario': number;
  'preco-fabrica': number;
  pmc: number;
  quantidade: number;
  estoque: number;
  categoria: string;
  laboratorio: string;
  _origem: string;
  _precoMocado: boolean;
}

export default function DemoProdutosCatalogo() {
  const [produtos, setProdutos] = useState<ProdutoMocado[]>([]);
  const [loading, setLoading] = useState(false);

  const carregarProdutosCatalogo = async () => {
    try {
      setLoading(true);
      console.log('🏪 Carregando produtos do catálogo com preços mocados...');
      
      const response = await catalogoProdutoService.listar();
      
      if (response.success && response.documents.length > 0) {
        // Converter produtos do catálogo para formato de produtos com preços mocados
        const produtosCatalogo = response.documents.map((catalogo: any, index) => {
          // Gerar preços mocados baseados no índice para variedade
          const precoBase = 15 + (index * 5) + Math.random() * 30; // Entre R$ 15 e R$ 65
          const precoComDesconto = precoBase * (0.80 + Math.random() * 0.15); // 80-95% do preço base
          const estoque = Math.floor(Math.random() * 150) + 20; // Entre 20 e 170 unidades
          
          return {
            $id: catalogo.$id,
            nome: catalogo.descricao || 'Produto sem nome',
            descricao: catalogo.descricao || 'Descrição não disponível',
            'codigo-interno': catalogo['codigo-interno'] || `CAT${String(index + 1).padStart(3, '0')}`,
            'codigo-ean': catalogo['codigo-ean'] || `789${String(Math.floor(Math.random() * 9999999999)).padStart(10, '0')}`,
            'principio-ativo': catalogo['principio-ativo'] || 'Princípio ativo não informado',
            concentracao: catalogo.concentracao || 'Concentração não informada',
            'forma-farmaceutica': catalogo['forma-farmaceutica'] || 'Forma farmacêutica não informada',
            'preco-atual': parseFloat(precoComDesconto.toFixed(2)),
            'preco-original': parseFloat(precoBase.toFixed(2)),
            'preco-unitario': parseFloat(precoComDesconto.toFixed(2)),
            'preco-fabrica': parseFloat((precoBase * 0.7).toFixed(2)), // 70% do preço base
            pmc: parseFloat((precoBase * 1.3).toFixed(2)), // PMC 30% acima do preço base
            quantidade: estoque,
            estoque: estoque,
            categoria: [
              'Medicamentos Genéricos', 
              'Medicamentos Similares', 
              'Medicamentos de Referência',
              'Suplementos Alimentares', 
              'Produtos de Higiene', 
              'Cosméticos e Beleza', 
              'Equipamentos Médicos',
              'Produtos Infantis'
            ][index % 8],
            laboratorio: [
              'Laboratório EMS', 
              'Laboratório Eurofarma', 
              'Laboratório Medley',
              'Laboratório Neo Química', 
              'Laboratório Germed'
            ][index % 5],
            _origem: 'catalogo',
            _precoMocado: true
          };
        });
        
        setProdutos(produtosCatalogo);
        console.log(`✅ ${produtosCatalogo.length} produtos do catálogo carregados com preços mocados`);
        toast.success(`${produtosCatalogo.length} produtos do catálogo carregados com preços mocados!`);
      } else {
        console.warn('⚠️ Nenhum produto encontrado no catálogo');
        toast.error('Nenhum produto encontrado no catálogo');
      }
    } catch (error) {
      console.error('❌ Erro ao carregar produtos do catálogo:', error);
      toast.error('Erro ao carregar produtos do catálogo');
    } finally {
      setLoading(false);
    }
  };

  const formatarPreco = (preco: number) => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    }).format(preco);
  };

  const calcularDesconto = (precoOriginal: number, precoAtual: number) => {
    const desconto = ((precoOriginal - precoAtual) / precoOriginal) * 100;
    return Math.round(desconto);
  };

  const getStatusEstoque = (estoque: number) => {
    if (estoque > 100) return { cor: 'text-green-600', status: 'Alto' };
    if (estoque > 50) return { cor: 'text-yellow-600', status: 'Médio' };
    return { cor: 'text-red-600', status: 'Baixo' };
  };

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            🏪 Demonstração: Produtos do Catálogo com Preços Mocados
          </h1>
          <p className="text-gray-600 mb-6">
            Esta demonstração mostra como carregar os produtos do "Catálogo de Produtos" e convertê-los 
            para a "Lista de Produtos" com preços e informações mocadas para teste.
          </p>
          
          <div className="flex gap-4 mb-6">
            <button
              onClick={carregarProdutosCatalogo}
              disabled={loading}
              className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors disabled:bg-gray-400 flex items-center gap-2"
            >
              {loading ? (
                <>
                  <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
                  Carregando...
                </>
              ) : (
                <>
                  🏪 Carregar do Catálogo
                </>
              )}
            </button>
            
            {produtos.length > 0 && (
              <button
                onClick={() => setProdutos([])}
                className="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors"
              >
                🗑️ Limpar Lista
              </button>
            )}
          </div>

          {produtos.length > 0 && (
            <div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
              <h3 className="font-semibold text-green-800 mb-2">✅ Transformação Concluída!</h3>
              <p className="text-green-700">
                {produtos.length} produtos foram transferidos do catálogo para a lista de produtos com:
              </p>
              <ul className="text-green-700 mt-2 ml-4 list-disc">
                <li>Preços mocados realistas (R$ 15 - R$ 65)</li>
                <li>Descontos automáticos (5% - 20%)</li>
                <li>Estoque variado (20 - 170 unidades)</li>
                <li>Categorização automática</li>
                <li>Laboratórios distribuídos</li>
              </ul>
            </div>
          )}
        </div>

        {/* Lista de Produtos */}
        {produtos.length > 0 && (
          <div className="bg-white rounded-lg shadow-sm overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
              <h2 className="text-xl font-semibold text-gray-900">
                📦 Lista de Produtos Convertidos ({produtos.length})
              </h2>
              <p className="text-sm text-gray-600 mt-1">
                Produtos do catálogo convertidos para lista de produtos com dados mocados
              </p>
            </div>
            
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Produto
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Código
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Categoria
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Laboratório
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Preços
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Estoque
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {produtos.map((produto, index) => {
                    const statusEstoque = getStatusEstoque(produto.estoque);
                    const temDesconto = produto['preco-original'] > produto['preco-atual'];
                    
                    return (
                      <tr key={produto.$id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                        <td className="px-6 py-4">
                          <div>
                            <div className="text-sm font-medium text-gray-900 max-w-xs truncate">
                              {produto.nome}
                            </div>
                            <div className="text-sm text-gray-500">
                              {produto['principio-ativo']} • {produto.concentracao}
                            </div>
                            <div className="text-xs text-gray-400">
                              {produto['forma-farmaceutica']}
                            </div>
                          </div>
                        </td>
                        
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">{produto['codigo-interno']}</div>
                          <div className="text-xs text-gray-500">EAN: {produto['codigo-ean']}</div>
                        </td>
                        
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {produto.categoria}
                          </span>
                        </td>
                        
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                          {produto.laboratorio}
                        </td>
                        
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm">
                            <div className="text-green-600 font-semibold">
                              {formatarPreco(produto['preco-atual'])}
                            </div>
                            {temDesconto && (
                              <div className="text-xs text-gray-500">
                                <span className="line-through">{formatarPreco(produto['preco-original'])}</span>
                                <span className="ml-2 text-red-600 font-medium">
                                  -{calcularDesconto(produto['preco-original'], produto['preco-atual'])}%
                                </span>
                              </div>
                            )}
                            <div className="text-xs text-gray-400">
                              PMC: {formatarPreco(produto.pmc)}
                            </div>
                          </div>
                        </td>
                        
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm">
                            <div className={`font-medium ${statusEstoque.cor}`}>
                              {produto.estoque} unidades
                            </div>
                            <div className="text-xs text-gray-500">
                              Status: {statusEstoque.status}
                            </div>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Informações Técnicas */}
        {produtos.length === 0 && !loading && (
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">
              📋 Como Funciona a Conversão
            </h3>
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <h4 className="font-medium text-gray-900 mb-2">🏪 Dados do Catálogo</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• Descrição do produto</li>
                  <li>• Código interno e EAN</li>
                  <li>• Princípio ativo</li>
                  <li>• Concentração</li>
                  <li>• Forma farmacêutica</li>
                  <li>• Informações do laboratório</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 mb-2">📦 Dados Mocados Gerados</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• Preços realistas (R$ 15 - R$ 65)</li>
                  <li>• Descontos automáticos</li>
                  <li>• Estoque variado</li>
                  <li>• Categorização automática</li>
                  <li>• PMC calculado</li>
                  <li>• Metadados de origem</li>
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
