// React
import { AIConfigForm } from '@tombcato/ai-selector-react';
import '@tombcato/ai-selector-react/style.css'; // ⚠️ 务必引入样式

// Vue
import { AIConfigForm } from '@tombcato/ai-selector-vue';
import '@tombcato/ai-selector-vue/style.css'; // ⚠️ 务必引入样式

<AIConfigForm
  proxyUrl=""                 // 空字符串表示直连模式，或填入后端代理地址
  showPreview                 // 是否显示配置预览 JSON
  language="zh"               // 界面语言 'zh' | 'en'
  title="AI Configuration"    // 自定义卡片标题
/>

// 示例配置
const providerConfig: ProviderConfig = {
    mode: 'default', // 可选值: 'default' | 'customOnly'
    // custom: customProviders as Record<string, CustomProviderDefinition>, //导入自定义provider

    // ========================================================================
    // 场景 1: 只显示指定的 Provider (白名单过滤)
    // ========================================================================
    include: ['openai', 'anthropic'],
    exclude: ['gemini'], // 或者使用黑名单过滤

    // ========================================================================
    // 场景 2: 覆盖/添加自定义 Provider
    // ========================================================================
    custom: {
        // 覆盖内置配置
        openai: {
            name: 'Enterprise OpenAI',
            baseUrl: 'https://gateway.company.com/openai/v1',
            apiFormat: 'openai',
            needsApiKey: true,
            models: [{ id: 'gpt-4o', name: 'GPT-4o' }]
        },
        // 添加新厂商
        deepseeksssss: {
            name: 'DeepSeekssssss',
            baseUrl: 'https://api.deepseek.com',
            apiFormat: 'openai',
            needsApiKey: true,
            icon: 'https://avatars.githubusercontent.com/u/148330874',
            models: [{ id: 'deepseek-chat', name: 'DeepSeek Chat' }]
        }
    },


    // ========================================================================
    // 场景 3: 仅显示自定义 Provider
    // ========================================================================
    mode: 'customOnly',
    custom: {
        'my-private-model': {
            name: 'Internal AI',
            baseUrl: 'http://localhost:8080/v1',
            apiFormat: 'openai',
            needsApiKey: false,
            icon: 'https://placehold.co/32x32?text=INT',
            models: [
                { id: 'llama-3-8b', name: 'Llama 3 8B' },
                { id: 'mistral-7b', name: 'Mistral 7B' }
            ]
        }
    }
}

<AIConfigForm
  config={providerConfig}
  // ...其他参数
/>

import ...
<AIConfigForm
  proxyUrl="" //不设置代理
/>

import ...
<AIConfigForm
  proxyUrl="后端代理地址" //backend server.py本地代理为http://localhost:8000
/>

import ...
<AIConfigForm
  proxyUrl="" //不设置代理
  modelFetcher={async (params) => {
    // 自定义实现模型列表获取、连接测试等
    if (params.type === 'fetchModels') {
      return await yourCustomFetch(params);
    }
  }}
/>

import { useAIConfig } from '@tombcato/ai-selector-react';

function MyCustomUI() {
    const {
        // 状态
        providerId,          // 当前选中的 Provider ID
        apiKey,              // API Key
        model,               // 当前选中的 Model ID
        modelName,           // Model 显示名称
        baseUrl,             // 自定义 Base URL
        models,              // 可用模型列表
        provider,            // 当前 Provider 对象
        providers,           // 所有可用 Providers
        isValid,             // 配置是否完整有效
        testStatus,          // 测试状态: 'idle' | 'testing' | 'success' | 'error'
        testResult,          // 测试结果对象
        isFetchingModels,    // 是否正在获取模型列表
        fetchModelError,     // 获取模型错误信息
        config,              // 完整配置对象
        
        // 方法
        setProviderId,       // 设置 Provider
        setApiKey,           // 设置 API Key
        selectModel,         // 选择 Model (id, name)
        setBaseUrl,          // 设置 Base URL
        runTest,             // 执行连接测试
        save,                // 保存配置到 Storage
    } = useAIConfig({
        proxyUrl: '',                    // 可选：代理地址
        providerConfig: {},              // 可选：Provider 配置
        initialConfig: {},               // 可选：初始配置
        onSerialize: (data) => data,     // 可选：序列化钩子
        onDeserialize: (data) => data,   // 可选：反序列化钩子
        modelFetcher: async () => [],    // 可选：自定义模型获取
    });

    // 使用这些状态和方法构建你自己的 UI
    return (
        <div>
            <select value={providerId} onChange={e => setProviderId(e.target.value)}>
                {providers.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
            {/* ... 你的自定义 UI */}
        </div>
    );
}