/* global React */
const { useState: _useStateTabBar } = React;

function TabBar({ tabs, activeId, activePaneTabId, onActivate, onClose, onNew, onNewLogViewer, onNewPingMonitor, onNewTextEditor, onNewFileExplorer, onNewAiChat }) {
  const [showFeatures, setShowFeatures] = _useStateTabBar(false);
  const hasFeatures = onNewLogViewer || onNewPingMonitor || onNewTextEditor || onNewFileExplorer || onNewAiChat;
  return (
    <div className="tab-bar">
      <div className="tab-list">
        {tabs.map(t => {
          const cls = ['tab'];
          if (t.id === activeId) cls.push('active');
          if (t.id === activePaneTabId) cls.push('active-pane-tab');
          if (t.kind === 'ai') cls.push('is-ai-tab');
          if (t.geminiLinked) cls.push('gemini-linked-tab');
          if (t.connecting) cls.push('connecting');
          return (
            <div key={t.id} className={cls.join(' ')} onClick={() => onActivate(t.id)} title={t.title}>
              <span className="tab-label">{t.title}</span>
              <button className="tab-close" onClick={(e) => { e.stopPropagation(); onClose(t.id); }} aria-label="Close">×</button>
            </div>
          );
        })}
      </div>
      <div className="tab-bar-actions">
        {/* New Session */}
        <div className="new-tab-btn" onClick={onNew} title="New Session" role="button" tabIndex={0}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 3a8 8 0 0 1 8 7.2" />
            <rect x="16" y="12" width="6" height="8" rx="1" />
            <path d="M19 12V10" />
            <line x1="12" y1="8" x2="12" y2="14" />
            <line x1="9" y1="11" x2="15" y2="11" />
          </svg>
        </div>
        {/* Features */}
        {hasFeatures && (
          <div className="features-btn">
            <div className={`features-btn-icon${showFeatures ? ' active' : ''}`} onClick={() => setShowFeatures(v => !v)} title="Features" role="button" tabIndex={0}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="7" height="7" rx="1" />
                <rect x="14" y="3" width="7" height="7" rx="1" />
                <rect x="3" y="14" width="7" height="7" rx="1" />
                <rect x="14" y="14" width="7" height="7" rx="1" />
              </svg>
            </div>
            {showFeatures && (
              <div className="features-dropdown">
                <div className="features-dropdown-item" onClick={() => { onNewLogViewer && onNewLogViewer(); setShowFeatures(false); }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
                  Log Viewer
                </div>
                <div className="features-dropdown-item" onClick={() => { onNewPingMonitor && onNewPingMonitor(); setShowFeatures(false); }}>
                  <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="10"/><polyline points="12 6 12 12 16 14"/></svg>
                  Ping Monitor
                </div>
                <div className="features-dropdown-item" onClick={() => { onNewTextEditor && onNewTextEditor(); setShowFeatures(false); }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                  Text Editor
                </div>
                <div className="features-dropdown-item" onClick={() => { onNewFileExplorer && onNewFileExplorer(); setShowFeatures(false); }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                  File Explorer
                </div>
                <div className="features-dropdown-item" onClick={() => { onNewAiChat && onNewAiChat(); setShowFeatures(false); }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L14.8 9.2L22 12L14.8 14.8L12 22L9.2 14.8L2 12L9.2 9.2L12 2Z"/></svg>
                  AI Chat
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

window.TabBar = TabBar;