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

import FontesDaLoja from "@/components/FontesDaLoja";
import { getReadableTextColor } from "@/lib/color-contrast";
import { codigoDigitado } from "@/lib/digitais/certificado";
import { miniatura, TAMANHO } from "@/lib/foto";
import { carregarLoja } from "@/lib/loja/dados-da-loja";

/*
 * Conferir um certificado da loja pelo código (o formulário funciona sem
 * JavaScript: `?codigo=` leva à página do certificado).
 */

export const dynamic = "force-dynamic";

type Props = { params: Promise<{ slug: string }>; searchParams?: Promise<{ codigo?: 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: `Conferir certificado | ${nome}` }, robots: { index: false, follow: false } };
}

export default async function ConferirCertificado(props: Props) {
  const { slug } = await props.params;
  const buscados = (await props.searchParams) || {};
  const dados = await carregarLoja(slug);
  const perfil = dados?.profile;
  if (!dados || !perfil) return notFound();
  const digitado = typeof buscados.codigo === "string" ? buscados.codigo : "";
  const codigo = digitado ? codigoDigitado(digitado) : null;
  if (codigo) redirect(`/${slug}/certificado/${encodeURIComponent(codigo)}`);

  const nomeDaLoja = String(perfil.catalog_name || perfil.store_name || "Loja");
  const cor = String(perfil.primary_color || "#4F46E5");
  const logo = miniatura(perfil.catalog_logo_url || perfil.logo_url, TAMANHO.logo) || perfil.catalog_logo_url || perfil.logo_url || 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 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>
          </div>
        </header>
        <main className="mx-auto max-w-[560px] px-4 py-10">
          <section className="rounded-[18px] border border-[#ECEEF3] bg-white p-6 sm:p-8">
            <BadgeCheck className="h-9 w-9" style={{ color: cor }} />
            <h1 className="mt-3 text-[22px] font-extrabold tracking-tight">Conferir um certificado</h1>
            <p className="mt-1.5 text-sm leading-6 text-[#5E6478]">
              Digite o código que aparece no certificado da {nomeDaLoja}. A página mostra se ele vale, de quem é e de qual conteúdo.
            </p>
            <form method="get" className="mt-5 flex flex-col gap-2.5 sm:flex-row">
              <input
                name="codigo"
                defaultValue={digitado}
                required
                maxLength={40}
                autoCapitalize="characters"
                placeholder="Ex.: AUR-2026-7K2M-Q9FX"
                className="h-12 min-w-0 flex-1 rounded-xl border-[1.5px] border-[#E2E5EC] bg-white px-3.5 font-mono text-[15px] uppercase tracking-wide outline-none focus:border-[#1B2440]/40"
              />
              <button type="submit" className="h-12 rounded-xl px-5 text-[14px] font-bold" style={{ backgroundColor: cor, color: getReadableTextColor(cor) }}>
                Conferir
              </button>
            </form>
            {digitado && !codigo ? <p className="mt-2 text-[12.5px] text-[#C2410C]">Esse código não parece certo: use letras, números e traços.</p> : null}
          </section>
        </main>
      </div>
    </>
  );
}