"use client";

import { useRouter } from "next/navigation";
import Image from "next/image";
import {
  ShoppingCart,
  Trash2,
  Plus,
  Minus,
  ArrowRight,
  ShoppingBag,
} from "lucide-react";
import { useCarrinho } from "@/lib/carrinho-store";
import { cn, formatarMoeda } from "@/lib/utils";

export default function CarrinhoPage() {
  const { itens, alterarQuantidade, removerItem, total } = useCarrinho();
  const router = useRouter();

  if (itens.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60dvh] text-gray-400 text-center">
        <ShoppingCart size={56} className="mb-4 opacity-30" />
        <p className="text-lg font-semibold">Carrinho vazio</p>
        <p className="text-sm mt-1">
          Adicione fardamentos na loja para continuar.
        </p>
        <button
          onClick={() => router.push("/loja")}
          className="mt-6 bg-primary-800 text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2"
        >
          <ShoppingBag size={18} /> Ver loja
        </button>
      </div>
    );
  }

  // Agrupa itens 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>
      <h1 className="text-xl font-bold text-gray-900 mb-4">Meu carrinho</h1>

      <div className="space-y-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-start"
                >
                  {/* Imagem */}
                  <div className="relative w-16 h-16 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={24} />
                      </div>
                    )}
                  </div>

                  {/* Info */}
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-gray-900 text-sm leading-tight">
                      {item.fardamentoNome}
                    </p>
                    <p className="text-xs text-gray-500 mt-0.5">
                      Tam: {item.tamanho}
                    </p>
                    <p className="text-primary-700 font-bold text-sm mt-1">
                      {formatarMoeda(item.preco * item.quantidade)}
                    </p>
                  </div>

                  {/* Quantidade e remover */}
                  <div className="flex flex-col items-end gap-2">
                    <button
                      onClick={() =>
                        removerItem(item.fardamentoTamanhoId, item.alunoId)
                      }
                      className="text-red-400 hover:text-red-600 p-1"
                    >
                      <Trash2 size={15} />
                    </button>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() =>
                          alterarQuantidade(
                            item.fardamentoTamanhoId,
                            item.alunoId,
                            item.quantidade - 1
                          )
                        }
                        className="w-7 h-7 rounded-lg border border-gray-200 flex items-center justify-center active:bg-gray-100"
                      >
                        <Minus size={12} />
                      </button>
                      <span className="text-sm font-bold w-4 text-center">
                        {item.quantidade}
                      </span>
                      <button
                        onClick={() =>
                          alterarQuantidade(
                            item.fardamentoTamanhoId,
                            item.alunoId,
                            item.quantidade + 1
                          )
                        }
                        className="w-7 h-7 rounded-lg border border-gray-200 flex items-center justify-center active:bg-gray-100"
                      >
                        <Plus size={12} />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Resumo */}
      <div className="card mt-4">
        <div className="flex items-center justify-between">
          <span className="text-gray-600">Subtotal</span>
          <span className="font-bold text-gray-900 text-lg">
            {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>

      {/* Botão finalizar */}
      <button
        onClick={() => router.push("/loja/pedido")}
        className="btn-primary mt-4 flex items-center justify-center gap-2"
      >
        Finalizar pedido
        <ArrowRight size={18} />
      </button>
    </div>
  );
}