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

// Custom Views editor (t-paliad-144 Phase A2). Powers /views/new (blank
// slate) and /views/{slug}/edit (mode chosen at hydration via path
// inspection). One TSX, one bundle (client/views-editor.ts).

export function renderViewsEditor(): 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="views.editor.title">Ansicht bearbeiten &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/views" />
        <BottomNav currentPath="/views" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <h1 id="editor-heading" data-i18n="views.editor.heading.new">Neue Ansicht</h1>
                <p className="tool-subtitle" data-i18n="views.editor.subtitle">
                  W&auml;hlen Sie Quellen, Filter und Darstellung. &Auml;nderungen speichern Sie unten.
                </p>
              </div>

              <form id="editor-form" className="entity-form" novalidate>
                <fieldset className="form-section">
                  <legend data-i18n="views.editor.section.identity">Bezeichnung</legend>
                  <div className="form-field">
                    <label htmlFor="editor-name" data-i18n="views.editor.field.name">Name</label>
                    <input id="editor-name" type="text" required maxlength={200} />
                  </div>
                  <div className="form-field">
                    <label htmlFor="editor-slug" data-i18n="views.editor.field.slug">Slug (URL)</label>
                    <input id="editor-slug" type="text" required pattern="^[a-z0-9][a-z0-9-]{0,62}$" maxlength={63} />
                    <small className="form-hint" data-i18n="views.editor.hint.slug">
                      Kleinbuchstaben, Ziffern und Bindestriche &mdash; nicht reservierte W&ouml;rter.
                    </small>
                  </div>
                  <div className="form-field">
                    <label htmlFor="editor-icon" data-i18n="views.editor.field.icon">Icon</label>
                    <select id="editor-icon">
                      <option value="" data-i18n="views.editor.icon.default">Standard (Ordner)</option>
                      <option value="clock" data-i18n="views.editor.icon.clock">Uhr</option>
                      <option value="calendar" data-i18n="views.editor.icon.calendar">Kalender</option>
                      <option value="bell" data-i18n="views.editor.icon.bell">Glocke</option>
                      <option value="folder" data-i18n="views.editor.icon.folder">Ordner</option>
                      <option value="users" data-i18n="views.editor.icon.users">Personen</option>
                      <option value="building" data-i18n="views.editor.icon.building">Geb&auml;ude</option>
                    </select>
                  </div>
                  <div className="form-field form-field-checkbox">
                    <label>
                      <input id="editor-show-count" type="checkbox" />
                      <span data-i18n="views.editor.field.show_count">Treffer-Anzahl in der Sidebar anzeigen</span>
                    </label>
                  </div>
                </fieldset>

                <fieldset className="form-section">
                  <legend data-i18n="views.editor.section.sources">Quellen</legend>
                  <p className="form-hint" data-i18n="views.editor.hint.sources">Welche Datenarten zeigt diese Ansicht?</p>
                  <div className="form-field form-field-checkbox-group">
                    <label><input type="checkbox" name="source" value="deadline" /> <span data-i18n="views.source.deadline">Fristen</span></label>
                    <label><input type="checkbox" name="source" value="appointment" /> <span data-i18n="views.source.appointment">Termine</span></label>
                    <label><input type="checkbox" name="source" value="project_event" /> <span data-i18n="views.source.project_event">Projekt-Verlauf</span></label>
                    <label><input type="checkbox" name="source" value="approval_request" /> <span data-i18n="views.source.approval_request">Genehmigungen</span></label>
                  </div>
                </fieldset>

                <fieldset className="form-section">
                  <legend data-i18n="views.editor.section.scope">Geltungsbereich</legend>
                  <div className="form-field">
                    <label htmlFor="editor-scope-mode" data-i18n="views.editor.field.scope_mode">Projekte</label>
                    <select id="editor-scope-mode">
                      <option value="all_visible" data-i18n="views.scope.all_visible">Alle sichtbaren</option>
                      <option value="my_subtree" data-i18n="views.scope.my_subtree">Mein Teilbaum</option>
                    </select>
                  </div>
                  <div className="form-field form-field-checkbox">
                    <label>
                      <input id="editor-personal-only" type="checkbox" />
                      <span data-i18n="views.editor.field.personal_only">Nur pers&ouml;nliche</span>
                    </label>
                  </div>
                </fieldset>

                <fieldset className="form-section">
                  <legend data-i18n="views.editor.section.time">Zeitraum</legend>
                  <div className="form-field">
                    <label htmlFor="editor-time-horizon" data-i18n="views.editor.field.horizon">Horizont</label>
                    <select id="editor-time-horizon">
                      <option value="next_7d" data-i18n="views.horizon.next_7d">N&auml;chste 7 Tage</option>
                      <option value="next_30d" data-i18n="views.horizon.next_30d">N&auml;chste 30 Tage</option>
                      <option value="next_90d" data-i18n="views.horizon.next_90d">N&auml;chste 90 Tage</option>
                      <option value="past_30d" data-i18n="views.horizon.past_30d">Letzte 30 Tage</option>
                      <option value="past_90d" data-i18n="views.horizon.past_90d">Letzte 90 Tage</option>
                      <option value="any" data-i18n="views.horizon.any">Beliebig</option>
                    </select>
                  </div>
                </fieldset>

                <fieldset className="form-section">
                  <legend data-i18n="views.editor.section.render">Darstellung</legend>
                  <div className="form-field">
                    <label htmlFor="editor-shape" data-i18n="views.editor.field.shape">Form</label>
                    <select id="editor-shape">
                      <option value="list" data-i18n="views.shape.list">Liste</option>
                      <option value="cards" data-i18n="views.shape.cards">Karten</option>
                      <option value="calendar" data-i18n="views.shape.calendar">Kalender</option>
                    </select>
                  </div>
                  <div className="form-field" id="editor-list-density-group">
                    <label htmlFor="editor-list-density" data-i18n="views.editor.field.density">Dichte</label>
                    <select id="editor-list-density">
                      <option value="comfortable" data-i18n="views.density.comfortable">Bequem</option>
                      <option value="compact" data-i18n="views.density.compact">Kompakt</option>
                    </select>
                  </div>
                </fieldset>

                <div className="entity-form-feedback" id="editor-feedback" hidden />

                <div className="entity-form-actions">
                  <button type="submit" className="btn-primary btn-cta-lime" id="editor-save" data-i18n="views.editor.save">
                    Speichern
                  </button>
                  <a href="/views" className="btn-secondary" data-i18n="views.editor.cancel">Abbrechen</a>
                  <button type="button" className="btn-danger" id="editor-delete" hidden data-i18n="views.editor.delete">
                    L&ouml;schen
                  </button>
                </div>
              </form>
            </div>
          </section>
          <Footer />
        <PaliadinWidget />
        </main>

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