import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { CheckCircle2, Lock, MessageCircle, UserRound } from "lucide-react";

import Avisos from "@/components/digitais/Avisos";
import ListaDeAcessos from "@/components/digitais/ListaDeAcessos";
import FontesDaLoja from "@/components/FontesDaLoja";
import { acessosDoPedido, conferirChave } from "@/lib/digitais/servidor/acessos";
import { getReadableTextColor } from "@/lib/color-contrast";
import { miniatura, TAMANHO } from "@/lib/foto";
import { carregarLoja } from "@/lib/loja/dados-da-loja";
import { normalizeWhatsappForLink } from "@/lib/phone";
import { createAdminClient } from "@/lib/supabase-admin";

/*
 * A página do link do e-mail da entrega.
 *
 * A chave no endereço vale só para UM pedido desta loja: mostra o que foi
 * comprado e deixa baixar. Não abre o portal do cliente nem outro pedido. Sem
 * "referrer" para a chave não vazar para os sites dos links entregues.
 */

export const dynamic = "force-dynamic";
export const revalidate = 0;

type Props = { params: Promise<{ slug: string; chave: string }> };

export async function generateMetadata(props: Props): Promise<Metadata> {
  const { slug } = await props.params;
  const dados = await carregarLoja(slug);
  const nome = dados?.profile?.catalog_name || dados?.profile?.store_name || "Loja";
  return { title: { absolute: `Sua compra | ${nome}` }, robots: { index: false, follow: false }, referrer: "no-referrer" };
}

export default async function PaginaDaEntrega(props: Props) {
  const { slug, chave } = await props.params;
  const dados = await carregarLoja(slug);
  const perfil = dados?.profile;
  if (!dados || !perfil) return notFound();

  const admin = createAdminClient();
  const conferida = await conferirChave(admin, decodeURIComponent(chave), "entrega");
  const valida = Boolean(conferida && conferida.lojaId === String(perfil.id) && conferida.orderId);

  const nomeDaLoja = String(perfil.catalog_name || perfil.store_name || "Loja");
  const logo = miniatura(perfil.catalog_logo_url || perfil.logo_url, TAMANHO.logo) || null;
  const cor = String(perfil.primary_color || "#4F46E5");
  const whatsapp = normalizeWhatsappForLink(perfil.whatsapp);

  let acessos: Awaited<ReturnType<typeof acessosDoPedido>> = [];
  let numero: number | null = null;
  let primeiroNome = "";
  if (valida && conferida?.orderId) {
    const [lista, pedido, compra] = await Promise.all([
      acessosDoPedido(admin, conferida.orderId),
      admin.from("orders").select("number,status,clients(name)").eq("id", conferida.orderId).maybeSingle(),
      /* O número que o comprador conhece é o do pedido da loja. */
      admin.from("catalog_orders").select("number").eq("approved_order_id", conferida.orderId).order("created_at", { ascending: false }).limit(1),
    ]);
    acessos = lista;
    const linha = pedido.data as { number?: number | null; status?: string; clients?: { name?: string | null } | null } | null;
    numero = ((compra.data ?? []) as Array<{ number: number | null }>)[0]?.number ?? linha?.number ?? null;
    primeiroNome = String(linha?.clients?.name || "").trim().split(/\s+/)[0] || "";
  }

  return (
    <div className="min-h-screen bg-[#F7F8FB] text-[#1B2440]">
      <FontesDaLoja perfil={perfil} />
      <Avisos />
      <header className="border-b border-[#ECEEF3] bg-white">
        <div className="mx-auto flex h-16 max-w-[960px] items-center justify-between px-4 sm:px-7">
          <Link href={`/${slug}`} className="flex min-w-0 items-center gap-2">
            {logo ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={logo} alt={nomeDaLoja} className="h-8 w-auto max-w-[180px] object-contain" />
            ) : (
              <span className="truncate text-base font-bold">{nomeDaLoja}</span>
            )}
          </Link>
          <span className="flex items-center gap-1.5 text-[12px] text-[#5E6478]">
            <Lock className="h-3.5 w-3.5" />
            Acesso seguro
          </span>
        </div>
      </header>

      <main className="mx-auto max-w-[960px] px-4 py-6 sm:px-7 sm:py-8">
        {valida ? (
          <>
            <div className="flex items-center gap-4 rounded-t-[18px] border border-[#ECEEF3] bg-white px-5 py-5 sm:px-6">
              <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[#E7F7F0] text-[#0E9E70]">
                <CheckCircle2 className="h-6 w-6" />
              </span>
              <div className="min-w-0">
                <h1 className="text-[19px] font-bold leading-tight sm:text-xl">{primeiroNome ? `${primeiroNome}, aqui está a sua compra` : "Aqui está a sua compra"}</h1>
                <p className="mt-1 text-[13px] text-[#5E6478]">
                  {numero ? `Pedido #${numero} · ` : ""}
                  {nomeDaLoja}
                </p>
              </div>
            </div>
            <div className="rounded-b-[18px] border border-t-0 border-[#ECEEF3] bg-white px-5 pb-5 sm:px-6">
              {acessos.length ? (
                <ListaDeAcessos acessos={acessos} prova={{ tipo: "entrega", chave: decodeURIComponent(chave) }} />
              ) : (
                <p className="py-6 text-sm text-[#5E6478]">Nada para baixar neste pedido agora. Se algo não estiver certo, fale com a loja.</p>
              )}
              <div className="mt-3 flex flex-wrap gap-2.5">
                <Link
                  href={`/${slug}/membros`}
                  className="inline-flex h-10 items-center gap-2 rounded-[10px] border-[1.5px] border-[#ECEEF3] bg-white px-3.5 text-[12.5px] font-semibold"
                >
                  <UserRound className="h-4 w-4" />
                  Minhas compras
                </Link>
                {whatsapp ? (
                  <a
                    href={`https://wa.me/${whatsapp}?text=${encodeURIComponent(`Olá! Tenho uma dúvida sobre a minha compra${numero ? ` #${numero}` : ""}.`)}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex h-10 items-center gap-2 rounded-[10px] border-[1.5px] border-[#ECEEF3] bg-white px-3.5 text-[12.5px] font-semibold"
                  >
                    <MessageCircle className="h-4 w-4" />
                    Falar com a loja
                  </a>
                ) : null}
              </div>
              <p className="mt-3 text-[12px] leading-5 text-[#5E6478]">Este link é só seu: não encaminhe. Os downloads ficam registrados.</p>
            </div>
          </>
        ) : (
          <div className="rounded-[18px] border border-[#ECEEF3] bg-white p-6 text-center">
            <h1 className="text-xl font-bold">Este link não vale mais</h1>
            <p className="mt-2 text-sm leading-6 text-[#5E6478]">
              Ele pode ter vencido ou ter sido trocado pela loja. Entre em Minhas compras com o seu e-mail: um código chega na hora, sem senha.
            </p>
            <div className="mt-5 flex flex-wrap justify-center gap-2">
              <Link
                href={`/${slug}/membros`}
                className="inline-flex h-11 items-center rounded-xl px-5 text-sm font-bold"
                style={{ backgroundColor: cor, color: getReadableTextColor(cor) }}
              >
                Minhas compras
              </Link>
              <Link href={`/${slug}`} className="inline-flex h-11 items-center rounded-xl border border-[#ECEEF3] px-5 text-sm font-semibold">
                Ir para a loja
              </Link>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}