// ─── Message.jsx, SourcesBlock.jsx, Citation.jsx ──────────────
// Three small leaf components used in the chat thread.

function Citation({ kind = 'ok', sup, case: caseName, page, children }) {
  return (
    <span className={`le-src-cite le-src-cite-${kind}`}>
      {children}
      {sup && <sup>{sup}</sup>}
      <span className="le-cite-hover" aria-hidden="true">
        <span className="le-cite-hover-ring" />
        <span className="le-cite-hover-inner">
          <span className="le-cite-hover-kind">מילה במילה</span>
          <span className="le-cite-hover-tick">✓</span>
          <span className="le-cite-hover-meta">{caseName || `מקור #${sup}`}{page ? ` · בעמ׳ ${page}` : ''}</span>
        </span>
      </span>
    </span>
  );
}

function ClaimSpan({ confidence = 'ok', children }) {
  return <span className={`le-claim le-claim-${confidence}`}>{children}</span>;
}

function SourcesBlock({ sources }) {
  if (!sources || !sources.length) return null;
  return (
    <div className="le-sources-block">
      <div className="le-sources-header">
        <span style={{ display: 'inline-flex', verticalAlign: '-2px' }}><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M8 4 C6.5 3 3.8 3 2.6 3.5 V12.6 C3.8 12.1 6.5 12.1 8 13"></path><path d="M8 4 C9.5 3 12.2 3 13.4 3.5 V12.6 C12.2 12.1 9.5 12.1 8 13"></path><line x1="8" y1="4" x2="8" y2="13"></line></svg></span> מקורות ({sources.length})
      </div>
      <div className="le-sources-list">
        {sources.map((s, i) => (
          <button className="le-source-item" key={i}>
            <span className="le-source-num">{i + 1}</span>
            <span className="le-source-content">
              <span className="le-source-title">{s.title}</span>
              <span className="le-source-excerpt">{s.excerpt}</span>
              <span className="le-source-meta">
                <span className={`le-source-badge le-source-badge-${s.badge || 'community'}`}>
                  {s.badgeLabel || 'מילה במילה'}
                </span>
                <span>{s.year} · {s.court}</span>
              </span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

function UserMessage({ children }) {
  return <div className="le-msg-user">{children}</div>;
}

function AssistantMessage({ confidence, children }) {
  return (
    <div className="le-msg-assistant">
      <div className="le-msg-assistant-header">
        <span className="le-msg-assistant-avatar">
          <EyeTile size={24} radius={6} />
        </span>
        <span className="le-msg-assistant-label">Legal Eye</span>
        {confidence != null && (
          <span className="le-msg-assistant-confidence">
            <span className="dot" /> ביטחון {confidence}
          </span>
        )}
      </div>
      <div className="le-msg-assistant-body">{children}</div>
    </div>
  );
}

Object.assign(window, { Citation, ClaimSpan, SourcesBlock, UserMessage, AssistantMessage });