/* Slack Compose MCP App — modeled after
   agntux-slack/view-tool/src/apps/compose/components/compose-card.tsx.

   In the demo: the user edits the body, then clicks Send.
   Clicking Send DOES NOT send from inside the card — it emits a host
   prompt that auto-fills the host composer. The card just pulses
   and dims; the actual send is the Slack Connector tool call that
   the host then runs (rendered as a ConnectorCall below the card). */

function SlackIconHash() {
  return (
    <svg viewBox="0 0 16 16" width="13" height="13" fill="none" style={{ verticalAlign: '-2px' }}>
      <path d="M2 6h12M2 10h12M6 2L4 14M12 2l-2 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}
function SlackIconCaret() {
  return (
    <svg viewBox="0 0 16 16" width="12" height="12" fill="none">
      <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function SlackIconArrowUp() {
  return (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
      <path d="M8 12V4M4 8l4-4 4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* phase:
    'idle'    : initial render
    'editing' : caret visible in body, appended text growing
    'pressed' : send button pulse
    'submitted' : form is locked (button stays "Send" but dim) */
function SlackCompose({ phase, appendedChars, sendBtnRef, bodyRef, bodyCaretBlink }) {
  const data = window.SLACK_DATA;
  const fullBody = data.draft_body + data.appended_text.slice(0, appendedChars);
  const showCaret = phase === 'editing' && bodyCaretBlink;
  const focused = phase === 'editing';
  const isSubmitted = phase === 'submitted';

  return (
    <div className="app-card slide-in">
      <div className="app-card-header">
        <span className="logo"><AgntuxLogo height={16} /></span>
        <span className="dot-sep">·</span>
        <span style={{ fontWeight: 600 }}>Slack Compose</span>
        <span className="dot-sep">·</span>
        <span className="sub">#{data.channel.name}</span>
      </div>
      <div className="app-card-body">
        <div className="compose">
          <div className="compose-header">
            <div>
              <div className="chan">
                <SlackIconHash />{data.channel.name}
              </div>
              <div className="ctx">
                Replying to @{data.thread.last_reply_author_real_name} · {data.thread.total_replies} replies
              </div>
            </div>
            <div className="open">Open in Slack ↗</div>
          </div>

          <div className="thread-panel">
            <div className="thread-summary open">
              <SlackIconCaret /> Original thread ({data.thread.total_replies} replies)
            </div>
            <div className="thread-body">
              <blockquote className="quote-parent">
                <span className="quote-author">{data.thread.parent_author_real_name}:</span>
                {data.thread.parent_excerpt}
              </blockquote>
              <blockquote className="quote-reply">
                <span className="quote-author">{data.thread.last_reply_author_real_name}:</span>
                {data.thread.last_reply_excerpt}
              </blockquote>
            </div>
          </div>

          <div>
            <label className="field-label">Reply</label>
            <div ref={bodyRef} className={['body-input', focused ? 'focus' : ''].join(' ')}>
              {fullBody}
              {showCaret ? <span className="composer-caret" style={{ height: 14, marginLeft: 1 }} /> : null}
            </div>
            <div className="char-count">{fullBody.length}/4000</div>
          </div>

          <details className="disclosure" open>
            <summary>Why this draft <SlackIconCaret /></summary>
            <ul className="disclosure-list">
              {data.personalization.map((p, i) => (<li key={i}>{p}</li>))}
            </ul>
          </details>

          <div>
            <div className="mode-tabs">
              <span className="mode-tab active">Send now</span>
              <span className="mode-tab">Schedule</span>
              <span className="mode-tab">Save Slack draft</span>
            </div>
          </div>

          <div className="compose-footer">
            <button className="btn discard" type="button">Discard</button>
            <button
              ref={sendBtnRef}
              className={[
                'btn',
                'primary',
                phase === 'pressed' ? 'pulse' : '',
              ].join(' ')}
              style={isSubmitted ? { opacity: 0.55 } : null}
              type="button"
            >
              <SlackIconArrowUp /> Send
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SlackCompose = SlackCompose;