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

// /projects page (t-paliad-149 redesign):
//   - Tree view by default (rooted at clients, descendants navigable)
//   - Chip filter row: Alle / Nur meine / Angepinnt / Status / Typ / Mit aktiven Fristen
//   - Single prominent search input (in-place filter on the active view)
//   - View-mode segment-control: Tree | Liste (Cards added in PR 2)
//
// All client behaviour lives in client/projects.ts orchestrator + the
// shape modules (project-tree.ts, projects-flat.ts).
export function renderProjects(): 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="projects.title">Projekte &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/projects" />
        <BottomNav currentPath="/projects" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <div className="entity-header-row">
                  <div>
                    <h1 data-i18n="projects.heading">Projekte</h1>
                    <p className="tool-subtitle" data-i18n="projects.subtitle">
                      Mandanten, Streitsachen, Patente und Verfahren &mdash; hierarchisch organisiert.
                    </p>
                  </div>
                  <a href="/projects/new" className="btn-primary btn-cta-lime" data-i18n="projects.new">
                    Neues Projekt
                  </a>
                </div>
              </div>

              <div className="projects-toolbar">
                <div className="projects-search-wrap">
                  <svg className="projects-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="11" cy="11" r="8" />
                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
                  </svg>
                  <input
                    type="text"
                    id="projects-search"
                    className="projects-search-input"
                    placeholder="Suchen — Titel, Referenz, ClientMatter…"
                    data-i18n-placeholder="projects.toolbar.search.placeholder"
                    autocomplete="off"
                  />
                  <span className="projects-search-count" id="projects-count" />
                </div>

                <div className="projects-view-segment" role="tablist" aria-label="Ansicht">
                  <button type="button" className="projects-view-btn" data-view="tree" data-i18n="projects.toolbar.view.tree">Baum</button>
                  <button type="button" className="projects-view-btn" data-view="cards" data-i18n="projects.toolbar.view.cards">Karten</button>
                  <button type="button" className="projects-view-btn" data-view="flat" data-i18n="projects.toolbar.view.flat">Liste</button>
                </div>
              </div>

              <div className="projects-cards-toolbar" id="projects-cards-toolbar" style="display:none">
                <div className="projects-cards-layout-picker">
                  <label className="projects-cards-layout-label" data-i18n="projects.cards.layout.label">Ansicht</label>
                  <select id="projects-cards-layout-select" className="entity-select" />
                  <button type="button" id="projects-cards-layout-edit" className="btn-secondary" data-i18n="projects.cards.layout.edit">Bearbeiten</button>
                  <button type="button" id="projects-cards-layout-new" className="btn-secondary" data-i18n="projects.cards.layout.new">Neue Ansicht</button>
                </div>
                <label className="projects-cards-show-all-levels">
                  <input type="checkbox" id="projects-cards-show-all-levels" />
                  <span data-i18n="projects.cards.show_all_levels">Alle Ebenen anzeigen</span>
                </label>
              </div>

              <div className="projects-cards-edit-toolbar" id="projects-cards-edit-toolbar" style="display:none">
                <div className="projects-cards-edit-controls">
                  <label data-i18n="projects.cards.layout.density">Dichte</label>
                  <select id="projects-cards-edit-density">
                    <option value="roomy" data-i18n="projects.cards.layout.density.roomy">Geräumig</option>
                    <option value="compact" data-i18n="projects.cards.layout.density.compact">Kompakt</option>
                  </select>
                  <label data-i18n="projects.cards.layout.grid">Spalten</label>
                  <select id="projects-cards-edit-grid">
                    <option value="auto" data-i18n="projects.cards.layout.grid.auto">Auto</option>
                    <option value="2" data-i18n="projects.cards.layout.grid.2">2</option>
                    <option value="3" data-i18n="projects.cards.layout.grid.3">3</option>
                    <option value="4" data-i18n="projects.cards.layout.grid.4">4</option>
                  </select>
                </div>
                <div className="projects-cards-edit-actions">
                  <button type="button" id="projects-cards-edit-rename" className="btn-secondary" data-i18n="projects.cards.layout.rename">Umbenennen</button>
                  <button type="button" id="projects-cards-edit-delete" className="btn-secondary" data-i18n="projects.cards.layout.delete">Löschen</button>
                  <button type="button" id="projects-cards-edit-set-default" className="btn-secondary" data-i18n="projects.cards.layout.set_default">Als Standard festlegen</button>
                  <button type="button" id="projects-cards-edit-discard" className="btn-secondary" data-i18n="projects.cards.layout.discard">Verwerfen</button>
                  <button type="button" id="projects-cards-edit-save" className="btn-primary" data-i18n="projects.cards.layout.save">Speichern</button>
                </div>
              </div>

              <div className="projects-chip-row" id="projects-chip-row" role="group" aria-label="Filter">
                <button type="button" className="projects-chip" data-chip="all" data-i18n="projects.chip.all">Alle</button>
                <button type="button" className="projects-chip" data-chip="mine" data-i18n="projects.chip.mine">Nur meine</button>
                <button type="button" className="projects-chip" data-chip="pinned" data-i18n="projects.chip.pinned">Angepinnt</button>
                <details className="projects-chip-multi" data-chip-multi="status">
                  <summary className="projects-chip" data-i18n="projects.chip.status">Status</summary>
                  <div className="projects-chip-panel" role="menu">
                    <label><input type="checkbox" value="active" /><span data-i18n="projects.chip.status.active">Aktiv</span></label>
                    <label><input type="checkbox" value="archived" /><span data-i18n="projects.chip.status.archived">Archiviert</span></label>
                    <label><input type="checkbox" value="closed" /><span data-i18n="projects.chip.status.closed">Abgeschlossen</span></label>
                  </div>
                </details>
                <details className="projects-chip-multi" data-chip-multi="type">
                  <summary className="projects-chip" data-i18n="projects.chip.type">Typ</summary>
                  <div className="projects-chip-panel" role="menu">
                    <label><input type="checkbox" value="client" /><span data-i18n="projects.chip.type.client">Mandant</span></label>
                    <label><input type="checkbox" value="litigation" /><span data-i18n="projects.chip.type.litigation">Streitsache</span></label>
                    <label><input type="checkbox" value="patent" /><span data-i18n="projects.chip.type.patent">Patent</span></label>
                    <label><input type="checkbox" value="case" /><span data-i18n="projects.chip.type.case">Verfahren</span></label>
                    <label><input type="checkbox" value="project" /><span data-i18n="projects.chip.type.project">Projekt</span></label>
                    <label><input type="checkbox" value="other" /><span data-i18n="projects.chip.type.other">Sonstiges</span></label>
                  </div>
                </details>
                <button type="button" className="projects-chip" data-chip="has_open_deadlines" data-i18n="projects.chip.has_open_deadlines">Mit aktiven Fristen</button>
              </div>

              <div id="entity-unavailable" className="entity-unavailable" style="display:none">
                <p data-i18n="projects.unavailable">
                  Projektverwaltung zurzeit nicht verf&uuml;gbar &mdash; bitte Administrator kontaktieren.
                </p>
              </div>

              <div className="entity-table-wrap" id="entity-table-wrap" style="display:none">
                <table className="entity-table" id="entity-table">
                  <thead>
                    <tr>
                      <th data-i18n="projects.col.title">Titel</th>
                      <th data-i18n="projects.col.type">Typ</th>
                      <th data-i18n="projects.col.reference">Referenz</th>
                      <th data-i18n="projects.col.clientmatter">ClientMatter</th>
                      <th className="entity-col-status" data-i18n="projects.col.status">Status</th>
                      <th data-i18n="projects.col.updated">Zuletzt ge&auml;ndert</th>
                    </tr>
                  </thead>
                  <tbody id="projects-body" />
                </table>
              </div>

              <div className="projekt-tree-wrap" id="projekt-tree-wrap">
                <div id="projekt-tree-container" />
              </div>

              <div className="projects-cards-wrap" id="projects-cards-wrap" style="display:none">
                <div id="projects-cards-grid" className="projects-cards-grid" />
              </div>

              <div className="entity-empty" id="entity-empty" style="display:none">
                <h2 data-i18n="projects.empty.title">Noch kein Projekt angelegt</h2>
                <p data-i18n="projects.empty.hint">
                  Starten Sie &uuml;ber &bdquo;Neues Projekt&ldquo; &mdash; legen Sie zuerst einen Mandanten an, darunter Streitsachen, Patente und Verfahren.
                </p>
                <a href="/projects/new" className="btn-primary btn-cta-lime" data-i18n="projects.new">Neues Projekt</a>
              </div>

              <div className="entity-empty entity-empty-filtered" id="entity-empty-filtered" style="display:none">
                <p data-i18n="projects.empty.filtered">Keine Treffer f&uuml;r diese Filter.</p>
                <button type="button" id="projects-reset-filters" className="btn-secondary" data-i18n="projects.empty.filtered.action">Filter zur&uuml;cksetzen</button>
              </div>
            </div>
          </section>
        </main>

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