// 10x Newsletter - Page components

function HomePage({ navigate, accent, issues }) {
  const latest = issues[0];
  const past = issues.slice(1, 7);

  if (!latest) {
    return (
      <main className="nl-main">
        <p className="nl-empty">No issues published yet.</p>
      </main>
    );
  }

  return (
    <main className="nl-main nl-home-main">
      <section className="nl-hero">
        <div className="nl-hero-eyebrow">Weekly reading list</div>
        <h1 className="nl-hero-title">
          Read for the decade, not the day.
        </h1>
        <p className="nl-hero-sub">
          A weekly reading list of durable ideas on technology, business, and work.
        </p>
        <div className="nl-hero-links">
          <a href="#/archive" onClick={(e) => { e.preventDefault(); navigate("archive"); }}>Archive</a>
          <a href="/rss.xml" target="_blank" rel="noopener noreferrer">RSS</a>
        </div>
      </section>

      <hr className="nl-rule" />

      <section className="nl-issue nl-latest">
        <div className="nl-issue-banner">
          <span className="nl-issue-banner-label">Latest issue</span>
        </div>
        <IssueMasthead issue={latest} />
        <IssueBody issue={latest} showCloser={false} className="nl-issue-body-home" />
      </section>

      {past.length > 0 && (
        <>
          <hr className="nl-rule" />

          <section className="nl-past">
            <h2 className="nl-section-title">Past issues</h2>
            <ul className="nl-past-list">
              {past.map((iss) => (
                <li key={iss.number} className="nl-past-item">
                  <a
                    href={`#/issues/${iss.number}`}
                    onClick={(e) => { e.preventDefault(); navigate(`issues/${iss.number}`); }}
                    className="nl-past-link"
                  >
                    <div className="nl-past-meta">
                      <span className="nl-past-num">Issue {String(iss.number).padStart(2, "0")}</span>
                      <span className="nl-issue-sep">&middot;</span>
                      <time dateTime={iss.iso}>{iss.date}</time>
                      <span className="nl-issue-sep">&middot;</span>
                      <span>{iss.items.length} {iss.items.length === 1 ? "link" : "links"}</span>
                    </div>
                    <ul className="nl-past-titles">
                      {iss.items.slice(0, 3).map((it, i) => (
                        <li key={i} className="nl-past-title-item">
                          <span className="nl-past-bullet">{String(i + 1).padStart(2, "0")}</span>
                          <span>{it.title}</span>
                        </li>
                      ))}
                    </ul>
                  </a>
                </li>
              ))}
            </ul>
            <a
              className="nl-more"
              href="#/archive"
              onClick={(e) => { e.preventDefault(); navigate("archive"); }}
            >
              View all issues &rarr;
            </a>
          </section>
        </>
      )}
    </main>
  );
}

function IssuePage({ number, navigate, accent, issues }) {
  const idx = issues.findIndex((i) => i.number === Number(number));
  if (idx === -1) {
    return (
      <main className="nl-main">
        <p className="nl-empty">Issue not found. <a href="#/archive" onClick={(e) => { e.preventDefault(); navigate("archive"); }}>Back to archive</a>.</p>
      </main>
    );
  }
  const issue = issues[idx];
  const next = issues[idx - 1];
  const prev = issues[idx + 1];

  return (
    <main className="nl-main nl-issue-main">
      <a
        className="nl-back"
        href="#/archive"
        onClick={(e) => { e.preventDefault(); navigate("archive"); }}
      >
        &larr; Archive
      </a>
      <section className="nl-issue">
        <IssueMasthead issue={issue} />
        <IssueBody issue={issue} />
      </section>

      <nav className="nl-pager">
        <div className="nl-pager-side">
          {prev ? (
            <a
              href={`#/issues/${prev.number}`}
              onClick={(e) => { e.preventDefault(); navigate(`issues/${prev.number}`); }}
              className="nl-pager-link"
            >
              <span className="nl-pager-dir">&larr; Older</span>
              <span className="nl-pager-title">Issue {String(prev.number).padStart(2, "0")} &middot; {prev.date}</span>
            </a>
          ) : <span />}
        </div>
        <div className="nl-pager-side nl-pager-right">
          {next ? (
            <a
              href={`#/issues/${next.number}`}
              onClick={(e) => { e.preventDefault(); navigate(`issues/${next.number}`); }}
              className="nl-pager-link"
            >
              <span className="nl-pager-dir">Newer &rarr;</span>
              <span className="nl-pager-title">Issue {String(next.number).padStart(2, "0")} &middot; {next.date}</span>
            </a>
          ) : <span />}
        </div>
      </nav>
    </main>
  );
}

