import React from 'react';
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Save } from 'lucide-react';
import { SettingCard } from "@/components/ui/setting-card";

interface SystemTabProps {
    config: any;
    setConfig: (config: any) => void;
    onSave: () => void;
    saving: boolean;
}

export const SystemTab: React.FC<SystemTabProps> = ({ config, setConfig, onSave, saving }) => {
    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>

            {/* Settings Card */}
            <SettingCard 
                title="自动保存配置"
                description="配置项目和画布的自动保存行为"
            >
                <div className="space-y-4">
                    <div>
                        <Label className="block text-sm font-medium text-muted-foreground mb-2">自动保存间隔 (秒)</Label>
                        <Input
                            type="number"
                            min="60"
                            step="60"
                            value={config.autoSaveInterval || 300}
                            onChange={(e) => setConfig({ ...config, autoSaveInterval: parseInt(e.target.value) || 300 })}
                            className="max-w-xs"
                        />
                        <p className="text-xs text-muted-foreground mt-2">
                            设置画布和项目的自动保存频率，最小值为 60 秒。
                        </p>
                    </div>
                </div>
            </SettingCard>

            {/* Info Card */}
            <div className="rounded-lg bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 p-4">
                <div className="space-y-1">
                    <h4 className="text-sm font-medium text-blue-900 dark:text-blue-300">关于自动保存</h4>
                    <p className="text-xs text-blue-700 dark:text-blue-400 leading-relaxed">
                        自动保存功能会定期保存您的工作进度，避免意外丢失数据。建议设置为 300 秒（5 分钟）以平衡性能和数据安全。
                    </p>
                </div>
            </div>
        </div>
    );
};
