/apps/vault/fileSettings

import { badge } from "@hedia/hexui/components/badge";
import { banner } from "@hedia/hexui/components/banner";
import { breadcrumb, crumb } from "@hedia/hexui/components/breadcrumb";
import { button } from "@hedia/hexui/components/button";
import { actionCard } from "@hedia/hexui/components/card";
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 { prose } from "@hedia/hexui/components/prose";
import { site } from "@hedia/hexui/components/site";
import { a, div, h1, h2, p, section, span, table, tbody, td, th, thead, tr } from "@hedia/html/elements";
import { lockBoldIcon, userBoldIcon } from "@hedia/iconly/bold";
import {
  computerCaseOutlineIcon,
  deleteOutlineIcon,
  documentOutlineIcon,
  editOutlineIcon,
  folderOutlineIcon,
} from "@hedia/iconly/outline";

export default function FileSettings() {
  return site(
    header(
      navbar(
        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"),
          ),
        ),
      ),
    ),
    content(
      { alignment: "top" },
      breadcrumb(
        crumb(
          { href: "#", icon: span({ class: "text-yellow" }, computerCaseOutlineIcon()) },
          "Patient Records",
        ),
        crumb({ href: "#", icon: span({ class: "text-blue" }, folderOutlineIcon()) }, "Clinical"),
        crumb({ href: "#", icon: span({ class: "text-blue" }, folderOutlineIcon()) }, "2026"),
        crumb({ href: "#", icon: span({ class: "text-green" }, documentOutlineIcon()) }, "blood-results.pdf"),
        crumb("Settings"),
      ),
      banner("This drive was locked on Wed May 13 2026. It is now read-only."),
      div({ class: "page-header" }, prose(h1("File settings"))),
      section(
        div(
          { class: "page-header" },
          prose(h2("Roles")),
          button({ kind: "primary", disabled: true }, "Assign role"),
        ),
        table(
          { style: "width: 100%;" },
          thead(tr(th("Principal"), th("Role"), th())),
          tbody(
            tr(
              td("Bob Smith"),
              td(badge({ color: "primary" }, "Manager")),
              td(
                { class: "table-cell-actions" },
                button(
                  { kind: "secondary-danger", shape: "round", disabled: true },
                  deleteOutlineIcon(),
                ),
              ),
            ),
            tr(
              td("Charlie Brown"),
              td(badge({ color: "green" }, "Contributor")),
              td(
                { class: "table-cell-actions" },
                button(
                  { kind: "secondary-danger", shape: "round", disabled: true },
                  deleteOutlineIcon(),
                ),
              ),
            ),
            tr(
              td("Diana Prince"),
              td(badge({ color: "base" }, "Viewer")),
              td(
                { class: "table-cell-actions" },
                button(
                  { kind: "secondary-danger", shape: "round", disabled: true },
                  deleteOutlineIcon(),
                ),
              ),
            ),
          ),
        ),
      ),
      section(
        prose(h2("Manage")),
        actionCard({
          title: "Rename file",
          description: "When you rename the file, its URL will not change.",
          action: button({ kind: "secondary", disabled: true }, editOutlineIcon(), "Rename file"),
        }),
        actionCard({
          title: "Delete file",
          description:
            "Deleting a file will remove all its contents permanently. This action cannot be undone.",
          action: button({ kind: "secondary-danger", disabled: true }, deleteOutlineIcon(), "Delete file"),
        }),
      ),
    ),
    footer(prose(p("© Hedia ApS. All rights reserved."))),
  );
}