function ArchivePage({ navigate, accent, issues }) {
  const [query, setQuery] = React.useState("");

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    return issues
      .map((iss) => {
        const items = iss.items.filter((it) => {
          const haystack = [
            it.title,
            it.source,
            it.note,
          ].filter(Boolean).join(" ").toLowerCase();
          return !q || haystack.includes(q);
        });
        return { ...iss, items };
      })
      .filter((iss) => iss.items.length > 0);
  }, [query, issues]);

  const totalPicks = issues.reduce((n, i) => n + i.items.length, 0);

  return (
    <main className="nl-main nl-archive-main">
      <header className="nl-page-head">
        <h1 className="nl-page-title">Archive</h1>
        <p className="nl-page-sub">
          {issues.length} {issues.length === 1 ? "issue" : "issues"} &middot; {totalPicks} {totalPicks === 1 ? "link" : "links"} &middot; Updated weekly
        </p>
      </header>

      <div className="nl-filter">
        <input
          className="nl-filter-search"
          placeholder="Search titles, authors, notes..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </div>

      <ol className="nl-archive">
        {filtered.length === 0 && (
          <li className="nl-empty">No issues match that search.</li>
        )}
        {filtered.map((iss) => (
          <li key={iss.number} className="nl-archive-row">
            <a
              href={`#/issues/${iss.number}`}
              onClick={(e) => { e.preventDefault(); navigate(`issues/${iss.number}`); }}
              className="nl-archive-link"
            >
              <div className="nl-archive-meta">
                <span className="nl-archive-num">Issue {String(iss.number).padStart(2, "0")}</span>
                <span className="nl-issue-sep">&middot;</span>
                <time dateTime={iss.iso}>{iss.date}</time>
                <span className="nl-issue-sep">&middot;</span>
                <span>{iss.items.length} {iss.items.length === 1 ? "link" : "links"}</span>
              </div>
              <ul className="nl-archive-titles">
                {iss.items.map((it, i) => (
                  <li key={i} className="nl-archive-article">
                    <span className="nl-archive-index">{String(i + 1).padStart(2, "0")}</span>
                    <span className="nl-archive-article-body">
                      <span className="nl-archive-title">{it.title}</span>
                      <span className="nl-archive-source">
                        {it.source}
                        {it.time ? ` · ${it.time} read` : ""}
                      </span>
                      {it.note && (
                        <span className="nl-archive-note">{it.note}</span>
                      )}
                    </span>
                  </li>
                ))}
              </ul>
            </a>
          </li>
        ))}
      </ol>
    </main>
  );
}

function AboutPage({ accent }) {
  return (
    <main className="nl-main nl-main-narrow">
      <header className="nl-page-head">
        <h1 className="nl-page-title">About</h1>
      </header>

      <div className="nl-prose">
        <p>
          <strong>10&times; Newsletter</strong> is a weekly reading list of durable ideas
          on technology, business, and work.
        </p>
      </div>
    </main>
  );
}

window.HomePage = HomePage;
window.IssuePage = IssuePage;
window.ArchivePage = ArchivePage;
window.AboutPage = AboutPage;