import { useEffect, useState } from 'react';
import { api } from '../api.js';

const MODELS = [
  { id: 'claude-opus-4-8', label: 'Claude Opus 4.8 — самый умный (дороже)' },
  { id: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6 — баланс цена/качество' },
  { id: 'claude-haiku-4-5', label: 'Claude Haiku 4.5 — быстрый и дешёвый' },
];

export default function SettingsAdmin() {
  const [form, setForm] = useState({ api_key: '', claude_model: 'claude-opus-4-8', base_style_prompt: '' });
  const [apiKeySet, setApiKeySet] = useState(false);
  const [loading, setLoading] = useState(true);
  const [saveStatus, setSaveStatus] = useState(null);
  const [keyStatus, setKeyStatus] = useState(null);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);

  useEffect(() => {
    api('/settings')
      .then((d) => {
        setForm((f) => ({ ...f, claude_model: d.settings.claude_model, base_style_prompt: d.settings.base_style_prompt }));
        setApiKeySet(d.settings.api_key_set);
      })
      .catch((e) => setSaveStatus({ type: 'error', text: e.message }))
      .finally(() => setLoading(false));
  }, []);

  function set(field, value) {
    setForm((f) => ({ ...f, [field]: value }));
  }

  async function save(e) {
    e.preventDefault();
    setSaving(true);
    setSaveStatus(null);
    try {
      await api('/settings', { method: 'PUT', body: form });
      setSaveStatus({ type: 'ok', text: 'Настройки сохранены' });
      if (form.api_key) setApiKeySet(true);
      setForm((f) => ({ ...f, api_key: '' }));
    } catch (err) {
      setSaveStatus({ type: 'error', text: err.message });
    } finally {
      setSaving(false);
    }
  }

  async function testKey() {
    setTesting(true);
    setKeyStatus(null);
    try {
      const d = await api('/settings/test-key', { method: 'POST', body: { api_key: form.api_key } });
      setKeyStatus({ type: 'ok', text: d.message });
    } catch (err) {
      setKeyStatus({ type: 'error', text: err.message });
    } finally {
      setTesting(false);
    }
  }

  if (loading) return <div className="card"><p className="muted">Загрузка…</p></div>;

  return (
    <form className="stack" onSubmit={save}>
      <div className="card">
        <h2>Claude API</h2>
        <p className="muted">Один общий ключ для всех пользователей. Получить: console.anthropic.com → API Keys.</p>
        <label>API ключ
          <input type="password" value={form.api_key} onChange={(e) => set('api_key', e.target.value)}
            placeholder={apiKeySet ? '•••••• (ключ сохранён, оставьте пустым)' : 'sk-ant-...'} />
        </label>
        <label>Модель
          <select value={form.claude_model} onChange={(e) => set('claude_model', e.target.value)}>
            {MODELS.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
          </select>
        </label>
        <div className="actions">
          <button type="button" className="secondary" disabled={testing} onClick={testKey}>
            {testing ? 'Проверка…' : 'Проверить ключ'}
          </button>
        </div>
        {keyStatus && <div className={keyStatus.type === 'ok' ? 'success' : 'error'}>{keyStatus.text}</div>}
      </div>

      <div className="card">
        <h2>Базовый стиль ответов</h2>
        <p className="muted">Общая инструкция для ИИ — задаёт тон и правила. Профиль и переписки добавляются автоматически.</p>
        <label>Системная инструкция
          <textarea rows={6} value={form.base_style_prompt} onChange={(e) => set('base_style_prompt', e.target.value)} />
        </label>
      </div>

      {saveStatus && <div className={saveStatus.type === 'ok' ? 'success' : 'error'}>{saveStatus.text}</div>}
      <div className="actions">
        <button type="submit" disabled={saving}>{saving ? 'Сохранение…' : 'Сохранить настройки'}</button>
      </div>
    </form>
  );
}
