"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { Barcode, Check, Copy, Package, QrCode } from "lucide-react";
import { getAccessibleAccent, getReadableTextColor } from "@/lib/color-contrast";

/*
  Compra esperando pagamento, no topo de "Minhas compras".

  Sem isto, a compra do catalogo que ainda nao foi paga simplesmente nao existia
  para o cliente: a lista do portal so mostra pedido ja aprovado. Quem gerou o
  codigo e saiu da tela perdia o caminho de volta.

  O cartao mostra a foto e o nome do que foi comprado, e nao so o numero do
  pedido e o valor — o cliente precisa reconhecer a compra para querer pagar.
*/

type ItemDaCompra = { titulo: string; quantidade: number; imagem?: string | null };

type PagamentoPendente = {
  id: string;
  numero: number;
  total: number;
  criado_em?: string | null;
  metodo?: string | null;
  situacao?: string | null;
  codigo_pix?: string | null;
  link_boleto?: string | null;
  expira_em?: string | null;
  itens?: ItemDaCompra[] | null;
};

function formatarDinheiro(valor: number) {
  return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(Number(valor || 0));
}

function metodoDaCompra(metodo?: string | null) {
  const chave = String(metodo || "").toLowerCase();
  if (chave.includes("pix") || chave === "bank_transfer") return { nome: "Pix", Icone: QrCode };
  if (chave.includes("ticket") || chave.includes("bol")) return { nome: "Boleto", Icone: Barcode };
  return { nome: "Pagamento", Icone: Package };
}

function resumoDosItens(itens?: ItemDaCompra[] | null) {
  const lista = Array.isArray(itens) ? itens : [];
  if (!lista.length) return "Compra do catálogo";
  const primeiros = lista.slice(0, 2).map((item) => {
    const quantidade = Number(item.quantidade || 0);
    return quantidade > 1 ? `${quantidade}× ${item.titulo}` : item.titulo;
  });
  const restantes = lista.length - primeiros.length;
  return restantes > 0 ? `${primeiros.join(", ")} +${restantes}` : primeiros.join(", ");
}

function quandoFoi(iso?: string | null) {
  if (!iso) return "";
  const data = new Date(iso);
  if (Number.isNaN(data.getTime())) return "";
  return data.toLocaleDateString("pt-BR", { day: "2-digit", month: "short" });
}

export default function PagamentosPendentes({ slug, primaryColor }: { slug: string; primaryColor: string }) {
  const [pedidos, setPedidos] = useState<PagamentoPendente[]>([]);
  const [copiado, setCopiado] = useState<string | null>(null);

  useEffect(() => {
    let ativo = true;
    const carregar = async () => {
      try {
        const resposta = await fetch(`/api/client-portal/pending-payments?slug=${encodeURIComponent(slug)}`, {
          cache: "no-store",
        });
        const dados = (await resposta.json().catch(() => null)) as { pedidos?: PagamentoPendente[] } | null;
        if (ativo) setPedidos(Array.isArray(dados?.pedidos) ? dados.pedidos : []);
      } catch {
        if (ativo) setPedidos([]);
      }
    };
    void carregar();
    return () => {
      ativo = false;
    };
  }, [slug]);

  if (!pedidos.length) return null;

  const destaque = getAccessibleAccent(primaryColor);

  return (
    <section className="overflow-hidden border border-[#efedf2] bg-white">
      <div className="flex items-center justify-between gap-3 border-b border-[#efedf2] px-4 py-3.5 sm:px-6">
        <div className="min-w-0">
          <div className="text-[15px] font-semibold text-zinc-900">
            {pedidos.length === 1 ? "Uma compra esperando pagamento" : `${pedidos.length} compras esperando pagamento`}
          </div>
          <div className="text-[12px] text-zinc-500">
            Termine o pagamento para o pedido entrar na produção.
          </div>
        </div>
        <span className="hidden rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700 sm:inline-flex">
          Aguardando
        </span>
      </div>

      <ul className="divide-y divide-[#efedf2]">
        {pedidos.map((pedido) => {
          const { nome, Icone } = metodoDaCompra(pedido.metodo);
          const primeiraImagem = (pedido.itens || []).find((item) => item.imagem)?.imagem || null;
          const dia = quandoFoi(pedido.criado_em);

          return (
            <li key={pedido.id} className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:px-6">
              <div className="flex min-w-0 flex-1 items-center gap-3">
                <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-[14px] border border-[#efedf2] bg-[#faf9fb]">
                  {primeiraImagem ? (
                    <Image
                      src={primeiraImagem}
                      alt={resumoDosItens(pedido.itens)}
                      width={56}
                      height={56}
                      unoptimized
                      className="h-14 w-14 object-cover"
                    />
                  ) : (
                    <Package className="h-5 w-5 text-zinc-400" />
                  )}
                </div>

                <div className="min-w-0">
                  <div className="truncate text-[14px] font-semibold text-zinc-900">{resumoDosItens(pedido.itens)}</div>
                  <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-zinc-500">
                    <span>Pedido #{pedido.numero}</span>
                    <span className="inline-flex items-center gap-1">
                      <Icone className="h-3 w-3" />
                      {nome}
                    </span>
                    {dia ? <span>{dia}</span> : null}
                  </div>
                </div>
              </div>

              <div className="flex shrink-0 items-center justify-between gap-3 sm:justify-end">
                <div className="text-[16px] font-bold text-zinc-900">{formatarDinheiro(pedido.total)}</div>

                {pedido.codigo_pix ? (
                  <button
                    type="button"
                    onClick={async () => {
                      try {
                        await navigator.clipboard.writeText(pedido.codigo_pix || "");
                        setCopiado(pedido.id);
                        window.setTimeout(() => setCopiado(null), 2500);
                      } catch {
                        setCopiado(null);
                      }
                    }}
                    className="inline-flex h-10 items-center gap-2 rounded-[12px] px-4 text-[13px] font-semibold"
                    style={{ backgroundColor: primaryColor, color: getReadableTextColor(primaryColor) }}
                  >
                    {copiado === pedido.id ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
                    {copiado === pedido.id ? "Copiado" : "Copiar Pix"}
                  </button>
                ) : pedido.link_boleto ? (
                  <a
                    href={pedido.link_boleto}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex h-10 items-center rounded-[12px] px-4 text-[13px] font-semibold"
                    style={{ backgroundColor: primaryColor, color: getReadableTextColor(primaryColor) }}
                  >
                    Abrir boleto
                  </a>
                ) : (
                  <a
                    href={`/${slug}`}
                    className="inline-flex h-10 items-center rounded-[12px] border px-4 text-[13px] font-semibold"
                    style={{ borderColor: destaque, color: destaque }}
                  >
                    Comprar de novo
                  </a>
                )}
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}