/** @jsx React.createElement */
/* DashboardTabs — top tab strip with vertical-ellipsis menu per tab,
   matching the dashboard-tabs pattern. */

function DashboardTabs({ tabs, activeId, onSelect, onAddTab, onOpenMenu, menuOpenFor, showAddTab = true, showTools = true }) {
  return (
    <div className="ab-tabstrip" style={{
      display: 'flex', alignItems: 'stretch',
      borderBottom: '1px solid var(--ab-border)',
      padding: '0 18px',
      background: '#fff',
      overflowX: 'auto',
      overflowY: 'hidden',
      flexShrink: 0,
    }}>
      {tabs.map((tab) => {
        const active = tab.id === activeId;
        const menuOpen = menuOpenFor === tab.id;
        return (
          <div key={tab.id} style={{
            position: 'relative',
            display: 'flex', alignItems: 'center',
            padding: '0 4px',
          }}>
            <button
              type="button"
              aria-label="Tab menu"
              onMouseDown={(e) => e.stopPropagation()}
              onClick={(e) => { e.stopPropagation(); onOpenMenu(tab.id, e.currentTarget); }}
              style={{
                display: 'inline-flex', flexDirection: 'column',
                justifyContent: 'center', alignItems: 'center', gap: 2,
                width: 18, height: 22,
                border: 'none', background: menuOpen ? 'var(--ab-slate-100)' : 'transparent',
                borderRadius: 4,
                color: menuOpen ? 'var(--ab-slate-700)' : 'var(--ab-slate-400)',
                cursor: 'pointer', padding: 0, flexShrink: 0,
              }}
              onMouseEnter={(e) => { if (!menuOpen) { e.currentTarget.style.background = 'var(--ab-slate-100)'; e.currentTarget.style.color = 'var(--ab-slate-700)'; } }}
              onMouseLeave={(e) => { if (!menuOpen) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ab-slate-400)'; } }}
            >
              <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'currentColor' }} />
              <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'currentColor' }} />
              <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'currentColor' }} />
            </button>
            <button
              type="button"
              onClick={() => onSelect(tab.id)}
              style={{
                position: 'relative',
                padding: '12px 10px 11px 6px',
                background: 'transparent', border: 'none',
                fontFamily: 'inherit',
                fontSize: 13.5,
                fontWeight: active ? 600 : 500,
                color: active ? '#3F507B' : 'var(--ab-slate-500)',
                cursor: 'pointer',
                whiteSpace: 'nowrap',
              }}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = 'var(--ab-slate-700)'; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = 'var(--ab-slate-500)'; }}
            >
              {tab.name}
            </button>
            {active && (
              <div style={{
                position: 'absolute', left: 26, right: 4, bottom: -1, height: 2,
                background: '#3F507B', borderRadius: '2px 2px 0 0',
              }} />
            )}
          </div>
        );
      })}
      {showAddTab && (
      <button
        type="button"
        onClick={onAddTab}
        title="Add tab"
        style={{
          margin: '0 4px',
          padding: '0 10px',
          background: 'transparent', border: 'none',
          color: 'var(--ab-slate-500)',
          cursor: 'pointer',
          display: 'flex', alignItems: 'center',
          fontFamily: 'inherit', fontSize: 13,
        }}
        onMouseEnter={(e) => e.currentTarget.style.color = '#3F507B'}
        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ab-slate-500)'}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
      </button>
      )}

      <div style={{ flex: 1 }} />

      {showTools && (
      /* Tab-level filter + chart-type icons that appear in the source UI */
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0 4px' }}>
        <button title="Filter" style={iconBtnStyle}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 5h18M6 12h12M10 19h4"/>
          </svg>
        </button>
        <button title="Layout" style={iconBtnStyle}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 21v-7M9 21V11M15 21v-5M21 21V7"/>
          </svg>
        </button>
      </div>
      )}
    </div>
  );
}

const iconBtnStyle = {
  width: 30, height: 30,
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  background: 'transparent', border: 'none', borderRadius: 6,
  color: 'var(--ab-slate-500)', cursor: 'pointer',
};

Object.assign(window, { DashboardTabs });