"use client";
import type { LucideIcon } from "lucide-react";
import { useEffect, useState, type ReactNode, type TextareaHTMLAttributes } from "react";
import { motion, useReducedMotion } from "framer-motion";
import { Switch } from "@/components/ui/switch";
/**
* A folha de ajustes: o padrão de tela de configuração do painel.
*
* Nasceu na aba "Regras da loja" (08/10/2026), depois que o Natan recusou a
* versão em caixas: "muito seco, boxes engessados". Em vez de um cartão por
* regra e uma grade de caixas por opção, uma folha corrida: as seções
* separadas por um fio, cada ajuste numa linha com o nome e a explicação à
* esquerda e o controle à direita, as opções como rádio em lista, e um índice
* fixo ao lado que diz, de relance, o que está escolhido em cada parte e
* marca a parte em que a pessoa está.
*
* Só desenho: quem usa continua dono do estado e do salvar. Serve para
* qualquer tela de ajustes (Personalização, Logística, Configurações).
*/
export type ItemDoIndice = {
id: string;
titulo: string;
/** O que está escolhido nessa parte, numa frase curta. */
resumo: string;
Icone: LucideIcon;
/** Diferente do padrão: ganha um ponto violeta no índice. */
mexido?: boolean;
};
/** A régua quase invisível entre as linhas de uma seção (também para listas). */
export const FIO_DA_LINHA = "border-t border-[var(--ks-n-100)] first:border-t-0";
const COLUNAS_DA_LINHA = "md:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]";
export function FolhaDeAjustes({
indice,
rotuloDoIndice = "Nesta tela",
children,
}: {
indice?: ItemDoIndice[];
rotuloDoIndice?: string;
children: ReactNode;
}) {
const temIndice = Boolean(indice?.length);
return (
{temIndice ? : null}
{children}
);
}
/*
A seção "atual" é a primeira (na ordem da folha) que cruza a faixa de
leitura, entre 15% e 40% da altura da janela. Observar as seções em vez de
ouvir o scroll funciona igual com a janela ou um container rolando, e não
roda a cada pixel. Seções que entram depois (um bloco que carrega sozinho)
são apanhadas numa segunda passada.
*/
function useSecaoAtual(ids: string[]) {
const [atual, setAtual] = useState(ids[0] ?? null);
const chave = ids.join("|");
useEffect(() => {
if (typeof IntersectionObserver === "undefined") return;
const lista = chave ? chave.split("|") : [];
const visiveis = new Set();
const observador = new IntersectionObserver(
(entradas) => {
for (const entrada of entradas) {
if (entrada.isIntersecting) visiveis.add(entrada.target.id);
else visiveis.delete(entrada.target.id);
}
const primeira = lista.find((id) => visiveis.has(id));
if (primeira) setAtual(primeira);
},
{ rootMargin: "-15% 0px -60% 0px", threshold: 0 }
);
const observadas = new Set();
const observar = () => {
for (const id of lista) {
if (observadas.has(id)) continue;
const alvo = document.getElementById(id);
if (!alvo) continue;
observador.observe(alvo);
observadas.add(id);
}
};
observar();
const segundaPassada = window.setTimeout(observar, 1500);
return () => {
window.clearTimeout(segundaPassada);
observador.disconnect();
};
}, [chave]);
return [atual, setAtual] as const;
}
/* No computador o índice fica preso ao lado, com o resumo de cada parte; no
celular vira uma fila de atalhos que rola de lado, só com o nome. */
function IndiceDeAjustes({ itens, rotulo }: { itens: ItemDoIndice[]; rotulo: string }) {
const [atual, setAtual] = useSecaoAtual(itens.map((item) => item.id));
const irPara = (id: string) => {
setAtual(id);
const alvo = document.getElementById(id);
if (!alvo) return;
alvo.scrollIntoView({ behavior: "smooth", block: "start" });
};
return (
);
}
/**
* Uma seção da folha: selo violeta, título e uma frase; à direita, quando
* precisa, uma ação (um botão, uma chave). As linhas vêm dentro.
*/
export function SecaoDeAjustes({
id,
Icone,
titulo,
texto,
acao,
children,
}: {
id: string;
Icone: LucideIcon;
titulo: ReactNode;
texto?: ReactNode;
acao?: ReactNode;
children: ReactNode;
}) {
return (
{titulo}
{texto ?
{texto}
: null}
{acao ?
{acao}
: null}
{children}
);
}
/**
* Um ajuste: nome e explicação à esquerda, o controle à direita. `largo`
* põe o nome em cima e o controle na largura toda (grades de cores, prévias).
*/
export function LinhaDeAjuste({
titulo,
texto,
htmlFor,
largo = false,
children,
}: {
titulo: string;
texto?: ReactNode;
/** O campo que o nome rotula (vira