// Active-thread dock with Sigil header, conversation bubbles, numbered options.
// Ported from docs/design-source/socrata/project/socrates.jsx (SocratesDock).
// "subtle" presence renders a floating sigil + count badge.

import { Sigil } from "./Sigil";
import type { FixtureSocratesTurn } from "../../lib/fixtures/aristotle";

export type SocratesPresence = "subtle" | "default" | "prominent";
export type Density = "comfortable" | "compact";

interface SocratesDockProps {
  thread: FixtureSocratesTurn[];
  presence: SocratesPresence;
  density: Density;
}

export function SocratesDock({ thread, presence }: SocratesDockProps) {
  if (presence === "subtle") {
    return (
      <div className="dock dock-subtle">
        <Sigil size={36} />
        <div className="dock-subtle-count">3</div>
      </div>
    );
  }

  return (
    <aside className={`dock ${presence === "prominent" ? "dock-prominent" : "dock-default"}`}>
      <header className="dock-header">
        <Sigil size={28} />
        <div className="dock-header-text">
          <div className="dock-name">Socrates</div>
          <div className="dock-status">
            <span className="dock-dot" /> 2 open threads
          </div>
        </div>
        <button className="dock-header-action" title="New thread" type="button">
          +
        </button>
      </header>

      <section className="dock-thread-wrap">
        <div className="dock-section-label dock-section-label-inline">Active thread · Aristotle</div>
        <div className="dock-thread">
          {thread.map((m, i) => (
            <div key={i} className={`bubble bubble-${m.who}`}>
              {m.who === "socrates" && <span className="bubble-sigil">Σ</span>}
              <span className="bubble-body">
                <span className="bubble-text">{m.text}</span>
                {m.options && (
                  <div className="bubble-options">
                    {m.options.map(o => (
                      <button key={o.n} className="bubble-option" type="button">
                        <span className="bubble-option-num">{o.n}</span>
                        <span className="bubble-option-text">
                          <span className="bubble-option-label">{o.label}</span>
                          <span className="bubble-option-sub">{o.sub}</span>
                        </span>
                        <span className="bubble-option-key">{o.n}</span>
                      </button>
                    ))}
                    <div className="bubble-options-hint">
                      Press <kbd>1</kbd>–<kbd>{m.options.length}</kbd>, or type a reply
                    </div>
                  </div>
                )}
              </span>
            </div>
          ))}
        </div>
      </section>

      <footer className="dock-input-wrap">
        <div className="dock-input">
          <span className="dock-input-prompt">›</span>
          <span className="dock-input-placeholder">Reply to Socrates…</span>
          <span className="dock-input-shortcut">⌘↵</span>
        </div>
      </footer>
    </aside>
  );
}