"use client";

import { useMemo, type ComponentProps } from "react";
import StoreContent, { type CatalogSection } from "@/components/StoreContent";
import { secoesParaOsTemasAntigos } from "@/lib/pagina-inicial";
import { useDadosDosWidgets } from "@/components/home/contexto-dos-widgets";
import { VendorPaginaExtra } from "@/templates/vendor/VendorPaginaExtra";
import type { VendorSecaoDaHome } from "@/templates/vendor/VendorSecoesDaHome";
import { BoutiquePaginaExtra } from "@/templates/boutique/BoutiquePaginaExtra";
import type { BoutiqueSecaoDaHome } from "@/templates/boutique/BoutiqueSecoesDaHome";
import { MolduraDaSecao, PaginaVaziaNoEditor, ProvedorDoEditor, rotuloDaSecao, useConversaComOPainel } from "./EditorDaLoja";

/*
  Uma página extra do Vendor dentro do editor: desenha o rascunho que o
  painel manda com o desenho da página extra e põe a moldura do editor em
  volta de cada seção. (Nos temas Padrão e Vitrine a página extra usa o
  HomePadraoNoEditor, com o StoreContent no modo de página extra.)
*/

type ProdutoDaLoja = { id: string } & Record<string, unknown>;

export function PaginaVendorNoEditor({
  origemDoPainel,
  propsDaPagina,
  secoesSalvas,
  produtosPorId,
}: {
  origemDoPainel: string;
  propsDaPagina: Omit<ComponentProps<typeof VendorPaginaExtra>, "secoes" | "envolverSecao">;
  secoesSalvas: VendorSecaoDaHome[];
  produtosPorId: Record<string, ProdutoDaLoja>;
}) {
  const conversa = useConversaComOPainel({ origemDoPainel, tema: "vendor", homeEditada: true, arranjoAutomatico: null });
  const { rascunho } = conversa;

  const secoes = useMemo<VendorSecaoDaHome[]>(() => {
    if (!rascunho) return secoesSalvas;
    return rascunho.map((s) => ({
      id: s.id,
      title: s.title,
      layout_width: s.layout_width,
      section_type: s.section_type,
      config: s.config,
      previa_no_ar: s.previa_no_ar === true,
      products: s.produtos.map((id) => produtosPorId[id]).filter(Boolean) as never[],
    }));
  }, [rascunho, secoesSalvas, produtosPorId]);

  return (
    <ProvedorDoEditor
      selecionada={conversa.selecionada}
      enviarAcao={conversa.enviarAcao}
      rotulos={conversa.rotulos}
      zoom={conversa.zoom}
      total={secoes.length}
      foraDoPainel={conversa.foraDoPainel}
    >
      <VendorPaginaExtra
        {...propsDaPagina}
        secoes={secoes}
        envolverSecao={(secao, indice, conteudo) => (
          <MolduraDaSecao key={secao.id} id={secao.id} indice={indice} rotulo={rotuloDaSecao(secao, conversa.rotulos.get(secao.id))}>
            {conteudo}
          </MolduraDaSecao>
        )}
        depois={secoes.length === 0 ? <PaginaVaziaNoEditor /> : null}
      />
    </ProvedorDoEditor>
  );
}

