/* ============================================================
   admin-settings.jsx — Цены, настройки, модели (toggle + тарифы)
   ============================================================ */

const { useState, useEffect } = React;

/* ─── AdminSettings: цены и настройки ─── */
function AdminSettings() {
  const { API_BASE } = useAuth();
  const toast = useToast();
  const [tab, setTab] = useState('prices');

  const tabs = [
    { id: 'prices', label: '⚙️ Цены' },
    { id: 'models', label: '💎 Модели' },
  ];

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">⚙️ Настройки</h1>
        </div>
      </div>
      <Tabs items={tabs} active={tab} onChange={setTab} />
      {tab === 'prices' && <AdminPrices API_BASE={API_BASE} toast={toast} />}
      {tab === 'models' && <AdminModels API_BASE={API_BASE} toast={toast} />}
    </div>
  );
}

/* ─── Prices ─── */
function AdminPrices({ API_BASE, toast }) {
  const [settings, setSettings] = useState([]);
  const [edited, setEdited] = useState({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [groupFilter, setGroupFilter] = useState('all');

  async function load() {
    setLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/settings`, { credentials: 'include' });
      if (r.ok) { const data = await r.json(); setSettings(data.items || []); }
    } catch {}
    finally { setLoading(false); }
  }

  useEffect(() => { load(); }, []);

  async function save(key, value) {
    setSaving(true);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/settings`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ key, value }),
        credentials: 'include',
      });
      if (r.ok) {
        toast(`Сохранено: ${key}`, 'ok');
        setEdited(e => { const n = {...e}; delete n[key]; return n; });
        load();
      } else {
        const d = await r.json();
        toast(d.error || 'Ошибка', 'warn');
      }
    } catch { toast('Ошибка', 'warn'); }
    finally { setSaving(false); }
  }

  const groups = [...new Set(settings.map(s => s.group || 'other'))];
  const filtered = groupFilter === 'all' ? settings : settings.filter(s => (s.group || 'other') === groupFilter);

  if (loading) return <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div>;

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 20 }}>
        <button className={`seg-btn${groupFilter === 'all' ? ' on' : ''}`} onClick={() => setGroupFilter('all')}>Все</button>
        {groups.map(g => (
          <button key={g} className={`seg-btn${groupFilter === g ? ' on' : ''}`} onClick={() => setGroupFilter(g)}>{g}</button>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {filtered.map(s => (
          <div key={s.key} className="glass" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{s.key}</div>
              {s.description && <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{s.description}</div>}
            </div>
            <input
              className="field-input"
              style={{ width: 120, textAlign: 'right' }}
              value={edited[s.key] !== undefined ? edited[s.key] : s.value}
              onChange={e => setEdited(ed => ({ ...ed, [s.key]: e.target.value }))}
            />
            {edited[s.key] !== undefined && edited[s.key] !== s.value && (
              <button
                className="btn btn-accent btn-sm"
                onClick={() => save(s.key, edited[s.key])}
                disabled={saving}
              >
                {saving ? <Spinner sm /> : '✓'}
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─── Models toggle ─── */
function AdminModels({ API_BASE, toast }) {
  const [models, setModels] = useState([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(null);
  const [section, setSection] = useState('IMAGE');

  async function load() {
    setLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/bot-models`, { credentials: 'include' });
      if (r.ok) { const data = await r.json(); setModels(data.items || []); }
    } catch {}
    finally { setLoading(false); }
  }

  useEffect(() => { load(); }, []);

  async function update(id, patch) {
    setSaving(id);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/bot-models`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, ...patch }),
        credentials: 'include',
      });
      if (r.ok) { toast('Сохранено', 'ok'); load(); }
      else { const d = await r.json(); toast(d.error || 'Ошибка', 'warn'); }
    } catch { toast('Ошибка', 'warn'); }
    finally { setSaving(null); }
  }

  const sections = [...new Set(models.map(m => {
    if (m.id.startsWith('video:')) return 'VIDEO';
    if (m.id.startsWith('music:')) return 'MUSIC';
    return 'IMAGE';
  }))];

  const filtered = models.filter(m => {
    const s = m.id.startsWith('video:') ? 'VIDEO' : m.id.startsWith('music:') ? 'MUSIC' : 'IMAGE';
    return s === section;
  });

  const TIERS = ['allowedFree', 'allowedPro', 'allowedBusiness'];
  const TIER_LABELS = { allowedFree: 'Free', allowedPro: 'Pro', allowedBusiness: 'Business' };

  if (loading) return <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div>;

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
        {sections.map(s => (
          <button key={s} className={`seg-btn${section === s ? ' on' : ''}`} onClick={() => setSection(s)}>{s}</button>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {filtered.map(m => (
          <div key={m.id} className="glass" style={{ padding: '16px 18px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <Toggle
                label={m.displayName || m.id}
                value={m.isEnabled}
                onChange={v => update(m.id, { isEnabled: v })}
              />
              {saving === m.id && <Spinner sm />}
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {TIERS.map(tier => (
                <label key={tier} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, cursor: 'pointer' }}>
                  <input
                    type="checkbox"
                    checked={!!m[tier]}
                    onChange={e => update(m.id, { [tier]: e.target.checked })}
                    style={{ accentColor: '#8b5cf6' }}
                  />
                  {TIER_LABELS[tier]}
                </label>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}