/* Gmail Compose MCP App — modeled after
   agntux-gmail/view-tool/src/components/compose-card.tsx.

   The Gmail Connector has no "send-email" tool — its strongest write
   primitive is `create_draft`. So the primary button reads
   "Save as Gmail draft & open" instead of "Send", and the host
   prompt emits a 2-step instruction (create_draft + reply with a link). */

function GmIconCaret() {
  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 GmailCompose({ phase, appendedChars, sendBtnRef, bodyRef, bodyCaretBlink }) {
  const data = window.GMAIL_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 }}>Gmail Compose</span>
        <span className="dot-sep">·</span>
        <span className="sub">Re: v2 → v3 migration timeline</span>
      </div>
      <div className="app-card-body">
        <div className="compose">
          <div className="compose-header">
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="chan" style={{ fontSize: 13.5, fontWeight: 600 }}>
                {data.thread.subject}
              </div>
              <div className="ctx">
                Replying to {data.thread.last_author_real_name} · {data.thread.total_messages} messages
              </div>
            </div>
            <div className="open">Open in Gmail ↗</div>
          </div>

          <div className="thread-panel">
            <div className="thread-summary open">
              <GmIconCaret /> Original thread ({data.thread.total_messages} messages)
            </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_author_real_name}:</span>
                {data.thread.last_excerpt}
              </blockquote>
            </div>
          </div>

          <div className="gm-recipients">
            <div className="gm-field-row">
              <label>To</label>
              <div className="gm-input">{data.recipients.to.join(', ')}</div>
            </div>
            <div className="gm-field-row">
              <label>Cc</label>
              <div className="gm-input">{data.recipients.cc.join(', ')}</div>
            </div>
            <div className="gm-field-row">
              <label>Subject</label>
              <div className="gm-input">{data.subject}</div>
            </div>
          </div>

          <div>
            <label className="field-label">Reply</label>
            <div ref={bodyRef} className={['body-input', 'tall', 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 <GmIconCaret /></summary>
            <ul className="disclosure-list">
              {data.personalization.map((p, i) => (<li key={i}>{p}</li>))}
            </ul>
          </details>

          <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"
            >
              Save as Gmail draft &amp; open
            </button>
          </div>

          <div className="gm-footer-note">
            Save creates a draft in your Gmail Drafts folder and opens it in a new tab.
            Review and click <strong>Send</strong> in Gmail itself — the Gmail integration
            has no send-from-here capability.
          </div>
        </div>
      </div>
    </div>
  );
}

window.GmailCompose = GmailCompose;