"use client";

import { type ReactNode, useEffect, useState } from "react";

const TARGETS = new Set(["#experience", "#skills"]);

/**
 * Skills e Experiência ficavam numa gaveta sempre fechada e sem link no menu.
 * Agora abre sozinha em telas largas (onde há espaço) e quando um link aponta para #experience ou #skills;
 * no celular continua recolhida para a página não crescer.
 */
export default function ExperienceDisclosure({
  children,
}: {
  children: ReactNode;
}) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const reveal = (hash: string) => {
      if (!TARGETS.has(hash)) return;
      setOpen(true);
      // espera o React abrir a gaveta para o alvo existir no layout
      requestAnimationFrame(() =>
        document
          .getElementById(hash.slice(1))
          ?.scrollIntoView({ behavior: "instant", block: "start" }),
      );
    };
    if (window.matchMedia("(min-width: 1024px)").matches) setOpen(true);
    else if (TARGETS.has(window.location.hash)) setOpen(true);

    const onClick = (event: MouseEvent) => {
      const link =
        event.target instanceof Element
          ? event.target.closest("a[href*='#']")
          : null;
      if (!(link instanceof HTMLAnchorElement)) return;
      const url = new URL(link.href);
      if (url.pathname === window.location.pathname) reveal(url.hash);
    };
    const onHashChange = () => reveal(window.location.hash);
    document.addEventListener("click", onClick);
    window.addEventListener("hashchange", onHashChange);
    return () => {
      document.removeEventListener("click", onClick);
      window.removeEventListener("hashchange", onHashChange);
    };
  }, []);

  return (
    <details
      open={open}
      onToggle={(event) => setOpen(event.currentTarget.open)}
      className="ds-section !pt-0"
    >
      <summary className="ds-section-shell cursor-pointer py-sp-5 text-lg font-semibold">
        Experiência e tecnologias por trás das entregas
      </summary>
      {children}
    </details>
  );
}