/** Uma página extra da Boutique dentro do editor (mesma conversa e moldura do Vendor, desenho próprio). */
export function PaginaBoutiqueNoEditor({
  origemDoPainel,
  propsDaPagina,
  secoesSalvas,
  produtosPorId,
}: {
  origemDoPainel: string;
  propsDaPagina: Omit<ComponentProps<typeof BoutiquePaginaExtra>, "secoes" | "envolverSecao">;
  secoesSalvas: BoutiqueSecaoDaHome[];
  produtosPorId: Record<string, ProdutoDaLoja>;
}) {
  const conversa = useConversaComOPainel({ origemDoPainel, tema: "boutique", homeEditada: true, arranjoAutomatico: null });
  const { rascunho } = conversa;

  const secoes = useMemo<BoutiqueSecaoDaHome[]>(() => {
    if (!rascunho) return secoesSalvas;
    return rascunho.map((s) => ({
      id: s.id,
      title: s.title,
      layout_width: s.layout_width,
      section_type: s.section_type,
      config: s.config,
      previa_no_ar: s.previa_no_ar === true,
      products: s.produtos.map((id) => produtosPorId[id]).filter(Boolean) as never[],
    }));
  }, [rascunho, secoesSalvas, produtosPorId]);

  return (
    <ProvedorDoEditor
      selecionada={conversa.selecionada}
      enviarAcao={conversa.enviarAcao}
      rotulos={conversa.rotulos}
      zoom={conversa.zoom}
      total={secoes.length}
      foraDoPainel={conversa.foraDoPainel}
    >
      <BoutiquePaginaExtra
        {...propsDaPagina}
        secoes={secoes}
        envolverSecao={(secao, indice, conteudo) => (
          <MolduraDaSecao key={secao.id} id={secao.id} indice={indice} rotulo={rotuloDaSecao(secao, conversa.rotulos.get(secao.id))}>
            {conteudo}
          </MolduraDaSecao>
        )}
        depois={secoes.length === 0 ? <PaginaVaziaNoEditor /> : null}
      />
    </ProvedorDoEditor>
  );
}

/** Uma página extra dos temas Padrão e Vitrine dentro do editor. */
export function PaginaPadraoNoEditor({
  origemDoPainel,
  tema,
  propsDaLoja,
  produtosPorId,
}: {
  origemDoPainel: string;
  tema: string;
  propsDaLoja: ComponentProps<typeof StoreContent>;
  produtosPorId: Record<string, ProdutoDaLoja>;
}) {
  const conversa = useConversaComOPainel({ origemDoPainel, tema, homeEditada: true, arranjoAutomatico: null });
  const { rascunho } = conversa;
  const maisVendidos = useDadosDosWidgets()?.maisVendidos;

  const secoes = useMemo<CatalogSection[] | undefined>(() => {
    if (!rascunho) return propsDaLoja.sections;
    const montadas = rascunho.map((s, posicao) => ({
      id: s.id,
      title: s.title,
      background_color: s.background_color,
      text_color: s.text_color,
      layout_width: s.layout_width,
      title_align: s.title_align,
      title_size: s.title_size,
      section_type: s.section_type,
      config: s.config,
      previa_no_ar: s.previa_no_ar === true,
      placement: "above" as const,
      position: posicao,
      products: s.produtos.map((id) => produtosPorId[id]).filter(Boolean),
    }));
    return secoesParaOsTemasAntigos(montadas, propsDaLoja.products as never, propsDaLoja.categories as never, { maisVendidos }) as unknown as CatalogSection[];
  }, [rascunho, propsDaLoja.sections, propsDaLoja.products, propsDaLoja.categories, produtosPorId, maisVendidos]);

  return (
    <ProvedorDoEditor
      selecionada={conversa.selecionada}
      enviarAcao={conversa.enviarAcao}
      rotulos={conversa.rotulos}
      zoom={conversa.zoom}
      total={secoes?.length ?? 0}
      foraDoPainel={conversa.foraDoPainel}
    >
      <StoreContent
        {...propsDaLoja}
        paginaExtra={propsDaLoja.paginaExtra ? { ...propsDaLoja.paginaExtra, vazio: <PaginaVaziaNoEditor /> } : null}
        sections={secoes}
        envolverSecao={(secao, indice, conteudo) => (
          <MolduraDaSecao key={secao.id} id={secao.id} indice={indice} rotulo={rotuloDaSecao(secao, conversa.rotulos.get(secao.id))} podeApagar>
            {conteudo}
          </MolduraDaSecao>
        )}
      />
    </ProvedorDoEditor>
  );
}