import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { BadgeCheck, Download, Linkedin, ShieldX } from "lucide-react";

import FolhaDoCertificado from "@/components/digitais/FolhaDoCertificado";
import FontesDaLoja from "@/components/FontesDaLoja";
import { getReadableTextColor } from "@/lib/color-contrast";
import { codigoDigitado, dataPorExtenso } from "@/lib/digitais/certificado";
import { textoDaCargaHoraria } from "@/lib/digitais/curso";
import { enderecoDoCertificado, lerCertificado } from "@/lib/digitais/servidor/certificados";
import { clienteDaSessao } from "@/lib/digitais/servidor/curso";
import { lerAjustesDigitais } from "@/lib/digitais/servidor/vitrine";
import { miniatura, TAMANHO } from "@/lib/foto";
import { carregarLoja } from "@/lib/loja/dados-da-loja";
import { createAdminClient } from "@/lib/supabase-admin";

/*
 * O certificado para qualquer pessoa conferir: o código no endereço diz se ele
 * vale, de quem é, que curso e quantas horas. O PDF baixa só quem é o dono
 * (entrado na área de membros desta loja).
 */

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

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

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

export default async function PaginaDoCertificado(props: Props) {
  const { slug, codigo: bruto } = await props.params;
  const dados = await carregarLoja(slug);
  const perfil = dados?.profile;
  if (!dados || !perfil) return notFound();
  const lojaId = String(perfil.id);
  const nomeDaLoja = String(perfil.catalog_name || perfil.store_name || "Loja");
  const admin = createAdminClient();
  const codigo = codigoDigitado(decodeURIComponent(bruto));
  const [certificado, ajustes, clienteId] = await Promise.all([
    codigo ? lerCertificado(admin, lojaId, codigo) : Promise.resolve(null),
    lerAjustesDigitais(admin, lojaId),
    clienteDaSessao(admin, slug),
  ]);
  const cor = ajustes.area.cor || String(perfil.primary_color || "#4F46E5");
  const corDoTexto = getReadableTextColor(cor);
  const logo = miniatura(perfil.catalog_logo_url || perfil.logo_url, TAMANHO.logo) || perfil.catalog_logo_url || perfil.logo_url || null;
  const dono = Boolean(certificado && clienteId && certificado.clienteId === clienteId);
  const valido = Boolean(certificado && !certificado.revogadoEm);
  const endereco = certificado ? await enderecoDoCertificado(admin, { lojaId, slug, codigo: certificado.codigo }) : null;
  const emitido = certificado ? new Date(certificado.emitidoEm) : null;
  const linkedin =
    certificado && emitido && endereco
      ? `https://www.linkedin.com/profile/add?${new URLSearchParams({
          startTask: "CERTIFICATION_NAME",
          name: certificado.curso,
          organizationName: nomeDaLoja,
          issueYear: String(emitido.getUTCFullYear()),
          issueMonth: String(emitido.getUTCMonth() + 1),
          certUrl: endereco,
          certId: certificado.codigo,
        }).toString()}`
      : null;

  return (
    <>
      <FontesDaLoja perfil={perfil} />
      <div className="min-h-screen bg-[#F7F8FB] text-[#1B2440]">
        <header className="border-b border-[#ECEEF3] bg-white">
          <div className="mx-auto flex h-16 max-w-[1100px] items-center justify-between gap-3 px-4 sm:px-6">
            <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>
            <Link href={`/${slug}/certificado`} className="text-[13px] font-semibold text-[#5E6478] hover:text-[#1B2440]">
              Conferir outro código
            </Link>
          </div>
        </header>

        <main className="mx-auto max-w-[1100px] px-4 py-8 sm:px-6 sm:py-10">
          {!certificado ? (
            <section className="mx-auto max-w-[560px] rounded-[18px] border border-[#ECEEF3] bg-white p-6 text-center sm:p-8">
              <ShieldX className="mx-auto h-10 w-10 text-[#C2263F]" />
              <h1 className="mt-3 text-xl font-bold">Certificado não encontrado</h1>
              <p className="mt-2 text-sm leading-6 text-[#5E6478]">
                Não há certificado da {nomeDaLoja} com o código <b className="text-[#1B2440]">{codigo ?? "informado"}</b>. Confira as letras e os
                números e tente de novo.
              </p>
              <Link
                href={`/${slug}/certificado`}
                className="mt-5 inline-flex h-11 items-center rounded-xl px-5 text-sm font-bold"
                style={{ backgroundColor: cor, color: corDoTexto }}
              >
                Digitar o código
              </Link>
            </section>
          ) : (
            <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
              <FolhaDoCertificado
                loja={nomeDaLoja}
                logo={logo}
                cor={cor}
                aluno={certificado.aluno}
                curso={certificado.curso}
                cargaHoraria={textoDaCargaHoraria(certificado.cargaHorariaMin)}
                data={dataPorExtenso(certificado.emitidoEm)}
                codigo={certificado.codigo}
                assinatura={certificado.assinatura}
                className={valido ? "" : "opacity-60 grayscale"}
              />
              <section>
                {valido ? (
                  <p className="flex items-center gap-2 text-[15px] font-bold text-[#0E9E70]">
                    <BadgeCheck className="h-5 w-5" />
                    Certificado válido
                  </p>
                ) : (
                  <p className="flex items-center gap-2 text-[15px] font-bold text-[#C2263F]">
                    <ShieldX className="h-5 w-5" />
                    Este certificado foi cancelado pela loja
                  </p>
                )}
                <h1 className="mt-2 text-[24px] font-extrabold leading-tight tracking-tight">{certificado.curso}</h1>
                <dl className="mt-5 divide-y divide-[#ECEEF3] border-y border-[#ECEEF3] text-[14px]">
                  {[
                    ["Nome", certificado.aluno],
                    ["Carga horária", textoDaCargaHoraria(certificado.cargaHorariaMin)],
                    ["Emitido em", dataPorExtenso(certificado.emitidoEm)],
                    ["Emitido por", nomeDaLoja],
                    ["Código", certificado.codigo],
                  ].map(([rotulo, valor]) => (
                    <div key={rotulo} className="flex justify-between gap-4 py-2.5">
                      <dt className="text-[#5E6478]">{rotulo}</dt>
                      <dd className="text-right font-semibold">{valor}</dd>
                    </div>
                  ))}
                </dl>
                {valido && dono ? (
                  <div className="mt-5 flex flex-wrap gap-2.5">
                    <a
                      href={`/api/digitais/certificado/${encodeURIComponent(certificado.codigo)}?slug=${encodeURIComponent(slug)}`}
                      className="inline-flex h-11 items-center gap-2 rounded-xl px-5 text-[14px] font-bold transition hover:opacity-90"
                      style={{ backgroundColor: cor, color: corDoTexto }}
                    >
                      <Download className="h-4 w-4" />
                      Baixar em PDF
                    </a>
                    {linkedin ? (
                      <a
                        href={linkedin}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex h-11 items-center gap-2 rounded-xl border border-[#E2E5EC] bg-white px-4 text-[14px] font-semibold"
                      >
                        <Linkedin className="h-4 w-4 text-[#0A66C2]" />
                        Pôr no LinkedIn
                      </a>
                    ) : null}
                  </div>
                ) : valido ? (
                  <p className="mt-5 text-[13px] leading-6 text-[#5E6478]">
                    É o seu?{" "}
                    <Link href={`/${slug}/membros#certificados`} className="font-semibold underline underline-offset-2" style={{ color: cor }}>
                      Entre na área de membros
                    </Link>{" "}
                    para baixar o PDF.
                  </p>
                ) : null}
                {endereco ? <p className="mt-6 break-all text-[12px] text-[#8A90A2]">Endereço para conferir: {endereco}</p> : null}
              </section>
            </div>
          )}
        </main>
      </div>
    </>
  );
}