/services/github/dashboard

import { avatar } from "@hedia/hexui/components/avatar";
import { card } from "@hedia/hexui/components/card";
import { content } from "@hedia/hexui/components/content";
import { dropdown } from "@hedia/hexui/components/dropdown";
import { header } from "@hedia/hexui/components/header";
import { navbar, navbarBrand, navbarItem } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { site } from "@hedia/hexui/components/site";
import { statusPill } from "@hedia/hexui/components/status-pill";
import { toggleGroup } from "@hedia/hexui/components/toggle-group";
import { a, div, h3, span } from "@hedia/html/elements";
import { userOutlineIcon } from "@hedia/iconly/outline";

export default function Dashboard() {
  return site(
    header(
      navbar(
        navbarBrand(a({ href: "#" }, "GitHub")),
        navbarItem({ href: "#", active: true }, "Dashboard"),
        navbarItem({ href: "#" }, "Repositories"),
        navbarItem({ href: "#" }, "Events"),
        span(
          {
            style: "margin-left: auto; padding: 0 1rem; display: inline-flex; align-items: center; gap: 0.25rem;",
          },
          userOutlineIcon(),
          "Drue",
        ),
      ),
    ),
    navbar(
      { kind: "secondary" },
      dropdown(
        { placeholder: "All repos", size: "sm" },
        { type: "link", href: "#", title: "All repos", active: true },
        { type: "divider" },
        { type: "link", href: "#hda-app", title: "hda-app" },
        { type: "link", href: "#github-service", title: "github-service" },
        { type: "link", href: "#hexui", title: "hexui" },
      ),
      dropdown(
        { placeholder: "Everybody", size: "sm" },
        { type: "link", href: "#", title: "Everybody", active: true },
        { type: "divider" },
        { type: "link", href: "#drue", title: "Drue" },
        { type: "link", href: "#mathieu", title: "Mathieu" },
      ),
      div(
        { style: "margin-left: auto;" },
        toggleGroup({ size: "sm" }, { label: "Cards", active: true }, { label: "Table" }),
      ),
    ),
    content(
      { alignment: "top" },
      prose(h3("GitHub Actions")),
      div(
        {
          style: "display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem;",
        },
        workflowCard("primary", "Pending", "Pull Request", "data-service", "ministerial-purple-cricket", "now"),
        workflowCard("yellow", "In progress", "Release Please", "webhook-service", "readme-worker", "2m ago"),
        workflowCard("green", "Success", "CI", "hedia-app", "HDAM-2722", "5m ago"),
        workflowCard("green", "Success", "Validate PR labels", "hedia-app", "HDAM-2722", "10m ago"),
        workflowCard(
          "green",
          "Success",
          "CodeQL - Code Quality",
          "hedia-recommendation-screen",
          "HDAM-2646-gitignore",
          "15m ago",
        ),
        workflowCard("red", "Failed", "Continuous Integration", "webhook-service", "main", "20m ago"),
        workflowCard("green", "Success", "Cucumber", "hedia-app", "main", "25m ago"),
        workflowCard("gray", "Cancelled", "Bump build number", "hedia-app", "develop", "1h ago"),
      ),
    ),
  );
}

function workflowCard(
  color: "green" | "yellow" | "red" | "primary" | "gray",
  status: string,
  title: string,
  repo: string,
  branch: string,
  when: string,
) {
  return card(
    { color },
    div(
      { style: "display: flex; flex-direction: column; gap: 0.5rem;" },
      div(
        { style: "display: flex; justify-content: space-between; align-items: flex-start;" },
        statusPill({ color }, status),
        avatar({ size: "sm", image: "/components/avatar/flamingo.png" }),
      ),
      div(
        { style: "font-weight: 700; font-size: 1.125rem;" },
        title,
        span({ style: "display: block; font-weight: 500;" }, repo),
      ),
      div(
        { style: "display: flex; justify-content: space-between; font-size: 0.8125rem; opacity: 0.8;" },
        span(branch),
        span(when),
      ),
    ),
  );
}