// writing.jsx — V2 writing archive in the minimal ink system.

const { useEffect } = React;

function TopBar() {
  return (
    <header className="topbar">
      <a href="index.html" className="topbar__mark">danbarrettofficial.com</a>
      <ul className="topbar__nav">
        <li><a href="index.html#now">Now</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="index.html#shows">Shows</a></li>
        <li><a href="writing.html" className="is-current">Writing</a></li>
      </ul>
    </header>
  );
}

function PageHead() {
  return (
    <section className="head" id="top">
      <div className="page-kicker">Section · Writing</div>
      <h1 className="head__name">
        Here are some <em className="head__name-tail">things I&apos;ve written.</em>
      </h1>
      <div className="head__bio">
        {window.NOTES_DATA.intro.map((line) => (
          <p key={line}>{line}</p>
        ))}
      </div>
    </section>
  );
}

function WritingArchive() {
  const posts = window.NOTES_DATA.posts;
  const byYear = posts.reduce((acc, post) => {
    (acc[post.year] = acc[post.year] || []).push(post);
    return acc;
  }, {});
  const years = Object.keys(byYear).sort().reverse();
  const range = years.length ? `${years[years.length - 1]} — ${years[0]}` : "";

  return (
    <section className="sect" id="notes">
      <div className="sect__head">
        <span>Archive</span>
        <span className="arrow">›</span>
        <span className="more">{posts.length} entries · {range}</span>
      </div>
      <div className="writing-years">
        {years.map((year) => (
          <section key={year} className="writing-year">
            <div className="writing-year__label">{year}</div>
            <ul className="list">
              {byYear[year].map((post) => (
                <li key={post.slug} className="note note--archive">
                  <div className="note__date">{post.date}</div>
                  <div className="note__title">
                    <a href={`note.html#${post.slug}`}>{post.title}</a>
                  </div>
                  <div className="note__tag">{post.tag}</div>
                  <div className="note__time">{post.readtime}</div>
                </li>
              ))}
            </ul>
          </section>
        ))}
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <span>© Dan Barrett · 2005 — 2026</span>
      <ul className="foot__links">
        <li><a href="mailto:danielbarrett@gmail.com" className="ilink">Email</a></li>
        <li><span className="ilink">RSS</span></li>
      </ul>
    </footer>
  );
}

const WRITING_TWEAK_DEFAULTS = {
  "theme": "ink",
  "columnWidth": 620
};

function App() {
  const [t, setTweak] = useTweaks(WRITING_TWEAK_DEFAULTS);
  const showTweaks = new URLSearchParams(window.location.search).has("tweaks");

  useEffect(() => {
    document.documentElement.classList.toggle("theme-paper", t.theme === "paper");
    document.documentElement.style.setProperty("--col-w", `${t.columnWidth}px`);
  }, [t.theme, t.columnWidth]);

  return (
    <React.Fragment>
      <div className="page">
        <TopBar />
        <PageHead />
        <Subscribe />
        <WritingArchive />
        <Foot />
      </div>

      {showTweaks && <TweaksPanel title="Tweaks">
        <TweakSection label="Mood" />
        <TweakRadio  label="Theme"
                     value={t.theme}
                     options={["ink", "paper"]}
                     onChange={(v) => setTweak("theme", v)} />

        <TweakSection label="Layout" />
        <TweakSlider label="Column width"
                     value={t.columnWidth}
                     min={520} max={760} step={10} unit="px"
                     onChange={(v) => setTweak("columnWidth", v)} />
      </TweaksPanel>}
    </React.Fragment>
  );
}

Object.assign(window, { TopBar, PageHead, WritingArchive, Foot, App });