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

// Unified settings page. Three tabs today (Profil / Benachrichtigungen / CalDAV)
// — keep the structure additive so future sections (keys, API tokens, etc.)
// only need one more <a class="entity-tab"> and one more <section> below.
// Tab switching is client-side from ?tab=<name>; the default tab is profil.
export function renderSettings(): 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="einstellungen.title">Einstellungen &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/settings" />
        <BottomNav currentPath="/settings" />

        <main>
          <section className="tool-page">
            <div className="container container-narrow">
              <div className="tool-header">
                <h1 data-i18n="einstellungen.heading">Einstellungen</h1>
                <p className="tool-subtitle" data-i18n="einstellungen.subtitle">
                  Profil, Benachrichtigungen und Kalendersynchronisation.
                </p>
              </div>

              <nav className="entity-tabs" id="einstellungen-tabs">
                <a className="entity-tab" data-tab="profil" href="?tab=profil" data-i18n="einstellungen.tab.profil">Profil</a>
                <a className="entity-tab" data-tab="benachrichtigungen" href="?tab=benachrichtigungen" data-i18n="einstellungen.tab.benachrichtigungen">Benachrichtigungen</a>
                <a className="entity-tab" data-tab="caldav" href="?tab=caldav" data-i18n="einstellungen.tab.caldav">CalDAV</a>
                <a className="entity-tab" data-tab="export" href="?tab=export" data-i18n="einstellungen.tab.export">Datenexport</a>
              </nav>

              {/* --- Profil tab ---------------------------------------- */}
              <section className="entity-tab-panel" id="tab-profil">
                <div id="profil-loading" className="entity-loading">
                  <p data-i18n="einstellungen.loading">L&auml;dt&hellip;</p>
                </div>

                <form id="profil-form" className="entity-form" autocomplete="off" style="display:none">
                  <div className="form-field">
                    <label htmlFor="profil-email" data-i18n="einstellungen.profil.email">E-Mail</label>
                    <input type="email" id="profil-email" readOnly disabled />
                    <p className="form-hint" data-i18n="einstellungen.profil.email.hint">
                      E-Mail kann nicht ge&auml;ndert werden.
                    </p>
                  </div>

                  <div className="form-field">
                    <label htmlFor="profil-display-name" data-i18n="einstellungen.profil.display_name">Anzeigename</label>
                    <input
                      type="text"
                      id="profil-display-name"
                      required
                      autocomplete="name"
                      data-i18n-placeholder="einstellungen.profil.display_name.placeholder"
                      placeholder="Vor- und Nachname"
                    />
                  </div>

                  <div className="form-field">
                    <label htmlFor="profil-office" data-i18n="einstellungen.profil.office">B&uuml;ro</label>
                    <select id="profil-office" required />
                  </div>

                  <div className="form-field">
                    <label htmlFor="profil-role" data-i18n="einstellungen.profil.job_title">Berufsbezeichnung</label>
                    <input
                      type="text"
                      id="profil-role"
                      list="profil-role-suggestions"
                      required
                      autocomplete="off"
                      data-i18n-placeholder="einstellungen.profil.job_title.placeholder"
                      placeholder="z.B. Associate, Partner, Patentanwalt"
                    />
                    <datalist id="profil-role-suggestions">
                      <option value="Partner"></option>
                      <option value="Associate"></option>
                      <option value="PA"></option>
                      <option value="Of Counsel"></option>
                      <option value="Counsel"></option>
                      <option value="Counsel Knowledge Lawyer"></option>
                      <option value="Knowledge Lawyer"></option>
                      <option value="Referendar/in"></option>
                      <option value="Trainee"></option>
                      <option value="wiss. Mitarbeiter/in"></option>
                      <option value="Sekretariat"></option>
                    </datalist>
                  </div>

                  <div className="form-field">
                    <label htmlFor="profil-lang" data-i18n="einstellungen.profil.lang">Sprache</label>
                    <select id="profil-lang">
                      <option value="de" data-i18n="einstellungen.profil.lang.de">Deutsch</option>
                      <option value="en" data-i18n="einstellungen.profil.lang.en">English</option>
                    </select>
                    <p className="form-hint" data-i18n="einstellungen.profil.lang.hint">
                      Wird f&uuml;r Oberfl&auml;che und Benachrichtigungs-E-Mails verwendet.
                    </p>
                  </div>

                  <p className="form-msg" id="profil-msg" />

                  <div className="form-actions">
                    <button type="submit" className="btn-primary btn-cta-lime" data-i18n="einstellungen.save">Speichern</button>
                  </div>
                </form>

                {/* "Meine Partner Units" — read-only summary of the current
                    user's structural memberships. Membership writes are
                    admin-driven via /admin/partner-units; this surface just
                    shows what the user is in today. */}
                <div className="caldav-info-card partner-unit-my-card" id="profil-partner-units">
                  <h2 data-i18n="partner_unit.heading">Meine Partner Units</h2>
                  <p className="form-hint" data-i18n="partner_unit.subtitle">
                    Partner Units sind strukturelle Einheiten &mdash; getrennt von Projektteams. Mitgliedschaft wird vom Admin verwaltet.
                  </p>
                  <div id="partner-unit-my" className="partner-unit-my" />
                </div>
              </section>

              {/* --- Benachrichtigungen tab ---------------------------- */}
              <section className="entity-tab-panel" id="tab-benachrichtigungen" style="display:none">
                <form id="prefs-form" className="entity-form" autocomplete="off">
                  <h2 className="settings-subhead" data-i18n="einstellungen.prefs.reminders.heading">Frist-Erinnerungen</h2>
                  <p className="form-hint" data-i18n="einstellungen.prefs.reminders.hint">
                    Paliad sendet Erinnerungen an Ihre E-Mail, wenn Fristen f&auml;llig werden.
                  </p>

                  <div className="form-field caldav-toggle-field">
                    <label className="caldav-toggle-label">
                      <input type="checkbox" id="prefs-reminders-master" />
                      <span data-i18n="einstellungen.prefs.reminders.master">Frist-Erinnerungen aktiv</span>
                    </label>
                  </div>

                  <div id="prefs-reminders-sub" className="settings-sub-group">
                    <div className="form-field caldav-toggle-field">
                      <label className="caldav-toggle-label">
                        <input type="checkbox" id="prefs-reminders-overdue" />
                        <span data-i18n="einstellungen.prefs.reminders.overdue">&Uuml;berf&auml;llige Fristen</span>
                      </label>
                    </div>
                    <div className="form-field caldav-toggle-field">
                      <label className="caldav-toggle-label">
                        <input type="checkbox" id="prefs-reminders-due-today" />
                        <span data-i18n="einstellungen.prefs.reminders.due_today">Heute f&auml;llig</span>
                      </label>
                    </div>
                    <div className="form-field caldav-toggle-field">
                      <label className="caldav-toggle-label">
                        <input type="checkbox" id="prefs-reminders-due-warning" />
                        <span data-i18n="einstellungen.prefs.reminders.due_warning">Vorwarnung (X Tage vorher)</span>
                      </label>
                    </div>
                  </div>

                  <h2 className="settings-subhead" data-i18n="einstellungen.prefs.times.heading">Zeitpunkte</h2>
                  <p className="form-hint" data-i18n="einstellungen.prefs.times.hint">
                    Erinnerungen werden zur gew&auml;hlten Uhrzeit in Ihrer Zeitzone versendet.
                  </p>

                  <div className="form-field-row">
                    <div className="form-field">
                      <label htmlFor="prefs-reminder-morning" data-i18n="einstellungen.prefs.times.morning">Morgen-Slot</label>
                      <input type="time" id="prefs-reminder-morning" required />
                      <p className="form-hint" data-i18n="einstellungen.prefs.times.morning.hint">
                        Sammel-E-Mail mit &uuml;berf&auml;lligen, heute f&auml;lligen und kommenden Fristen.
                      </p>
                    </div>
                    <div className="form-field">
                      <label htmlFor="prefs-reminder-evening" data-i18n="einstellungen.prefs.times.evening">Abend-Slot (Eskalation)</label>
                      <input type="time" id="prefs-reminder-evening" required />
                      <p className="form-hint" data-i18n="einstellungen.prefs.times.evening.hint">
                        Dringende Erinnerung an heute noch offene Fristen.
                      </p>
                    </div>
                  </div>

                  <div className="form-field">
                    <label htmlFor="prefs-reminder-timezone" data-i18n="einstellungen.prefs.times.timezone">Zeitzone</label>
                    <input
                      type="text"
                      id="prefs-reminder-timezone"
                      placeholder="Europe/Berlin"
                      autocomplete="off"
                    />
                    <p className="form-hint" data-i18n="einstellungen.prefs.times.timezone.hint">
                      IANA-Zeitzonen-Name (z.B. Europe/Berlin, Europe/London).
                    </p>
                  </div>

                  <div className="form-field">
                    <label htmlFor="prefs-warning-offset" data-i18n="einstellungen.prefs.warning_offset.label">Vorwarnung (Tage vorher)</label>
                    <input
                      type="number"
                      id="prefs-warning-offset"
                      min={1}
                      max={30}
                      step={1}
                      required
                    />
                    <p className="form-hint" data-i18n="einstellungen.prefs.warning_offset.hint">
                      Wir erinnern Sie diese viele Tage vor jeder Frist.
                    </p>
                  </div>

                  <h2 className="settings-subhead" data-i18n="einstellungen.prefs.escalation.heading">Eskalations-Kontakt</h2>
                  <p className="form-hint" data-i18n="einstellungen.prefs.escalation.hint">
                    Wer soll bei DRINGEND-Eskalation am Abend zus&auml;tzlich benachrichtigt werden? Standard: globale Admins.
                  </p>

                  <div className="form-field">
                    <label htmlFor="prefs-escalation-contact" data-i18n="einstellungen.prefs.escalation.heading">Eskalations-Kontakt</label>
                    <select id="prefs-escalation-contact" />
                  </div>

                  <p className="form-msg" id="prefs-msg" />

                  <div className="form-actions">
                    <button type="submit" className="btn-primary btn-cta-lime" data-i18n="einstellungen.save">Speichern</button>
                  </div>
                </form>
              </section>

              {/* --- CalDAV tab ---------------------------------------- */}
              <section className="entity-tab-panel" id="tab-caldav" style="display:none">
                <p className="tool-subtitle" data-i18n="caldav.subtitle">
                  Synchronisieren Sie Ihre Paliad-Termine mit Ihrem externen Kalender (Nextcloud, iCloud, Outlook, mailcow&hellip;).
                  Das Passwort wird verschl&uuml;sselt gespeichert und nie zur&uuml;ckgegeben.
                </p>

                <div id="caldav-disabled" className="entity-unavailable" style="display:none">
                  <p data-i18n="caldav.disabled">
                    CalDAV-Synchronisation derzeit nicht verf&uuml;gbar &mdash; bitte Administrator kontaktieren.
                  </p>
                </div>

                <div id="caldav-status-card" className="caldav-status-card" style="display:none">
                  <div className="caldav-status-row">
                    <span className="caldav-status-label" data-i18n="caldav.status.last_sync">Letzte Synchronisation:</span>
                    <span className="caldav-status-value" id="caldav-last-sync">&mdash;</span>
                  </div>
                  <div className="caldav-status-row" id="caldav-status-error-row" style="display:none">
                    <span className="caldav-status-label" data-i18n="caldav.status.last_error">Letzter Fehler:</span>
                    <span className="caldav-status-value caldav-status-error" id="caldav-last-error" />
                  </div>
                </div>

                <form id="caldav-form" className="entity-form" autocomplete="off">
                  <div className="form-field">
                    <label htmlFor="caldav-url" data-i18n="caldav.field.url">CalDAV-Server-URL</label>
                    <input
                      type="url"
                      id="caldav-url"
                      required
                      placeholder="https://cloud.example.com/remote.php/dav/calendars/user/personal/"
                      data-i18n-placeholder="caldav.field.url.placeholder"
                    />
                    <p className="form-hint" data-i18n="caldav.field.url.hint">
                      Vollst&auml;ndige URL zu Ihrem Kalender (inkl. Pfad).
                    </p>
                  </div>

                  <div className="form-field-row">
                    <div className="form-field">
                      <label htmlFor="caldav-username" data-i18n="caldav.field.username">Benutzername</label>
                      <input type="text" id="caldav-username" required autocomplete="off" />
                    </div>
                    <div className="form-field">
                      <label htmlFor="caldav-password" data-i18n="caldav.field.password">Passwort / App-Token</label>
                      <input
                        type="password"
                        id="caldav-password"
                        autocomplete="new-password"
                        placeholder="••••••••"
                      />
                      <p className="form-hint" id="caldav-password-hint" data-i18n="caldav.field.password.hint">
                        Bei vorhandener Konfiguration leer lassen, um das gespeicherte Passwort zu behalten.
                      </p>
                    </div>
                  </div>

                  <div className="form-field">
                    <label htmlFor="caldav-calendar-path" data-i18n="caldav.field.calendar_path">Kalenderpfad (optional)</label>
                    <input
                      type="text"
                      id="caldav-calendar-path"
                      placeholder="/calendars/user/personal/"
                      data-i18n-placeholder="caldav.field.calendar_path.placeholder"
                    />
                    <p className="form-hint" data-i18n="caldav.field.calendar_path.hint">
                      Falls die URL nur den Server zeigt, ist hier der Pfad zum konkreten Kalender einzutragen.
                    </p>
                  </div>

                  <div className="form-field caldav-toggle-field">
                    <label className="caldav-toggle-label">
                      <input type="checkbox" id="caldav-enabled" />
                      <span data-i18n="caldav.field.enabled">Synchronisation aktiv</span>
                    </label>
                  </div>

                  <p className="form-msg" id="caldav-msg" />

                  <div className="form-actions caldav-actions">
                    <button type="button" id="caldav-test-btn" className="btn-secondary" data-i18n="caldav.test">Verbindung testen</button>
                    <button type="button" id="caldav-delete-btn" className="btn-danger" style="display:none" data-i18n="caldav.delete">Konfiguration l&ouml;schen</button>
                    <button type="submit" className="btn-primary btn-cta-lime" data-i18n="caldav.save">Speichern</button>
                  </div>
                </form>

                {/* t-paliad-212 Slice 2b — multi-calendar bindings.
                    Each card is one (calendar, scope) binding layered on the
                    single CalDAV server connection above. */}
                <div className="caldav-bindings-section" id="caldav-bindings-section" style="display:none">
                  <div className="caldav-bindings-header">
                    <h2 data-i18n="caldav.bindings.heading">Kalender</h2>
                    <button type="button" id="caldav-bindings-add-btn" className="btn-secondary" data-i18n="caldav.bindings.add">
                      + Kalender hinzuf&uuml;gen
                    </button>
                  </div>
                  <p className="form-hint" data-i18n="caldav.bindings.hint">
                    Verbinde mehrere Kalender mit Paliad &mdash; einen Master f&uuml;r alles oder eigene Kalender pro Projekt.
                  </p>
                  <div id="caldav-bindings-list" className="caldav-bindings-list" />
                  <p className="entity-events-empty" id="caldav-bindings-empty" data-i18n="caldav.bindings.empty" style="display:none">
                    Noch keine Kalender konfiguriert.
                  </p>
                </div>

                <div className="caldav-log-card">
                  <h2 data-i18n="caldav.log.heading">Letzte Synchronisationen</h2>
                  <table className="entity-table entity-table--readonly caldav-log-table">
                    <thead>
                      <tr>
                        <th data-i18n="caldav.log.col.time">Zeitpunkt</th>
                        <th data-i18n="caldav.log.col.pushed">Gesendet</th>
                        <th data-i18n="caldav.log.col.pulled">Empfangen</th>
                        <th data-i18n="caldav.log.col.duration">Dauer</th>
                        <th data-i18n="caldav.log.col.error">Fehler</th>
                      </tr>
                    </thead>
                    <tbody id="caldav-log-body" />
                  </table>
                  <p className="entity-events-empty" id="caldav-log-empty" data-i18n="caldav.log.empty">
                    Noch keine Synchronisationen aufgezeichnet.
                  </p>
                </div>
              </section>

              {/* --- Datenexport tab (t-paliad-214 Slice 1) ----------- */}
              <section className="entity-tab-panel" id="tab-export" style="display:none">
                <p className="tool-subtitle" data-i18n="einstellungen.export.subtitle">
                  Laden Sie Ihre pers&ouml;nlichen Paliad-Daten als Excel- + JSON- + CSV-Paket herunter.
                  Enthalten ist alles, was Sie aktuell sehen k&ouml;nnen &mdash; Ihre Projekte, Fristen, Termine, Notizen, Genehmigungen und Einstellungen.
                </p>

                <div className="caldav-info-card">
                  <h2 data-i18n="einstellungen.export.heading">Pers&ouml;nlicher Datenexport</h2>
                  <p data-i18n="einstellungen.export.what">
                    Das Paket enth&auml;lt Ihre sichtbaren Daten in drei Formaten in einem <code>.zip</code>:
                  </p>
                  <ul className="form-hint settings-export-list">
                    <li data-i18n="einstellungen.export.bullet.xlsx">
                      <strong>paliad-export.xlsx</strong> &mdash; eine Excel-Mappe pro Entit&auml;t.
                    </li>
                    <li data-i18n="einstellungen.export.bullet.json">
                      <strong>paliad-export.json</strong> &mdash; maschinenlesbare Kopie f&uuml;r Skripte und Tools.
                    </li>
                    <li data-i18n="einstellungen.export.bullet.csv">
                      <strong>csv/&lt;sheet&gt;.csv</strong> &mdash; Tabellen einzeln als CSV (UTF-8 mit BOM).
                    </li>
                  </ul>

                  <p className="form-hint" data-i18n="einstellungen.export.scope">
                    Umfang: alles, was Sie aktuell in Paliad sehen k&ouml;nnen (Sichtbarkeit zum Zeitpunkt des Exports).
                    Passw&ouml;rter, CalDAV-Zugangsdaten und andere Geheimnisse werden nie exportiert.
                  </p>

                  <p className="form-hint" data-i18n="einstellungen.export.audit">
                    Jeder Export wird im Audit-Log protokolliert.
                  </p>

                  <p className="form-msg" id="export-msg" />

                  <div className="form-actions">
                    <button type="button" id="export-btn" className="btn-primary btn-cta-lime" data-i18n="einstellungen.export.button">
                      Daten exportieren
                    </button>
                  </div>
                </div>
              </section>

            </div>
          </section>
        </main>

        <Footer />
        <PaliadinWidget />

        {/* t-paliad-212 Slice 2b — single-step Add/Edit modal for
            calendar bindings. Source picker (existing dropdown or
            custom URL) + scope radio + display name. Edit mode hides
            the source picker (path is fixed). */}
        <div id="caldav-binding-modal" className="modal-backdrop" style="display:none">
          <div className="modal-dialog">
            <div className="modal-header">
              <h2 id="caldav-binding-modal-title" data-i18n="caldav.bindings.modal.add_title">Kalender hinzuf&uuml;gen</h2>
              <button type="button" className="modal-close" id="caldav-binding-modal-close" aria-label="Schlie&szlig;en">&times;</button>
            </div>
            <form id="caldav-binding-form" className="entity-form modal-body" autocomplete="off">
              <div className="form-field" id="caldav-binding-source-field">
                <label data-i18n="caldav.bindings.modal.source">Kalender</label>
                <div className="caldav-binding-source-modes" id="caldav-binding-source-modes">
                  <label className="caldav-toggle-label">
                    <input type="radio" name="caldav-binding-source-mode" value="existing" checked />
                    <span data-i18n="caldav.bindings.modal.source.existing">Vorhandenen Kalender w&auml;hlen</span>
                  </label>
                  <label className="caldav-toggle-label" id="caldav-binding-source-mode-create-row" style="display:none">
                    <input type="radio" name="caldav-binding-source-mode" value="create" />
                    <span data-i18n="caldav.bindings.modal.source.create">Neuen Kalender erstellen</span>
                  </label>
                  <label className="caldav-toggle-label">
                    <input type="radio" name="caldav-binding-source-mode" value="custom" />
                    <span data-i18n="caldav.bindings.modal.source.custom">Eigene URL eingeben</span>
                  </label>
                </div>
                <select id="caldav-binding-discover-select">
                  <option value="" data-i18n="caldav.bindings.modal.source.loading">L&auml;dt&hellip;</option>
                </select>
                <input
                  type="text"
                  id="caldav-binding-custom-path"
                  placeholder="https://..."
                  style="display:none"
                />
                {/* Slice 2c — Google-degrade notice. Shown when
                    supports_mkcalendar=false; the create-new radio is
                    hidden in that state, so users are nudged to the
                    custom-URL path. */}
                <p className="form-hint caldav-binding-degrade-notice" id="caldav-binding-degrade-notice" style="display:none" data-i18n="caldav.bindings.modal.source.degrade">
                  Dieser Anbieter erlaubt das Erstellen neuer Kalender nicht via CalDAV.
                  Erstelle den Kalender direkt in der Anbieter-Oberfl&auml;che und f&uuml;ge ihn hier per URL hinzu.
                </p>
              </div>

              <div className="form-field">
                <label htmlFor="caldav-binding-display-name" data-i18n="caldav.bindings.modal.display_name">Anzeigename (optional)</label>
                <input type="text" id="caldav-binding-display-name" data-i18n-placeholder="caldav.bindings.modal.display_name.placeholder" placeholder="z.B. Projekt Acme v Bosch" />
              </div>

              <div className="form-field">
                <label data-i18n="caldav.bindings.modal.scope">Inhalt</label>
                <div className="caldav-binding-scope-radios">
                  <label className="caldav-toggle-label">
                    <input type="radio" name="caldav-binding-scope" value="all_visible" checked />
                    <span data-i18n="caldav.bindings.modal.scope.all_visible">Alles, was ich sehe</span>
                  </label>
                  <label className="caldav-toggle-label">
                    <input type="radio" name="caldav-binding-scope" value="personal_only" />
                    <span data-i18n="caldav.bindings.modal.scope.personal_only">Nur pers&ouml;nliche Termine</span>
                  </label>
                  <label className="caldav-toggle-label">
                    <input type="radio" name="caldav-binding-scope" value="project" />
                    <span data-i18n="caldav.bindings.modal.scope.project">Ein Projekt:</span>
                    <select id="caldav-binding-project-select" disabled>
                      <option value="" data-i18n="caldav.bindings.modal.scope.project.loading">L&auml;dt&hellip;</option>
                    </select>
                  </label>
                </div>
              </div>

              <p className="form-msg" id="caldav-binding-msg" />

              <div className="form-actions">
                <button type="button" className="btn-secondary" id="caldav-binding-cancel-btn" data-i18n="common.cancel">Abbrechen</button>
                <button type="submit" className="btn-primary btn-cta-lime" id="caldav-binding-submit-btn" data-i18n="caldav.bindings.modal.submit_add">Hinzuf&uuml;gen</button>
              </div>
            </form>
          </div>
        </div>

        <script src="/assets/settings.js"></script>
      </body>
    </html>
  );
}
