"use client";

import { useEffect, useState } from "react";
import { pedidoService, PedidoData } from "@/services/pedidoService";
import Header from "@/components/Header";
import {
  MagnifyingGlassIcon,
  ArrowPathIcon,
  FunnelIcon,
  EyeIcon,
  PencilIcon,
  TrashIcon,
  ClipboardDocumentListIcon,
  CheckCircleIcon,
  ClockIcon,
  TruckIcon,
  XCircleIcon,
  ExclamationTriangleIcon
} from '@heroicons/react/24/outline';

// Tipos para melhor estruturação conforme API BFF
interface PedidoExtendido {
  id: string;
  status: 'pendente' | 'aprovado' | 'entregue' | 'cancelado';
  'valor-total': number;
  itens: string[];
  quantidade: number[];
  pagamentos?: string;
  carrinhos?: string;
  usuarios: string;
  faturas?: string;
  createdAt: string;
  updatedAt: string;
  itensDetalhados?: string[]; // Nomes dos produtos carregados dinamicamente
  clienteNome?: string; // Nome do cliente carregado dinamicamente
}

const statusOptions = [
  { value: 'pendente', label: 'Pendente', color: 'bg-yellow-100 text-yellow-800', icon: ClockIcon },
  { value: 'aprovado', label: 'Aprovado', color: 'bg-blue-100 text-blue-800', icon: CheckCircleIcon },
  { value: 'entregue', label: 'Entregue', color: 'bg-green-100 text-green-800', icon: CheckCircleIcon },
  { value: 'cancelado', label: 'Cancelado', color: 'bg-red-100 text-red-800', icon: XCircleIcon },
];

// Função para calcular total de itens
const calcularTotalItens = (quantidade: number[]): number => {
  if (!Array.isArray(quantidade) || quantidade.length === 0) return 0;
  return quantidade.reduce((total, qtd) => total + (qtd || 0), 0);
};

// Função para obter informações do status
const getStatusInfo = (status: string) => {
  return statusOptions.find(opt => opt.value === status) || statusOptions[0];
};

