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>

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

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

                  {/* 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>
  );
}
