const { useState } = React;
const T = window.ArbiterTokens;

const topBarStyles = {
  bar: {
    height: '48px',
    minHeight: '48px',
    borderBottom: `1px solid ${T.color.border.light}`,
    background: T.color.bg.card,
    display: 'flex',
    alignItems: 'center',
    padding: '0 20px',
    gap: '12px',
  },
  breadcrumb: {
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    fontSize: T.font.size.base,
    color: T.color.text.tertiary,
  },
  breadcrumbActive: {
    color: T.color.text.primary,
    fontWeight: T.font.weight.medium,
  },
  searchContainer: {
    flex: 1,
    maxWidth: '480px',
    margin: '0 auto',
    position: 'relative',
  },
  search: {
    width: '100%',
    height: '32px',
    border: `1px solid ${T.color.border.light}`,
    borderRadius: T.radius.md,
    padding: '0 12px 0 32px',
    fontSize: T.font.size.base,
    fontFamily: T.font.family,
    background: T.color.bg.secondary,
    color: T.color.text.primary,
    outline: 'none',
    transition: 'border-color 0.15s ease',
  },
  searchIcon: {
    position: 'absolute',
    left: '10px',
    top: '50%',
    transform: 'translateY(-50%)',
    fontSize: '13px',
    color: T.color.text.tertiary,
    pointerEvents: 'none',
  },
  searchKbd: {
    position: 'absolute',
    right: '8px',
    top: '50%',
    transform: 'translateY(-50%)',
    fontSize: T.font.size.xs,
    color: T.color.text.tertiary,
    background: T.color.bg.primary,
    border: `1px solid ${T.color.border.light}`,
    borderRadius: '3px',
    padding: '1px 5px',
    fontFamily: T.font.mono,
  },
  actions: {
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
  },
  iconBtn: {
    width: '32px',
    height: '32px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: T.radius.md,
    border: 'none',
    background: 'none',
    cursor: 'pointer',
    color: T.color.text.secondary,
    fontSize: '15px',
    position: 'relative',
    transition: 'background 0.1s',
  },
  notifDot: {
    position: 'absolute',
    top: '6px',
    right: '6px',
    width: '6px',
    height: '6px',
    borderRadius: '50%',
    background: T.color.status.critical,
  },
};

function TopBar({ title, breadcrumbs, onBack, onCmdK }) {
  const [searchFocused, setSearchFocused] = useState(false);

  return (
    <div style={topBarStyles.bar}>
      {onBack && (
        <button
          onClick={onBack}
          style={{...topBarStyles.iconBtn, fontSize: '16px'}}
          onMouseEnter={e => e.currentTarget.style.background = T.color.bg.hover}
          onMouseLeave={e => e.currentTarget.style.background = 'none'}
        >←</button>
      )}
      <div style={topBarStyles.breadcrumb}>
        {breadcrumbs ? breadcrumbs.map((b, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span style={{color: T.color.text.tertiary, margin: '0 2px'}}>/</span>}
            <span style={i === breadcrumbs.length - 1 ? topBarStyles.breadcrumbActive : {}}>
              {b}
            </span>
          </React.Fragment>
        )) : (
          <span style={topBarStyles.breadcrumbActive}>{title}</span>
        )}
      </div>

      <div style={topBarStyles.searchContainer} onClick={() => onCmdK && onCmdK()}>
        <span style={topBarStyles.searchIcon}></span>
        <input
          style={{
            ...topBarStyles.search,
            cursor: 'pointer',
            borderColor: searchFocused ? T.color.navy300 : T.color.border.light,
          }}
          placeholder="Search matters, documents, people..."
          readOnly
          onFocus={() => { setSearchFocused(true); onCmdK && onCmdK(); }}
          onBlur={() => setSearchFocused(false)}
        />
        <span style={topBarStyles.searchKbd}>cmdK</span>
      </div>

      <div style={topBarStyles.actions}>
        <button
          style={topBarStyles.iconBtn}
          onMouseEnter={e => e.currentTarget.style.background = T.color.bg.hover}
          onMouseLeave={e => e.currentTarget.style.background = 'none'}
        >
          
          <span style={topBarStyles.notifDot} />
        </button>
        <button
          style={topBarStyles.iconBtn}
          onMouseEnter={e => e.currentTarget.style.background = T.color.bg.hover}
          onMouseLeave={e => e.currentTarget.style.background = 'none'}
        >?</button>
      </div>
    </div>
  );
}

window.TopBar = TopBar;