// Função para formatar data
const formatarData = (data: string): string => {
  if (!data) return 'N/A';
  try {
    return new Date(data).toLocaleDateString('pt-BR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch {
    return 'Data inválida';
  }
};


export default function GestaoPedidosPage() {
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [pedidos, setPedidos] = useState<PedidoExtendido[]>([]);
  const [pedidosFiltrados, setPedidosFiltrados] = useState<PedidoExtendido[]>([]);
  const [loadingPedidos, setLoadingPedidos] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  // Estados para filtros e busca
  const [search, setSearch] = useState("");
  const [statusFiltro, setStatusFiltro] = useState("");
  const [dataInicio, setDataInicio] = useState("");
  const [dataFim, setDataFim] = useState("");

  // Estados para modal e edição
  const [pedidoSelecionado, setPedidoSelecionado] = useState<PedidoExtendido | null>(null);
  const [modalDetalhes, setModalDetalhes] = useState(false);
  const [modalEditarStatus, setModalEditarStatus] = useState(false);
  const [novoStatus, setNovoStatus] = useState("");

  // Paginação
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPedidos, setTotalPedidos] = useState(0);
  const pageSize = 10;

  // Verificar autenticação
  useEffect(() => {
    const checkAuth = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');

        if (!storedToken) {
          window.location.href = "/login";
          return;
        }

        // Validar token no BFF
        const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${storedToken}`,
            'Content-Type': 'application/json'
          }
        });

        if (!response.ok) {
          localStorage.removeItem('access_token');
          window.location.href = "/login";
          return;
        }

        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        localStorage.removeItem('access_token');
        window.location.href = "/login";
      } finally {
        setLoading(false);
      }
    };
    checkAuth();
  }, []);

  useEffect(() => {
    if (!loading && user) {
      buscarPedidos();
    }
  }, [currentPage, loading, user]);

  // Efeito separado para reagir a mudanças nos filtros
  useEffect(() => {
    if (!loading && user) {
      // Debounce para evitar muitas chamadas
      const timeoutId = setTimeout(() => {
        // Reset página para 1 quando filtros mudarem
        if (currentPage !== 1) {
          setCurrentPage(1);
        } else {
          buscarPedidos();
        }
      }, 300);

      return () => clearTimeout(timeoutId);
    }
  }, [search, statusFiltro, dataInicio, dataFim]);

  useEffect(() => {
    aplicarFiltros();
  }, [pedidos]);

  const aplicarFiltros = () => {
    // Os filtros agora são aplicados no backend via URL params
    // Apenas definir os pedidos filtrados como os pedidos carregados
    setPedidosFiltrados(pedidos || []);
  };

  async function buscarPedidos() {
    setLoadingPedidos(true);
    setError(null);

    try {
      const token = localStorage.getItem('access_token');
      if (!token) {
        throw new Error('Token de autenticação não encontrado');
      }


      // Construir URL com filtro baseado no nível do usuário
      let url = `${process.env.NEXT_PUBLIC_BFF_API_URL}/pedidos?page=${currentPage}&limit=${pageSize}`;

      // Se o usuário não for superadmin, filtrar pelos pedidos dele
      if (user && user.superadmin === false) {
        url += `&usuario_id=${user.id}`;
      }

      // Adicionar filtros se estiverem ativos
      if (search.trim()) {
        url += `&search=${encodeURIComponent(search.trim())}`;
      }
      if (statusFiltro) {
        url += `&status=${encodeURIComponent(statusFiltro)}`;
      }
      if (dataInicio) {
        url += `&data_inicio=${encodeURIComponent(dataInicio)}`;
      }
      if (dataFim) {
        url += `&data_fim=${encodeURIComponent(dataFim)}`;
      }

      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'accept': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
      });

      if (!response.ok) {
        throw new Error(`Erro ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();

      // Processar os dados conforme a estrutura da API
      const pedidosProcessados = data.items || [];

      // Buscar detalhes dos produtos e cliente para cada pedido
      const pedidosComDetalhes = await Promise.all(
        pedidosProcessados.map(async (pedido: any) => {
          // Buscar dados do cliente
          let clienteNome = pedido.usuarios; // Fallback para o ID
          if (pedido.usuarios) {
            try {
              const clienteResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/usuarios/${pedido.usuarios}`, {
                headers: {
                  'accept': 'application/json',
                  'Authorization': `Bearer ${token}`,
                },
              });

              if (clienteResponse.ok) {
                const cliente = await clienteResponse.json();
                clienteNome = cliente.nome || cliente.name || cliente.email || pedido.usuarios;
              }
            } catch (error) {
              console.warn(`Erro ao buscar cliente ${pedido.usuarios}:`, error);
            }
          }

          // Buscar detalhes dos produtos para cada item
          const itensDetalhados = await Promise.all(
            (pedido.itens || []).map(async (itemId: string) => {
              try {
                const produtoResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-venda/${itemId}`, {
                  headers: {
                    'accept': 'application/json',
                    'Authorization': `Bearer ${token}`,
                  },
                });

                if (produtoResponse.ok) {
                  const produto = await produtoResponse.json();
                  return produto.nome || itemId;
                }
                return itemId; // Fallback para o ID se não conseguir buscar
              } catch (error) {
                console.warn(`Erro ao buscar produto ${itemId}:`, error);
                return itemId;
              }
            })
          );

          return {
            ...pedido,
            itensDetalhados, // Adicionar nomes dos produtos
            clienteNome, // Adicionar nome do cliente
          };
        })
      );

      setPedidos(pedidosComDetalhes);
      setTotalPedidos(data.total || pedidosComDetalhes.length);

    } catch (err: any) {
      const errorMessage = err.message || "Erro de conexão ao buscar pedidos";
      setError(errorMessage);
      console.error("Erro ao buscar pedidos:", err);
    } finally {
      setLoadingPedidos(false);
    }
  }

  const handleBuscar = () => {
    if (!user) {
      console.warn("Aguardando dados do usuário...");
      return;
    }
    setCurrentPage(1);
    buscarPedidos();
  };

  const limparFiltros = () => {
    if (!user) {
      console.warn("Aguardando dados do usuário...");
      return;
    }
    setSearch("");
    setStatusFiltro("");
    setDataInicio("");
    setDataFim("");
    setCurrentPage(1);
    buscarPedidos();
  };

  const abrirDetalhes = (pedido: PedidoExtendido) => {
    setPedidoSelecionado(pedido);
    setModalDetalhes(true);
  };

  const abrirEditarStatus = (pedido: PedidoExtendido) => {
    setPedidoSelecionado(pedido);
    setNovoStatus(pedido.status);
    setModalEditarStatus(true);
  };

  const atualizarStatus = async () => {
    if (!pedidoSelecionado || !novoStatus) return;

    try {
      const token = localStorage.getItem('access_token');
      if (!token) {
        throw new Error('Token de autenticação não encontrado');
      }


      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/pedidos/${pedidoSelecionado.id}`, {
        method: 'PATCH',
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify({
          status: novoStatus
        }),
      });

      if (!response.ok) {
        throw new Error(`Erro ${response.status}: ${response.statusText}`);
      }

      // Atualizar lista local
      const pedidosAtualizados = pedidos.map(pedido =>
        pedido.id === pedidoSelecionado.id
          ? { ...pedido, status: novoStatus as any, updatedAt: new Date().toISOString() }
          : pedido
      );

      setPedidos(pedidosAtualizados);
      setSuccess(`Status do pedido ${pedidoSelecionado.id} atualizado para "${novoStatus}"`);
      setModalEditarStatus(false);
      setPedidoSelecionado(null);

      // Limpar mensagem de sucesso após 3 segundos
      setTimeout(() => setSuccess(null), 3000);

    } catch (err: any) {
      const errorMessage = err.message || "Erro de conexão ao atualizar status";
      setError(errorMessage);
      console.error("Erro ao atualizar status:", err);
    }
  };

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

  const calcularTotalItens = (qtdade: number[]) => {
    return qtdade.reduce((total, qty) => total + qty, 0);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header
        user={user}
        title="Gestão de Pedidos"
        subtitle="Gerencie todos os pedidos da plataforma"
      />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* Cabeçalho com estatísticas */}
        <div className="mb-8">
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
              <div>
                <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                  <ClipboardDocumentListIcon className="w-8 h-8 text-blue-600" />
                  Gestão de Pedidos
                </h1>
                <p className="text-gray-600 mt-1">
                  Total de {totalPedidos} pedidos • Página {currentPage} de {Math.max(1, Math.ceil(totalPedidos / pageSize))}
                  {user && user.superadmin === false && (
                    <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                      Seus pedidos
                    </span>
                  )}
                  {user && user.superadmin === true && (
                    <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                      Todos os pedidos
                    </span>
                  )}
                </p>
              </div>
              <div className="flex gap-2">
                <button
                  onClick={handleBuscar}
                  disabled={loadingPedidos}
                  className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center gap-2 text-sm disabled:opacity-50"
                >
                  <ArrowPathIcon className="w-4 h-4" />
                  {loadingPedidos ? 'Carregando...' : 'Atualizar'}
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Mensagens de sucesso/erro */}
        {success && (
          <div className="mb-6 bg-green-50 border border-green-200 text-green-700 p-4 rounded-lg flex items-center gap-2">
            <CheckCircleIcon className="w-5 h-5" />
            {success}
          </div>
        )}

        {error && (
          <div className="mb-6 bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg flex items-center gap-2">
            <ExclamationTriangleIcon className="w-5 h-5" />
            {error}
          </div>
        )}

        {/* Filtros Avançados */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
          <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <FunnelIcon className="w-5 h-5 text-blue-600" />
            Filtros e Busca
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Buscar Pedidos
              </label>
              <input
                type="text"
                placeholder="ID, cliente, item, vendedor..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Status
              </label>
              <select
                value={statusFiltro}
                onChange={(e) => setStatusFiltro(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option value="">Todos os status</option>
                {statusOptions.map(status => (
                  <option key={status.value} value={status.value}>
                    {status.label}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Data Início
              </label>
              <input
                type="date"
                value={dataInicio}
                onChange={(e) => setDataInicio(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Data Fim
              </label>
              <input
                type="date"
                value={dataFim}
                onChange={(e) => setDataFim(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div className="flex items-end gap-2">
              <button
                onClick={handleBuscar}
                disabled={loadingPedidos}
                className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 flex items-center justify-center gap-2"
              >
                <MagnifyingGlassIcon className="w-4 h-4" />
                Buscar
              </button>
              <button
                onClick={limparFiltros}
                className="bg-gray-600 text-white px-3 py-2 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                title="Limpar Filtros"
              >
                <XCircleIcon className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
        {/* Tabela de Pedidos */}
        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h3 className="text-lg font-semibold text-gray-900">Lista de Pedidos</h3>
          </div>

          <div className="overflow-x-auto">
            {loadingPedidos ? (
              <div className="flex items-center justify-center py-12">
                <div className="text-center">
                  <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                  <p className="text-gray-600">Carregando pedidos...</p>
                </div>
              </div>
            ) : pedidosFiltrados.length === 0 ? (
              <div className="flex items-center justify-center py-12">
                <div className="text-center">
                  <ClipboardDocumentListIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600">Nenhum pedido encontrado</p>
                  <p className="text-sm text-gray-500">Tente ajustar os filtros de busca</p>
                </div>
              </div>
            ) : (
              <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">
                      ID do Pedido
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Cliente
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Valor Total
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Itens
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Data
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Ações
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {pedidosFiltrados.filter(pedido => pedido && pedido.id).map((pedido) => {
                    const statusInfo = getStatusInfo(pedido.status || 'pendente');
                    const StatusIcon = statusInfo.icon;

                    return (
                      <tr key={pedido.id} className="hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                          #{pedido.id?.slice(-8) || 'N/A'}
                        </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 gap-1 ${statusInfo.color}`}>
                            <StatusIcon className="w-3 h-3" />
                            {statusInfo.label}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                          <div className="flex flex-col">
                            <span className="font-medium">{pedido.clienteNome || 'Cliente não encontrado'}</span>
                            <span className="text-xs text-gray-500">ID: {pedido.usuarios}</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                          {pedido['valor-total']?.toLocaleString('pt-BR', {
                            style: 'currency',
                            currency: 'BRL'
                          }) || 'R$ 0,00'}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                          {calcularTotalItens(pedido.quantidade || [])} itens
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                          {pedido.createdAt ? formatarData(pedido.createdAt) : 'N/A'}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <div className="flex gap-2">
                            <button
                              onClick={() => abrirDetalhes(pedido)}
                              className="text-blue-600 hover:text-blue-900 p-1 hover:bg-blue-50 rounded"
                              title="Ver detalhes"
                            >
                              <EyeIcon className="w-4 h-4" />
                            </button>
                            <button
                              onClick={() => abrirEditarStatus(pedido)}
                              className="text-green-600 hover:text-green-900 p-1 hover:bg-green-50 rounded"
                              title="Editar status"
                            >
                              <PencilIcon className="w-4 h-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>

          {/* Paginação */}
          {pedidosFiltrados.length > 0 && (
            <div className="bg-white px-6 py-4 border-t border-gray-200 flex items-center justify-between">
              <div className="text-sm text-gray-700">
                Mostrando <span className="font-medium">{((currentPage - 1) * pageSize) + 1}</span> a{' '}
                <span className="font-medium">{Math.min(currentPage * pageSize, totalPedidos)}</span> de{' '}
                <span className="font-medium">{totalPedidos}</span> pedidos
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                  disabled={currentPage <= 1}
                  className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Anterior
                </button>
                <span className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-blue-600 text-white">
                  {currentPage}
                </span>
                <button
                  onClick={() => setCurrentPage(currentPage + 1)}
                  disabled={currentPage * pageSize >= totalPedidos}
                  className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Próxima
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Modal de Detalhes do Pedido */}
        {modalDetalhes && pedidoSelecionado && (
          <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
            <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
              <div className="mt-3">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-semibold text-gray-900">
                    Detalhes do Pedido #{pedidoSelecionado.id.slice(-8)}
                  </h3>
                  <button
                    onClick={() => setModalDetalhes(false)}
                    className="text-gray-400 hover:text-gray-600"
                  >
                    <XCircleIcon className="w-6 h-6" />
                  </button>
                </div>

                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Status</label>
                      <div className="mt-1">
                        {(() => {
                          const statusInfo = getStatusInfo(pedidoSelecionado.status);
                          const StatusIcon = statusInfo.icon;
                          return (
                            <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium gap-1 ${statusInfo.color}`}>
                              <StatusIcon className="w-3 h-3" />
                              {statusInfo.label}
                            </span>
                          );
                        })()}
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Valor Total</label>
                      <p className="mt-1 text-lg font-semibold text-gray-900">
                        {pedidoSelecionado['valor-total']?.toLocaleString('pt-BR', {
                          style: 'currency',
                          currency: 'BRL'
                        }) || 'R$ 0,00'}
                      </p>
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700">Cliente</label>
                    <div className="mt-1">
                      <p className="text-gray-900 font-medium">{pedidoSelecionado.clienteNome || 'Cliente não encontrado'}</p>
                      <p className="text-sm text-gray-500">ID: {pedidoSelecionado.usuarios}</p>
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700">Itens do Pedido</label>
                    <div className="mt-1 border border-gray-300 rounded-md p-3">
                      {pedidoSelecionado.itensDetalhados && pedidoSelecionado.itensDetalhados.length > 0 ?
                        pedidoSelecionado.itensDetalhados.map((item, index) => (
                          <div key={index} className="flex justify-between items-center py-1">
                            <span className="text-gray-900">{item}</span>
                            <span className="text-gray-600">
                              Qtd: {pedidoSelecionado.quantidade?.[index] || 1}
                            </span>
                          </div>
                        )) :
                        pedidoSelecionado.itens?.map((itemId, index) => (
                          <div key={index} className="flex justify-between items-center py-1">
                            <span className="text-gray-900">ID: {itemId}</span>
                            <span className="text-gray-600">
                              Qtd: {pedidoSelecionado.quantidade?.[index] || 1}
                            </span>
                          </div>
                        )) || <p className="text-gray-500">Nenhum item encontrado</p>
                      }
                    </div>
                  </div>

                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Carrinho</label>
                      <p className="mt-1 text-gray-900">
                        {pedidoSelecionado.carrinhos || 'Não informado'}
                      </p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Pagamento</label>
                      <p className="mt-1 text-gray-900">
                        {pedidoSelecionado.pagamentos || 'Não informado'}
                      </p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Fatura</label>
                      <p className="mt-1 text-gray-900">
                        {pedidoSelecionado.faturas || 'Não informado'}
                      </p>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Data de Criação</label>
                      <p className="mt-1 text-gray-900">{formatarData(pedidoSelecionado.createdAt)}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Última Atualização</label>
                      <p className="mt-1 text-gray-900">{formatarData(pedidoSelecionado.updatedAt)}</p>
                    </div>
                  </div>
                </div>

                <div className="mt-6 flex justify-end gap-3">
                  <button
                    onClick={() => setModalDetalhes(false)}
                    className="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700"
                  >
                    Fechar
                  </button>
                  <button
                    onClick={() => {
                      setModalDetalhes(false);
                      abrirEditarStatus(pedidoSelecionado);
                    }}
                    className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
                  >
                    Editar Status
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Modal de Edição de Status */}
        {modalEditarStatus && pedidoSelecionado && (
          <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
            <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
              <div className="mt-3">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-semibold text-gray-900">
                    Editar Status do Pedido
                  </h3>
                  <button
                    onClick={() => setModalEditarStatus(false)}
                    className="text-gray-400 hover:text-gray-600"
                  >
                    <XCircleIcon className="w-6 h-6" />
                  </button>
                </div>

                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Pedido</label>
                    <p className="mt-1 text-gray-900">#{pedidoSelecionado.id.slice(-8)} - {pedidoSelecionado.clienteNome || pedidoSelecionado.usuarios}</p>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Novo Status
                    </label>
                    <div className="space-y-2">
                      {statusOptions.map((status) => {
                        const StatusIcon = status.icon;
                        return (
                          <div key={status.value} className="flex items-center">
                            <input
                              id={status.value}
                              name="status"
                              type="radio"
                              value={status.value}
                              checked={novoStatus === status.value}
                              onChange={(e) => setNovoStatus(e.target.value)}
                              className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                            />
                            <label htmlFor={status.value} className="ml-3 block text-sm font-medium text-gray-700">
                              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium gap-1 ${status.color}`}>
                                <StatusIcon className="w-3 h-3" />
                                {status.label}
                              </span>
                            </label>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>

                <div className="mt-6 flex justify-end gap-3">
                  <button
                    onClick={() => setModalEditarStatus(false)}
                    className="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700"
                  >
                    Cancelar
                  </button>
                  <button
                    onClick={atualizarStatus}
                    disabled={!novoStatus || novoStatus === pedidoSelecionado.status}
                    className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Atualizar Status
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}
