"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,
  ShoppingBagIcon,
  ArrowRightIcon,
} 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, pedidoId]);

  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-green-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-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden">
          {/* Header de Sucesso */}
          <div className="bg-gradient-to-r from-green-500 to-green-600 px-8 py-12 text-center text-white">
            <div className="w-20 h-20 mx-auto mb-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
              <CheckCircleIcon className="w-10 h-10" />
            </div>
            <h1 className="text-4xl font-bold mb-4">Pagamento Aprovado!</h1>
            <p className="text-green-100 text-lg">
              Sua compra foi processada com sucesso. Obrigado por escolher a
              SaveInMed!
            </p>
          </div>

          <div className="p-8">
            {/* Informações do Pagamento */}
            <div className="mb-8">
              <h2 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                <CreditCardIcon className="w-6 h-6 text-blue-600" />
                Detalhes do Pagamento
              </h2>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {paymentId && (
                  <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div className="text-sm text-gray-600 mb-1">
                      ID do Pagamento
                    </div>
                    <div className="font-mono text-gray-900 font-medium">
                      {paymentId}
                    </div>
                  </div>
                )}

                {pedidoId && (
                  <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div className="text-sm text-gray-600 mb-1">
                      Número do Pedido
                    </div>
                    <div className="font-mono text-gray-900 font-medium">
                      #{pedidoId.slice(-8).toUpperCase()}
                    </div>
                  </div>
                )}

                <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                  <div className="text-sm text-gray-600 mb-1">Status</div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-green-600 font-semibold">
                      Aprovado
                    </span>
                  </div>
                </div>

                <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                  <div className="text-sm text-gray-600 mb-1">Data/Hora</div>
                  <div className="text-gray-900 font-medium flex items-center gap-1">
                    <ClockIcon className="w-4 h-4" />
                    {new Date().toLocaleString("pt-BR")}
                  </div>
                </div>
              </div>
            </div>

            {/* Informações do Pedido */}
            {loadingPedido ? (
              <div className="bg-blue-50 rounded-lg p-8 mb-8 text-center">
                <div className="flex items-center justify-center gap-3">
                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                  <span className="text-blue-700">
                    Carregando informações do pedido...
                  </span>
                </div>
              </div>
            ) : pedidoInfo ? (
              <div className="mb-8">
                <h2 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                  <ShoppingBagIcon className="w-6 h-6 text-purple-600" />
                  Resumo do Pedido
                </h2>

                <div className="bg-purple-50 rounded-lg p-6 border border-purple-200">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="text-center">
                      <div className="text-3xl font-bold text-purple-600 mb-2">
                        {new Intl.NumberFormat("pt-BR", {
                          style: "currency",
                          currency: "BRL",
                        }).format(pedidoInfo["valor-total"] || 0)}
                      </div>
                      <div className="text-sm text-gray-600">Valor Total</div>
                    </div>

                    <div className="text-center">
                      <div className="text-3xl font-bold text-purple-600 mb-2">
                        {pedidoInfo.qtdade
                          ? pedidoInfo.qtdade.reduce(
                              (total: number, qty: number) => total + qty,
                              0
                            )
                          : 0}
                      </div>
                      <div className="text-sm text-gray-600">Itens</div>
                    </div>

                    <div className="text-center">
                      <div className="text-lg font-semibold text-gray-700 mb-2 capitalize">
                        {pedidoInfo.status || "Processando"}
                      </div>
                      <div className="text-sm text-gray-600">
                        Status do Pedido
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ) : null}

            {/* Próximos Passos */}
            <div className="mb-8">
              <h2 className="text-xl font-semibold text-gray-900 mb-6">
                Próximos Passos
              </h2>

              <div className="space-y-4">
                <div className="flex items-start gap-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                  <div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                    1
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900 mb-1">
                      Confirmação por E-mail
                    </h3>
                    <p className="text-gray-600 text-sm">
                      Você receberá um e-mail de confirmação com todos os
                      detalhes da sua compra.
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-4 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                  <div className="flex-shrink-0 w-8 h-8 bg-yellow-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                    2
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900 mb-1">
                      Processamento do Pedido
                    </h3>
                    <p className="text-gray-600 text-sm">
                      Seu pedido será processado e você receberá atualizações
                      sobre o status.
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-4 p-4 bg-green-50 rounded-lg border border-green-200">
                  <div className="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                    3
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900 mb-1">
                      Acompanhe seu Pedido
                    </h3>
                    <p className="text-gray-600 text-sm">
                      Você pode acompanhar o status do seu pedido na seção "Meus
                      Pedidos".
                    </p>
                  </div>
                </div>
              </div>
            </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="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors gap-2"
              >
                <DocumentTextIcon className="w-5 h-5" />
                Ver Meus Pedidos
                <ArrowRightIcon className="w-4 h-4" />
              </button>

              <button
                onClick={() => router.push("/dashboard")}
                className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors gap-2"
              >
                <HomeIcon className="w-5 h-5" />
                Voltar ao Dashboard
              </button>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

const Sucesso = () => {
  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-green-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Carregando...</p>
          </div>
        </div>
      }
    >
      <SucessoContent />
    </Suspense>
  );
};

export default Sucesso;
