import { Suspense } from "hono/jsx/streaming";
import { getCodeActivity, type ActivitySeries, type CodeActivityData } 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>
  );
}

// Layout-stable placeholder for a cold upstream pass. It reserves the same
// rows the populated sections occupy so the page does not reflow when the
// streamed content replaces it. It renders as inert text without JS.
function ActivitySkeleton({ label }: { label: string }) {
  return (
    <div class="code-activity-skeleton" role="status" aria-label={`Loading ${label} activity`}>
      <div class="code-skeleton-graph" aria-hidden="true">
        {Array.from({ length: 28 }, (_, index) => (
          <span class="code-skeleton-day" key={index} />
        ))}
      </div>
      <p class="code-skeleton-note" aria-hidden="true">Loading…</p>
    </div>
  );
}

function TangledSection({ activity }: { activity: CodeActivityData }) {
  return (
    <>
      {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>
      )}
    </>
  );
}

async function TangledActivity() {
  const activity = await getCodeActivity();
  return (
    <>
      {activity.tangled && (
        <p class="code-activity-total code-activity-total-streamed">
          <strong>{activity.tangled.total.toLocaleString("en-US")}</strong>
          {" "}commits {activity.tangled.period}
        </p>
      )}
      <TangledSection activity={activity} />
    </>
  );
}

async function GithubActivity() {
  const activity = await getCodeActivity();
  return (
    <>
      {activity.github && (
        <p class="code-activity-total code-activity-total-streamed">
          <strong>{activity.github.total.toLocaleString("en-US")}</strong>
          {" "}contributions {activity.github.period}
        </p>
      )}
      {activity.github
        ? <CalendarGraph activity={activity.github} source="GitHub" noun="contribution" />
        : <ActivityUnavailable source="GitHub" />}
    </>
  );
}

async function CodeNavigation() {
  const profile = await getProfile();
  return <PageNav profile={profile} active="code" />;
}

export function CodeActivity() {
  return (
    <div class="code-page">
      <Suspense fallback={<PageNav profile={null} active="code" />}>
        <CodeNavigation />
      </Suspense>

      <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">
        <noscript>
          <p>Live activity requires JavaScript. Use the Tangled and GitHub links to browse the source profiles.</p>
          <style>{`.code-activity-skeleton { display: none; }`}</style>
        </noscript>
        <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>
          </div>
          <Suspense fallback={<ActivitySkeleton label="Tangled" />}>
            <TangledActivity />
          </Suspense>
        </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>
          </div>
          <Suspense fallback={<ActivitySkeleton label="GitHub" />}>
            <GithubActivity />
          </Suspense>
        </section>
      </main>
    </div>
  );
}