"use client";

import { ClipboardList, ChevronDown, ChevronUp } from "lucide-react";
import { useState } from "react";
import { cn, formatarData, formatarMoeda, STATUS_PEDIDO_COR, STATUS_PEDIDO_LABEL } from "@/lib/utils";

export function PedidosCliente({ pedidos }: { pedidos: any[] }) {
  const [expandido, setExpandido] = useState<string | null>(
    pedidos[0]?.id ?? null
  );

  if (pedidos.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60dvh] text-gray-400 text-center">
        <ClipboardList size={56} className="mb-4 opacity-30" />
        <p className="text-lg font-semibold">Nenhum pedido ainda</p>
        <p className="text-sm mt-1">
          Seus pedidos aparecerão aqui após a compra.
        </p>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-xl font-bold text-gray-900 mb-4">Meus pedidos</h1>

      <div className="space-y-3">
        {pedidos.map((pedido) => {
          const aberto = expandido === pedido.id;
          return (
            <div key={pedido.id} className="card overflow-hidden">
              <button
                onClick={() => setExpandido(aberto ? null : pedido.id)}
                className="w-full text-left"
              >
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="font-bold text-gray-900 text-sm">
                      {pedido.numero}
                    </p>
                    <p className="text-xs text-gray-400 mt-0.5">
                      {formatarData(pedido.createdAt)}
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <span
                      className={cn(
                        "badge text-xs",
                        STATUS_PEDIDO_COR[pedido.status]
                      )}
                    >
                      {STATUS_PEDIDO_LABEL[pedido.status]}
                    </span>
                    {aberto ? (
                      <ChevronUp size={16} className="text-gray-400" />
                    ) : (
                      <ChevronDown size={16} className="text-gray-400" />
                    )}
                  </div>
                </div>
                <p className="text-primary-700 font-bold mt-2">
                  {formatarMoeda(pedido.total)}
                </p>
              </button>

              {aberto && (
                <div className="border-t border-gray-100 mt-3 pt-3 space-y-2">
                  {pedido.itens.map((item: any) => (
                    <div
                      key={item.id}
                      className="flex justify-between text-sm"
                    >
                      <div>
                        <p className="font-medium text-gray-800">
                          {item.fardamentoTamanho.fardamento.nome}
                        </p>
                        <p className="text-xs text-gray-400">
                          Tam. {item.fardamentoTamanho.tamanho} · {item.aluno.nome} ·
                          Qtd: {item.quantidade}
                        </p>
                      </div>
                      <p className="font-semibold text-gray-900">
                        {formatarMoeda(
                          Number(item.precoUnitario) * item.quantidade
                        )}
                      </p>
                    </div>
                  ))}

                  {pedido.pagamento && (
                    <div className="mt-3 pt-3 border-t border-gray-100">
                      <p className="text-xs text-gray-400">
                        Pagamento:{" "}
                        <span className="font-medium text-gray-700">
                          {pedido.pagamento.metodo ?? "Aguardando"}
                          {pedido.pagamento.metodo === "PIX" && " (PIX)"}
                          {pedido.pagamento.metodo === "CARTAO_CREDITO" &&
                            " (Crédito)"}
                          {pedido.pagamento.metodo === "CARTAO_DEBITO" &&
                            " (Débito)"}
                        </span>
                      </p>
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}