const { BrandMark, MonoLabel, SectionHead, Atmosphere } = window.MultitabsDesignSystem_8f59a9;

const PAGE = { width: "100%", maxWidth: "var(--page-max)", margin: "0 auto", padding: "0 24px" };

function Nav() {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, background: "rgba(10,11,15,0.82)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display: "flex", alignItems: "center", gap: 20, minHeight: 64, paddingTop: 10, paddingBottom: 10 }}>
        <BrandMark size={28} fontSize="var(--fs-15)" />
        <span style={{ flex: 1 }} />
        <a href="/" style={{ fontSize: "var(--fs-13)", fontWeight: 600, color: "var(--ink-2)" }}>Voltar pro site</a>
      </div>
    </header>
  );
}

function VersionCard({ entry }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, padding: "var(--sp-11)", borderRadius: "var(--r-8)", background: "var(--bg-2)", border: "1px solid var(--line-1)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
        <span style={{ fontSize: "var(--fs-20)", fontWeight: 800, color: "var(--ink-1)" }}>v{entry.version}</span>
        <MonoLabel size="var(--fs-11)">{entry.date}</MonoLabel>
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
        {entry.items.map((item) => (
          <li key={item} style={{ display: "flex", gap: 9, fontSize: "var(--fs-13-5)", lineHeight: "var(--lh-body)", color: "var(--ink-2)" }}>
            <span style={{ color: "var(--accent)", flex: "0 0 auto" }}>✓</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

function Changelog() {
  const [entries, setEntries] = React.useState(null);

  React.useEffect(() => {
    fetch("/changelog.json")
      .then((r) => r.json())
      .then(setEntries)
      .catch(() => setEntries([]));
  }, []);

  return (
    <div style={{ background: "var(--bg-0)", minHeight: "100vh" }}>
      <Nav />
      <section style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line-1)" }}>
        <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}><Atmosphere bloom={false} /></div>
        <div style={{ ...PAGE, position: "relative", padding: "56px 0 40px" }}>
          <SectionHead eyebrow="Novidades" title="O que mudou no Multitabs" lead="Tudo que a gente lança fica registrado aqui, versão por versão." />
        </div>
      </section>
      <section style={{ padding: "40px 0 80px" }}>
        <div style={{ ...PAGE, display: "flex", flexDirection: "column", gap: 20, maxWidth: 720 }}>
          {entries === null && <MonoLabel tone="body" caps={false} size="var(--fs-13)">Carregando...</MonoLabel>}
          {entries && entries.length === 0 && <MonoLabel tone="body" caps={false} size="var(--fs-13)">Nenhuma novidade publicada ainda.</MonoLabel>}
          {entries && entries.map((entry) => <VersionCard key={entry.version} entry={entry} />)}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Changelog });