import { h } from "./jsx";
import { Sidebar } from "./components/Sidebar";
import { PaliadinWidget } from "./components/PaliadinWidget";
import { BottomNav } from "./components/BottomNav";
import { Footer } from "./components/Footer";
import { PWAHead } from "./components/PWAHead";

// /inbox — t-paliad-163 universal-filter migration.
//
// The page is a thin shell around two host divs: one for the
// <FilterBar> primitive and one for the result list. The bar takes
// care of every axis (approval_viewer_role chip cluster replaces the
// two-tab UI; status / entity_type / time chips are new affordances).
// Rows render via shape-list.ts with row_action="approve" — the
// inbox-specific markup that produces the diff + approve/reject/revoke
// buttons. Action handlers are wired in client/inbox.ts.
//
// The legacy `?tab=` URL is preserved by the client: ?tab=mine maps
// to ?a_role=self_requested before the bar mounts so old bookmarks
// (sidebar bell, Genehmigungen email links) keep landing on the
// expected sub-view.

export function renderInbox(): string {
  return "<!DOCTYPE html>" + (
    <html lang="de">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#BFF355" />
        <PWAHead />
        <title data-i18n="approvals.title">Genehmigungen &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/inbox" />
        <BottomNav currentPath="/inbox" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <h1 data-i18n="approvals.heading">Genehmigungen</h1>
                <p className="tool-subtitle" data-i18n="approvals.subtitle">
                  4-Augen-Pr&uuml;fung f&uuml;r Fristen und Termine.
                </p>
              </div>

              <div id="inbox-filter-bar" />

              <div className="agenda-loading" id="inbox-loading" data-i18n="agenda.loading">L&auml;dt &hellip;</div>
              <div className="entity-empty" id="inbox-empty" style="display:none" />
              <div id="inbox-results" />

              {/* t-paliad-154 — admin-only nudge surfaced when:
                    - the user is global_admin
                    - the inbox is empty (no pending / mine)
                    - no approval_policies row exists firm-wide
                  Hidden in all other cases. Wires via /api/admin/approval-policies/seeded. */}
              <div className="inbox-admin-nudge" id="inbox-admin-nudge" style="display:none">
                <h3 data-i18n="inbox.empty.admin_nudge.title">Noch keine Genehmigungspflichten konfiguriert?</h3>
                <p data-i18n="inbox.empty.admin_nudge.body">
                  Lege fest, welche Lifecycle-Events 4-Augen-Pr&uuml;fung erfordern.
                </p>
                <a href="/admin/approval-policies" className="btn-primary btn-cta-lime" data-i18n="inbox.empty.admin_nudge.cta">
                  Genehmigungspflichten konfigurieren
                </a>
              </div>
            </div>
          </section>
          <Footer />
        <PaliadinWidget />
        </main>

        <script src="/assets/inbox.js" defer />
      </body>
    </html>
  );
}
