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";

// t-paliad-154 — admin approval-policy authoring page. Single page with
// two sections:
//
//   1. Partner-Unit-Standards: list of partner_units, each expandable into
//      its 8-cell matrix (deadline + appointment × create / update /
//      complete / delete). Edits hit /api/admin/partner-units/{id}/...
//
//   2. Projekt-spezifisch: project-tree picker → 8-cell matrix for the
//      selected project, showing the EFFECTIVE policy per cell with an
//      attribution chip (Projekt / Geerbt / Standard). Edits hit
//      /api/projects/{id}/approval-policies/{entity}/{lifecycle}.
//
// Mobile shape: the matrix grid collapses to two stacked sections (Fristen,
// Termine) below 700px — driven by CSS, not by JS.

export function renderAdminApprovalPolicies(): 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="admin.approval_policies.title">Genehmigungspflichten &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/admin/approval-policies" />
        <BottomNav currentPath="/admin/approval-policies" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <h1 data-i18n="admin.approval_policies.heading">Genehmigungspflichten</h1>
                <p className="tool-subtitle" data-i18n="admin.approval_policies.subtitle">
                  4-Augen-Pr&uuml;fung pro Projekt und Partner Unit konfigurieren.
                </p>
              </div>

              <div id="ap-feedback" className="form-msg" style="display:none" />

              {/* ============================================================
                  Section 1: Partner-Unit-Standards.
              ============================================================ */}
              <h2 className="section-heading" data-i18n="admin.approval_policies.section.units">
                Partner-Unit-Standards
              </h2>
              <p className="form-hint" data-i18n="admin.approval_policies.section.units.hint">
                Standardregeln, die jedes Projekt erbt, das einer Partner Unit zugeordnet ist.
                Bei mehreren Partner Units gewinnt die strengste Regel.
              </p>
              <div className="ap-units-list" id="ap-units-list">
                <div className="ap-loading" data-i18n="admin.approval_policies.loading">L&auml;dt &hellip;</div>
              </div>

              {/* ============================================================
                  Section 2: Projekt-spezifisch.
              ============================================================ */}
              <h2 className="section-heading" data-i18n="admin.approval_policies.section.projects">
                Projekt-spezifisch
              </h2>
              <p className="form-hint" data-i18n="admin.approval_policies.section.projects.hint">
                Eigene Regeln f&uuml;r ein Projekt. &Uuml;berschreiben Standards aus Partner Units und
                geerbten Projektregeln.
              </p>

              <div className="ap-project-picker">
                <label htmlFor="ap-project-search" data-i18n="admin.approval_policies.picker.label">
                  Projekt w&auml;hlen
                </label>
                <input
                  type="text"
                  id="ap-project-search"
                  className="ap-project-search"
                  data-i18n-placeholder="admin.approval_policies.picker.placeholder"
                  placeholder="Suchen..."
                  autocomplete="off"
                />
                <div className="ap-project-results" id="ap-project-results" />
              </div>

              <div className="ap-project-matrix" id="ap-project-matrix" style="display:none">
                <div className="ap-project-header">
                  <h3 id="ap-project-title" />
                  <button type="button" className="btn-secondary btn-small" id="ap-bulk-apply-btn"
                          data-i18n="admin.approval_policies.bulk.cta">
                    Auf Unterprojekte anwenden
                  </button>
                </div>
                <div className="ap-matrix-host" id="ap-matrix-host" />
              </div>
            </div>
          </section>
          <Footer />
        <PaliadinWidget />
        </main>

        {/* Bulk-apply confirm modal — populated client-side. */}
        <div className="modal-overlay" id="ap-bulk-modal" style="display:none">
          <div className="modal-card">
            <div className="modal-header">
              <h2 data-i18n="admin.approval_policies.bulk.modal.title">
                Auf Unterprojekte anwenden
              </h2>
              <button className="modal-close" id="ap-bulk-close" type="button" aria-label="Close">&times;</button>
            </div>
            <div className="ap-bulk-body">
              <p data-i18n="admin.approval_policies.bulk.modal.body">
                Die folgenden Unterprojekte erhalten die effektive Matrix dieses Projekts als
                projektspezifische Regeln. Bestehende projektspezifische Regeln werden
                &uuml;berschrieben. Standards aus Partner Units bleiben unber&uuml;hrt.
              </p>
              <ul className="ap-bulk-target-list" id="ap-bulk-target-list" />
              <p className="form-msg" id="ap-bulk-msg" />
              <div className="form-actions">
                <button type="button" className="btn-cancel" id="ap-bulk-cancel"
                        data-i18n="admin.approval_policies.bulk.modal.cancel">Abbrechen</button>
                <button type="button" className="btn-primary btn-cta-lime" id="ap-bulk-confirm"
                        data-i18n="admin.approval_policies.bulk.modal.confirm">&Uuml;bernehmen</button>
              </div>
            </div>
          </div>
        </div>

        <script src="/assets/admin-approval-policies.js" defer />
      </body>
    </html>
  );
}
