import { h } from "./jsx";
import { Sidebar } from "./components/Sidebar";
import { BottomNav } from "./components/BottomNav";
import { Footer } from "./components/Footer";
import { PWAHead } from "./components/PWAHead";

// Paliadin chat panel page (t-paliad-146 PoC).
//
// Single full-page surface; m types into an input at the bottom, sees
// a stream of bubbles above. Server-side hydration is deliberately
// minimal — the panel boots empty, the client manages state in
// localStorage (per design §0.5.4 session-only history).
export function renderPaliadin(): 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="paliadin.title">Paliadin &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/paliadin" />
        <BottomNav currentPath="/paliadin" />

        <main>
          <section className="tool-page paliadin-page">
            <div className="container paliadin-container">
              <div className="tool-header paliadin-header">
                <div>
                  <h1 data-i18n="paliadin.heading">&#x2728; Paliadin</h1>
                  <p className="tool-subtitle paliadin-tagline" data-i18n="paliadin.tagline">
                    Ich kenne deine Akten und Paliads Wissensbasis.
                  </p>
                </div>
                <button type="button" className="btn-secondary paliadin-reset" id="paliadin-reset"
                        data-i18n="paliadin.reset">
                  Neue Unterhaltung
                </button>
              </div>

              <div className="paliadin-stream" id="paliadin-stream" aria-live="polite">
                <div className="paliadin-empty" id="paliadin-empty">
                  <p data-i18n="paliadin.empty">Was kann ich f&uuml;r dich tun?</p>
                  <div className="paliadin-starters" id="paliadin-starters">
                    <button type="button" className="paliadin-starter"
                            data-prompt-de="Was steht heute an?"
                            data-prompt-en="What's on my plate today?"
                            data-i18n="paliadin.starter.today">
                      Was steht heute an?
                    </button>
                    <button type="button" className="paliadin-starter"
                            data-prompt-de="Welche Fristen sind diese Woche f&auml;llig?"
                            data-prompt-en="Which deadlines are due this week?"
                            data-i18n="paliadin.starter.week">
                      Welche Fristen sind diese Woche f&auml;llig?
                    </button>
                    <button type="button" className="paliadin-starter"
                            data-prompt-de="Erkl&auml;re mir Klageerwiderung."
                            data-prompt-en="Explain Klageerwiderung."
                            data-i18n="paliadin.starter.concept">
                      Erkl&auml;re mir Klageerwiderung.
                    </button>
                  </div>
                </div>
              </div>

              <form className="paliadin-form" id="paliadin-form">
                <textarea className="paliadin-input" id="paliadin-input"
                          rows={2}
                          data-i18n-placeholder="paliadin.input.placeholder"
                          placeholder="Frag den Paliadin&hellip;"
                          required></textarea>
                <button type="submit" className="btn-primary paliadin-send" id="paliadin-send"
                        data-i18n="paliadin.send">
                  Senden
                </button>
                <button type="button" className="btn-secondary paliadin-stop" id="paliadin-stop"
                        style="display:none"
                        data-i18n="paliadin.stop">
                  Stop
                </button>
              </form>
            </div>
          </section>
        </main>

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