'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Header from '@/components/Header';
import { ShoppingBag, Package, Clock, CheckCircle, XCircle, Eye } from 'lucide-react';
import { pedidoApiService } from '@/services/pedidoApiService';
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;
}

interface RespostaPedidos {
  page: number;
  limit: number;
  total: number;
  items: Pedido[];
}

interface PaginacaoInfo {
  currentPage: number;
  totalPages: number;
  totalDocuments: number;
  hasNextPage: boolean;
  hasPrevPage: boolean;
}

const MeusPedidos = () => {
  const router = useRouter();
  const [userData, setUserData] = useState<any>(null);
  const [pedidos, setPedidos] = useState<Pedido[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [paginacao, setPaginacao] = useState<PaginacaoInfo | null>(null);

  useEffect(() => {
    const verificarAutenticacao = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');

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

        // Verificar se o token é válido fazendo uma requisição ao BFF
        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;
        }

        // Obter dados do usuário
        const userResponse = await response.json();
        setUserData(userResponse.data || userResponse);

        await carregarPedidos();

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

    verificarAutenticacao();
  }, [router]);

  const carregarPedidos = async (page: number = 1) => {
    try {
      setLoading(true);

      const response = await pedidoApiService.listarPorUsuario(page);

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

        // A resposta pode vir em diferentes formatos dependendo do BFF
        let pedidosData: Pedido[] = [];
        let paginacaoData: any = {};

        if (response.data.items) {
          // Formato da nova estrutura fornecida
          pedidosData = response.data.items;
          paginacaoData = {
            currentPage: response.data.page || page,
            totalPages: Math.ceil(response.data.total / response.data.limit) || 1,
            totalDocuments: response.data.total || 0,
            hasNextPage: response.data.page < Math.ceil(response.data.total / response.data.limit),
            hasPrevPage: response.data.page > 1,
          };
        } else if (response.data.documents) {
          // Formato antigo para compatibilidade
          pedidosData = response.data.documents;
          if (response.data.pagination) {
            paginacaoData = response.data.pagination;
          }
        } else if (Array.isArray(response.data)) {
          // Resposta direta como array
          pedidosData = response.data;
          paginacaoData = {
            currentPage: page,
            totalPages: 1,
            totalDocuments: response.data.length,
            hasNextPage: false,
            hasPrevPage: false,
          };
        }

        setPedidos(pedidosData);
        setPaginacao(paginacaoData);


      } else {
        console.error('❌ Erro ao carregar pedidos:', response.error);
        toast.error(response.error || 'Erro ao carregar pedidos');
        setPedidos([]);
        setPaginacao({
          currentPage: page,
          totalPages: 1,
          totalDocuments: 0,
          hasNextPage: false,
          hasPrevPage: false,
        });
      }
    } catch (error) {
      console.error('❌ Erro ao carregar pedidos:', error);
      toast.error('Erro ao carregar pedidos');
      setPedidos([]);
      setPaginacao({
        currentPage: page,
        totalPages: 1,
        totalDocuments: 0,
        hasNextPage: false,
        hasPrevPage: false,
      });
    } finally {
      setLoading(false);
    }
  };

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

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

  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 handlePageChange = (newPage: number) => {
    setCurrentPage(newPage);
    carregarPedidos(newPage);
  };

  const visualizarDetalhes = (pedidoId: string) => {
    router.push(`/pedidos/${pedidoId}`);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header
          user={userData}
          title="Meus Pedidos"
          subtitle="Visualize o histórico dos seus pedidos"
          showBackButton
        />
        <main className="mx-auto max-w-6xl 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 seus pedidos...</p>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header
        user={userData}
        title="Meus Pedidos"
        subtitle="Visualize o histórico dos seus pedidos"
        showBackButton
      />

      <main className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
        <div className="space-y-6">
          {/* Estatísticas rápidas */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-sm border">
              <div className="flex items-center">
                <ShoppingBag className="w-8 h-8 text-blue-500" />
                <div className="ml-4">
                  <p className="text-sm font-medium text-gray-600">Total de Pedidos</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {paginacao?.totalDocuments || pedidos.length}
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm border">
              <div className="flex items-center">
                <Package className="w-8 h-8 text-green-500" />
                <div className="ml-4">
                  <p className="text-sm font-medium text-gray-600">Entregues</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {pedidos.filter(p => p.status.toLowerCase() === 'entregue').length}
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm border">
              <div className="flex items-center">
                <Clock className="w-8 h-8 text-yellow-500" />
                <div className="ml-4">
                  <p className="text-sm font-medium text-gray-600">Pendentes</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {pedidos.filter(p => p.status.toLowerCase() === 'pendente').length}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Lista de pedidos */}
          <div className="bg-white rounded-lg shadow-sm border">
            <div className="px-6 py-4 border-b">
              <h2 className="text-lg font-semibold text-gray-900">Histórico de Pedidos</h2>
            </div>

            {pedidos.length === 0 ? (
              <div className="text-center py-12">
                <ShoppingBag className="mx-auto h-12 w-12 text-gray-400" />
                <h3 className="mt-2 text-sm font-medium text-gray-900">Nenhum pedido encontrado</h3>
                <p className="mt-1 text-sm text-gray-500">
                  Você ainda não fez nenhum pedido.
                </p>
                <div className="mt-6">
                  <button
                    onClick={() => router.push('/produtos')}
                    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"
                  >
                    <ShoppingBag className="-ml-1 mr-2 h-5 w-5" />
                    Fazer Pedido
                  </button>
                </div>
              </div>
            ) : (
              <div className="divide-y divide-gray-200">
                {pedidos.map((pedido) => (
                  <div key={pedido.id} className="p-4 sm:p-6 hover:bg-gray-50">
                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-0">
                      <div className="flex items-start space-x-3 sm:space-x-4">
                        <div className="flex-shrink-0 mt-1">
                          {getStatusIcon(pedido.status)}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium text-gray-900 truncate">
                            Pedido #{pedido.id.slice(-8)}
                          </p>
                          <p className="text-xs sm:text-sm text-gray-500">
                            {formatarData(pedido.createdAt)}
                          </p>
                        </div>
                      </div>

                      <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
                        <span className={`inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium w-fit ${getStatusColor(pedido.status)}`}>
                          {pedido.status}
                        </span>

                        <div className="text-left sm:text-right">
                          <p className="text-sm font-medium text-gray-900">
                            {formatarPreco(pedido["valor-total"])}
                          </p>
                          <p className="text-xs sm:text-sm text-gray-500">
                            {pedido.itens.length} {pedido.itens.length === 1 ? 'item' : 'itens'}
                          </p>
                        </div>

                        <button
                          onClick={() => visualizarDetalhes(pedido.id)}
                          className="inline-flex items-center justify-center sm:justify-start px-3 py-2 border border-gray-300 shadow-sm text-xs sm:text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 w-full sm:w-auto"
                        >
                          <Eye className="h-4 w-4 mr-1" />
                          <span>Ver Detalhes</span>
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Paginação */}
            {paginacao && paginacao.totalPages > 1 && (
              <div className="px-6 py-4 border-t bg-gray-50">
                <div className="flex items-center justify-between">
                  <div className="text-sm text-gray-700">
                    Mostrando pedidos da página {paginacao.currentPage} de {paginacao.totalPages}
                  </div>
                  <div className="flex space-x-2">
                    <button
                      onClick={() => handlePageChange(currentPage - 1)}
                      disabled={!paginacao.hasPrevPage}
                      className="px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Anterior
                    </button>
                    <button
                      onClick={() => handlePageChange(currentPage + 1)}
                      disabled={!paginacao.hasNextPage}
                      className="px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Próximo
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
};

export default MeusPedidos;
