Acordeão

"use client";

import { useId, useState, type ReactNode } from "react";
import { useSemMovimento } from "@/library/revelar/Movimento";

export type ItemDoAcordeao = {
  titulo: ReactNode;
  conteudo: ReactNode;
  /** Linha menor abaixo do título (resumo, motivo, data...). */
  subtitulo?: ReactNode;
  /**
   * Lado direito do cabeçalho: valores, selos ou botões. Clicar em texto aqui
   * também abre o item; links e botões dentro dele continuam funcionando.
   */
  extra?: ReactNode;
  desativado?: boolean;
};

/**
 * Lista de itens que abrem e fecham (um de cada vez ou vários), com altura
 * animada e o padrão de acessibilidade de acordeão: título num botão dentro de um
 * heading, aria-expanded e aria-controls. Fechado, o conteúdo fica inerte (fora do
 * Tab e dos leitores de tela). Com "reduzir movimento", abre sem animação.
 */
export function Acordeao({
  itens,
  modo = "varios",
  abertosIniciais = [],
  aparencia = "cartoes",
  nivelDoTitulo = 3,
}: {
  itens: ItemDoAcordeao[];
  /** "um": abrir um item fecha o que estava aberto. */
  modo?: "um" | "varios";
  /** Índices dos itens que começam abertos (no modo "um", vale só o primeiro). */
  abertosIniciais?: number[];
  /** "cartoes": cada item num cartão arredondado (segue o raio do tema); "linhas": itens separados por linhas finas. */
  aparencia?: "linhas" | "cartoes";
  /** Nível do heading que envolve cada título, para encaixar na hierarquia da página. */
  nivelDoTitulo?: 2 | 3 | 4 | 5 | 6;
}) {
  const id = useId();
  const semMovimento = useSemMovimento();
  const [abertos, setAbertos] = useState<number[]>(() =>
    modo === "um" ? abertosIniciais.slice(0, 1) : abertosIniciais,
  );
  const Titulo = `h${nivelDoTitulo}` as const;
  const cartoes = aparencia === "cartoes";

  const alternar = (indice: number) =>
    setAbertos((atual) => {
      if (atual.includes(indice)) return atual.filter((i) => i !== indice);
      return modo === "um" ? [indice] : [...atual, indice];
    });

  return (
    <div className={cartoes ? "flex w-full flex-col gap-2" : "w-full divide-y divide-rule border-y border-rule"}>
      {itens.map((item, indice) => {
        const aberto = abertos.includes(indice);
        const idBotao = `${id}-botao-${indice}`;
        const idPainel = `${id}-painel-${indice}`;
        return (
          <div
            key={indice}
            // O foco aparece no cartão inteiro (o botão cobre a linha toda); o aberto ganha a cor de destaque na borda
            className={
              cartoes
                ? `overflow-hidden rounded-2xl border bg-page outline-accent transition-colors has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 ${
                    aberto ? "border-accent/40 bg-surface/40" : "border-rule"
                  }`
                : ""
            }
          >
            {/* O botão cobre a linha inteira (after:inset-0); o extra fica por cima só nos elementos clicáveis */}
            <div
              className={`relative flex items-center gap-3 transition-colors ${cartoes ? "px-4 py-4" : "px-2 py-3"} ${
                cartoes ? "hover:bg-surface/60" : aberto ? "bg-surface" : "hover:bg-surface/60"
              }`}
            >
              <Titulo className="min-w-0 flex-1 text-base font-normal">
                <button
                  id={idBotao}
                  type="button"
                  aria-expanded={aberto}
                  aria-controls={idPainel}
                  disabled={item.desativado}
                  onClick={() => alternar(indice)}
                  className={`flex w-full cursor-pointer items-center gap-3 rounded-sm text-left outline-accent after:absolute after:inset-0 after:content-[''] disabled:cursor-not-allowed disabled:opacity-50 ${
                    cartoes ? "focus-visible:outline-none" : "focus-visible:outline-2 focus-visible:outline-offset-2"
                  }`}
                >
                  {/* Nos cartões a seta fica num círculo, que muda de cor ao abrir */}
                  <span
                    aria-hidden="true"
                    className={`grid shrink-0 place-items-center ${
                      cartoes
                        ? `size-8 rounded-[max(var(--radius-sm),calc(var(--radius-2xl)_-_var(--spacing)*4))] transition-colors ${aberto ? "bg-accent/15 text-accent" : "bg-surface text-muted"}`
                        : "size-4 text-muted"
                    }`}
                  >
                    <svg
                      viewBox="0 0 24 24"
                      className={`size-4 ${semMovimento ? "" : "transition-transform duration-200"} ${aberto ? "rotate-90" : ""}`}
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="m9 6 6 6-6 6" />
                    </svg>
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block font-semibold text-ink">{item.titulo}</span>
                    {item.subtitulo && <span className="mt-0.5 block text-sm text-ink-2">{item.subtitulo}</span>}
                  </span>
                </button>
              </Titulo>
              {item.extra && (
                <div className="pointer-events-none relative flex shrink-0 items-center gap-2 text-sm text-ink-2 [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_label]:pointer-events-auto [&_select]:pointer-events-auto">
                  {item.extra}
                </div>
              )}
            </div>
            {/* Altura animada sem medir: a linha da grade vai de 0fr a 1fr */}
            <div
              id={idPainel}
              role="region"
              aria-labelledby={idBotao}
              inert={!aberto}
              className={`grid ${semMovimento ? "" : "transition-[grid-template-rows] duration-300 ease-out"} ${
                aberto ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
              }`}
            >
              <div className="min-h-0 overflow-hidden">
                <div className={`text-sm text-ink ${cartoes ? "border-t border-rule px-4 py-4 pl-[4.25rem]" : "bg-surface pt-1 pr-2 pb-4 pl-9"}`}>
                  {item.conteudo}
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

import { defineStories } from "@/registry/stories";
import { Acordeao, type ItemDoAcordeao } from "./Acordeao";

const SELO = {
  pago: "bg-success/15 text-success",
  pendente: "bg-warning/15 text-warning",
  atrasado: "bg-critical/10 text-critical",
} as const;

function Selo({ tipo, children }: { tipo: keyof typeof SELO; children: string }) {
  return <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${SELO[tipo]}`}>{children}</span>;
}

const PEDIDOS: ItemDoAcordeao[] = [
  {
    titulo: "Pedido #1042 · Café Aurora",
    subtitulo: "12 itens · entregue em 14/09",
    extra: (
      <>
        <span className="hidden tabular-nums sm:inline">R$ 1.284,00</span>
        <Selo tipo="pago">Pago</Selo>
      </>
    ),
    conteudo: (
      <ul className="flex flex-col gap-1.5">
        <li>6 × Café especial 250 g — R$ 534,00</li>
        <li>4 × Filtro de papel (100 un.) — R$ 36,00</li>
        <li>2 × Prensa francesa — R$ 714,00</li>
      </ul>
    ),
  },
  {
    titulo: "Pedido #1043 · Padaria Ponto Doce",
    subtitulo: "Aguardando o comprovante",
    extra: (
      <>
        <span className="hidden tabular-nums sm:inline">R$ 486,50</span>
        <Selo tipo="pendente">Pendente</Selo>
      </>
    ),
    conteudo: <p>Boleto emitido em 10/09, vence em 20/09. O cliente já foi lembrado uma vez.</p>,
  },
  {
    titulo: "Pedido #1044 · Mercado Bom Preço",
    subtitulo: "Vencido há 5 dias",
    extra: (
      <>
        <span className="hidden tabular-nums sm:inline">R$ 2.910,00</span>
        <Selo tipo="atrasado">Atrasado</Selo>
      </>
    ),
    conteudo: <p>Sem resposta aos dois últimos contatos. Próximo passo: ligar para o financeiro.</p>,
  },
];

// Botão no lado direito do cartão (rounded-2xl, a 4 unidades da borda): o raio acompanha o do cartão
const BOTAO =
  "inline-flex min-h-9 cursor-pointer items-center rounded-[max(var(--radius-sm),calc(var(--radius-2xl)_-_var(--spacing)*4))] border border-rule bg-page px-3 text-xs font-medium text-ink outline-accent hover:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2";

const VERSOES: ItemDoAcordeao[] = [
  {
    titulo: "21/10/2026, 09:42",
    subtitulo: "por Marina Lopes · ajuste do frete",
    extra: (
      <button type="button" className={BOTAO}>
        Restaurar
      </button>
    ),
    conteudo: <p>Frete por região: Sul passa de 8% para 9,5% do subtotal.</p>,
  },
  {
    titulo: "02/10/2026, 17:15",
    subtitulo: "por Rafael Dias",
    extra: (
      <button type="button" className={BOTAO}>
        Restaurar
      </button>
    ),
    conteudo: <p>Desconto progressivo a partir de 50 unidades.</p>,
  },
  {
    titulo: "18/09/2026, 11:03",
    subtitulo: "por Marina Lopes · versão inicial",
    conteudo: <p>Primeira versão da tabela de preços.</p>,
    desativado: true,
  },
];

const PERGUNTAS: ItemDoAcordeao[] = [
  { titulo: "Qual o prazo de entrega?", conteudo: <p>De 2 a 5 dias úteis nas capitais e até 10 dias no interior.</p> },
  { titulo: "Posso trocar um produto?", conteudo: <p>Sim, em até 30 dias, com a embalagem original.</p> },
  { titulo: "Quais as formas de pagamento?", conteudo: <p>Pix, boleto e cartão em até 6 vezes sem juros.</p> },
];

export default defineStories({
  args: { modo: "varios", aparencia: "cartoes", primeiroAberto: true },
  controls: {
    modo: { type: "select", options: ["um", "varios"] },
    aparencia: { type: "select", options: ["cartoes", "linhas"] },
    primeiroAberto: { type: "boolean", label: "primeiro item aberto" },
  },
  render: (a) => (
    <div className="w-full max-w-2xl">
      <Acordeao
        key={`${a.modo}-${a.primeiroAberto}`}
        itens={PEDIDOS}
        modo={a.modo as "um" | "varios"}
        aparencia={a.aparencia as "linhas" | "cartoes"}
        abertosIniciais={a.primeiroAberto ? [0] : []}
      />
    </div>
  ),
  stories: [
    { name: "Cartões com valores" },
    { name: "Linhas", args: { aparencia: "linhas" } },
    {
      name: "Histórico com ações",
      render: () => (
        <div className="w-full max-w-2xl">
          <Acordeao itens={VERSOES} modo="um" />
        </div>
      ),
    },
    {
      name: "Perguntas frequentes (um por vez)",
      render: () => (
        <div className="w-full max-w-2xl">
          <Acordeao itens={PERGUNTAS} modo="um" abertosIniciais={[0]} nivelDoTitulo={2} aparencia="linhas" />
        </div>
      ),
    },
  ],
});