export default function Toolbar({
  backendUrl,
  liveDebugUrl,
  breadcrumbs,
  canCreateComponent,
  isRunning,
  isInsideComponent,
  isDemo,
  notice,
  onCreateComponent,
  onGoBack,
  onGoRoot,
  onOpenSettings,
  theme,
  onToggleTheme,
  onRun,
  liveDebugStatus = 'off',
  onToggleLiveDebug,
  llmTestMode,
  onLlmTestRun,
  onStopLlmTest,
  onNew,
  onSave,
  onSaveAs,
  onLoad,
}) {
  return (
    <header className="toolbar">
      <div className="toolbar__group">
        <button type="button" className="toolbar__button toolbar__button--primary" onClick={onRun} disabled={isRunning}>
          {isRunning ? 'Идет...' : 'Интерактивный прогон'}
        </button>
        {isDemo ? (
          <button type="button" className="toolbar__button" onClick={onLoad} disabled={isRunning}>
            Открыть
          </button>
        ) : null}

        {!isDemo ? (
          <>
            <button
              type="button"
              className="toolbar__button"
              onClick={llmTestMode ? onStopLlmTest : onLlmTestRun}
              disabled={isRunning && !llmTestMode}
            >
              {llmTestMode ? 'Остановить LLM тест' : 'LLM тест'}
            </button>
            <button
              type="button"
              className={`toolbar__button toolbar__button--live ${liveDebugStatus === 'connected' ? 'is-connected' : ''}`}
              onClick={onToggleLiveDebug}
              disabled={liveDebugStatus === 'connecting'}
              title="Подключиться к live-состоянию workflow runtime"
            >
              {liveDebugStatus === 'connected'
                ? 'Отключить live'
                : liveDebugStatus === 'connecting'
                  ? 'Live...'
                  : 'Live debug'}
            </button>
            <button type="button" className="toolbar__button" onClick={onCreateComponent} disabled={!canCreateComponent || isRunning}>
              Создать компонент
            </button>
            {isInsideComponent ? (
              <button type="button" className="toolbar__button" onClick={onGoBack} disabled={isRunning}>
                Назад
              </button>
            ) : null}
            <button type="button" className="toolbar__button" onClick={onOpenSettings}>
              Настройки
            </button>
            <button type="button" className="toolbar__button" onClick={onNew} disabled={isRunning}>
              Новый
            </button>
            <button type="button" className="toolbar__button" onClick={onSave} disabled={isRunning}>
              Сохранить
            </button>
            <button type="button" className="toolbar__button" onClick={onSaveAs} disabled={isRunning}>
              Сохранить как
            </button>
            <button type="button" className="toolbar__button" onClick={onLoad} disabled={isRunning}>
              Открыть
            </button>
          </>
        ) : null}
      </div>

      <div className="toolbar__meta">
        {!isDemo && breadcrumbs?.length ? (
          <div className="toolbar__breadcrumbs">
            {breadcrumbs.map((crumb, index) => (
              <button
                key={crumb.id}
                type="button"
                className={`toolbar__crumb ${index === breadcrumbs.length - 1 ? 'is-current' : ''}`}
                onClick={index === 0 ? onGoRoot : () => crumb.onClick?.()}
              >
                {crumb.label}
              </button>
            ))}
          </div>
        ) : null}
        <button type="button" className="toolbar__button toolbar__button--theme" onClick={onToggleTheme}>
          {theme === 'dark' ? 'Светлая тема' : 'Темная тема'}
        </button>
        {!isDemo ? (
          <>
            <span className="toolbar__backend">Backend: {backendUrl}</span>
            {liveDebugUrl && liveDebugUrl !== backendUrl ? (
              <span className="toolbar__backend">Live: {liveDebugUrl}</span>
            ) : null}
            <span className="toolbar__notice">{notice}</span>
          </>
        ) : null}
      </div>
    </header>
  );
}