'use client';

import React, { useState, useEffect } from 'react';
import { isVideoModificationEnabled, isGoogleLoginEnabled } from '@/lib/server-config';

export default function TestServerConfigPage() {
  const [ssoStatus, setSsoStatus] = useState<boolean | null>(null);
  const [videoModStatus, setVideoModStatus] = useState<boolean | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const testConfigs = async () => {
    setLoading(true);
    setError(null);
    
    try {
      console.log('🧪 开始测试服务器配置...');
      
      // 测试SSO配置
      const ssoEnabled = await isGoogleLoginEnabled();
      console.log('📋 SSO配置结果:', ssoEnabled);
      setSsoStatus(ssoEnabled);
      
      // 测试视频修改配置
      const videoModEnabled = await isVideoModificationEnabled();
      console.log('📋 视频修改配置结果:', videoModEnabled);
      setVideoModStatus(videoModEnabled);
      
      console.log('✅ 所有配置测试完成');
    } catch (err) {
      console.error('❌ 配置测试失败:', err);
      setError(err instanceof Error ? err.message : '未知错误');
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-center">服务器配置测试页面</h1>
        
        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
          <h2 className="text-xl font-semibold mb-4">配置状态</h2>
          
          <div className="space-y-4">
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded">
              <span className="font-medium">Google登录 (sso_config):</span>
              <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                ssoStatus === null ? 'bg-gray-200 text-gray-600' :
                ssoStatus ? 'bg-green-200 text-green-800' : 'bg-red-200 text-red-800'
              }`}>
                {ssoStatus === null ? '检测中...' : ssoStatus ? '启用' : '禁用'}
              </span>
            </div>
            
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded">
              <span className="font-medium">视频修改 (video_modification):</span>
              <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                videoModStatus === null ? 'bg-gray-200 text-gray-600' :
                videoModStatus ? 'bg-green-200 text-green-800' : 'bg-red-200 text-red-800'
              }`}>
                {videoModStatus === null ? '检测中...' : videoModStatus ? '启用' : '禁用'}
              </span>
            </div>
          </div>
          
          {error && (
            <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded">
              <p className="text-red-800 font-medium">错误:</p>
              <p className="text-red-600">{error}</p>
            </div>
          )}
          
          <div className="mt-6 flex gap-4">
            <button
              onClick={testConfigs}
              disabled={loading}
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
            >
              {loading ? '测试中...' : '重新测试'}
            </button>
            
            <button
              onClick={() => window.location.href = '/movies/work-flow'}
              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
            >
              前往Work-Flow页面
            </button>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-4">API测试信息</h2>
          <div className="space-y-2 text-sm text-gray-600">
            <p><strong>SSO API:</strong> POST /api/server-setting/find_by_code {"{ code: 'sso_config' }"}</p>
            <p><strong>视频修改API:</strong> POST /api/server-setting/find_by_code {"{ code: 'video_modification' }"}</p>
            <p><strong>预期响应格式:</strong> {"{ code: 0, successful: true, data: { value: '{\"show\": true}' } }"}</p>
          </div>
        </div>
        
        <div className="mt-6 text-center text-sm text-gray-500">
          <p>请打开浏览器开发者工具查看详细的API调用日志</p>
        </div>
      </div>
    </div>
  );
}