import type { Metadata } from "next";
import type { ReactNode } from "react";
import { notFound, redirect } from "next/navigation";
import CatalogAnalyticsTracker from "@/components/CatalogAnalyticsTracker";
import StoreLayout from "@/components/StoreLayout";
import FontesDaLoja from "@/components/FontesDaLoja";
import StoreContent from "@/components/StoreContent";
import { miniatura, produtoComFotoMenor, TAMANHO } from "@/lib/foto";
import { resolveCatalogAppearance } from "@/lib/catalog-appearance";
import { buildCatalogMetadata } from "@/lib/catalog-metadata";
import { VendorShell } from "@/templates/vendor/VendorShell";
import { aparenciaDoVendor } from "@/templates/vendor/aparencia";
import { VendorPaginaExtra } from "@/templates/vendor/VendorPaginaExtra";
import { BoutiqueShell } from "@/templates/boutique/BoutiqueShell";
import { aparenciaDaBoutique } from "@/templates/boutique/aparencia";
import { BoutiquePaginaExtra } from "@/templates/boutique/BoutiquePaginaExtra";
import { carregarLoja, carregarLojaAgora, type DadosDaLoja } from "@/lib/loja/dados-da-loja";
import { carregarPaginaExtra, carregarPaginaExtraAgora, type PaginaExtra } from "@/lib/loja/pagina-extra";
import { lerPassagemDoEditor, type PassagemDoEditor } from "@/lib/passagem-do-editor";
import { secoesParaOsTemasAntigos, configDaSecao } from "@/lib/pagina-inicial";
import { carregarDadosDosWidgets } from "@/lib/loja/dados-dos-widgets";
import { ProvedorDosWidgets } from "@/components/home/contexto-dos-widgets";
import { lerVisaoDaLoja, clienteParaAsTelas, enderecoDeLogin } from "@/lib/loja/visao.server";
import { estaEsgotado, semEsgotados, semPrecos, semPrecosNaLista } from "@/lib/loja/regras-da-loja";
import { ProvedorDaNavegacao } from "@/components/navegacao/ContextoDaNavegacao";
import { NavegacaoNoEditor } from "@/components/editor-da-loja/NavegacaoNoEditor";
import { PaginaBoutiqueNoEditor, PaginaPadraoNoEditor, PaginaVendorNoEditor } from "@/components/editor-da-loja/PaginaNoEditor";
import { secoesNoAr } from "@/lib/exibicao-da-secao";
import { ContadorDeCliques } from "@/components/home/ContadorDeCliques";

/*
  Página extra da loja: /<slug>/pagina/<pagina> (no domínio próprio,
  /pagina/<pagina>: o middleware põe o slug na frente). Montada no editor do
  painel com as mesmas seções da página inicial (catalog_sections com
  pagina_id, migration 197) e desenhada dentro do cabeçalho e do rodapé do
  template da loja.

  Só a página visível abre para o visitante. A escondida (rascunho) abre só
  no editor, com a passagem assinada (?editar=), como a home.
*/

export const revalidate = 0;

type Parametros = { slug: string; paginaSlug: string };

async function lerOEditor(
  slug: string,
  paginaSlug: string,
  bruto: unknown
): Promise<{ dados: DadosDaLoja | null; pagina: PaginaExtra | null; passagem: PassagemDoEditor | null }> {
  const lembrados = await carregarLoja(slug);
  const dono = String(lembrados?.profile?.id || "");
  if (!dono) return { dados: lembrados, pagina: null, passagem: null };
  const passagem = bruto ? lerPassagemDoEditor(bruto, { dono, slug }, process.env.SUPABASE_SERVICE_ROLE_KEY || "") : null;
  if (!passagem) return { dados: lembrados, pagina: await carregarPaginaExtra(slug, dono, paginaSlug), passagem: null };
  const [dados, pagina] = await Promise.all([carregarLojaAgora(slug), carregarPaginaExtraAgora(dono, paginaSlug)]);
  return { dados, pagina, passagem };
}

