'use client';

import { useState, useEffect } from 'react';
import { useConfig, testConfig, useDataSourcesConfig, updateDataSourcesConfig } from '@/hooks/useApi';
import { useConfigStore } from '@/stores/useConfigStore';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import type { DataSourcesConfig, DataSourceProvider } from '@/types';

import { AIConfigTab } from './components/AIConfigTab';
import { DataSourcesConfigTab } from './components/DataSourcesConfigTab';
import { AnalysisConfigTab } from './components/AnalysisConfigTab';
import { SystemConfigTab } from './components/SystemConfigTab';

const defaultUrls: Partial<Record<DataSourceProvider, string>> = {
    tushare: 'http://api.tushare.pro',
    finnhub: 'https://finnhub.io/api/v1',
    alphavantage: 'https://mcp.alphavantage.co/mcp',
};

export default function ConfigPage() {
  // 从 Zustand store 获取全局状态
  const { config, loading, error, setConfig } = useConfigStore();
  // 使用 SWR hook 加载初始配置
  useConfig();
  
  // 本地表单状态
  // 数据源本地状态
  const { data: initialDataSources, error: dsError, isLoading: dsLoading, mutate: mutateDataSources } = useDataSourcesConfig();
  const [localDataSources, setLocalDataSources] = useState<DataSourcesConfig>({});
  
  // 测试结果状态
  const [testResults, setTestResults] = useState<Record<string, { success: boolean; summary: string; details?: string } | null>>({});
  
  // 保存状态
  const [saving, setSaving] = useState(false);
  const [saveMessage, setSaveMessage] = useState('');

  // Shared state for AI Tab (needed for System Tab's import feature)
  const [newProviderBaseUrl, setNewProviderBaseUrl] = useState('');

  useEffect(() => {
    if (initialDataSources) {
      setLocalDataSources(initialDataSources);
    }
  }, [initialDataSources]);

  const handleSave = async () => {
    setSaving(true);
    setSaveMessage('保存中...');

    try {
      if (initialDataSources) {
        // Create a deep copy to avoid mutating the local state directly
        const finalDataSources = JSON.parse(JSON.stringify(localDataSources));
        for (const key in finalDataSources) {
          const providerKey = key as DataSourceProvider;
          const source = finalDataSources[providerKey];
          // If the URL is empty or null, and there is a default URL, use it
          if (source && (source.api_url === null || source.api_url.trim() === '') && defaultUrls[providerKey]) {
            source.api_url = defaultUrls[providerKey];
          }
        }

        await updateDataSourcesConfig(finalDataSources);
        // After saving, mutate the local SWR cache with the final data
        // and also update the component's local state to reflect the change.
        await mutateDataSources(finalDataSources, false);
        setLocalDataSources(finalDataSources);
      }
      setSaveMessage('保存成功！');
    } catch (e: any) {
      setSaveMessage(`保存失败: ${e.message}`);
    } finally {
      setSaving(false);
      setTimeout(() => setSaveMessage(''), 5000);
    }
  };

  const handleTest = async (type: string, data: any) => {
    try {
      const result = await testConfig(type, data);
      const success = !!result?.success;
      const summary = typeof result?.message === 'string' && result.message.trim().length > 0
        ? result.message
        : (success ? '测试成功' : '测试失败');
      setTestResults(prev => ({ ...prev, [type]: { success, summary } }));
    } catch (e: any) {
      // 结构化错误对象：{ summary, details? }
      const summary: string = (e && typeof e === 'object' && 'summary' in e) ? String(e.summary) : (e?.message || '未知错误');
      const details: string | undefined = (e && typeof e === 'object' && 'details' in e) ? (e.details ? String(e.details) : undefined) : undefined;
      setTestResults(prev => ({
        ...prev,
        [type]: { success: false, summary, details }
      }));
    }
  };

  const handleTestTushare = () => {
    const cfg = localDataSources['tushare'];
    handleTest('tushare', { api_key: cfg?.api_key, api_url: cfg?.api_url, enabled: cfg?.enabled });
  };

  const handleTestFinnhub = () => {
    const cfg = localDataSources['finnhub'];
    handleTest('finnhub', { api_key: cfg?.api_key, api_url: cfg?.api_url, enabled: cfg?.enabled });
  };

  const handleTestAlphaVantage = () => {
    const cfg = localDataSources['alphavantage'];
    handleTest('alphavantage', { api_key: cfg?.api_key, api_url: cfg?.api_url, enabled: cfg?.enabled });
  };

  const handleReset = () => {
    if (initialDataSources) setLocalDataSources(initialDataSources);
    setTestResults({});
    setSaveMessage('');
  };

  if (loading) return (
    <div className="flex items-center justify-center h-64">
      <div className="text-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
        <p className="mt-2 text-sm text-muted-foreground">加载配置中...</p>
      </div>
    </div>
  );

  if (error) return (
    <div className="flex items-center justify-center h-64">
      <div className="text-center">
        <div className="text-red-500 text-lg mb-2">⚠️</div>
        <p className="text-red-600">加载配置失败: {error}</p>
      </div>
    </div>
  );

  return (
    <div className="container mx-auto py-6 space-y-6">
      <header className="space-y-2">
        <h1 className="text-3xl font-bold">配置中心</h1>
        <p className="text-muted-foreground">
          管理系统配置，包括 AI 服务与数据源等。敏感信息不回显，留空表示保持当前值。
        </p>
      </header>

      <Tabs defaultValue="ai" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="ai">AI服务</TabsTrigger>
          <TabsTrigger value="data-sources">数据源</TabsTrigger>
          <TabsTrigger value="analysis">分析配置</TabsTrigger>
          <TabsTrigger value="system">系统</TabsTrigger>
        </TabsList>

        <TabsContent value="ai" className="space-y-4">
          <AIConfigTab 
            newProviderBaseUrl={newProviderBaseUrl}
            setNewProviderBaseUrl={setNewProviderBaseUrl}
          />
        </TabsContent>

        <TabsContent value="data-sources" className="space-y-4">
          <DataSourcesConfigTab
            dsLoading={dsLoading}
            dsError={dsError}
            localDataSources={localDataSources}
            setLocalDataSources={setLocalDataSources}
            testResults={testResults}
            handleTestTushare={handleTestTushare}
            handleTestFinnhub={handleTestFinnhub}
            handleTestAlphaVantage={handleTestAlphaVantage}
          />
        </TabsContent>

        <TabsContent value="analysis" className="space-y-4">
          <AnalysisConfigTab />
        </TabsContent>

        <TabsContent value="system" className="space-y-4">
          <SystemConfigTab 
            config={config} 
            setSaveMessage={setSaveMessage}
            setNewProviderBaseUrl={setNewProviderBaseUrl}
          />
        </TabsContent>
      </Tabs>

      <div className="flex items-center justify-between pt-6 border-t">
        <div className="flex items-center gap-4">
          <Button onClick={handleSave} disabled={saving} size="lg">
            {saving ? '保存中...' : '保存所有配置'}
          </Button>
          <Button onClick={handleReset} variant="outline" size="lg">
            重置表单
          </Button>
          {saveMessage && (
            <span className={`text-sm ${saveMessage.includes('成功') ? 'text-green-600' : 'text-red-600'}`}>
              {saveMessage}
            </span>
          )}
        </div>
        <div className="text-sm text-muted-foreground">
          最后更新: {new Date().toLocaleString()}
        </div>
      </div>
    </div>
  );
}