/* MCP 管理画面 – パスワード保護。エンドポイント / API キー / 利用手順を表示 */
(function () {
  const { useState } = React;
  const { showToast } = window.Common;

  const MASK = '••••••••••••••••••••••••';

  function copy(text, label) {
    if (!navigator.clipboard) {
      showToast('このブラウザではコピーできません', 'error');
      return;
    }
    navigator.clipboard.writeText(text).then(
      () => showToast((label || 'コピー') + 'しました', 'success'),
      () => showToast('コピーに失敗しました', 'error')
    );
  }

  async function callAdmin(password, action) {
    const res = await fetch('/api/mcp-admin', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(action ? { password, action } : { password }),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.error || 'エラーが発生しました (' + res.status + ')');
    return data;
  }

  function CodeBlock({ display, copyText, label }) {
    return (
      <div style={{ position: 'relative', marginTop: 6 }}>
        <pre
          style={{
            background: 'var(--bg-elevated, #1a1a1f)',
            border: '1px solid var(--border, #333)',
            borderRadius: 8,
            padding: '12px 14px',
            fontSize: 12,
            lineHeight: 1.6,
            overflowX: 'auto',
            whiteSpace: 'pre',
            margin: 0,
          }}
        >
          {display}
        </pre>
        <button
          type="button"
          className="btn btn-secondary btn-sm"
          style={{ position: 'absolute', top: 8, right: 8 }}
          onClick={() => copy(copyText, label)}
        >
          コピー
        </button>
      </div>
    );
  }

  function McpAdmin({ onNavigate }) {
    const [password, setPassword] = useState('');
    const [info, setInfo] = useState(null); // { endpoint, apiKey, protocolVersion, tools }
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    async function handleUnlock(e) {
      e.preventDefault();
      setLoading(true);
      setError('');
      try {
        setInfo(await callAdmin(password));
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    async function handleReset() {
      if (!window.confirm('API キーを再生成します。既存の接続（Claude Code / ChatGPT など）はすべて無効になります。よろしいですか？')) {
        return;
      }
      setLoading(true);
      try {
        setInfo(await callAdmin(password, 'reset'));
        showToast('API キーを再生成しました', 'success');
      } catch (err) {
        showToast(err.message, 'error');
      } finally {
        setLoading(false);
      }
    }

    const back = (
      <button className="btn btn-secondary btn-sm" onClick={() => onNavigate('dashboard')}>
        ← ダッシュボードへ戻る
      </button>
    );

    if (!info) {
      return (
        <div>
          <div className="page-header" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {back}
            <h1 className="page-title" style={{ margin: 0 }}>MCP 管理</h1>
          </div>
          <div className="card" style={{ maxWidth: 420 }}>
            <form onSubmit={handleUnlock}>
              <div className="field">
                <label className="field-label">パスワード</label>
                <input
                  type="password"
                  autoFocus
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="管理パスワードを入力"
                />
              </div>
              {error && <div style={{ color: 'var(--danger)', fontSize: 13, marginBottom: 8 }}>{error}</div>}
              <button className="btn btn-primary" type="submit" disabled={loading || !password}>
                {loading ? '確認中...' : 'ロック解除'}
              </button>
            </form>
          </div>
        </div>
      );
    }

    const { endpoint, apiKey, protocolVersion, tools } = info;
    const bearer = 'Authorization: Bearer ' + apiKey;
    const remoteCmdDisplay = 'npx mcp-remote ' + endpoint + ' --header "Authorization: Bearer <APIキー>"';
    const remoteCmdCopy = 'npx mcp-remote ' + endpoint + ' --header "' + bearer + '"';
    const mcpJsonDisplay = JSON.stringify(
      { mcpServers: { 'concert-flyer': { command: 'npx', args: ['mcp-remote', endpoint, '--header', 'Authorization: Bearer <APIキー>'] } } },
      null, 2
    );
    const mcpJsonCopy = JSON.stringify(
      { mcpServers: { 'concert-flyer': { command: 'npx', args: ['mcp-remote', endpoint, '--header', bearer] } } },
      null, 2
    );

    return (
      <div>
        <div className="page-header" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {back}
          <h1 className="page-title" style={{ margin: 0 }}>MCP 管理</h1>
        </div>

        <div className="card">
          <div className="field">
            <label className="field-label">MCP エンドポイント</label>
            <div style={{ display: 'flex', gap: 6 }}>
              <input readOnly value={endpoint} style={{ flex: 1 }} onFocus={(e) => e.target.select()} />
              <button type="button" className="btn btn-secondary btn-sm" onClick={() => copy(endpoint, 'エンドポイントを')}>
                コピー
              </button>
            </div>
          </div>

          <div className="field">
            <label className="field-label">API キー</label>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <button
                type="button"
                title="クリックでコピー"
                onClick={() => copy(apiKey, 'API キーを')}
                style={{
                  flex: 1,
                  textAlign: 'left',
                  fontFamily: 'monospace',
                  letterSpacing: 2,
                  padding: '8px 12px',
                  border: '1px solid var(--border, #333)',
                  borderRadius: 8,
                  background: 'var(--bg-elevated, #1a1a1f)',
                  color: 'var(--text, #eee)',
                  cursor: 'pointer',
                }}
              >
                {MASK}
              </button>
              <button type="button" className="btn btn-secondary btn-sm" onClick={() => copy(apiKey, 'API キーを')}>
                コピー
              </button>
              <button type="button" className="btn btn-secondary btn-sm" onClick={handleReset} disabled={loading}>
                リセット
              </button>
            </div>
            <span className="field-hint">キーは常に非表示です。クリックでコピーできます。リセットすると既存の接続は無効になります。</span>
          </div>

          <div className="field">
            <label className="field-label">プロトコル / ツール</label>
            <div style={{ fontSize: 13, color: 'var(--text-secondary, #999)' }}>
              protocolVersion: <code>{protocolVersion}</code>
              <br />
              tools: {tools.join(', ')}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="dashboard-section-title">利用手順</div>

          <div className="field">
            <label className="field-label">mcp-remote（汎用 / Claude Code CLI）</label>
            <CodeBlock display={remoteCmdDisplay} copyText={remoteCmdCopy} label="コマンドを" />
          </div>

          <div className="field">
            <label className="field-label">Claude Code <code>.mcp.json</code></label>
            <CodeBlock display={mcpJsonDisplay} copyText={mcpJsonCopy} label="設定を" />
          </div>

          <div className="field">
            <label className="field-label">ChatGPT（Web アプリ）</label>
            <span className="field-hint">
              設定 → コネクタ で「{endpoint}」を追加します。<code>search</code> / <code>fetch</code> ツールに対応済みです。
              ChatGPT のコネクタ UI が静的 API キー（カスタムヘッダー）の入力に対応していない場合は、
              OAuth 対応が必要になります（今後の課題）。
            </span>
          </div>
        </div>
      </div>
    );
  }

  window.McpAdmin = { McpAdmin };
})();