import { PanelFrame } from "./PanelFrame";
import type { ConnectionState } from "../state/types";

interface ConnectionPanelProps {
  value: ConnectionState;
  onChange: (next: ConnectionState) => void;
  onTestConnection: () => Promise<void> | void;
  onSaveLocalConfig: () => void;
  lastStatus: string;
  busy: boolean;
}

export function ConnectionPanel({
  value,
  onChange,
  onTestConnection,
  onSaveLocalConfig,
  lastStatus,
  busy
}: ConnectionPanelProps) {
  return (
    <PanelFrame
      title="Подключение OpenAI"
      subtitle="Ключ живет только в памяти сессии (не пишется в localStorage)."
      actions={<span className="status-chip">{lastStatus || "Статус: не проверено"}</span>}
    >
      <div className="grid-two">
        <label>
          OpenAI API Key
          <input
            type="password"
            value={value.apiKey}
            onChange={(event) => onChange({ ...value, apiKey: event.target.value })}
            placeholder="sk-..."
          />
        </label>
        <label>
          Model ID
          <input value={value.model} onChange={(event) => onChange({ ...value, model: event.target.value })} />
        </label>
        <label>
          Base URL
          <input value={value.baseUrl} onChange={(event) => onChange({ ...value, baseUrl: event.target.value })} />
        </label>
        <label>
          Temperature
          <input
            type="number"
            step="0.1"
            value={value.temperature}
            onChange={(event) => onChange({ ...value, temperature: Number(event.target.value) })}
          />
        </label>
        <label>
          Max output tokens
          <input
            type="number"
            value={value.maxOutputTokens}
            onChange={(event) => onChange({ ...value, maxOutputTokens: Number(event.target.value) })}
          />
        </label>
      </div>
      <div className="button-row">
        <button type="button" onClick={() => onSaveLocalConfig()}>
          Сохранить локальную конфигурацию
        </button>
        <button type="button" onClick={() => onTestConnection()} disabled={busy}>
          {busy ? "Проверяем..." : "Проверить подключение"}
        </button>
      </div>
    </PanelFrame>
  );
}
