'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Header from '@/components/Header';

export const runtime = 'edge';
import { ArrowLeft, Package, Calendar, DollarSign } from 'lucide-react';
import { pedidoApiService } from '@/services/pedidoApiService';
import { produtoVendaService, ProdutoVendaData } from '@/services/produtoVendaService';
import { toast } from 'react-hot-toast';

interface Pedido {
  id: string;
  status: string;
  'valor-total': number;
  itens: string[];
  quantidade: number[];
  pagamentos: string | null;
  carrinhos: string | null;
  usuarios: string;
  faturas: string | null;
  createdAt: string;
  updatedAt: string;
}

export default function PedidoDetalhes() {
  const router = useRouter();
  const params = useParams();
  const [userData, setUserData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [pedido, setPedido] = useState<Pedido | null>(null);
  const [produtos, setProdutos] = useState<ProdutoVendaData[]>([]);
  const [carregandoPedido, setCarregandoPedido] = useState(true);
  const [carregandoProdutos, setCarregandoProdutos] = useState(false);

  const pedidoId = params.id as string;

  useEffect(() => {
    const verificarAutenticacao = async () => {
      try {
        const storedToken = localStorage.getItem('access_token');

        if (!storedToken) {
          router.push('/login');
          return;
        }

        const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: 'GET',
          headers: {
            'accept': 'application/json',
            'Authorization': `Bearer ${storedToken}`,
          },
        });

        if (!response.ok) {
          localStorage.removeItem('access_token');
          router.push('/login');
          return;
        }

        const userResponse = await response.json();
        setUserData(userResponse.data || userResponse);


      } catch (error) {
        console.error("❌ Erro ao verificar autenticação:", error);
        router.push('/login');
      } finally {
        setLoading(false);
      }
    };

    verificarAutenticacao();
  }, [router]);

  useEffect(() => {
    if (userData && pedidoId) {
      buscarDetalhesPedido();
    }
  }, [userData, pedidoId]);

  const buscarDetalhesPedido = async () => {
    try {
      setCarregandoPedido(true);

      const response = await pedidoApiService.buscarPorId(pedidoId);

      if (response.success && response.data) {
        setPedido(response.data);

        if (response.data.itens && response.data.itens.length > 0) {
          await buscarProdutosDosItens(response.data.itens);
        }
      } else {
        console.error('❌ Erro ao buscar pedido:', response.error);
        toast.error(response.error || 'Erro ao carregar detalhes do pedido');
      }
    } catch (error) {
      console.error('❌ Erro ao buscar pedido:', error);
      toast.error('Erro ao carregar detalhes do pedido');
    } finally {
      setCarregandoPedido(false);
    }
  };

  const buscarProdutosDosItens = async (itensIds: string[]) => {
    try {
      setCarregandoProdutos(true);

      const produtosEncontrados = await produtoVendaService.buscarMultiplosPorIds(itensIds);
      setProdutos(produtosEncontrados);

    } catch (error) {
      console.error('❌ Erro ao buscar produtos:', error);
      toast.error('Erro ao carregar produtos do pedido');
    } finally {
      setCarregandoProdutos(false);
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status.toLowerCase()) {
      case 'pendente':
        return <Package className="w-6 h-6 text-yellow-500" />;
      case 'confirmado':
      case 'aprovado':
        return <Package className="w-6 h-6 text-green-500" />;
      case 'entregue':
        return <Package className="w-6 h-6 text-blue-500" />;
      case 'cancelado':
        return <Package className="w-6 h-6 text-red-500" />;
      default:
        return <Package className="w-6 h-6 text-gray-500" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'pendente':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'confirmado':
      case 'aprovado':
        return 'bg-green-100 text-green-800 border-green-200';
      case 'entregue':
        return 'bg-blue-100 text-blue-800 border-blue-200';
      case 'cancelado':
        return 'bg-red-100 text-red-800 border-red-200';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

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

  const formatarData = (dataString: string) => {
    return new Date(dataString).toLocaleDateString('pt-BR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const calcularSubtotal = (produto: ProdutoVendaData, quantidade: number) => {
    const preco = produto.preco_venda || produto.preco_base || 0;
    return preco * quantidade;
  };

  if (loading || carregandoPedido) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header
          user={userData}
          title="Detalhes do Pedido"
          subtitle="Visualizando informações detalhadas"
          showBackButton
        />
        <main className="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
            <p className="text-gray-600">Carregando detalhes do pedido...</p>
          </div>
        </main>
      </div>
    );
  }

  if (!pedido) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header
          user={userData}
          title="Pedido não encontrado"
          subtitle="O pedido solicitado não foi encontrado"
          showBackButton
        />
        <main className="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
          <div className="text-center">
            <Package className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">Pedido não encontrado</h3>
            <p className="mt-1 text-sm text-gray-500">
              O pedido que você está procurando não existe ou foi removido.
            </p>
            <div className="mt-6">
              <button
                onClick={() => router.push('/pedidos')}
                className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
              >
                <ArrowLeft className="-ml-1 mr-2 h-5 w-5" />
                Voltar aos Pedidos
              </button>
            </div>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header
        user={userData}
        title={`Pedido #${pedido.id.slice(-8)}`}
        subtitle="Detalhes completos do pedido"
        showBackButton
      />

      <main className="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
        <div className="space-y-6">
          <button
            onClick={() => router.push('/pedidos')}
            className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Voltar aos meus pedidos
          </button>

          {/* Informações Principais do Pedido */}
          <div className="bg-white rounded-lg shadow-sm border p-6">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-4">
                {getStatusIcon(pedido.status)}
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">
                    Pedido #{pedido.id.slice(-8)}
                  </h2>
                  <p className="text-gray-600">
                    Criado em {formatarData(pedido.createdAt)}
                  </p>
                </div>
              </div>

              <span className={`inline-flex items-center px-4 py-2 rounded-full text-sm font-medium border ${getStatusColor(pedido.status)}`}>
                {pedido.status.toUpperCase()}
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="flex items-center space-x-3">
                <DollarSign className="w-5 h-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Valor Total</p>
                  <p className="text-lg font-semibold text-gray-900">
                    {formatarPreco(pedido['valor-total'])}
                  </p>
                </div>
              </div>

              <div className="flex items-center space-x-3">
                <Package className="w-5 h-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Itens</p>
                  <p className="text-lg font-semibold text-gray-900">
                    {pedido.itens.length} {pedido.itens.length === 1 ? 'produto' : 'produtos'}
                  </p>
                </div>
              </div>

              <div className="flex items-center space-x-3">
                <Calendar className="w-5 h-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Última Atualização</p>
                  <p className="text-lg font-semibold text-gray-900">
                    {formatarData(pedido.updatedAt)}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Lista de Produtos */}
          <div className="bg-white rounded-lg shadow-sm border">
            <div className="px-6 py-4 border-b">
              <h3 className="text-lg font-semibold text-gray-900">Produtos do Pedido</h3>
            </div>

            {carregandoProdutos ? (
              <div className="p-6 text-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4" />
                <p className="text-gray-600">Carregando produtos...</p>
              </div>
            ) : produtos.length === 0 ? (
              <div className="p-6 text-center">
                <Package className="mx-auto h-8 w-8 text-gray-400 mb-4" />
                <p className="text-gray-600">Nenhum produto encontrado para este pedido.</p>
                <div className="mt-4 text-left">
                  <p className="text-sm text-gray-500 mb-2">IDs dos produtos no pedido:</p>
                  {pedido.itens.map((itemId, index) => (
                    <p key={index} className="text-xs text-gray-600 font-mono bg-gray-100 p-2 rounded mb-1">
                      Item {index + 1}: {itemId} (Qtd: {pedido.quantidade[index] || 1})
                    </p>
                  ))}
                </div>
              </div>
            ) : (
              <div className="divide-y divide-gray-200">
                {produtos.map((produto, index) => {
                  const quantidade = pedido.quantidade[index] || 1;
                  const subtotal = calcularSubtotal(produto, quantidade);

                  return (
                    <div key={produto.id} className="p-6">
                      <div className="flex items-center justify-between">
                        <div className="flex-1">
                          <h4 className="text-lg font-medium text-gray-900">
                            {produto.nome}
                          </h4>
                          {produto.descricao && (
                            <p className="text-sm text-gray-600 mt-1">
                              {produto.descricao}
                            </p>
                          )}
                          <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                            {produto.codigo_ean && (
                              <span>EAN: {produto.codigo_ean}</span>
                            )}
                            {produto.codigo_interno && (
                              <span>Código: {produto.codigo_interno}</span>
                            )}
                            {produto.principio_ativo && (
                              <span>P.A.: {produto.principio_ativo}</span>
                            )}
                            {produto.concentracao && (
                              <span>Conc.: {produto.concentracao}</span>
                            )}
                          </div>
                          {produto.forma_farmaceutica && (
                            <div className="mt-1 text-xs text-gray-500">
                              Forma: {produto.forma_farmaceutica}
                            </div>
                          )}
                          {produto.observacoes && (
                            <div className="mt-1 text-xs text-gray-600">
                              Obs: {produto.observacoes}
                            </div>
                          )}
                        </div>

                        <div className="text-right ml-4">
                          <p className="text-lg font-semibold text-gray-900">
                            {formatarPreco(produto.preco_venda || produto.preco_base || 0)}
                          </p>
                          <p className="text-sm text-gray-600">
                            Qtd: {quantidade}
                          </p>
                          <p className="text-sm font-medium text-gray-900">
                            Subtotal: {formatarPreco(subtotal)}
                          </p>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {/* Botão Voltar */}
          <div className="flex justify-center">
            <button
              onClick={() => router.push('/pedidos')}
              className="inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            >
              <ArrowLeft className="-ml-1 mr-2 h-5 w-5" />
              Voltar aos Pedidos
            </button>
          </div>
        </div>
      </main>
    </div>
  );
}
