"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { toast } from "react-hot-toast";
import { Models } from "appwrite";
import {
  CheckCircleIcon,
  DocumentTextIcon,
  HomeIcon,
  CreditCardIcon,
  CalendarIcon,
  ClockIcon,
} from "@heroicons/react/24/outline";

import { getCurrentUserWithRetry } from "@/lib/auth";
import Header from "@/components/Header";
import { useCarrinho } from "@/contexts/CarrinhoContext";
import { pedidoService } from "@/services/pedidoService";

const SucessoContent = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const carrinho = useCarrinho();

  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(
    null
  );
  const [loading, setLoading] = useState(true);
  const [pedidoInfo, setPedidoInfo] = useState<any>(null);
  const [loadingPedido, setLoadingPedido] = useState(false);

  const pedidoId = searchParams.get("pedido");
  const paymentId = searchParams.get("payment_id");
  const status = searchParams.get("status");
  const collectionId = searchParams.get("collection_id");
  const collectionStatus = searchParams.get("collection_status");
  const preference = searchParams.get("preference_id");

  // Função para buscar informações do pedido
  const buscarPedido = async (id: string) => {
    setLoadingPedido(true);
    try {
      const response = await pedidoService.obterPedido(id);
      if (response.success && response.data) {
        setPedidoInfo(response.data);
        console.log("📋 Informações do pedido carregadas:", response.data);
      } else {
        console.error("❌ Erro ao buscar pedido:", response.error);
      }
    } catch (error) {
      console.error("❌ Erro ao buscar informações do pedido:", error);
    } finally {
      setLoadingPedido(false);
    }
  };

  useEffect(() => {
    const initializeUser = async () => {
      try {
        const currentUser = await getCurrentUserWithRetry();
        if (!currentUser) {
          router.push("/");
          return;
        }
        setUser(currentUser);

        // Buscar informações do pedido se disponível
        if (pedidoId) {
          await buscarPedido(pedidoId);
        }

        // Limpar carrinho após pagamento bem-sucedido (sem restaurar estoque pois a compra foi confirmada)
        await carrinho.limparCarrinho(false);

        // Limpar dados do checkout do localStorage
        localStorage.removeItem("dadosCheckout");

        toast.success("Pagamento realizado com sucesso! 🎉");
      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        router.push("/");
      } finally {
        setLoading(false);
      }
    };

    initializeUser();
  }, [router, carrinho]);

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 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="Pagamento Aprovado"
        subtitle="Sua compra foi finalizada com sucesso"
      />

      <main className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
          {/* Ícone de Sucesso */}
          <div className="w-24 h-24 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center">
            <CheckCircleIcon className="w-12 h-12 text-green-600" />
          </div>

          {/* Título */}
          <h1 className="text-3xl font-bold text-gray-900 mb-4">
            Pagamento Aprovado!
          </h1>

          {/* Descrição */}
          <p className="text-lg text-gray-600 mb-6">
            Sua compra foi processada com sucesso. Você receberá um e-mail de
            confirmação em breve.
          </p>

          {/* Informações do Pedido */}
          <div className="bg-gray-50 rounded-lg p-4 mb-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              {pedidoId && (
                <div>
                  <span className="text-gray-600">Número do pedido:</span>
                  <div className="font-medium">#{pedidoId.slice(-8)}</div>
                </div>
              )}
              {paymentId && (
                <div>
                  <span className="text-gray-600">ID do pagamento:</span>
                  <div className="font-medium">#{paymentId}</div>
                </div>
              )}
              <div>
                <span className="text-gray-600">Status:</span>
                <div className="font-medium text-green-600">Aprovado</div>
              </div>
              <div>
                <span className="text-gray-600">Data:</span>
                <div className="font-medium text-black">
                  {new Date().toLocaleDateString("pt-BR")}
                </div>
              </div>
            </div>
          </div>

          {/* Próximos Passos */}
          <div className="text-left mb-8">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">
              Próximos passos:
            </h3>
            <ul className="space-y-2 text-gray-600">
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                Você receberá um e-mail de confirmação com os detalhes do pedido
              </li>
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                O vendedor será notificado sobre sua compra
              </li>
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                Você pode acompanhar o status do pedido na seção "Meus Pedidos"
              </li>
            </ul>
          </div>

          {/* Botões de Ação */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={() => router.push("/meus-pedidos")}
              className="flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <DocumentTextIcon className="w-5 h-5 mr-2" />
              Ver Meus Pedidos
            </button>

            <button
              onClick={() => router.push("/produtos")}
              className="flex items-center justify-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              <HomeIcon className="w-5 h-5 mr-2" />
              Continuar Comprando
            </button>
          </div>
        </div>
      </main>
    </div>
  );
};

const SucessoPagamento = () => {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Carregando...</p>
          </div>
        </div>
      }
    >
      <SucessoContent />
    </Suspense>
  );
};

export default SucessoPagamento;
