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

// /tools/procedures — Litigation Builder (m/paliad#153 PRD §3).
//
// Replaces cronus's 4-tab catalog (U0-U4) with a persistence-backed
// builder shell. Server-rendered chrome is minimal — the page-header
// scenario picker, side panel, and canvas are all hydrated by
// `builder.ts` at boot. The builder loads scenarios from
// /api/builder/scenarios (B0 surface, t-paliad-340) and renders the
// per-proceeding triplets with the existing verfahrensablauf-core calc.
//
// B1 — Builder shell + cold-open mode + single triplet end-to-end.
// B2 — Multi-triplet stack + spawn nesting + per-event state machine.
// B3+ — event-triggered + Akte modes, sharing, promotion (head-gated).

export function renderProcedures(): string {
  const today = new Date().toISOString().split("T")[0];
  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" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <PWAHead />
        <title data-i18n="procedures.title">Verfahren &amp; Fristen &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar page-procedures page-builder">
        <Sidebar currentPath="/tools/procedures" />
        <BottomNav currentPath="/tools/procedures" />

        <main>
          <section className="tool-page builder-page">
            <div className="container">
              <div className="tool-header">
                <h1 data-i18n="procedures.heading">Verfahren &amp; Fristen</h1>
                <p className="tool-subtitle" data-i18n="builder.subtitle">
                  Litigation Builder &mdash; Szenarien bauen, Verfahren stapeln, Fristen behalten.
                </p>
              </div>

              {/* Page header (PRD §3.1): scenario picker · save state · name · share · promote
                  · Akte picker · Stichtag input. B1 wires the scenario picker
                  + name action + Stichtag + save indicator. Akte / share /
                  promote land at B4 / B5; the affordances render disabled in
                  B1 so the layout is stable across slices. */}
              <section className="builder-pageheader" aria-label="Builder-Steuerung">
                <div className="builder-pageheader-row">
                  <label className="builder-pageheader-field">
                    <span className="builder-pageheader-label" data-i18n="builder.header.scenario">Szenario:</span>
                    <select id="builder-scenario-picker" className="builder-scenario-picker" aria-label="Szenario w&auml;hlen"></select>
                  </label>
                  <span id="builder-save-status" className="builder-save-status" aria-live="polite" data-state="idle">
                    <span data-i18n="builder.save.idle">&nbsp;</span>
                  </span>
                  <span className="builder-pageheader-spacer"></span>
                  <button type="button" id="builder-rename-btn"
                          className="builder-action-btn builder-action-btn--secondary"
                          disabled
                          data-i18n="builder.action.rename">Benennen</button>
                  <button type="button" id="builder-share-btn"
                          className="builder-action-btn builder-action-btn--secondary"
                          disabled
                          data-i18n="builder.action.share">Teilen</button>
                  <button type="button" id="builder-promote-btn"
                          className="builder-action-btn builder-action-btn--primary"
                          disabled
                          data-i18n="builder.action.promote">Als Projekt anlegen</button>
                </div>
                <div className="builder-pageheader-row">
                  <label className="builder-pageheader-field">
                    <span className="builder-pageheader-label" data-i18n="builder.header.akte">Akte:</span>
                    <select id="builder-akte-picker" className="builder-akte-picker" disabled aria-label="Akte w&auml;hlen">
                      <option value="" data-i18n="builder.akte.none">&mdash; ohne &mdash;</option>
                    </select>
                  </label>
                  <label className="builder-pageheader-field">
                    <span className="builder-pageheader-label" data-i18n="builder.header.stichtag">Stichtag:</span>
                    <input type="date" id="builder-stichtag-input" className="builder-stichtag-input"
                           defaultValue={today} aria-label="Stichtag" />
                  </label>
                  <label className="builder-pageheader-field builder-pageheader-field--grow">
                    <span className="builder-pageheader-label" data-i18n="builder.header.search">Suche:</span>
                    <input type="search" id="builder-search-input" className="builder-search-input"
                           data-i18n-placeholder="builder.search.placeholder"
                           placeholder="Ereignis, Szenario, Akte &hellip;"
                           autocomplete="off" spellcheck="false" />
                  </label>
                </div>
              </section>

              {/* Entry-mode radio (PRD §0.2, §2). B1 ships cold-open active;
                  event-triggered + akte ship at B3 / B4 and are disabled
                  here so the layout stays stable across slices. */}
              <nav className="builder-modebar" role="tablist" aria-label="Einstieg">
                <button type="button"
                        className="builder-mode is-active"
                        role="tab"
                        aria-selected="true"
                        data-mode="cold"
                        id="builder-mode-cold">
                  <span className="builder-mode-label" data-i18n="builder.mode.cold">&Uuml;bersicht</span>
                </button>
                <button type="button"
                        className="builder-mode"
                        role="tab"
                        aria-selected="false"
                        data-mode="event"
                        id="builder-mode-event">
                  <span className="builder-mode-label" data-i18n="builder.mode.event">Ereignis</span>
                </button>
                <button type="button"
                        className="builder-mode"
                        role="tab"
                        aria-selected="false"
                        data-mode="akte"
                        id="builder-mode-akte">
                  <span className="builder-mode-label" data-i18n="builder.mode.akte">Aus Akte</span>
                </button>
              </nav>

              {/* Two-column body: side panel (left, scenarios list) + canvas (right). */}
              <div className="builder-body">
                <aside className="builder-sidepanel" aria-label="Meine Szenarien">
                  <header className="builder-sidepanel-header">
                    <h2 className="builder-sidepanel-title" data-i18n="builder.panel.title">Meine Szenarien</h2>
                    <button type="button" id="builder-new-scenario-btn"
                            className="builder-sidepanel-newbtn"
                            data-i18n="builder.panel.new">+ Neues Szenario</button>
                  </header>
                  <div className="builder-sidepanel-bucket" data-bucket="active">
                    <h3 className="builder-bucket-label" data-i18n="builder.bucket.active">Aktiv</h3>
                    <ul className="builder-scenario-list" id="builder-scenario-list-active" aria-label="Aktive Szenarien"></ul>
                  </div>
                  {/* B5 — Geteilt mit mir / Als Projekt angelegt / Archiviert.
                      Each bucket hides itself when empty (builder.ts toggles
                      the hidden attribute). */}
                  <div className="builder-sidepanel-bucket" data-bucket="shared" id="builder-bucket-shared" hidden>
                    <h3 className="builder-bucket-label" data-i18n="builder.bucket.shared">Geteilt mit mir</h3>
                    <ul className="builder-scenario-list" id="builder-scenario-list-shared" aria-label="Mit mir geteilte Szenarien"></ul>
                  </div>
                  <div className="builder-sidepanel-bucket" data-bucket="promoted" id="builder-bucket-promoted" hidden>
                    <h3 className="builder-bucket-label" data-i18n="builder.bucket.promoted">Als Projekt angelegt</h3>
                    <ul className="builder-scenario-list" id="builder-scenario-list-promoted" aria-label="Promotete Szenarien"></ul>
                  </div>
                  <div className="builder-sidepanel-bucket" data-bucket="archived" id="builder-bucket-archived" hidden>
                    <h3 className="builder-bucket-label" data-i18n="builder.bucket.archived">Archiviert</h3>
                    <ul className="builder-scenario-list" id="builder-scenario-list-archived" aria-label="Archivierte Szenarien"></ul>
                  </div>
                </aside>

                <section className="builder-canvas-wrap" aria-label="Builder-Canvas">
                  {/* B5 — read-only watermark for shared / promoted scenarios.
                      builder.ts fills + unhides it when the active scenario
                      is not editable by the current user. */}
                  <div id="builder-readonly-watermark" className="builder-readonly-watermark" hidden></div>
                  <div id="builder-canvas" className="builder-canvas">
                    {/* Cold-open placeholder — replaced by triplet stack once a
                        scenario is loaded. */}
                    <div className="builder-empty" id="builder-empty">
                      <p className="builder-empty-headline" data-i18n="builder.empty.headline">
                        Noch kein Szenario ge&ouml;ffnet.
                      </p>
                      <p className="builder-empty-hint" data-i18n="builder.empty.hint">
                        Starte ein neues Szenario, w&auml;hle aus deiner Liste oder &uuml;bernimm eine Akte (B4).
                      </p>
                      <button type="button" id="builder-cta-new" className="builder-cta-new"
                              data-i18n="builder.empty.cta">
                        Neues Szenario starten
                      </button>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </section>
        </main>

        <Footer />
        <PaliadinWidget />
        <script src="/assets/procedures.js"></script>
      </body>
    </html>
  );
}