export async function generateMetadata(props: {
  params: Promise<Parametros>;
  searchParams?: Promise<{ editar?: string }>;
}): Promise<Metadata> {
  const { slug, paginaSlug } = await props.params;
  const noEditor = Boolean(((await props.searchParams) || {}).editar);
  const dados = await carregarLoja(slug);
  const profile = dados?.profile;
  if (!profile) return { title: "Loja" };
  const pagina = await carregarPaginaExtra(slug, String(profile.id), paginaSlug);
  const nomeDaLoja = profile.catalog_name || profile.store_name || "Loja";
  if (!pagina) {
    return noEditor ? { title: nomeDaLoja, robots: { index: false, follow: false } } : { title: nomeDaLoja };
  }
  const metadados = buildCatalogMetadata({
    profile,
    scope: "page",
    pageTitle: pagina.seo_titulo || `${pagina.titulo} | ${nomeDaLoja}`,
    pageDescription: pagina.seo_descricao || `${pagina.titulo} — ${nomeDaLoja}.`,
    path: `/pagina/${pagina.slug}`,
    image: pagina.og_imagem,
    imageAlt: pagina.titulo,
  });
  /* "Fora do Google" na página, ou o editor: nunca entra em busca. */
  return noEditor || pagina.noindex
    ? { ...metadados, robots: { index: false, follow: false, googleBot: { index: false, follow: false } } }
    : metadados;
}

const MODOS_ANTIGOS = new Set([
  "all_products",
  "category_products",
  "subcategory_products",
  "image_banner",
  "category_navigator",
  "image_grid",
  "banner_carousel",
]);

