import { useEffect, useRef } from 'react';

export default function SettingsDialog({
  backendUrl,
  defaultBackendUrl,
  liveDebugUrl,
  llmProvider,
  deepinfraApiKey,
  deepinfraHasKey,
  deepinfraKeyStatus,
  isOpen,
  onBackendUrlChange,
  onLiveDebugUrlChange,
  onLlmProviderChange,
  onDeepinfraApiKeyChange,
  onClose,
  onResetToDefault,
  onSave,
}) {
  const inputRef = useRef(null);

  useEffect(() => {
    if (!isOpen || !inputRef.current) {
      return;
    }

    inputRef.current.focus();
    inputRef.current.select();
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <div
      className="settings-overlay"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) {
          onClose();
        }
      }}
    >
      <div className="settings-dialog">
        <div className="settings-dialog__header">
          <div>
            <div className="settings-dialog__eyebrow">Настройки</div>
            <h2 className="settings-dialog__title">Настройки графа</h2>
          </div>
          <button type="button" className="toolbar__button" onClick={onClose}>
            Закрыть
          </button>
        </div>

        <div className="settings-dialog__body">
          <label className="field-stack">
            <span className="field-label">Backend URL</span>
            <input
              ref={inputRef}
              className="node-input"
              type="text"
              value={backendUrl}
              placeholder="http://localhost:8000"
              onChange={(event) => onBackendUrlChange(event.target.value)}
            />
          </label>

          <div className="settings-dialog__note">
            Укажи адрес backend сервера, на который уходят запросы графа. Можно использовать локальный адрес вроде
            `http://localhost:8000` или удалённый сервер.
          </div>

          <div className="settings-dialog__default">
            <span>Значение из config:</span>
            <code>{defaultBackendUrl}</code>
          </div>

          <label className="field-stack">
            <span className="field-label">Live debug runtime URL</span>
            <input
              className="node-input"
              type="text"
              value={liveDebugUrl}
              placeholder="http://localhost:8001"
              onChange={(event) => onLiveDebugUrlChange(event.target.value)}
            />
          </label>

          <div className="settings-dialog__note">
            Отдельный адрес runtime для подключения к рабочему Brains. Пустое значение означает стандартный Brains URL: `http://localhost:8001`.
          </div>

          <label className="field-stack">
            <span className="field-label">LLM provider</span>
            <select
              className="node-input"
              value={llmProvider}
              onChange={(event) => onLlmProviderChange(event.target.value)}
            >
              <option value="deepinfra">DeepInfra</option>
              <option value="ollama">Ollama</option>
            </select>
          </label>

          <div className="settings-dialog__note">
            Provider применяется ко всем LLM-вызовам графа: semantic branch, save memory, knowledge answer,
            LLM-ноды ассистента, автоответ и evaluator в LLM-тесте.
          </div>

          {llmProvider === 'deepinfra' ? (
            <>
              <label className="field-stack">
                <span className="field-label">DeepInfra API Key</span>
                <input
                  className="node-input"
                  type="password"
                  value={deepinfraApiKey}
                  placeholder={deepinfraHasKey ? 'Ключ сохранен. Оставьте пустым, чтобы не менять.' : 'Введите DeepInfra API key'}
                  autoComplete="off"
                  onChange={(event) => onDeepinfraApiKeyChange(event.target.value)}
                />
              </label>

              <div className="settings-dialog__note">
                {deepinfraKeyStatus ||
                  (deepinfraHasKey
                    ? 'DeepInfra key уже сохранен локально на backend.'
                    : 'DeepInfra key обязателен и будет сохранен локально на backend.')}
              </div>
            </>
          ) : null}
        </div>

        <div className="settings-dialog__footer">
          <button type="button" className="toolbar__button" onClick={onResetToDefault}>
            Взять из config
          </button>
          <div className="button-row">
            <button type="button" className="toolbar__button" onClick={onClose}>
              Отмена
            </button>
            <button type="button" className="toolbar__button toolbar__button--primary" onClick={onSave}>
              Сохранить настройки
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}