// ==========================================
// SettingsModal Component
// ==========================================

const SettingsModal = ({ show, onClose, apiKey, setApiKey, baseUrl, setBaseUrl, aiModel, setAiModel, t }) => {
    if (!show) return null;

    return (
        <div className={`fixed inset-0 z-[100] bg-black/70 backdrop-blur-md flex items-center justify-center p-6 transition-all duration-300 ${show ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}>
            <div className="bg-slate-900 border border-slate-800 rounded-[2.5rem] p-10 max-w-lg w-full shadow-3xl space-y-8">
                <div className="flex justify-between items-center">
                    <h3 className="text-xl font-bold">{t('System Settings', '系统设置')}</h3>
                    <button onClick={onClose} className="p-2 hover:bg-slate-800 rounded-full transition-colors">✕</button>
                </div>

                <div className="space-y-6">
                    <div className="space-y-3">
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">API Key (必填)</label>
                        <input
                            type="password"
                            value={apiKey}
                            onChange={(e) => setApiKey(e.target.value)}
                            placeholder="sk-..."
                            className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 ring-indigo-500/50 outline-none transition-all placeholder:text-slate-700 font-mono text-emerald-400"
                        />
                    </div>

                    <div className="space-y-3">
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Base URL (可选)</label>
                        <input
                            type="text"
                            value={baseUrl}
                            onChange={(e) => setBaseUrl(e.target.value)}
                            placeholder="https://api.openai.com/v1"
                            className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 ring-indigo-500/50 outline-none transition-all placeholder:text-slate-700 font-mono text-slate-300"
                        />
                        <p className="text-[10px] text-slate-600">
                            {t('Default: Google Official. Use proxy if needed.', '默认：Google 官方。国内使用请填写中转地址。')}
                        </p>
                    </div>

                    <div className="space-y-3">
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">{t('Model Selection', '模型选择')}</label>
                        <input
                            type="text"
                            value={aiModel}
                            onChange={(e) => setAiModel(e.target.value)}
                            className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 ring-indigo-500/50 outline-none transition-all font-mono text-indigo-300 mb-2"
                        />
                        <div className="grid grid-cols-2 gap-2">
                            <button onClick={() => setAiModel('gemini-2.5-flash-image-preview')} className={`py-2 text-[10px] font-bold rounded-lg border transition-all ${aiModel === 'gemini-2.5-flash-image-preview' ? 'bg-indigo-500/20 border-indigo-500 text-indigo-300' : 'bg-slate-950 border-slate-800 text-slate-500 hover:border-slate-600'}`}>
                                Gemini 2.5 Flash
                            </button>
                            <button onClick={() => setAiModel('gemini-3-pro-image-preview')} className={`py-2 text-[10px] font-bold rounded-lg border transition-all ${aiModel === 'gemini-3-pro-image-preview' ? 'bg-indigo-500/20 border-indigo-500 text-indigo-300' : 'bg-slate-950 border-slate-800 text-slate-500 hover:border-slate-600'}`}>
                                Gemini 3 Pro
                            </button>
                        </div>
                    </div>

                    <div className="pt-2">
                        <button onClick={onClose} className="w-full py-4 rounded-2xl bg-slate-100 hover:bg-white text-slate-950 font-bold text-xs uppercase tracking-widest transition-all">
                            {t('Save Settings', '保存设置')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

window.SettingsModal = SettingsModal;