export default async function PaginaExtraDaLoja(props: {
  params: Promise<Parametros>;
  searchParams?: Promise<{ editar?: string; tema?: string }>;
}) {
  const { slug, paginaSlug } = await props.params;
  const buscados = (await props.searchParams) || {};
  const { dados, pagina, passagem } = await lerOEditor(slug, paginaSlug, buscados.editar);
  const profile = dados?.profile;
  if (!dados || !profile || !pagina) return notFound();

  const { visao, cliente } = await lerVisaoDaLoja(slug, profile);
  if (visao.lojaFechada) redirect(`/${slug}`);
  if (visao.exigeLoginNaLoja) redirect(enderecoDeLogin(slug, `/${slug}/pagina/${pagina.slug}`));
  const semPreco = !visao.mostrarPreco;
  const esconderEsgotados = visao.regras.esgotado === "hide";

  const listaDaLoja = esconderEsgotados ? semEsgotados(dados.products) : dados.products || [];
  const products = (semPreco ? semPrecosNaLista(listaDaLoja) : listaDaLoja).map((p) => produtoComFotoMenor(p, TAMANHO.card));
  const categories = dados.categories || [];

  /* As seções da página, lidas como a home lê as dela. */
  /* A agendada fora da janela não sai na página publicada (decidido agora,
     sobre as seções lembradas). No editor todas aparecem. */
  const secoesNoArAgora = passagem ? pagina.sections || [] : secoesNoAr(pagina.sections || [], Date.now());
  const sections = secoesNoArAgora.map((section) => {
    const config = configDaSecao(section.config);
    const modo = config.mode ?? section.section_type;
    return {
      ...section,
      config,
      section_type: typeof modo === "string" && MODOS_ANTIGOS.has(modo) ? modo : "manual_products",
      products: (pagina.sectionProducts || [])
        .filter((sp) => sp.section_id === section.id)
        .map((sp) => (sp.product && !(esconderEsgotados && estaEsgotado(sp.product)) ? produtoComFotoMenor(semPreco ? semPrecos(sp.product) : sp.product, TAMANHO.card) : null))
        .filter(Boolean),
    };
  });

  const primaryColor = profile.primary_color || "#4F46E5";
  const storeName = profile.catalog_name || profile.store_name || "Loja";
  const logoUrl = miniatura(profile.catalog_logo_url || profile.logo_url, TAMANHO.logo);
  const aparencia = resolveCatalogAppearance(profile);
  /* `?tema=` só fora de produção, como na home: a MESMA página noutro modelo. */
  const temaPedido = process.env.NODE_ENV !== "production" ? String(buscados.tema || "") : "";
  const temaDaLoja = ["vendor", "vitrine", "default", "boutique"].includes(temaPedido) ? temaPedido : profile.catalog_theme;
  const tema =
    temaDaLoja === "vendor" ? "vendor" : temaDaLoja === "boutique" ? "boutique" : temaDaLoja === "vitrine" ? "vitrine" : "default";

  const dadosDosWidgets = await carregarDadosDosWidgets(profile, sections as never[], { noEditor: Boolean(passagem), semPreco });
  const comWidgets = (conteudo: ReactNode) =>
    dadosDosWidgets ? <ProvedorDosWidgets dados={dadosDosWidgets}>{conteudo}</ProvedorDosWidgets> : conteudo;
  const comNavegacao = (conteudo: ReactNode) =>
    passagem ? (
      <NavegacaoNoEditor origemDoPainel={passagem.origemDoPainel} publicada={dados.navegacao} paginas={dados.paginas}>
        {conteudo}
      </NavegacaoNoEditor>
    ) : (
      <ProvedorDaNavegacao navegacao={dados.navegacao}>{conteudo}</ProvedorDaNavegacao>
    );

  /* No editor: os produtos que uma seção de produtos escolhidos pode mostrar. */
  const produtosPorId: Record<string, { id: string } & Record<string, unknown>> = {};
  if (passagem) {
    for (const secao of sections) {
      for (const produto of (secao.products || []) as Array<{ id: string } & Record<string, unknown>>) {
        if (produto?.id) produtosPorId[String(produto.id)] = produto;
      }
    }
    for (const produto of products as Array<{ id: string } & Record<string, unknown>>) produtosPorId[String(produto.id)] = produto;
  }

  const contador = passagem ? null : (
    <>
      <CatalogAnalyticsTracker slug={slug} eventName="page_view" onceKey={`page_view:pagina:${pagina.id}`} />
      {/* Os cliques de cada seção da página (migration 199). */}
      <ContadorDeCliques slug={slug} />
    </>
  );

  /* A Boutique: árvore própria (templates/boutique), mesma conta do Vendor. */
  if (tema === "boutique") {
    const secoesDaBoutique = sections.map((secao) => ({
      id: String(secao.id),
      title: secao.title,
      layout_width: secao.layout_width ?? null,
      section_type: secao.section_type,
      config: secao.config,
      products: secao.products as never[],
    }));
    const propsDaPagina = {
      slug,
      titulo: pagina.titulo,
      mostrarTitulo: pagina.mostrar_titulo,
      produtos: products as never[],
      categorias: categories as never[],
      clienteId: cliente?.id || null,
      favoritos: cliente?.favorites || null,
      corDaMarca: primaryColor,
      nomeDaLoja: storeName,
    };
    return (
      <StoreLayout
        primaryColor={primaryColor}
        whatsappNumber={profile.whatsapp}
        cartScope={profile.id || slug}
        storeSlug={slug}
        theme={tema}
        chatLigado={passagem ? false : profile.store_chat_enabled === true}
        visao={visao}
      >
        <FontesDaLoja perfil={profile} />
        {contador}
        {comNavegacao(
          <BoutiqueShell
            slug={slug}
            nomeDaLoja={storeName}
            slogan={profile.catalog_slogan}
            logoUrl={logoUrl}
            corDaMarca={primaryColor}
            aparencia={aparenciaDaBoutique(profile as never)}
            cupomDoAviso={(dados.coupon ?? null) as never}
            whatsappFlutuante={profile.catalog_whatsapp_float}
            categorias={categories as never[]}
            contato={{
              whatsapp: profile.whatsapp,
              telefone: profile.company_phone || profile.phone,
              email: profile.email,
              endereco: profile.catalog_footer_address || profile.address,
              cnpj: profile.catalog_show_document ? profile.cnpj : null,
              instagram: profile.social_instagram,
              facebook: profile.social_facebook,
            }}
            clienteLogado={Boolean(cliente)}
          >
            {comWidgets(
              passagem ? (
                <PaginaBoutiqueNoEditor
                  origemDoPainel={passagem.origemDoPainel}
                  propsDaPagina={propsDaPagina}
                  secoesSalvas={secoesDaBoutique}
                  produtosPorId={produtosPorId}
                />
              ) : (
                <BoutiquePaginaExtra {...propsDaPagina} secoes={secoesDaBoutique} />
              )
            )}
          </BoutiqueShell>
        )}
      </StoreLayout>
    );
  }

  if (tema === "vendor") {
    const secoesDoVendor = sections.map((secao) => ({
      id: String(secao.id),
      title: secao.title,
      layout_width: secao.layout_width ?? null,
      section_type: secao.section_type,
      config: secao.config,
      products: secao.products as never[],
    }));
    const propsDaPagina = {
      slug,
      titulo: pagina.titulo,
      mostrarTitulo: pagina.mostrar_titulo,
      produtos: products as never[],
      categorias: categories as never[],
      clienteId: cliente?.id || null,
      favoritos: cliente?.favorites || null,
      corDaMarca: primaryColor,
    };
    return (
      <StoreLayout
        primaryColor={primaryColor}
        whatsappNumber={profile.whatsapp}
        cartScope={profile.id || slug}
        storeSlug={slug}
        theme={tema}
        chatLigado={passagem ? false : profile.store_chat_enabled === true}
        visao={visao}
      >
        <FontesDaLoja perfil={profile} />
        {contador}
        {comNavegacao(
          <VendorShell
            slug={slug}
            nomeDaLoja={storeName}
            slogan={profile.catalog_slogan}
            logoUrl={logoUrl}
            corDaMarca={primaryColor}
            aparencia={aparenciaDoVendor(profile as never)}
            cupomDoAviso={(dados.coupon ?? null) as never}
            whatsappFlutuante={profile.catalog_whatsapp_float}
            categorias={categories as never[]}
            contato={{
              whatsapp: profile.whatsapp,
              telefone: profile.company_phone || profile.phone,
              email: profile.email,
              endereco: profile.catalog_footer_address || profile.address,
              cnpj: profile.catalog_show_document ? profile.cnpj : null,
              instagram: profile.social_instagram,
              facebook: profile.social_facebook,
            }}
            clienteLogado={Boolean(cliente)}
          >
            {comWidgets(
              passagem ? (
                <PaginaVendorNoEditor
                  origemDoPainel={passagem.origemDoPainel}
                  propsDaPagina={propsDaPagina}
                  secoesSalvas={secoesDoVendor}
                  produtosPorId={produtosPorId}
                />
              ) : (
                <VendorPaginaExtra {...propsDaPagina} secoes={secoesDoVendor} />
              )
            )}
          </VendorShell>
        )}
      </StoreLayout>
    );
  }

  const propsDaLoja = {
    products,
    categories,
    banners: [],
    sections: secoesParaOsTemasAntigos(sections, products as never[], categories as never[], {
      maisVendidos: dadosDosWidgets?.maisVendidos,
    }) as never[],
    slideEnabled: false,
    infoStripEnabled: false,
    infoStripItems: [],
    slug,
    primaryColor,
    storeName,
    storeSlogan: profile.catalog_slogan,
    logoUrl,
    showStoreNameInHeader: profile.catalog_show_name_in_header,
    showStoreSloganInHeader: profile.catalog_show_slogan_in_header,
    storeNameColor: profile.catalog_name_color,
    storeSloganColor: profile.catalog_slogan_color,
    catalogHeaderIconColor: profile.catalog_header_icon_color,
    logoEffectEnabled: profile.catalog_logo_effect_enabled,
    logoEffectType: profile.catalog_logo_effect,
    logoEffectSpeed: profile.catalog_logo_effect_speed,
    logoEffectIntensity: profile.catalog_logo_effect_intensity,
    whatsapp: profile.whatsapp,
    whatsappFloat: profile.catalog_whatsapp_float,
    phone: profile.phone,
    companyPhone: profile.company_phone,
    companyWhatsapp: profile.company_whatsapp,
    address: profile.address,
    cnpj: profile.cnpj,
    catalogShowDocument: profile.catalog_show_document,
    headerColor: aparencia.headerColor,
    headerTextColor: aparencia.headerTextColor,
    menuColor: aparencia.menuColor,
    menuTextColor: aparencia.menuTextColor,
    pageBgColor: aparencia.pageBgColor,
    cardButtonColor: aparencia.cardButtonColor,
    fontHeadingFamily: aparencia.fonts.heading,
    fontBodyFamily: aparencia.fonts.body,
    footerColor: profile.catalog_footer_color,
    footerTextColor: profile.catalog_footer_text_color,
    socialFacebook: profile.social_facebook,
    socialInstagram: profile.social_instagram,
    socialTwitter: profile.social_twitter,
    socialLinkedin: profile.social_linkedin,
    socialYoutube: profile.social_youtube,
    announcementEnabled: profile.catalog_announcement_enabled,
    announcementText: profile.catalog_announcement_text,
    announcementCountdownEnabled: profile.catalog_announcement_countdown_enabled,
    announcementCountdownEndAt: profile.catalog_announcement_countdown_end_at,
    announcementShowCouponBadge: profile.catalog_announcement_show_coupon_badge,
    announcementCouponBadgeColor: profile.catalog_announcement_coupon_badge_color,
    announcementBackgroundColor: profile.catalog_announcement_background_color,
    announcementTextColor: profile.catalog_announcement_text_color,
    announcementButtonLabel: profile.catalog_announcement_button_label,
    announcementButtonUrl: profile.catalog_announcement_button_url,
    announcementSticky: profile.catalog_announcement_sticky,
    announcementCoupon: (dados.coupon ?? null) as never,
    announcementCouponId: profile.catalog_announcement_coupon_id,
    socialProofEnabled: passagem ? false : profile.catalog_social_proof_enabled,
    socialProofIntervalSeconds: profile.catalog_social_proof_interval_seconds,
    socialProofPosition: profile.catalog_social_proof_position,
    socialProofDurationSeconds: profile.catalog_social_proof_duration_seconds,
    socialProofMaxVisible: profile.catalog_social_proof_max_visible,
    vitrineProductLayout: profile.catalog_vitrine_product_layout,
    storiesGroups: [],
    catalogStoriesEnabled: false,
    loggedClient: clienteParaAsTelas(cliente),
    paginaExtra: { titulo: pagina.titulo, mostrarTitulo: pagina.mostrar_titulo },
  };

  return (
    <StoreLayout
      primaryColor={primaryColor}
      whatsappNumber={profile.whatsapp}
      cartScope={profile.id || slug}
      storeSlug={slug}
      theme={tema}
      chatLigado={passagem ? false : profile.store_chat_enabled === true}
      visao={visao}
    >
      <FontesDaLoja perfil={profile} />
      {contador}
      {comNavegacao(
        comWidgets(
          passagem ? (
            <PaginaPadraoNoEditor origemDoPainel={passagem.origemDoPainel} tema={tema} propsDaLoja={propsDaLoja} produtosPorId={produtosPorId} />
          ) : (
            <StoreContent {...propsDaLoja} contarCliques />
          )
        )
      )}
    </StoreLayout>
  );
}