import React from 'react';
import { Save } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { SettingCard } from "@/components/ui/setting-card";
import { ModelSelectControl, TextareaControl, SelectControl, InputControl } from "@/components/canvas/panels/shared/FormControls";
import { useStyles } from '@/lib/hooks/useConfig';
import { StyleConfig } from '@/types';

interface GeneralTabProps {
    config: any;
    setConfig: (config: any) => void;
    models: any[];
    onSave: () => void;
    saving: boolean;
}

export const GeneralTab: React.FC<GeneralTabProps> = ({ config, setConfig, models, onSave, saving }) => {
    const imageModels = models.filter(m => m.type === 'image' || m.type === 'image_generation');
    const videoModels = models.filter(m => m.type === 'video' || m.type === 'video_generation');
    const audioModels = models.filter(m => m.type === 'audio' || m.type === 'audio_generation');
    const llmModels = models.filter(m => m.type === 'llm' || m.type === 'text_generation');
    
    // Load styles from API
    const { data: stylesData } = useStyles();
    const styles = (stylesData?.styles || []) as StyleConfig[];

    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
            {/* Header */}
            <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium">通用设置</h3>
                <Button 
                    onClick={onSave} 
                    disabled={saving}
                    className="bg-primary hover:bg-primary/90"
                >
                    <Save className="w-4 h-4 mr-2" />
                    {saving ? '保存中...' : '保存设置'}
                </Button>
            </div>

            {/* Default Models Selection */}
            <SettingCard 
                title="默认模型配置"
                description="为不同类型的生成任务选择默认使用的模型"
            >
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <ModelSelectControl
                        label="图像模型"
                        models={imageModels}
                        value={config.defaultImageModel || ''}
                        onChange={(value) => setConfig({ ...config, defaultImageModel: value })}
                    />

                    <ModelSelectControl
                        label="视频模型"
                        models={videoModels}
                        value={config.defaultVideoModel || ''}
                        onChange={(value) => setConfig({ ...config, defaultVideoModel: value })}
                    />

                    <ModelSelectControl
                        label="音频模型"
                        models={audioModels}
                        value={config.defaultAudioModel || ''}
                        onChange={(value) => setConfig({ ...config, defaultAudioModel: value })}
                    />

                    <ModelSelectControl
                        label="文本模型 (LLM)"
                        models={llmModels}
                        value={config.defaultLLMModel || ''}
                        onChange={(value) => setConfig({ ...config, defaultLLMModel: value })}
                    />
                </div>
            </SettingCard>

            {/* Default Parameters Section */}
            <SettingCard 
                title="默认参数配置"
                description="设置生成任务的默认参数，可在具体任务中覆盖"
            >
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <SelectControl
                    label="默认风格"
                    value={config.defaultStyle || 'none'}
                    onChange={(value) => setConfig({ ...config, defaultStyle: value === 'none' ? undefined : value })}
                    options={[
                        { label: '无风格', value: 'none' },
                        ...styles.map(style => ({
                            label: style.name,
                            value: style.id,
                            description: style.desc
                        }))
                    ]}
                  />
                  
                  <SelectControl
                    label="默认画幅比例"
                    value={config.defaultAspectRatio || 'auto'}
                    onChange={(value) => setConfig({ ...config, defaultAspectRatio: value === 'auto' ? undefined : value })}
                    options={[
                        { label: '自动', value: 'auto' },
                        { label: '1:1 (正方形)', value: '1:1' },
                        { label: '16:9 (横屏)', value: '16:9' },
                        { label: '9:16 (竖屏)', value: '9:16' },
                        { label: '4:3 (标准横屏)', value: '4:3' },
                        { label: '3:4 (标准竖屏)', value: '3:4' },
                        { label: '21:9 (超宽)', value: '21:9' },
                        { label: '3:2 (摄影)', value: '3:2' },
                        { label: '2:3 (竖屏摄影)', value: '2:3' }
                    ]}
                  />
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  
                  <InputControl
                    label="默认生成数量"
                    type="number"
                    value={String(config.defaultImageCount || 1)}
                    onChange={(value) => setConfig({ ...config, defaultImageCount: parseInt(value) || 1 })}
                  />
                </div>
              </div>
            </SettingCard>
        </div>
    );
};
