/* global React */

function AIChatPane({ active, onActivate, provider = 'Vertex AI', model = 'gemini-2.0-flash' }) {
  const star = (size, useDefs) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
      <path d="M12 2L14.8 9.2L22 12L14.8 14.8L12 22L9.2 14.8L2 12L9.2 9.2L12 2Z" fill="url(#ai-grad)" />
      {useDefs && (
        <defs>
          <linearGradient id="ai-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
            <stop stopColor="var(--provider-gemini-1)" />
            <stop offset="0.5" stopColor="var(--provider-gemini-2)" />
            <stop offset="1" stopColor="var(--provider-gemini-3)" />
          </linearGradient>
        </defs>
      )}
    </svg>
  );

  return (
    <div className={`pane${active ? ' pane-active' : ''}`} onClick={onActivate}>
      <div className="pane-body">
        <div className="ai-chat-pane">
          {/* Internal AI chat tab strip */}
          <div className="aicp-tabstrip">
            <div className="aicp-tab">edge-rtr01<span className="x">×</span></div>
            <div className="aicp-newtab" title="New AI chat">+</div>
          </div>

          {/* Header: logo · New chat · linked session · overflow */}
          <div className="aicp-header">
            <span className="aicp-logo">{star(18, true)}</span>
            <button className="aicp-newchat" type="button">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              New chat
            </button>
            <button className="aicp-linkchip" type="button" title="Linked terminal">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
              edge-rtr01
            </button>
            <span className="aicp-menu" title="More">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="12" cy="19" r="1.6"/></svg>
            </span>
          </div>

          {/* Body */}
          <div className="ai-chat-body">
            <div className="ai-chat-messages">
              {/* user attached terminal output */}
              <div className="ai-chat-message ai-chat-message-user">
                <div className="ai-chat-message-avatar">U</div>
                <div className="ai-chat-message-content">
                  <div className="aicp-termout-block">
                    <span className="chev">▸</span>
                    <strong>Terminal output</strong>
                    <span className="cmd">show ip bgp summary</span>
                    <span className="meta">6 lines · 240 chars</span>
                  </div>
                </div>
              </div>

              {/* assistant analysis */}
              <div className="ai-chat-message ai-chat-message-model">
                <div className="ai-chat-message-avatar">{star(13, false)}</div>
                <div className="ai-chat-message-content ai-chat-markdown">
                  <p>Neighbor <code>192.0.2.10</code> is in <strong>Idle</strong> — the TCP session to the peer was never established, so this is below BGP. Check reachability from the update-source first:</p>
                  <div className="ai-execute-block">
                    <pre><code>ping 192.0.2.10 source Loopback0</code></pre>
                    <div className="ai-execute-actions">
                      <button className="ai-run-btn" type="button">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        Run in Terminal
                      </button>
                      <span className="ai-run-target">Target: edge-rtr01</span>
                    </div>
                  </div>
                  <p>Most likely causes:</p>
                  <ul>
                    <li>No route to <code>192.0.2.10</code> — verify with <code>show ip route</code></li>
                    <li>An ACL or firewall dropping TCP/179</li>
                    <li><code>remote-as</code> mismatch — the peer expects AS 65030</li>
                  </ul>
                </div>
              </div>

              {/* user follow-up */}
              <div className="ai-chat-message ai-chat-message-user">
                <div className="ai-chat-message-avatar">U</div>
                <div className="ai-chat-message-content ai-chat-markdown"><p>Show me the neighbor config.</p></div>
              </div>

              {/* assistant config */}
              <div className="ai-chat-message ai-chat-message-model">
                <div className="ai-chat-message-avatar">{star(13, false)}</div>
                <div className="ai-chat-message-content ai-chat-markdown">
                  <pre><code>{`router bgp 65010
 neighbor 192.0.2.10 remote-as 65030
 neighbor 192.0.2.10 update-source Loopback0
 neighbor 192.0.2.10 ebgp-multihop 2`}</code></pre>
                </div>
              </div>
            </div>

            {/* Input card */}
            <div className="aicp-inputcard">
              <textarea className="aicp-input" placeholder="Type a message…" rows="1"></textarea>
              <div className="aicp-input-controls">
                <button className="aicp-model" type="button" title="Model & settings">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                  {model} ({provider})
                </button>
                <div className="aicp-input-right">
                  <button className="aicp-execmode" type="button" title="Execution mode">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>
                    Auto · Max ∞
                  </button>
                  <button className="aicp-send" type="button" title="Send">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                  </button>
                </div>
              </div>
            </div>
            <div className="aicp-tokens">2,015 in / 76 out tokens</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AIChatPane = AIChatPane;