import { h, Fragment } from "../jsx";

// PaliadinWidget — inline floating-button + slide-out drawer for the
// Paliad assistant (t-paliad-161).
//
// Rendered on every authenticated page near </body>. Hidden by default
// (display:none) and revealed by client/paliadin-widget.ts after a
// /api/me call confirms the caller is the Paliadin owner — same fail-
// closed pattern as the sidebar /paliadin link.
//
// Visibility is also gated on the current pathname: hidden on /paliadin
// (the standalone page IS the assistant), /login, and /onboarding.
//
// Trigger: click the floating ✨ button or press Cmd+J / Ctrl+J. (Cmd+K
// is reserved for the global search palette in client/search.ts.)

const ICON_SPARKLE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="M5.6 5.6l2.8 2.8"/><path d="M15.6 15.6l2.8 2.8"/><path d="M5.6 18.4l2.8-2.8"/><path d="M15.6 8.4l2.8-2.8"/></svg>';
const ICON_CLOSE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
const ICON_RESET = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><polyline points="3 4 3 10 9 10"/></svg>';
const ICON_FULLSCREEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l-4 4"/><path d="M21 3l-4 4"/><polyline points="14 3 21 3 21 10"/><polyline points="10 21 3 21 3 14"/></svg>';
const ICON_SEND = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>';

export function PaliadinWidget(): string {
  return (
    <Fragment>
      {/*
        Floating trigger button. Hidden by default (display:none); revealed
        by client/paliadin-widget.ts after /api/me confirms the caller is
        the Paliadin owner AND the route is one where the widget should
        show. The widget hides itself again on /paliadin, /login,
        /onboarding via the same predicate.
      */}
      <button
        type="button"
        id="paliadin-widget-trigger"
        className="paliadin-widget-trigger"
        style="display:none"
        aria-label="Paliadin"
        title="Paliadin (Cmd+J)"
        data-i18n-title="paliadin.widget.trigger"
      >
        <span className="paliadin-widget-trigger-glyph"
              dangerouslySetInnerHTML={{ __html: ICON_SPARKLE }} />
      </button>

      {/*
        Backdrop scrim — receives clicks to close. Pointer-events guard
        on display:none (CSS) until the drawer opens.
      */}
      <div
        id="paliadin-widget-scrim"
        className="paliadin-widget-scrim"
        aria-hidden="true"
        style="display:none"
      />

      {/*
        Slide-out drawer. role="dialog" + aria-modal so screen readers
        announce it as a modal panel; aria-labelledby points at the
        header h2.
      */}
      <aside
        id="paliadin-widget-drawer"
        className="paliadin-widget-drawer"
        role="dialog"
        aria-modal="true"
        aria-labelledby="paliadin-widget-title"
        aria-hidden="true"
        style="display:none"
        data-open="false"
      >
        <header className="paliadin-widget-header">
          <h2 id="paliadin-widget-title" className="paliadin-widget-title">
            <span className="paliadin-widget-title-glyph"
                  dangerouslySetInnerHTML={{ __html: ICON_SPARKLE }} />
            <span data-i18n="paliadin.widget.title">Paliadin</span>
          </h2>
          <div className="paliadin-widget-actions">
            <button
              type="button"
              id="paliadin-widget-reset"
              className="paliadin-widget-action-btn"
              aria-label="Reset"
              title="Konversation zurücksetzen"
              data-i18n-title="paliadin.widget.reset"
            >
              <span dangerouslySetInnerHTML={{ __html: ICON_RESET }} />
            </button>
            <a
              href="/paliadin"
              id="paliadin-widget-fullscreen"
              className="paliadin-widget-action-btn"
              aria-label="Fullscreen"
              title="Vollbild-Modus"
              data-i18n-title="paliadin.widget.fullscreen"
            >
              <span dangerouslySetInnerHTML={{ __html: ICON_FULLSCREEN }} />
            </a>
            <button
              type="button"
              id="paliadin-widget-close"
              className="paliadin-widget-action-btn"
              aria-label="Close"
              title="Schließen"
              data-i18n-title="paliadin.widget.close"
            >
              <span dangerouslySetInnerHTML={{ __html: ICON_CLOSE }} />
            </button>
          </div>
        </header>

        {/*
          Context chip — shows what Paliadin knows about the current page
          (route + primary entity). Populated by paliadin-widget.ts from
          computePaliadinContext() each time the drawer opens.
        */}
        <div
          id="paliadin-widget-context-chip"
          className="paliadin-widget-context-chip"
          style="display:none"
        >
          <span className="paliadin-widget-context-label"
                data-i18n="paliadin.widget.context.on_page">Auf dieser Seite</span>
          <span className="paliadin-widget-context-value" id="paliadin-widget-context-value" />
        </div>

        {/*
          Message stream + empty-state starter prompts. Empty state
          renders the per-route starter list from
          frontend/src/client/paliadin-starters.ts; on first send it
          slides out and the messages take over.
        */}
        <div
          id="paliadin-widget-messages"
          className="paliadin-widget-messages"
          aria-live="polite"
        >
          <div className="paliadin-widget-empty" id="paliadin-widget-empty">
            <p className="paliadin-widget-empty-prompt"
               data-i18n="paliadin.widget.empty">Was kann ich für dich tun?</p>
            <div
              className="paliadin-widget-starters"
              id="paliadin-widget-starters"
            >
              {/* Populated by paliadin-widget.ts from the per-route registry. */}
            </div>
          </div>
        </div>

        <form className="paliadin-widget-form" id="paliadin-widget-form">
          <textarea
            className="paliadin-widget-input"
            id="paliadin-widget-input"
            rows={2}
            placeholder="Frage an Paliadin..."
            data-i18n-placeholder="paliadin.widget.input.placeholder"
            aria-label="Nachricht an Paliadin"
            data-i18n-aria-label="paliadin.widget.input.label"
            maxlength={4000}
          />
          <button
            type="submit"
            className="paliadin-widget-send-btn"
            id="paliadin-widget-send-btn"
            aria-label="Senden"
            title="Senden"
            data-i18n-title="paliadin.widget.send"
          >
            <span dangerouslySetInnerHTML={{ __html: ICON_SEND }} />
          </button>
        </form>
      </aside>

      <script src="/assets/paliadin-widget.js" defer />
    </Fragment>
  );
}
