/apps/vault/adminDrives

import { button } from "@hedia/hexui/components/button";
import { content } from "@hedia/hexui/components/content";
import { footer } from "@hedia/hexui/components/footer";
import { header } from "@hedia/hexui/components/header";
import { logo } from "@hedia/hexui/components/logo";
import { menu, menuDivider, menuItem } from "@hedia/hexui/components/menu";
import { navbar } from "@hedia/hexui/components/navbar";
import { progress } from "@hedia/hexui/components/progress";
import { prose } from "@hedia/hexui/components/prose";
import { sidebar, sidebarBackdrop, sidebarItem } from "@hedia/hexui/components/sidebar";
import { site } from "@hedia/hexui/components/site";
import { a, div, h1, h2, p, span, table, tbody, td, th, thead, tr } from "@hedia/html/elements";
import { homeBoldIcon, lockBoldIcon, menuBoldIcon, userBoldIcon } from "@hedia/iconly/bold";
import { computerCaseOutlineIcon, dotsOutlineIcon, settingsOutlineIcon, usersOutlineIcon } from "@hedia/iconly/outline";

export default function AdminDrives() {
  return site(
    header(
      navbar(
        button({ kind: "secondary", shape: "round", "data-action": "toggle-sidebar" }, menuBoldIcon()),
        h2(a({ href: "#", "aria-label": "Home" }, logo())),
        div(
          { style: "position: relative;" },
          button(
            {
              "data-action": "toggle-menu",
              "data-target": "#userMenu",
              kind: "secondary",
              shape: "round",
              type: "button",
            },
            userBoldIcon(),
          ),
          menu(
            { id: "userMenu" },
            menuItem({ href: "#", icon: userBoldIcon() }, "Account"),
            menuDivider(),
            menuItem({ type: "submit", icon: lockBoldIcon() }, "Log out"),
          ),
        ),
      ),
    ),
    sidebarBackdrop(),
    sidebar(
      sidebarItem({ href: "#", icon: homeBoldIcon(), title: "Drives", active: true }),
      sidebarItem({ href: "#", icon: usersOutlineIcon(), title: "Users" }),
      sidebarItem({ href: "#", icon: settingsOutlineIcon(), title: "Settings" }),
    ),
    content(
      { alignment: "top" },
      prose(h1("Drives")),
      table(
        thead(tr(th(), th("Name"), th("Size"), th("Usage"), th(), th())),
        tbody(
          driveRow("Patient Records", 1_048_576, 10_485_760),
          driveRow("Clinical Trials", 8_242_880, 10_485_760),
          driveRow("Archived Data", 9_961_472, 10_485_760),
          driveRow("Shared Documents", 4_314_572, 10_485_760),
        ),
      ),
    ),
    footer(prose(p("© Hedia ApS. All rights reserved."))),
  );
}

function driveRow(name: string, size: number, quota: number) {
  const percent = size / quota;

  let color: "red" | "yellow" | "green" = "green";
  if (percent > 0.9) color = "red";
  else if (percent > 0.7) color = "yellow";

  return tr(
    td(span({ class: "text-yellow" }, computerCaseOutlineIcon())),
    td(name),
    td(formatSize(size)),
    td(progress({ value: size, max: quota, size: "sm", color })),
    td(formatPercent(percent)),
    td({ class: "table-cell-actions" }, driveDropdown(name)),
  );
}

function driveDropdown(name: string) {
  const id = `driveMenu_${name.replace(/\s/g, "")}`;

  return div(
    { style: "position: relative;" },
    button(
      {
        kind: "secondary",
        shape: "round",
        type: "button",
        "data-action": "toggle-menu",
        "data-target": `#${id}`,
      },
      dotsOutlineIcon(),
    ),
    menu({ id }, menuItem({ href: "#", icon: settingsOutlineIcon() }, "Settings")),
  );
}

function formatSize(size: number) {
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
  if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
  return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}

function formatPercent(value: number) {
  return `${(value * 100).toFixed(1)}%`;
}