"use client";

import { useRef, useState } from "react";
import { GRUPOS, TOTAL_DE_RECURSOS } from "../data/recursos";
import { ICONES } from "../icones";
import { gsap, useGSAP } from "../gsap";

/*
  Tudo o que vem dentro, sem virar artigo: um índice numerado das seis
  frentes de trabalho e, ao lado, só os recursos da frente escolhida, em
  lista corrida com divisória fina. No celular o índice vira uma faixa que
  rola de lado, e a pessoa lê um grupo de cada vez em vez de 47 linhas.
*/

export default function Inventario() {
  const raiz = useRef<HTMLElement | null>(null);
  const [ativo, setAtivo] = useState(0);
  const grupo = GRUPOS[ativo];
  const IconeDoGrupo = ICONES[grupo.icone];

  /* As linhas entram em cascata a cada troca. Quem pediu menos movimento vê
     a lista pronta. */
  useGSAP(
    () => {
      const escopo = raiz.current;
      if (!escopo) return;
      const mm = gsap.matchMedia();
      mm.add("(prefers-reduced-motion: no-preference)", () => {
        gsap.from(gsap.utils.toArray<HTMLElement>(".lp-explorador-itens > li", escopo), {
          autoAlpha: 0,
          y: 10,
          duration: 0.4,
          stagger: 0.035,
          ease: "power3.out",
          clearProps: "all",
        });
      });
      return () => mm.revert();
    },
    { scope: raiz, dependencies: [ativo] }
  );

  return (
    <section id="recursos" ref={raiz} className="lp-secao">
      <div className="lp-wrap">
        <div className="lp-inventario-cabeca" data-revela>
          <div>
            <p className="lp-rotulo">Recursos</p>
            <h2 className="lp-titulo lp-titulo--h2">Tudo o que vem dentro. Nada bloqueado.</h2>
          </div>
          <p className="lp-inventario-conta">
            <strong>{TOTAL_DE_RECURSOS}</strong>
            recursos, no mesmo plano
          </p>
        </div>

        <div className="lp-explorador">
          <div className="lp-explorador-abas" role="tablist" aria-label="Frentes do sistema">
            {GRUPOS.map((g, i) => (
              <button
                key={g.chave}
                type="button"
                role="tab"
                id={`aba-${g.chave}`}
                aria-selected={i === ativo}
                aria-controls={`painel-${g.chave}`}
                onClick={(evento) => {
                  setAtivo(i);
                  /* No celular a faixa rola de lado: a aba tocada vem para o
                     meio. Rola só a faixa, não a página. */
                  const botao = evento.currentTarget;
                  const faixa = botao.parentElement;
                  if (faixa && faixa.scrollWidth > faixa.clientWidth) {
                    faixa.scrollTo({ left: botao.offsetLeft - (faixa.clientWidth - botao.offsetWidth) / 2, behavior: "smooth" });
                  }
                }}
              >
                <span className="lp-explorador-numero">{String(i + 1).padStart(2, "0")}</span>
                <span>{g.nome}</span>
                <span className="lp-explorador-total" aria-label={`${g.itens.length} recursos`}>
                  {g.itens.length}
                </span>
              </button>
            ))}
          </div>

          <div className="lp-explorador-painel" role="tabpanel" id={`painel-${grupo.chave}`} aria-labelledby={`aba-${grupo.chave}`}>
            <div className="lp-explorador-cabeca">
              <h3>
                <IconeDoGrupo size={24} weight="duotone" aria-hidden="true" />
                {grupo.nome}
              </h3>
              <p className="lp-explorador-resumo">{grupo.resumo}</p>
            </div>

            <ul className="lp-explorador-itens" key={grupo.chave}>
              {grupo.itens.map((item) => {
                const Icone = ICONES[item.icone];
                return (
                  <li key={item.nome}>
                    <i aria-hidden="true">
                      <Icone size={24} weight="duotone" />
                    </i>
                    <strong>{item.nome}</strong>
                    <span>{item.detalhe}</span>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}