import { getCodeActivity, type ActivitySeries } from "../code-activity.ts";
import { getProfile } from "../data.ts";
import { PageNav } from "./page-nav.tsx";

function ActivityUnavailable({ source }: { source: string }) {
  return (
    <p class="code-activity-unavailable">
      {source} activity is temporarily unavailable.
    </p>
  );
}

function CalendarGraph({
  activity,
  source,
  noun,
}: {
  activity: ActivitySeries;
  source: string;
  noun: string;
}) {
  const firstDay = activity.days[0]?.date;
  const leadingDays = firstDay
    ? new Date(`${firstDay}T00:00:00Z`).getUTCDay()
    : 0;

  return (
    <div class="code-graph-scroll">
      <div
        class="code-calendar-graph"
        role="img"
        aria-label={`${activity.total.toLocaleString("en-US")} ${source} ${noun}s ${activity.period}`}
      >
        {Array.from({ length: leadingDays }, (_, index) => (
          <span class="code-activity-day code-activity-day-empty" aria-hidden="true" key={`empty-${index}`} />
        ))}
        {activity.days.map((day) => (
          <span
            class={`code-activity-day activity-level-${day.level}`}
            title={`${day.date}: ${day.count} ${noun}${day.count === 1 ? "" : "s"}`}
            aria-hidden="true"
            key={day.date}
          />
        ))}
      </div>
    </div>
  );
}

export async function CodeActivity() {
  const [profile, activity] = await Promise.all([
    getProfile(),
    getCodeActivity(),
  ]);

  return (
    <div class="code-page">
      <PageNav profile={profile} active="code" />

      <header class="code-page-header">
        <h1 class="page-title">Code</h1>
        <p class="page-subtitle">
          Public work across{" "}
          <a href="https://tangled.org/cameron.stream" target="_blank" rel="noopener">
            Tangled
          </a>{" "}
          and{" "}
          <a href="https://github.com/just-cameron" target="_blank" rel="noopener">
            GitHub
          </a>
          .
        </p>
      </header>

      <main class="code-activity-list">
        <section class="code-activity-section" aria-labelledby="tangled-activity-title">
          <div class="code-activity-heading">
            <div>
              <h2 id="tangled-activity-title">
                <a href="https://tangled.org/cameron.stream" target="_blank" rel="noopener">
                  Tangled <span aria-hidden="true">↗</span>
                </a>
              </h2>
              <p>cameron.stream</p>
            </div>
            {activity.tangled && (
              <p class="code-activity-total">
                <strong>{activity.tangled.total.toLocaleString("en-US")}</strong>
                {" "}commits {activity.tangled.period}
              </p>
            )}
          </div>
          {activity.tangled ? (
            <CalendarGraph activity={activity.tangled} source="Tangled" noun="commit" />
          ) : (
            <ActivityUnavailable source="Tangled" />
          )}
          {activity.tangledPinned.length > 0 && (
            <div class="code-pinned-repositories">
              <div class="code-pinned-heading">
                <h3>Pinned repositories</h3>
                <p>Selected on Tangled</p>
              </div>
              <div class="code-pinned-list">
                {activity.tangledPinned.map((repository) => (
                  <a
                    class="code-pinned-repository"
                    href={repository.url}
                    target="_blank"
                    rel="noopener"
                    key={repository.repoDid}
                  >
                    <span class="code-pinned-repository-name">
                      {repository.name} <span aria-hidden="true">↗</span>
                    </span>
                    {repository.description && <span>{repository.description}</span>}
                  </a>
                ))}
              </div>
            </div>
          )}
          {activity.tangledRecent.length > 0 && (
            <div class="code-recent-commits">
              <div class="code-recent-heading">
                <h3>Recent commits in pinned repositories</h3>
                <p>Public Tangled activity</p>
              </div>
              <ul class="code-recent-list">
                {activity.tangledRecent.map((commit) => (
                  <li class="code-recent-commit" key={commit.url}>
                    <a class="code-recent-subject" href={commit.url} title={commit.subject} target="_blank" rel="noopener">
                      {commit.subject}
                    </a>
                    <span class="code-recent-repository" title={commit.repository}>{commit.repository.split("/").at(-1)}</span>
                    <time class="code-recent-time" dateTime={commit.time}>
                      {new Intl.DateTimeFormat("en", { month: "short", day: "numeric" }).format(new Date(commit.time))}
                    </time>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </section>

        <section class="code-activity-section" aria-labelledby="github-activity-title">
          <div class="code-activity-heading">
            <div>
              <h2 id="github-activity-title">
                <a href="https://github.com/just-cameron" target="_blank" rel="noopener">
                  GitHub <span aria-hidden="true">↗</span>
                </a>
              </h2>
              <p>@just-cameron</p>
            </div>
            {activity.github && (
              <p class="code-activity-total">
                <strong>{activity.github.total.toLocaleString("en-US")}</strong>
                {" "}contributions {activity.github.period}
              </p>
            )}
          </div>
          {activity.github ? (
            <CalendarGraph activity={activity.github} source="GitHub" noun="contribution" />
          ) : (
            <ActivityUnavailable source="GitHub" />
          )}
        </section>
      </main>
    </div>
  );
}