---
// A card linking to a GitHub repository with its star and fork counts, fetched
// at build time (no client JS). Pass `owner`/`repo`, or omit them to use the
// repo from blume.config. A `GITHUB_TOKEN` env var lifts the API rate limit.
// If the API is unreachable the card still renders, just without counts.
import { resolveIcon } from "../../theme/icons.ts";
import data from "blume:data";
import { GITHUB_MARK } from "../github-mark.ts";
import { fetchRepositoryInfo } from "./github-info.ts";

// Star/fork glyphs resolve from Lucide at build time; the `<svg>` wrappers below
// supply size and the shared `statIcon` class. (The GitHub octocat above is a
// brand mark, not a Lucide icon, so it stays as GITHUB_MARK.)
const starIcon = resolveIcon("star")?.body ?? "";
const forkIcon = resolveIcon("git-fork")?.body ?? "";

interface Props {
  owner?: string;
  repo?: string;
  token?: string;
}

// The resolved config exposes the repo as `repoUrl`, not `github`; parse the
// owner/repo back out so <GithubInfo /> can default to the configured repo.
const repoMatch = data.config.repoUrl?.match(
  /github\.com\/(?<owner>[^/]+)\/(?<repo>[^/]+)/u
);
const owner = Astro.props.owner ?? repoMatch?.groups?.owner;
const repo = Astro.props.repo ?? repoMatch?.groups?.repo;
const token = Astro.props.token ?? process.env.GITHUB_TOKEN;

const info =
  owner && repo ? await fetchRepositoryInfo({ owner, repo, token }) : null;

// Compact notation matches GitHub's own counts (e.g. 1.2k, 34.5k).
const numbers = new Intl.NumberFormat("en", {
  maximumFractionDigits: 1,
  notation: "compact",
});

const statIcon =
  "size-3.5 shrink-0 text-muted-foreground"; /* shared classes for stat icons */
---

{
  owner && repo && (
    <a
      class="not-prose my-6 flex flex-col gap-2 rounded-blume border border-border p-4 no-underline! transition-colors hover:border-foreground/30 hover:bg-muted/40"
      href={`https://github.com/${owner}/${repo}`}
      rel="noreferrer"
      target="_blank"
    >
      <span class="flex items-center gap-2 font-medium text-foreground text-sm">
        <svg
          aria-hidden="true"
          class="shrink-0 text-muted-foreground"
          fill="currentColor"
          height="16"
          set:html={GITHUB_MARK}
          viewBox="0 0 16 16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        />
        <span class="truncate">
          {owner}/{repo}
        </span>
      </span>

      {info?.description && (
        <span class="text-muted-foreground text-sm">{info.description}</span>
      )}

      {info && (
        <span class="flex items-center gap-4 text-muted-foreground text-xs">
          <span class="flex items-center gap-1.5">
            <svg
              aria-hidden="true"
              class={statIcon}
              fill="none"
              height="14"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="14"
              set:html={starIcon}
            />
            <span>{numbers.format(info.stars)}</span>
          </span>
          <span class="flex items-center gap-1.5">
            <svg
              aria-hidden="true"
              class={statIcon}
              fill="none"
              height="14"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="14"
              set:html={forkIcon}
            />
            <span>{numbers.format(info.forks)}</span>
          </span>
        </span>
      )}
    </a>
  )
}