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

export function renderGebuehrentabellen(): 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="gebuehren.title">Geb&uuml;hrentabellen &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/tools/gebuehrentabellen" />
        <BottomNav currentPath="/tools/gebuehrentabellen" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <div className="gebuehren-header-row">
                  <div>
                    <h1 data-i18n="gebuehren.heading">Geb&uuml;hrentabellen</h1>
                    <p className="tool-subtitle" data-i18n="gebuehren.subtitle">
                      Interaktive Geb&uuml;hrentabellen f&uuml;r GKG, RVG, UPC, EPA und PatKostG.
                    </p>
                  </div>
                  <button className="btn-suggest" id="btn-feedback" type="button">
                    <span data-i18n="gebuehren.feedback.btn">Feedback</span>
                  </button>
                </div>
              </div>

              {/* Streitwert lookup */}
              <div className="gebuehren-lookup">
                <label htmlFor="streitwert-input" data-i18n="gebuehren.streitwert">Streitwert (EUR)</label>
                <div className="gebuehren-lookup-row">
                  <span className="gebuehren-currency">EUR</span>
                  <input
                    type="text"
                    id="streitwert-input"
                    className="gebuehren-input"
                    placeholder="z.B. 1.000.000"
                    data-i18n-placeholder="gebuehren.streitwert.placeholder"
                    autocomplete="off"
                  />
                  <button type="button" id="btn-lookup" className="btn-lookup" data-i18n="gebuehren.lookup">
                    Nachschlagen
                  </button>
                </div>
              </div>

              {/* Lookup result */}
              <div className="gebuehren-lookup-result" id="lookup-result" style="display:none" />

              {/* Tabs */}
              <div className="gebuehren-tabs" id="gebuehren-tabs">
                <button className="gebuehren-tab active" data-tab="gkg" type="button">GKG</button>
                <button className="gebuehren-tab" data-tab="rvg" type="button">RVG</button>
                <button className="gebuehren-tab" data-tab="upc" type="button">UPC</button>
                <button className="gebuehren-tab" data-tab="epa" type="button">EPA</button>
                <button className="gebuehren-tab" data-tab="patkostg" type="button">PatKostG</button>
              </div>

              {/* GKG panel */}
              <div id="tab-gkg" className="gebuehren-panel">
                <div className="gebuehren-versions" id="gkg-versions" />
                <div className="gebuehren-table-wrap">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.col.streitwert">Streitwert (EUR)</th>
                        <th data-i18n="gebuehren.col.fee">1,0 Geb&uuml;hr (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="gkg-body" />
                  </table>
                </div>
              </div>

              {/* RVG panel */}
              <div id="tab-rvg" className="gebuehren-panel" style="display:none">
                <div className="gebuehren-versions" id="rvg-versions" />
                <div className="gebuehren-table-wrap">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.col.streitwert">Streitwert (EUR)</th>
                        <th data-i18n="gebuehren.col.fee">1,0 Geb&uuml;hr (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="rvg-body" />
                  </table>
                </div>
              </div>

              {/* UPC panel */}
              <div id="tab-upc" className="gebuehren-panel" style="display:none">
                <div className="gebuehren-versions" id="upc-versions" />
                <div className="gebuehren-upc-summary" id="upc-summary" />
                <h3 className="gebuehren-section-title" data-i18n="gebuehren.upc.valuebased">Streitwertabh&auml;ngige Geb&uuml;hren</h3>
                <div className="gebuehren-table-wrap">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.col.maxvalue">bis Streitwert (EUR)</th>
                        <th data-i18n="gebuehren.col.courtfee">Gerichtsgeb&uuml;hr (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="upc-value-body" />
                  </table>
                </div>
                <h3 className="gebuehren-section-title" data-i18n="gebuehren.upc.recoverable">Erstattungsf&auml;hige Kosten (Obergrenze)</h3>
                <div className="gebuehren-table-wrap gebuehren-table-wrap-short">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.col.maxvalue">bis Streitwert (EUR)</th>
                        <th data-i18n="gebuehren.upc.ceiling">Obergrenze (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="upc-recover-body" />
                  </table>
                </div>
              </div>

              {/* EPA panel */}
              <div id="tab-epa" className="gebuehren-panel" style="display:none">
                <div className="gebuehren-table-wrap">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.epa.proceeding">Verfahren</th>
                        <th data-i18n="gebuehren.epa.fee">Geb&uuml;hr (EUR)</th>
                        <th data-i18n="gebuehren.epa.smefee">KMU-Geb&uuml;hr (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="epa-body" />
                  </table>
                </div>
              </div>

              {/* PatKostG panel */}
              <div id="tab-patkostg" className="gebuehren-panel" style="display:none">
                <h3 className="gebuehren-section-title" data-i18n="gebuehren.patkostg.court">Gerichtskosten (BPatG / BGH)</h3>
                <div className="gebuehren-table-wrap gebuehren-table-wrap-short">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.multipliers.instance">Instanz</th>
                        <th data-i18n="gebuehren.multipliers.factor">Faktor</th>
                        <th data-i18n="gebuehren.patkostg.note">Hinweis</th>
                      </tr>
                    </thead>
                    <tbody id="patkostg-court-body" />
                  </table>
                </div>

                <h3 className="gebuehren-section-title" data-i18n="gebuehren.patkostg.dpma">DPMA-Geb&uuml;hren</h3>
                <div className="gebuehren-table-wrap gebuehren-table-wrap-short">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.patkostg.item">Geb&uuml;hrentatbestand</th>
                        <th data-i18n="gebuehren.epa.fee">Geb&uuml;hr (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="patkostg-dpma-body" />
                  </table>
                </div>

                <h3 className="gebuehren-section-title" data-i18n="gebuehren.patkostg.annual">Jahresgeb&uuml;hren (Patent)</h3>
                <div className="gebuehren-table-wrap gebuehren-table-wrap-short">
                  <table className="gebuehren-table">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.patkostg.year">Patentjahr</th>
                        <th data-i18n="gebuehren.epa.fee">Geb&uuml;hr (EUR)</th>
                      </tr>
                    </thead>
                    <tbody id="patkostg-annual-body" />
                  </table>
                </div>
              </div>

              {/* Multipliers reference */}
              <div id="multipliers-section" className="gebuehren-multipliers">
                <h3 data-i18n="gebuehren.multipliers.title">Geb&uuml;hren-Multiplikatoren</h3>
                <p className="gebuehren-multipliers-desc" data-i18n="gebuehren.multipliers.desc">
                  Faktoren f&uuml;r die Berechnung von Gerichts- und Anwaltskosten je Instanz.
                </p>
                <div className="gebuehren-table-wrap">
                  <table className="gebuehren-table gebuehren-table-compact">
                    <thead>
                      <tr>
                        <th data-i18n="gebuehren.multipliers.instance">Instanz</th>
                        <th data-i18n="gebuehren.multipliers.courtfee">Gericht</th>
                        <th data-i18n="gebuehren.multipliers.basis">Grundlage</th>
                        <th>RA VG</th>
                        <th>RA TG</th>
                        <th>PA VG</th>
                        <th>PA TG</th>
                      </tr>
                    </thead>
                    <tbody id="multipliers-body" />
                  </table>
                </div>
              </div>
            </div>
          </section>
        </main>

        {/* Feedback modal */}
        <div className="modal-overlay" id="feedback-modal" style="display:none">
          <div className="modal-card">
            <div className="modal-header">
              <h2 data-i18n="gebuehren.feedback.title">Feedback zur Geb&uuml;hrentabelle</h2>
              <button className="modal-close" id="modal-close" type="button">&times;</button>
            </div>
            <form id="feedback-form">
              <div className="form-field">
                <label htmlFor="feedback-type" data-i18n="gebuehren.feedback.type">Art</label>
                <select id="feedback-type" required>
                  <option value="error" data-i18n="gebuehren.feedback.error">Fehler gefunden</option>
                  <option value="missing" data-i18n="gebuehren.feedback.missing">Fehlende Daten</option>
                  <option value="suggestion" data-i18n="gebuehren.feedback.suggestion">Verbesserungsvorschlag</option>
                  <option value="other" data-i18n="gebuehren.feedback.other">Sonstiges</option>
                </select>
              </div>
              <div className="form-field">
                <label htmlFor="feedback-schedule" data-i18n="gebuehren.feedback.schedule">Betrifft</label>
                <select id="feedback-schedule">
                  <option value="gkg">GKG</option>
                  <option value="rvg">RVG</option>
                  <option value="upc">UPC</option>
                  <option value="epa">EPA</option>
                  <option value="patkostg">PatKostG</option>
                  <option value="general" data-i18n="gebuehren.feedback.general">Allgemein</option>
                </select>
              </div>
              <div className="form-field">
                <label htmlFor="feedback-message" data-i18n="gebuehren.feedback.message">Nachricht</label>
                <textarea id="feedback-message" rows={3} required />
              </div>
              <div className="form-actions">
                <button type="button" className="btn-cancel" id="modal-cancel" data-i18n="gebuehren.feedback.cancel">Abbrechen</button>
                <button type="submit" className="btn-submit" data-i18n="gebuehren.feedback.submit">Absenden</button>
              </div>
              <p className="form-msg" id="feedback-msg" />
            </form>
          </div>
        </div>

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