---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import BackToTop from "../../components/BackToTop.astro";
import hooksData from "../../../public/data/hooks.json";
import RawMarkdown from "../../components/pages/RawMarkdown.astro";
import type { HeaderItem } from "../../components/pages/Header.astro";
import DetailHeader from "../../components/pages/Header.astro";
import Breadcrumb from "../../components/pages/Breadcrumb.astro";
import Sidebar from "../../components/pages/Sidebar.astro";
import FileBrowser from "../../components/pages/FileBrowser.astro";
import { readResourceMarkdown, formatLastUpdated } from "../../lib/detail-page";

const GITHUB_BASE = "https://github.com/github/awesome-copilot/blob/main";
const GITHUB_TREE_BASE = "https://github.com/github/awesome-copilot/tree/main";

interface HookFile {
  name: string;
  path: string;
  size?: number;
}

interface HookItem extends HeaderItem {
  id: string;
  title: string;
  description?: string;
  path: string;
  readmeFile: string;
  readmeFileName?: string;
  files: HookFile[];
  hooks: string[];
  tags: string[];
  assets: string[];
  lastUpdated?: string | null;
}

export function getStaticPaths() {
  return (hooksData.items as HookItem[]).map((item) => ({
    params: { id: item.id },
    props: { item },
  }));
}

const { item } = Astro.props as { item: HookItem };

const { markdownHtml, frontmatterText, rawMarkdown } = readResourceMarkdown(
  item.readmeFile
);
const lastUpdated = formatLastUpdated(item.lastUpdated);
const githubUrl = `${GITHUB_TREE_BASE}/${item.path}`;
const readmeFileName = item.readmeFileName ?? "README.md";

const fileCount = item.files.length;
const chips: {
  title: string;
  items: string[];
  filterBase?: string;
  filterParam?: string;
}[] = [];
if (item.hooks.length > 0) {
  chips.push({ title: "Hook events", items: item.hooks });
}
chips.push({
  title: "Files",
  items: [`${fileCount} file${fileCount === 1 ? "" : "s"}`],
});
if (item.tags.length > 0) {
  chips.push({
    title: "Tags",
    items: item.tags,
    filterBase: "/hooks/",
    filterParam: "tag",
  });
}
---

<StarlightPage
  frontmatter={{
    title: item.title,
    description: item.description,
    template: "splash",
    prev: false,
    next: false,
    editUrl: false,
  }}
>
  <div
    id="main-content"
    class="resource-detail-page hook-detail-page"
    data-file-browser-page
    data-bundle-id={item.id}
    data-path={item.readmeFile}
  >
    <RawMarkdown markdown={rawMarkdown} />
    <div class="container">
      <Breadcrumb
        paths={[
          { name: "Home", href: "/" },
          { name: "Hooks", href: "/hooks/" },
        ]}
        title={item.title}
      />

      <DetailHeader item={item} />

      <div class="detail-layout">
        <div class="detail-main">
          <FileBrowser
            files={item.files}
            primaryPath={item.readmeFile}
            primaryName={readmeFileName}
            primaryHtml={markdownHtml}
            githubBase={GITHUB_BASE}
          />
        </div>

        <Sidebar
          item={item}
          lastUpdated={lastUpdated ?? undefined}
          frontmatterText={frontmatterText || undefined}
          githubUrl={githubUrl}
          chips={chips}
        >
          <div class="skill-install" slot="install">
            <p class="skill-install-label">Install this hook</p>
            <p class="skill-install-note">
              Hooks are multi-file bundles with no CLI installer. Download the
              ZIP and copy the files into your project's hooks directory.
            </p>
            <button
              type="button"
              class="btn btn-primary skill-download-btn"
              data-action="download-zip"
            >
              <svg
                viewBox="0 0 16 16"
                width="16"
                height="16"
                fill="currentColor"
                aria-hidden="true"
                ><path
                  d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"
                ></path><path
                  d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"
                ></path></svg
              >
              Download ZIP
            </button>
          </div>
        </Sidebar>
      </div>
    </div>
  </div>

  <BackToTop />

  <script>
    import "../../scripts/pages/file-browser";
  </script>
</StarlightPage>