---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import BackToTop from "../../components/BackToTop.astro";
import workflowsData from "../../../public/data/workflows.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 Main from "../../components/pages/Main.astro";
import Sidebar from "../../components/pages/Sidebar.astro";
import { readResourceMarkdown, formatLastUpdated } from "../../lib/detail-page";

const GITHUB_BASE = "https://github.com/github/awesome-copilot/blob/main";
const workflowGuideHref = "/learning-hub/agentic-workflows/";

interface WorkflowItem extends HeaderItem {
  id: string;
  title: string;
  description?: string;
  path: string;
  triggers: string[];
  lastUpdated?: string | null;
}

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

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

const { markdownHtml, frontmatterText, rawMarkdown } = readResourceMarkdown(
  item.path
);
const lastUpdated = formatLastUpdated(item.lastUpdated);
const githubUrl = `${GITHUB_BASE}/${item.path}`;

const chips: { title: string; items: string[] }[] = [];
if (item.triggers.length > 0) {
  chips.push({ title: "Triggers", items: item.triggers });
}
---

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

      <DetailHeader item={item} />

      <div class="detail-layout">
        <Main markdownHtml={markdownHtml} githubUrl={githubUrl} />

        <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 workflow</p>
            <p class="skill-install-note">
              Install the <code>gh aw</code> CLI{" "}
              (<code>gh extension install github/gh-aw</code>), then copy this
              file into <code>.github/workflows/</code> and run{" "}
              <code>gh aw compile</code> to generate the lock file. See the{" "}
              <a href={workflowGuideHref}>Agentic Workflows guide</a>{" "}
              for full setup steps.
            </p>
            <button
              type="button"
              class="btn btn-primary skill-download-btn"
              data-action="download"
            >
              <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 workflow
            </button>
            <button
              type="button"
              class="btn btn-secondary skill-download-btn"
              data-action="copy-markdown"
            >
              Copy markdown
            </button>
          </div>
        </Sidebar>
      </div>
    </div>
  </div>

  <BackToTop />

  <script>
    import "../../scripts/pages/resource-detail";
  </script>
</StarlightPage>