"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Image from "next/image";
import {
  ShoppingBag,
  CreditCard,
  QrCode,
  Loader2,
  ArrowLeft,
  Lock,
} from "lucide-react";
import { useCarrinho } from "@/lib/carrinho-store";
import { formatarMoeda } from "@/lib/utils";

export default function ResumoPage() {
  const { data: session } = useSession();
  const { itens, total, limpar } = useCarrinho();
  const router = useRouter();
  const [finalizando, setFinalizando] = useState(false);
  const [erro, setErro] = useState("");

  const unidadeId = (session?.user as any)?.unidadeId;

  if (itens.length === 0) {
    router.replace("/loja");
    return null;
  }

  async function handleFinalizar() {
    setErro("");
    setFinalizando(true);

    try {
      // 1. Cria o pedido
      const resPedido = await fetch("/api/pedidos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          itens: itens.map((i) => ({
            fardamentoTamanhoId: i.fardamentoTamanhoId,
            alunoId: i.alunoId,
            quantidade: i.quantidade,
          })),
          unidadeId,
        }),
      });

      if (!resPedido.ok) {
        const err = await resPedido.json();
        throw new Error(err.error || "Erro ao criar pedido");
      }

      const { pedidoId } = await resPedido.json();

      // 2. Cria preferência de pagamento no MP
      const resPagto = await fetch("/api/pagamentos/criar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ pedidoId }),
      });

      if (!resPagto.ok) throw new Error("Erro ao iniciar pagamento");

      const { initPoint } = await resPagto.json();

      // 3. Limpa carrinho e redireciona para o checkout MP
      limpar();
      window.location.href = initPoint;
    } catch (e: any) {
      setErro(e.message ?? "Erro inesperado");
      setFinalizando(false);
    }
  }

  // Agrupa por aluno
  const porAluno = itens.reduce<Record<string, typeof itens>>((acc, item) => {
    if (!acc[item.alunoId]) acc[item.alunoId] = [];
    acc[item.alunoId].push(item);
    return acc;
  }, {});

  return (
    <div>
      <button
        onClick={() => router.back()}
        className="flex items-center gap-2 text-gray-500 mb-4 -ml-1"
      >
        <ArrowLeft size={18} /> Voltar
      </button>

      <h1 className="text-xl font-bold text-gray-900 mb-4">Confirmar pedido</h1>

      {/* Itens por aluno */}
      <div className="space-y-4 mb-4">
        {Object.entries(porAluno).map(([alunoId, alunoItens]) => (
          <div key={alunoId} className="card">
            <p className="text-xs font-bold text-primary-700 uppercase tracking-wide mb-3">
              {alunoItens[0].alunoNome}
            </p>
            <div className="space-y-3">
              {alunoItens.map((item) => (
                <div
                  key={`${item.fardamentoTamanhoId}-${item.alunoId}`}
                  className="flex gap-3 items-center"
                >
                  <div className="relative w-12 h-12 flex-shrink-0 rounded-xl overflow-hidden bg-gray-100">
                    {item.imagem ? (
                      <Image
                        src={item.imagem}
                        alt={item.fardamentoNome}
                        fill
                        className="object-cover"
                      />
                    ) : (
                      <div className="flex items-center justify-center h-full text-gray-300">
                        <ShoppingBag size={20} />
                      </div>
                    )}
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-semibold text-gray-900">
                      {item.fardamentoNome}
                    </p>
                    <p className="text-xs text-gray-400">
                      Tam. {item.tamanho} · Qtd: {item.quantidade}
                    </p>
                  </div>
                  <p className="text-sm font-bold text-gray-900">
                    {formatarMoeda(item.preco * item.quantidade)}
                  </p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Resumo financeiro */}
      <div className="card mb-4">
        <div className="flex items-center justify-between text-lg font-bold">
          <span>Total</span>
          <span className="text-primary-800">{formatarMoeda(total())}</span>
        </div>
        <p className="text-xs text-gray-400 mt-1">
          {itens.reduce((acc, i) => acc + i.quantidade, 0)} item(s)
        </p>
      </div>

      {/* Métodos de pagamento aceitos */}
      <div className="card mb-5">
        <p className="text-sm font-semibold text-gray-700 mb-2">
          Formas de pagamento aceitas
        </p>
        <div className="flex gap-3 text-gray-500">
          <div className="flex items-center gap-1.5 text-sm">
            <QrCode size={16} className="text-green-600" />
            <span>PIX</span>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <CreditCard size={16} className="text-blue-600" />
            <span>Cartão de Crédito</span>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <CreditCard size={16} className="text-purple-600" />
            <span>Débito</span>
          </div>
        </div>
        <p className="text-xs text-gray-400 mt-2 flex items-center gap-1">
          <Lock size={11} /> Pagamento seguro via Mercado Pago
        </p>
      </div>

      {erro && (
        <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl p-3 mb-4">
          {erro}
        </div>
      )}

      <button
        onClick={handleFinalizar}
        disabled={finalizando}
        className="btn-primary flex items-center justify-center gap-2"
      >
        {finalizando ? (
          <>
            <Loader2 size={18} className="animate-spin" /> Aguarde...
          </>
        ) : (
          <>
            <Lock size={18} /> Ir para pagamento
          </>
        )}
      </button>
    </div>
  );
}