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-238 Slice A — dedicated Submissions/Schriftsätze editor page.
//
// Lawyer picks (or creates) a draft for one (project, submission_code),
// edits placeholder variables in a sticky sidebar, sees a read-only
// HTML preview of the merged document, and exports the result as
// .docx. Drafts persist server-side per paliad.submission_drafts.
//
// Pure shell: client/submission-draft.ts hydrates draft list + variable
// form + preview pane after page load. The same dist/submission-draft.html
// serves every (project_id, submission_code, [draft_id]) URL.
//
// Design ref: docs/design-submission-page-2026-05-22.md §6.

export function renderSubmissionDraft(): 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" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <PWAHead />
        <title data-i18n="submissions.draft.title">Schriftsatz bearbeiten &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar page-submission-draft">
        <Sidebar currentPath="/projects" />
        <BottomNav currentPath="/projects" />

        <main>
          <section className="tool-page submission-draft-page">
            <div className="container">
              <a
                id="submission-draft-back-link"
                href="/projects"
                className="back-link"
                data-i18n="submissions.draft.back">
                &larr; Zur&uuml;ck zum Projekt
              </a>

              <div id="submission-draft-loading" className="entity-loading">
                <p data-i18n="submissions.draft.loading">L&auml;dt&hellip;</p>
              </div>

              <div id="submission-draft-notfound" className="entity-empty" style="display:none">
                <p data-i18n="submissions.draft.notfound">
                  Schriftsatz nicht gefunden oder keine Berechtigung.
                </p>
              </div>

              <div id="submission-draft-error" className="entity-empty" style="display:none" />

              <div id="submission-draft-body" style="display:none">
                <header className="submission-draft-header">
                  <div className="submission-draft-header-text">
                    <h1 id="submission-draft-title" />
                    <p id="submission-draft-subtitle" className="tool-subtitle" />
                  </div>
                  <div className="submission-draft-header-actions">
                    <button
                      id="submission-draft-export-btn"
                      type="button"
                      className="btn-primary btn-cta-lime"
                      data-i18n="submissions.draft.action.export">
                      Als .docx exportieren
                    </button>
                  </div>
                </header>

                <div className="submission-draft-grid">
                  {/* Sidebar — draft switcher + variable groups. */}
                  <aside className="submission-draft-sidebar" id="submission-draft-sidebar">
                    <div className="submission-draft-switcher">
                      <label htmlFor="submission-draft-pick" data-i18n="submissions.draft.switcher.label">
                        Entwurf
                      </label>
                      <select id="submission-draft-pick" />
                      <button
                        type="button"
                        id="submission-draft-new-btn"
                        className="btn-small btn-secondary"
                        data-i18n="submissions.draft.action.new">
                        + Neuer Entwurf
                      </button>
                    </div>

                    <div className="submission-draft-name-row">
                      <input
                        type="text"
                        id="submission-draft-name"
                        className="entity-form-input"
                        data-i18n-placeholder="submissions.draft.name.placeholder"
                        placeholder="Name dieses Entwurfs"
                      />
                      <button
                        type="button"
                        id="submission-draft-delete-btn"
                        className="btn-small btn-link-danger"
                        data-i18n="submissions.draft.action.delete">
                        L&ouml;schen
                      </button>
                    </div>

                    {/* t-paliad-313 (m/paliad#141) Composer Slice A —
                        base picker. Hydrated by client/submission-draft.ts
                        once /api/submission-bases returns. Disabled
                        for pre-Composer drafts (base_id NULL); switching
                        autosaves the draft. */}
                    <div
                      className="submission-draft-base-row"
                      id="submission-draft-base-row"
                      style="display:none">
                      <label htmlFor="submission-draft-base" data-i18n="submissions.draft.base.label">
                        Vorlagenbasis
                      </label>
                      <select id="submission-draft-base" />
                      <p
                        className="submission-draft-base-hint"
                        id="submission-draft-base-hint"
                        data-i18n="submissions.draft.base.hint">
                        Steuert Schriftarten, Briefkopf und Abschnitts-Defaults.
                      </p>
                    </div>

                    {/* t-paliad-276 — output language toggle (DE/EN).
                        Hydrated by client/submission-draft.ts; switching
                        autosaves the draft and re-renders the preview. */}
                    <div
                      className="submission-draft-language-row"
                      id="submission-draft-language-row"
                      role="radiogroup"
                      aria-labelledby="submission-draft-language-label">
                      <span
                        id="submission-draft-language-label"
                        className="submission-draft-language-label"
                        data-i18n="submissions.draft.language">
                        Sprache
                      </span>
                      <label className="submission-draft-language-option">
                        <input
                          type="radio"
                          name="submission-draft-language"
                          value="de"
                          id="submission-draft-language-de"
                        />
                        <span data-i18n="submissions.draft.language.de">DE</span>
                      </label>
                      <label className="submission-draft-language-option">
                        <input
                          type="radio"
                          name="submission-draft-language"
                          value="en"
                          id="submission-draft-language-en"
                        />
                        <span data-i18n="submissions.draft.language.en">EN</span>
                      </label>
                    </div>
                    <p
                      className="submission-draft-language-fallback"
                      id="submission-draft-language-fallback"
                      style="display:none"
                      data-i18n="submissions.draft.language.fallback_notice">
                      Fallback: universelles Skelett (keine sprachspezifische Vorlage).
                    </p>

                    {/* t-paliad-354 — keyword that leads the exported
                        document name "<date> <keyword> (<case>)". Empty
                        falls back to the auto-derived rule name; the
                        placeholder shows that default. Persisted to
                        composer_meta.filename_keyword via the draft-save
                        path on change. */}
                    <div className="submission-draft-keyword-row">
                      <label
                        htmlFor="submission-draft-keyword"
                        data-i18n="submissions.draft.keyword.label">
                        Stichwort (Dateiname)
                      </label>
                      <input
                        type="text"
                        id="submission-draft-keyword"
                        className="entity-form-input"
                        data-i18n-placeholder="submissions.draft.keyword.placeholder"
                        placeholder="Automatisch aus dem Schriftsatztyp"
                      />
                      <p
                        className="submission-draft-keyword-hint"
                        id="submission-draft-keyword-hint"
                        data-i18n="submissions.draft.keyword.hint">
                        Führt den Dateinamen an: &lt;Datum&gt; &lt;Stichwort&gt; (&lt;Aktenzeichen&gt;).
                      </p>
                    </div>

                    <p className="submission-draft-savestatus" id="submission-draft-savestatus" />

                    {/* t-paliad-277: "Aus Projekt importieren" + last-
                        imported-at timestamp. Only visible when the
                        draft has a project_id attached. */}
                    <div
                      id="submission-draft-import-row"
                      className="submission-draft-import-row"
                      style="display:none">
                      <button
                        type="button"
                        id="submission-draft-import-btn"
                        className="btn-small btn-secondary"
                        data-i18n="submissions.draft.import.button">
                        Aus Projekt importieren
                      </button>
                      <span
                        id="submission-draft-import-stamp"
                        className="submission-draft-import-stamp"
                      />
                    </div>

                    {/* t-paliad-277 / t-paliad-287: multi-select party
                        picker plus per-side Add-Party affordance.
                        Populated from view.available_parties; checkbox
                        per party, grouped by role. Hidden when no
                        project is attached; visible even on empty
                        rosters so the lawyer can use Add Party to
                        populate. */}
                    <div
                      id="submission-draft-parties"
                      className="submission-draft-parties"
                      style="display:none">
                      <h3
                        className="submission-draft-var-group-title"
                        data-i18n="submissions.draft.parties.title">
                        Parteien
                      </h3>
                      <p
                        className="submission-draft-parties-hint"
                        data-i18n="submissions.draft.parties.hint">
                        Wählen Sie aus, welche Parteien im Schriftsatz genannt werden sollen.
                      </p>
                      <div
                        id="submission-draft-parties-list"
                        className="submission-draft-parties-list"
                      />
                    </div>

                    <div className="submission-draft-variables" id="submission-draft-variables" />
                  </aside>

                  {/* t-paliad-313 (m/paliad#141) Composer Slice A —
                      read-only section list. Painted from
                      view.sections. Empty/hidden for pre-Composer
                      drafts where no rows have been seeded. Slice B
                      turns these into in-place editable prose blocks. */}
                  <section
                    className="submission-draft-sections-wrap"
                    id="submission-draft-sections-wrap"
                    style="display:none">
                    <header className="submission-draft-sections-header">
                      <h2 data-i18n="submissions.draft.sections.title">Abschnitte</h2>
                      <span
                        className="submission-draft-sections-hint"
                        data-i18n="submissions.draft.sections.hint">
                        Inhalt pro Abschnitt &mdash; Autosave nach 500 ms. Letztes Layout in Word.
                      </span>
                    </header>
                    <ol
                      className="submission-draft-sections-list"
                      id="submission-draft-sections-list"
                    />
                  </section>

                  {/* Preview pane — read-only HTML render of the merged
                      document body. Re-renders on autosave round-trip. */}
                  <section className="submission-draft-preview-wrap">
                    <header className="submission-draft-preview-header">
                      <h2 data-i18n="submissions.draft.preview.title">Vorschau</h2>
                      <span
                        className="submission-draft-preview-hint"
                        data-i18n="submissions.draft.preview.hint">
                        Read-only Vorschau &mdash; finale Bearbeitung in Word.
                      </span>
                    </header>
                    <div className="submission-draft-preview" id="submission-draft-preview" />
                  </section>
                </div>
              </div>
            </div>
          </section>
        </main>

        <Footer />
        <PaliadinWidget />

        <script src="/assets/submission-draft.js"></script>
      </body>
    </html>
  );
}
