"use client";

import Link from "next/link";
import { DragDropContext, Draggable, Droppable, type DropResult } from "@hello-pangea/dnd";
import { ArrowDown, ArrowUp, Eye, EyeOff, GripVertical, MousePointerClick, PanelTop, Plus } from "lucide-react";
import { NOME_DO_MODO, ehFamiliaVendor, type SecaoDoEditor, type Tema } from "@/lib/pagina-inicial";
import { selosDaExibicao } from "@/lib/exibicao-da-secao";
import { SeloDoModo } from "./icones";

/*
  A página como lista: a ordem das seções (arrastando no computador, com as
  setas no celular), quem está escondida e qual está escolhida. O topo da
  loja (cabeçalho, banner principal, tarja, stories) não muda de lugar: ele
  é configurado em Aparência.
*/

export function EstruturaDaPagina({
  secoes,
  tema,
  selecionada,
  aoSelecionar,
  aoReordenar,
  aoMover,
  aoAlternar,
  aoAdicionar,
  somenteLeitura,
  semTopo,
  cliques,
}: {
  secoes: SecaoDoEditor[];
  tema: Tema;
  selecionada: string | null;
  aoSelecionar: (chave: string) => void;
  aoReordenar: (de: number, para: number) => void;
  aoMover: (chave: string, direcao: -1 | 1) => void;
  aoAlternar: (chave: string) => void;
  aoAdicionar: () => void;
  somenteLeitura?: boolean;
  /* Página extra: não tem o topo da home (banner principal, tarja, stories). */
  semTopo?: boolean;
  /* Cliques de cada seção na loja publicada, últimos 30 dias (migration 199). */
  cliques?: ReadonlyMap<string, number> | null;
}) {
  const aoSoltar = (resultado: DropResult) => {
    if (!resultado.destination) return;
    aoReordenar(resultado.source.index, resultado.destination.index);
  };

  /* A Boutique tem também o "compre pelo vídeo" fixo no topo, logo depois
     dos stories (templates/boutique/BoutiqueHome.tsx). */
  const topo =
    tema === "boutique"
      ? "Banner principal, tarja, stories e vídeos"
      : ehFamiliaVendor(tema)
        ? "Banner principal, tarja e stories"
        : "Cabeçalho, banner principal e tarja";

  return (
    <div className="flex h-full flex-col">
      {semTopo ? null : (
      <div className="px-4 pb-2 pt-4">
        <Link
          href="/dashboard/catalog"
          className="group flex items-center gap-3 rounded-xl border border-dashed border-[var(--ks-color-border-strong)] px-3 py-2.5 transition hover:border-[var(--ks-color-primary)]"
        >
          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]">
            <PanelTop size={16} />
          </span>
          <span className="min-w-0">
            <span className="block text-[12.5px] font-bold text-[var(--ks-color-text-primary)]">Topo da loja</span>
            <span className="block truncate text-[11px] text-[var(--ks-color-text-soft)]">{topo} · em Aparência</span>
          </span>
        </Link>
      </div>
      )}

      <DragDropContext onDragEnd={aoSoltar}>
        <Droppable droppableId="secoes-da-pagina" isDropDisabled={somenteLeitura}>
          {(fornecido) => (
            <ol ref={fornecido.innerRef} {...fornecido.droppableProps} className="flex-1 overflow-y-auto px-2 pb-3">
              {secoes.map((secao, indice) => {
                const escolhida = secao.chave === selecionada;
                const selos = selosDaExibicao(secao.config);
                const quantos = secao.id && cliques ? cliques.get(secao.id) ?? 0 : null;
                return (
                  <Draggable key={secao.chave} draggableId={secao.chave} index={indice} isDragDisabled={somenteLeitura}>
                    {(arrasto, estado) => (
                      <li
                        ref={arrasto.innerRef}
                        {...arrasto.draggableProps}
                        style={arrasto.draggableProps.style}
                        className={`group/linha relative mx-2 my-0.5 flex items-center gap-2.5 rounded-xl py-2 pl-1.5 pr-1.5 transition ${
                          escolhida
                            ? "bg-[var(--ks-brand-50)] ring-1 ring-[var(--ks-brand-200)]"
                            : estado.isDragging
                              ? "bg-[var(--ks-color-bg-elevated)] shadow-[var(--ks-shadow-overlay)]"
                              : "hover:bg-[var(--ks-color-bg-hover)]"
                        }`}
                      >
                        <span
                          {...arrasto.dragHandleProps}
                          className={`hidden h-7 w-5 shrink-0 cursor-grab items-center justify-center text-[var(--ks-n-300)] active:cursor-grabbing lg:flex ${somenteLeitura ? "invisible" : ""}`}
                          aria-label="Arrastar para mudar de lugar"
                        >
                          <GripVertical size={15} />
                        </span>
                        <button type="button" onClick={() => aoSelecionar(secao.chave)} className="flex min-w-0 flex-1 items-center gap-2.5 text-left">
                          <span className={secao.ativa ? "" : "opacity-40 grayscale"}>
                            <SeloDoModo modo={secao.modo} tamanho={30} />
                          </span>
                          <span className="min-w-0 flex-1">
                            <span
                              className={`block truncate text-[12.5px] font-bold ${
                                secao.ativa ? "text-[var(--ks-color-text-primary)]" : "text-[var(--ks-color-text-soft)] line-through decoration-[var(--ks-n-300)]"
                              }`}
                            >
                              {secao.title || NOME_DO_MODO[secao.modo]}
                            </span>
                            <span className="block truncate text-[11px] text-[var(--ks-color-text-soft)]">
                              {secao.ativa ? NOME_DO_MODO[secao.modo] : "Escondida"}
                              {secao.chave.startsWith("nova:") && !secao.chave.startsWith("nova:auto-") ? <span className="ml-1.5 font-bold text-[var(--ks-color-primary)]">· nova</span> : null}
                            </span>
                            {selos.length || (quantos !== null && secao.ativa) ? (
                              <span className="mt-1 flex flex-wrap items-center gap-1">
                                {quantos !== null && secao.ativa ? (
                                  <span
                                    title="Cliques em links e botões desta seção na loja, nos últimos 30 dias"
                                    className={`inline-flex items-center gap-1 rounded-full px-1.5 py-[1px] text-[10px] font-bold ${
                                      quantos > 0 ? "bg-[var(--ks-emerald-soft)] text-[var(--ks-color-status-success)]" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-soft)]"
                                    }`}
                                  >
                                    <MousePointerClick size={10} strokeWidth={2.6} />
                                    {quantos.toLocaleString("pt-BR")} {quantos === 1 ? "clique" : "cliques"}
                                  </span>
                                ) : null}
                                {selos.map((selo) => (
                                  <span key={selo} className="rounded-full bg-[#fff4e5] px-1.5 py-[1px] text-[10px] font-bold text-[#9a4b00]">
                                    {selo}
                                  </span>
                                ))}
                              </span>
                            ) : null}
                          </span>
                        </button>
                        {somenteLeitura ? null : (
                          <span className="flex shrink-0 items-center">
                            <span className="flex lg:hidden">
                              <button
                                type="button"
                                aria-label="Subir"
                                onClick={() => aoMover(secao.chave, -1)}
                                disabled={indice === 0}
                                className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)] disabled:opacity-30"
                              >
                                <ArrowUp size={15} />
                              </button>
                              <button
                                type="button"
                                aria-label="Descer"
                                onClick={() => aoMover(secao.chave, 1)}
                                disabled={indice === secoes.length - 1}
                                className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)] disabled:opacity-30"
                              >
                                <ArrowDown size={15} />
                              </button>
                            </span>
                            {!ehFamiliaVendor(tema) && secao.modo === "all_products" ? null : (
                              <button
                                type="button"
                                aria-label={secao.ativa ? "Esconder da loja" : "Mostrar na loja"}
                                title={secao.ativa ? "Esconder da loja" : "Mostrar na loja"}
                                onClick={() => aoAlternar(secao.chave)}
                                className={`flex h-8 w-8 items-center justify-center rounded-lg transition hover:text-[var(--ks-color-primary)] ${
                                  secao.ativa ? "text-[var(--ks-n-300)] opacity-100 lg:opacity-0 lg:group-hover/linha:opacity-100" : "text-[var(--ks-color-primary)]"
                                }`}
                              >
                                {secao.ativa ? <Eye size={15} /> : <EyeOff size={15} />}
                              </button>
                            )}
                          </span>
                        )}
                      </li>
                    )}
                  </Draggable>
                );
              })}
              {fornecido.placeholder}
              {somenteLeitura ? null : (
                <li className="mx-2 mt-2">
                  <button
                    type="button"
                    onClick={aoAdicionar}
                    className="flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-[var(--ks-brand-200)] px-3 py-3 text-[12.5px] font-bold text-[var(--ks-color-primary)] transition hover:border-[var(--ks-color-primary)] hover:bg-[var(--ks-brand-50)]"
                  >
                    <Plus size={16} /> Adicionar seção
                  </button>
                </li>
              )}
            </ol>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}