import { useCallback, useEffect, useState, type FormEvent } from 'react';
import { getMindSpaceAdminConfig, updateMindSpaceAdminConfig } from '../../api/client';
import type { MindSpaceAdminConfig } from '../../types';

function safeConfig(config: MindSpaceAdminConfig | null): MindSpaceAdminConfig {
  return config ?? { publicPageLimit: 10, analytics: { enabled: false, websiteId: '', analyticsUrl: 'http://127.0.0.1:3100', domains: '127.0.0.1,localhost', idSecretConfigured: false } };
}

export function MindSpacePage() {
  const [config, setConfig] = useState<MindSpaceAdminConfig | null>(null);
  const [limit, setLimit] = useState('10');
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    setMessage(null);
    try {
      const nextConfig = await getMindSpaceAdminConfig();
      setConfig(nextConfig);
      setLimit(String(nextConfig.publicPageLimit));
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载 MindSpace 配置失败');
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleSave = async (event: FormEvent) => {
    event.preventDefault();
    setBusy(true);
    setError(null);
    setMessage(null);
    try {
      const nextConfig = await updateMindSpaceAdminConfig({ publicPageLimit: Number(limit) });
      setConfig(nextConfig);
      setLimit(String(nextConfig.publicPageLimit));
      setMessage(`已更新为 ${nextConfig.publicPageLimit}，主站会立即按新值校验。`);
    } catch (err) {
      setError(err instanceof Error ? err.message : '保存 MindSpace 配置失败');
    } finally {
      setBusy(false);
    }
  };

  const current = safeConfig(config);

  return (
    <div className="admin-page">
      <div className="admin-page-head">
        <h2>MindSpace 配置</h2>
        <p className="muted">公开页面数量上限由这里统一管理，主站会直接读取数据库配置。</p>
      </div>

      {error && <p className="banner banner-error">{error}</p>}
      {message && <p className="banner banner-info">{message}</p>}

      <section className="admin-card">
        <h2>公开页面上限</h2>
        <p className="muted">
          当前值：{loading ? '—' : current.publicPageLimit}。建议在修改后同步检查主站发布流程。
        </p>
        <form className="admin-form" onSubmit={handleSave}>
          <label className="admin-form-row">
            <span>每个用户最多可在线的公开页面数</span>
            <input
              type="number"
              min={1}
              step={1}
              value={limit}
              onChange={(e) => setLimit(e.target.value)}
              inputMode="numeric"
              required
            />
          </label>
          <div className="admin-actions">
            <button type="submit" className="send-btn" disabled={busy || loading}>
              {busy ? '保存中...' : '保存配置'}
            </button>
            <button type="button" className="ghost-btn" onClick={() => void load()} disabled={busy}>
              重新加载
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}