// TroveAI side panel — pre-canned conversation about the user's archive.

const TROVE_AI_CONVO = [
  {
    role: 'user',
    text: "What have I been reading about agents lately?",
  },
  {
    role: 'ai',
    text: "Across your library you've saved 14 items on agents in the last 30 days, mostly clustering around three threads: tool-use & function calling, multi-agent orchestration, and evaluations. The freshest reads are leaning toward eval frameworks — looks like you're shifting from 'how to build' to 'how to measure'.",
    sources: [
      { num: 1, title: "Agentic patterns from production", domain: "anthropic.com" },
      { num: 2, title: "Multi-agent orchestration: lessons", domain: "latent.space" },
      { num: 3, title: "Evals are all you need", domain: "hamel.dev" },
    ],
  },
  {
    role: 'user',
    text: "Summarize the eval ones in one paragraph.",
  },
  {
    role: 'ai',
    text: "All three converge on the same takeaway: real-world eval suites beat benchmark scores. Hamel argues for log-driven evals over synthetic test sets; the Latent Space piece walks through pairwise human ratings; and the Anthropic post pushes a hybrid where you grade traces with an LLM-as-judge rubric you've validated against humans first. Common thread — start small, evaluate end-to-end, iterate the rubric like product copy.",
    sources: [
      { num: 1, title: "Your AI product needs evals", domain: "hamel.dev" },
      { num: 2, title: "How we evaluate agents", domain: "anthropic.com" },
    ],
  },
  {
    role: 'user',
    text: "Anything I haven't read yet that's relevant?",
  },
  {
    role: 'ai',
    text: "Three unread saves match this thread:\n\n• \"Trace-based evals at scale\" — saved 4 days ago\n• \"LLM-as-judge calibration\" — saved last week\n• \"Eval datasets that actually transfer\" — saved 2 weeks ago\n\nWant me to drop them into a reading playlist?",
    sources: [
      { num: 1, title: "Trace-based evals at scale", domain: "eugeneyan.com" },
    ],
  },
  {
    role: 'user',
    text: "Please use my LinkedIn saves to formulate a GTM guide for my B2B SaaS",
  },
  {
    role: 'ai',
    processing: [
      "Analyzing LinkedIn Archive",
      "Found 26 GTM Posts",
      "Ranked and Prioritized 18 Posts",
      'Developing "GTM B2B SaaS Guide"',
    ],
    text: "I've analyzed 26 GTM posts you have in your LinkedIn archive and found 18 relevant ones which cover advice on GTM strategies and outbound motions. I've put together the guide for you as a pdf below.",
    attachment: {
      title: "GTM Guide for B2B SaaS.pdf",
      meta: "PDF · 14 pages · 1.2 MB",
    },
  },
];

const TROVE_AI_SUGGESTIONS = [
  { icon: 'Sparkle', text: "Summarize my Catch Up queue" },
  { icon: 'Map',     text: "What themes have I saved this month?" },
  { icon: 'Filter',  text: "Find duplicates across my collections" },
  { icon: 'Bookmark',text: "Build me a reading playlist on AI evals" },
];

function TroveAIPanel({ onClose }) {
  const [draft, setDraft] = React.useState('');
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    document.body.classList.add('has-troveai');
    return () => document.body.classList.remove('has-troveai');
  }, []);

  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, []);

  return (
    <aside className="troveai-panel" role="complementary" aria-label="TroveAI">
      <div className="ta-panel-head">
        <div className="ta-panel-title">
          <TroveAIIcon />
          <span>Ask Trove</span>
        </div>
        <div className="ta-panel-actions">
          <button className="ta-icon-btn tooltip-host" data-tip="History"><I.Clock className="icon icon-sm" /></button>
          <button className="ta-icon-btn tooltip-host" data-tip="New chat"><I.Plus className="icon icon-sm" /></button>
          <button className="ta-icon-btn tooltip-host" data-tip="Close" onClick={onClose}>
            <I.Close className="icon icon-sm" />
          </button>
        </div>
      </div>

      <div className="ta-panel-body" ref={bodyRef}>
        <div className="ta-context">
          <span className="ta-context-dot" />
          <span>Searching across <strong>{SAMPLE.bookmarks.length} bookmarks</strong> in <strong>{SAMPLE.collections.length} collections</strong></span>
        </div>

        <div className="ta-suggestions">
          <div className="ta-suggestions-label">Try asking</div>
          {TROVE_AI_SUGGESTIONS.map((s, i) => {
            const Icon = I[s.icon] || I.Sparkle;
            return (
              <button key={i} className="ta-chip" onClick={() => setDraft(s.text)}>
                <Icon className="icon icon-sm" />
                <span>{s.text}</span>
              </button>
            );
          })}
        </div>

        <div className="ta-bubbles">
          {TROVE_AI_CONVO.map((m, i) => (
            <div key={i} className={`ta-bubble-wrap ${m.role}`}>
              {m.role === 'ai' && (
                <div className="ta-bubble-author">
                  <TroveAIIcon /> Trove
                </div>
              )}
              <div className="ta-bubble">
                {m.processing && (
                  <div className="ta-processing">
                    {m.processing.map((step, si) => (
                      <div key={si} className="ta-processing-step">
                        <I.Check className="icon" />
                        <span>{step}</span>
                      </div>
                    ))}
                  </div>
                )}
                {m.text.split('\n').map((line, li) => (
                  <div key={li}>{line || '\u00A0'}</div>
                ))}
                {m.attachment && (
                  <a className="ta-attachment" role="button">
                    <span className="ta-attachment-icon">
                      <I.Article className="icon" />
                    </span>
                    <span className="ta-attachment-meta">
                      <span className="ta-attachment-title">{m.attachment.title}</span>
                      <span className="ta-attachment-sub">{m.attachment.meta}</span>
                    </span>
                    <span className="ta-attachment-action" aria-label="Download">
                      <I.Download className="icon icon-sm" />
                    </span>
                  </a>
                )}
                {m.sources && (
                  <div className="ta-sources">
                    {m.sources.map((s) => (
                      <a key={s.num} className="ta-source">
                        <span className="ta-source-num">{s.num}</span>
                        <span className="ta-source-title">{s.title}</span>
                        <span className="ta-source-domain">{s.domain}</span>
                      </a>
                    ))}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="ta-composer">
        <div className="ta-composer-box">
          <textarea
            className="ta-input"
            placeholder="Ask anything about your archive…"
            rows={1}
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
          />
          <div className="ta-composer-row">
            <div className="ta-composer-tools">
              <button className="ta-icon-btn tooltip-host" data-tip="Attach"><I.Plus className="icon" /></button>
              <button className="ta-icon-btn tooltip-host" data-tip="Slash commands"><I.Filter className="icon" /></button>
            </div>
            <button className="ta-send-btn" aria-label="Send">
              <I.ChevronRight className="icon icon-sm" />
            </button>
          </div>
        </div>
        <div className="ta-composer-hint">
          <kbd>⌘↵</kbd> to send · <kbd>Esc</kbd> to close
        </div>
      </div>
    </aside>
  );
}

window.TroveAIPanel = TroveAIPanel;