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

// Paliadin monitoring dashboard (t-paliad-146 PoC).
//
// global_admin only. The load-bearing artefact for §0.5.7's expansion
// gate decision: m looks at this every week or two and decides if
// Paliadin earns a production v1 build.
export function renderAdminPaliadin(): 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="admin.paliadin.title">Paliadin Monitor &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/admin/paliadin" />
        <BottomNav currentPath="/admin/paliadin" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <div>
                  <h1 data-i18n="admin.paliadin.heading">Paliadin Monitor</h1>
                  <p className="tool-subtitle" data-i18n="admin.paliadin.subtitle">
                    Wie wird Paliadin tats&auml;chlich verwendet?
                  </p>
                </div>
              </div>

              <div className="paliadin-stats" id="paliadin-stats">
                <div className="paliadin-stat-cards">
                  <div className="paliadin-stat-card">
                    <div className="paliadin-stat-label" data-i18n="admin.paliadin.total">Gesamt</div>
                    <div className="paliadin-stat-value" id="stat-total">&mdash;</div>
                  </div>
                  <div className="paliadin-stat-card">
                    <div className="paliadin-stat-label" data-i18n="admin.paliadin.last7">Letzte 7 Tage</div>
                    <div className="paliadin-stat-value" id="stat-7d">&mdash;</div>
                  </div>
                  <div className="paliadin-stat-card">
                    <div className="paliadin-stat-label" data-i18n="admin.paliadin.median_dur">Median Dauer</div>
                    <div className="paliadin-stat-value" id="stat-median">&mdash;</div>
                  </div>
                  <div className="paliadin-stat-card">
                    <div className="paliadin-stat-label" data-i18n="admin.paliadin.tool_rate">Tool-Use Rate</div>
                    <div className="paliadin-stat-value" id="stat-tools">&mdash;</div>
                  </div>
                  <div className="paliadin-stat-card">
                    <div className="paliadin-stat-label" data-i18n="admin.paliadin.abandon_rate">Abbruchrate</div>
                    <div className="paliadin-stat-value" id="stat-abandon">&mdash;</div>
                  </div>
                </div>

                <h2 data-i18n="admin.paliadin.classifier_heading">Anfragearten</h2>
                <div className="paliadin-classifier" id="classifier-bars" />

                <h2 data-i18n="admin.paliadin.daily_heading">T&auml;gliche Nutzung</h2>
                <div className="paliadin-spark" id="daily-spark" />

                <h2 data-i18n="admin.paliadin.top_heading">Top Anfragen</h2>
                <table className="entity-table entity-table--readonly">
                  <thead>
                    <tr>
                      <th data-i18n="admin.paliadin.col.prompt">Anfrage</th>
                      <th data-i18n="admin.paliadin.col.count">Anzahl</th>
                    </tr>
                  </thead>
                  <tbody id="top-prompts-tbody">
                    <tr><td colspan={2} data-i18n="admin.paliadin.loading">Lade &hellip;</td></tr>
                  </tbody>
                </table>

                <h2 data-i18n="admin.paliadin.recent_heading">Letzte Anfragen</h2>
                <table className="entity-table entity-table--readonly">
                  <thead>
                    <tr>
                      <th data-i18n="admin.paliadin.col.started">Zeit</th>
                      <th data-i18n="admin.paliadin.col.user">Nutzer</th>
                      <th data-i18n="admin.paliadin.col.classifier">Art</th>
                      <th data-i18n="admin.paliadin.col.prompt">Anfrage</th>
                      <th data-i18n="admin.paliadin.col.response">Antwort</th>
                      <th data-i18n="admin.paliadin.col.tools">Tools</th>
                      <th data-i18n="admin.paliadin.col.origin">Seite</th>
                      <th data-i18n="admin.paliadin.col.duration">Dauer</th>
                    </tr>
                  </thead>
                  <tbody id="recent-turns-tbody">
                    <tr><td colspan={8} data-i18n="admin.paliadin.loading">Lade &hellip;</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        </main>

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