import React, { useState, useEffect } from 'react';
import { ModelConfig, ModelType, AppSettings, KnowledgeGroup } from '../../types';
import { useLanguage } from '../../contexts/LanguageContext';
import { X, Plus, Trash2, Edit2, Save, Cpu, Box, Loader2, User, Shield, Key, LogOut, Globe, Settings as SettingsIcon, ToggleLeft, ToggleRight, Database } from 'lucide-react';
import { userService } from '../../services/userService';
// import { settingsService } from '../../services/settingsService';
import { userSettingService } from '../../services/userSettingService';
import { knowledgeGroupService } from '../../services/knowledgeGroupService';

interface SettingsViewProps {
    // Model Props
    models: ModelConfig[];
    authToken: string | null;
    onUpdateModels: (action: 'create' | 'update' | 'delete', model: ModelConfig) => Promise<void>;
    isAdmin?: boolean;  // Added isAdmin prop
    currentUser?: any;  // Added current user prop
}

type TabType = 'general' | 'user' | 'model';

export const SettingsView: React.FC<SettingsViewProps> = ({
    models,
    authToken,
    onUpdateModels,
    isAdmin = false,
    currentUser,
}) => {
    const { t } = useLanguage();
    const [activeTab, setActiveTab] = useState<TabType>('general');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    // --- Model Manager State ---
    const [editingId, setEditingId] = useState<string | null>(null);
    const [modelFormData, setModelFormData] = useState<Partial<ModelConfig>>({
        type: ModelType.LLM,
        supportsVision: false,
        baseUrl: '',
        apiKey: '',
        modelId: '',
        name: '',
        dimensions: 1536,
        maxInputTokens: 8191,
        maxBatchSize: 2048
    });
    const [skipValidation, setSkipValidation] = useState(false);

    // --- User Management State ---
    interface UserType {
        id: string;
        username: string;
        isAdmin: boolean;
        createdAt: string;
    }
    const [users, setUsers] = useState<UserType[]>([]);
    const [isUserLoading, setIsUserLoading] = useState(false);
    const [showAddUser, setShowAddUser] = useState(false);
    const [newUser, setNewUser] = useState({ username: '', password: '', isAdmin: false });
    const [userSuccess, setUserSuccess] = useState('');

    // --- Change Password State ---
    const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' });
    const [passwordSuccess, setPasswordSuccess] = useState('');

    // --- App Settings State ---
    const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
    const [knowledgeGroups, setKnowledgeGroups] = useState<KnowledgeGroup[]>([]);
    const [isSettingsLoading, setIsSettingsLoading] = useState(false);

    // ユーザー一覧の取得（ユーザータブがアクティブな場合）
    useEffect(() => {
        if (activeTab === 'user') {
            fetchUsers();
        } else if (activeTab === 'general') {
            fetchSettingsAndGroups();
        }
    }, [activeTab]); // 只依赖activeTab，不需要currentUser

    const fetchSettingsAndGroups = async () => {
        if (!authToken) return;
        setIsSettingsLoading(true);
        try {
            const [settings, groups] = await Promise.all([
                userSettingService.get(authToken),
                knowledgeGroupService.getGroups()
            ]);
            setAppSettings(settings);
            setKnowledgeGroups(groups);
        } catch (error) {
            console.error('Failed to fetch settings or groups:', error);
        } finally {
            setIsSettingsLoading(false);
        }
    };

    // --- 一般タブのハンドラー ---


    const handleChangePassword = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        setPasswordSuccess('');

        if (passwordForm.new !== passwordForm.confirm) {
            setError(t('passwordMismatch'));
            return;
        }
        if (passwordForm.new.length < 6) {
            setError(t('newPasswordMinLength'));
            return;
        }

        setIsLoading(true);
        try {
            await userService.changePassword(passwordForm.current, passwordForm.new);
            setPasswordSuccess(t('passwordChangeSuccess'));
            setPasswordForm({ current: '', new: '', confirm: '' });
        } catch (err: any) {
            setError(err.message || t('passwordChangeFailed'));
        } finally {
            setIsLoading(false);
        }
    };


    // --- ユーザータブのハンドラー ---
    const fetchUsers = async () => {
        setIsUserLoading(true);
        try {
            const userList = await userService.getUsers();
            setUsers(userList);
        } catch (error: any) {
            setError(error.message || t('getUserListFailed'));
        } finally {
            setIsUserLoading(false);
        }
    };

    const handleCreateUser = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setUserSuccess('');

        if (newUser.password.length < 6) {
            setError(t('passwordMinLength'));
            return;
        }

        try {
            await userService.createUser(newUser.username, newUser.password, newUser.isAdmin);
            setUserSuccess(t('userCreatedSuccess'));
            setNewUser({ username: '', password: '', isAdmin: false });
            setShowAddUser(false);
            fetchUsers();
        } catch (error: any) {
            setError(error.message || t('createUserFailed'));
        }
    };

    const [passwordChangeUserData, setPasswordChangeUserData] = useState<{ userId: string, newPassword: string } | null>(null);

    const handleToggleUserAdmin = async (userId: string, newAdminStatus: boolean) => {
        try {
            await userService.updateUser(userId, newAdminStatus);
            // 重新获取用户列表
            fetchUsers();
            setUserSuccess(newAdminStatus ? t('userPromotedToAdmin') : t('userDemotedFromAdmin'));
        } catch (error: any) {
            setError(error.message || t('updateUserFailed'));
        }
    };

    const handleUserPasswordChange = async () => {
        if (!passwordChangeUserData || !passwordChangeUserData.newPassword) return;

        try {
            // Update user password
            await userService.updateUserInfo(passwordChangeUserData.userId, { password: passwordChangeUserData.newPassword });
            setUserSuccess(t('passwordChangeSuccess'));
            setPasswordChangeUserData(null);
            fetchUsers(); // Refresh the user list
        } catch (error: any) {
            setError(error.message || t('passwordChangeFailed'));
        }
    };

    const handleDeleteUser = async (userId: string) => {
        if (window.confirm(t('confirmDeleteUser'))) {
            try {
                await userService.deleteUser(userId);
                // 重新获取用户列表
                fetchUsers();
                setUserSuccess(t('userDeletedSuccessfully'));
            } catch (error: any) {
                setError(error.message || t('deleteUserFailed'));
            }
        }
    };

    // --- モデルタブのハンドラー ---
    const validateApiKey = async (config: Partial<ModelConfig>) => {
        // 許可されたドメインを検証して、任意の外部API接続を防ぎます
        if (config.baseUrl) {
            try {
                // 注意：この検証はモデルAPI設定にのみ適用され、外部API呼び出しをセキュリティ制限します
                // 本番環境では、より柔軟な設定を使用することをお勧めします
                const url = new URL(config.baseUrl);

                // 環境変数から許可されたホストを取得（なければデフォルトを使用）
                const envAllowedHosts = process.env.VITE_ALLOWED_HOSTS || 'localhost,127.0.0.1,0.0.0.0';
                const allowedHosts = envAllowedHosts.split(',').map(host => host.trim());

                const isLocalhost = allowedHosts.includes(url.hostname) ||
                    url.hostname.startsWith('192.168.') ||
                    url.hostname.startsWith('10.') ||
                    url.hostname.startsWith('172.');

                // 本番環境では、ホワイトリスト設定をハードコードされた許可リストの代わりに実装できます
                if (!isLocalhost) {
                    // 設定ファイルまたは環境変数によって外部API接続を許可するかどうかを決定する必要があります
                    // このデモでは、外部APIへの制限を維持します
                    throw new Error(t('mmErrorExternalApiNotAllowed'));
                }
            } catch (urlError) {
                throw new Error(t('mmErrorInvalidBaseUrl'));
            }
        }

        try {
            let apiUrl = config.baseUrl || '';
            let body = {};

            if (config.type === ModelType.LLM) {
                apiUrl = apiUrl.endsWith('/chat/completions') ? apiUrl : `${apiUrl.replace(/\/+$/, '')}/chat/completions`;
                body = { model: config.modelId, messages: [{ role: 'user', content: 'Hi' }], max_tokens: 1 };
            } else if (config.type === ModelType.RERANK) {
                apiUrl = apiUrl.replace(/\/+$/, '');
                // SiliconFlow API テストボディ
                body = { model: config.modelId, query: 'test', documents: ['test'], top_n: 1 };
            } else {
                apiUrl = apiUrl.endsWith('/embeddings') ? apiUrl : `${apiUrl.replace(/\/+$/, '')}/embeddings`;
                body = { input: ['test'], model: config.modelId };
            }

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${config.apiKey}` },
                body: JSON.stringify(body),
            });

            if (!response.ok) {
                const errText = await response.text();
                throw new Error(`API Request Failed: ${response.status} ${response.statusText} - ${errText.substring(0, 100)}`);
            }
        } catch (error: any) {
            console.error('Validation Warning:', error);
            throw new Error(t('validationFailedMsg').replace('$1', error.message));
        }
    };

    const handleSaveModel = async () => {
        if (!authToken) {
            setError(t('mmErrorNotAuthenticated'));
            return;
        }
        setError(null);

        if (!modelFormData.name?.trim()) { setError(t('mmErrorNameRequired')); return; }
        if (!modelFormData.modelId?.trim()) { setError(t('mmErrorModelIdRequired')); return; }
        if (!modelFormData.baseUrl?.trim()) { setError(t('mmErrorBaseUrlRequired')); return; }
        if (editingId === 'new' && !modelFormData.apiKey?.trim()) { setError(t('mmErrorApiKeyRequired')); return; }

        setIsLoading(true);
        try {
            if (modelFormData.apiKey?.trim() && !skipValidation) {
                await validateApiKey(modelFormData);
            }
            const saveData = { ...modelFormData } as ModelConfig;
            if (saveData.type !== ModelType.EMBEDDING) {
                delete saveData.dimensions;
                delete saveData.maxInputTokens;
                delete saveData.maxBatchSize;
            }
            if (editingId !== 'new' && !modelFormData.apiKey?.trim()) {
                delete saveData.apiKey;
            }
            await onUpdateModels(editingId === 'new' ? 'create' : 'update', saveData);
            setEditingId(null);
        } catch (err: any) {
            setError(err.message || t('errorGeneric'));
        } finally {
            setIsLoading(false);
        }
    };

    const handleToggleModel = async (model: ModelConfig) => {
        try {
            await onUpdateModels('update', { ...model, isEnabled: !model.isEnabled });
        } catch (error) {
            console.error('Failed to toggle model:', error);
        }
    };

    const handleDeleteModel = async (id: string) => {
        if (confirm(t('confirmClear'))) {
            await onUpdateModels('delete', { id } as ModelConfig);
        }
    };

    const getTypeLabel = (type: ModelType) => {
        switch (type) {
            case ModelType.LLM: return t('typeLLM');
            case ModelType.EMBEDDING: return t('typeEmbedding');
            case ModelType.RERANK: return t('typeRerank');
        }
    };

    // --- レンダリング関数 ---

    const renderGeneralTab = () => (
        <div className="space-y-8 animate-in slide-in-from-right duration-300 max-w-2xl">

            {/* パスワード変更セクション */}
            <section className="bg-white p-6 rounded-lg border border-slate-200 shadow-sm">
                <h3 className="text-sm font-medium text-slate-800 mb-4 flex items-center gap-2">
                    <Key className="w-4 h-4 text-blue-500" />
                    {t('changePassword')}
                </h3>
                <form onSubmit={handleChangePassword} className="space-y-4 max-w-sm">
                    <div>
                        <input
                            type="password"
                            placeholder={t('currentPassword')}
                            value={passwordForm.current}
                            onChange={e => setPasswordForm({ ...passwordForm, current: e.target.value })}
                            className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
                            required
                        />
                    </div>
                    <div>
                        <input
                            type="password"
                            placeholder={t('newPassword')}
                            value={passwordForm.new}
                            onChange={e => setPasswordForm({ ...passwordForm, new: e.target.value })}
                            className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
                            required
                        />
                    </div>
                    <div>
                        <input
                            type="password"
                            placeholder={t('confirmPassword')}
                            value={passwordForm.confirm}
                            onChange={e => setPasswordForm({ ...passwordForm, confirm: e.target.value })}
                            className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
                            required
                        />
                    </div>
                    {passwordSuccess && <p className="text-xs text-green-600">{passwordSuccess}</p>}

                    <button
                        type="submit"
                        disabled={isLoading}
                        className="w-full py-2 bg-slate-800 text-white rounded-md text-sm hover:bg-slate-900 transition-colors disabled:opacity-50"
                    >
                        {isLoading ? <Loader2 className="w-4 h-4 animate-spin mx-auto" /> : t('confirmChange')}
                    </button>
                </form>
            </section>



        </div >
    );

    const renderUserTab = () => (
        <div className="space-y-4 animate-in slide-in-from-right duration-300 max-w-3xl">
            <div className="flex justify-between items-center mb-4">
                <h3 className="font-medium text-slate-700">{t('userList')}</h3>
                <button
                    onClick={() => setShowAddUser(!showAddUser)}
                    className="flex items-center gap-1 text-sm bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 transition-colors"
                >
                    <Plus className="w-4 h-4" />
                    {t('addUser')}
                </button>
            </div>

            {showAddUser && (
                <form onSubmit={handleCreateUser} className="bg-slate-50 p-4 rounded-lg border border-slate-200 mb-4 space-y-3">
                    <input
                        type="text"
                        placeholder={t('username')}
                        value={newUser.username}
                        onChange={e => setNewUser({ ...newUser, username: e.target.value })}
                        className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md"
                        required
                    />
                    <input
                        type="password"
                        placeholder={t('password')}
                        value={newUser.password}
                        onChange={e => setNewUser({ ...newUser, password: e.target.value })}
                        className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md"
                        required
                    />
                    <div className="flex items-center gap-2">
                        <input
                            type="checkbox"
                            id="isAdmin"
                            checked={newUser.isAdmin}
                            onChange={e => setNewUser({ ...newUser, isAdmin: e.target.checked })}
                            className="w-4 h-4 text-blue-600 rounded border border-slate-300"
                        />
                        <label htmlFor="isAdmin" className="text-sm text-slate-700">
                            {t('adminUser')}
                        </label>
                    </div>
                    <div className="flex justify-end gap-2">
                        <button type="button" onClick={() => setShowAddUser(false)} className="text-xs text-slate-500 hover:text-slate-700 px-2 py-1">{t('cancel')}</button>
                        <button type="submit" className="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">{t('create')}</button>
                    </div>
                </form>
            )}

            {/* Password Change Modal */}
            {passwordChangeUserData && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                    <div className="bg-white rounded-lg p-6 w-full max-w-md">
                        <div className="flex items-center justify-between mb-4">
                            <h3 className="text-lg font-semibold">{t('changeUserPassword')}</h3>
                            <button
                                onClick={() => setPasswordChangeUserData(null)}
                                className="text-gray-400 hover:text-gray-600"
                            >
                                <X size={20} />
                            </button>
                        </div>

                        <form onSubmit={(e) => { e.preventDefault(); handleUserPasswordChange(); }} className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                    {t('newPassword')}
                                </label>
                                <input
                                    type="password"
                                    value={passwordChangeUserData.newPassword}
                                    onChange={(e) => setPasswordChangeUserData({ ...passwordChangeUserData, newPassword: e.target.value })}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder={t('enterNewPassword')}
                                    required
                                />
                                <p className="text-xs text-gray-500 mt-1">{t('passwordMinLength')}</p>
                            </div>

                            <div className="flex space-x-3 pt-4">
                                <button
                                    type="button"
                                    onClick={() => setPasswordChangeUserData(null)}
                                    className="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
                                >
                                    {t('cancel')}
                                </button>
                                <button
                                    type="submit"
                                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
                                >
                                    {t('confirmChange')}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {userSuccess && <p className="text-xs text-green-600 mb-2">{userSuccess}</p>}

            <div className="space-y-2 max-h-[60vh] overflow-y-auto">
                {users.map(user => (
                    <div key={user.id} className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg">
                        <div className="flex items-center gap-3">
                            <div className={`p-2 rounded-full ${user.isAdmin ? 'bg-orange-100 text-orange-600' : 'bg-slate-100 text-slate-600'}`}>
                                {user.isAdmin ? <Shield className="w-4 h-4" /> : <User className="w-4 h-4" />}
                            </div>
                            <div>
                                <p className="text-sm font-medium text-slate-800">{user.username}</p>
                                <p className="text-xs text-slate-400">{new Date(user.createdAt).toLocaleDateString()}</p>
                            </div>
                        </div>
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-slate-400 bg-slate-50 px-2 py-1 rounded">
                                {user.isAdmin ? t('admin') : t('user')}
                            </span>
                            <button
                                onClick={() => handleToggleUserAdmin(user.id, !user.isAdmin)}
                                className="p-1.5 rounded-md hover:bg-slate-100 text-slate-500 hover:text-blue-600 transition-colors"
                                title={user.isAdmin ? t('makeUserRegular') : t('makeUserAdmin')}
                            >
                                <Edit2 className="w-4 h-4" />
                            </button>
                            <button
                                onClick={() => setPasswordChangeUserData({ userId: user.id, newPassword: '' })}
                                className="p-1.5 rounded-md hover:bg-slate-100 text-slate-500 hover:text-blue-600 transition-colors"
                                title={t('changeUserPassword')}
                            >
                                <Key className="w-4 h-4" />
                            </button>
                            {user.id !== currentUser?.id && ( // 不允许删除自己
                                <button
                                    onClick={() => handleDeleteUser(user.id)}
                                    className="p-1.5 rounded-md hover:bg-slate-100 text-slate-500 hover:text-red-600 transition-colors"
                                    title={t('deleteUser')}
                                >
                                    <Trash2 className="w-4 h-4" />
                                </button>
                            )}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );

    const renderModelTab = () => (
        <div className="animate-in slide-in-from-right duration-300 max-w-3xl">
            {editingId ? (
                <div className="bg-white p-6 rounded-lg border border-blue-100 shadow-sm space-y-4">
                    <h3 className="font-semibold text-slate-700 mb-4">{editingId === 'new' ? t('mmAddBtn') : t('mmEdit')}</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormName')} *</label>
                            <input className="w-full text-sm border rounded-md px-3 py-2" value={modelFormData.name} onChange={e => setModelFormData({ ...modelFormData, name: e.target.value })} disabled={isLoading} />
                        </div>
                        <div>
                            <label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormModelId')} *</label>
                            <input className="w-full text-sm border rounded-md px-3 py-2 font-mono" value={modelFormData.modelId} onChange={e => setModelFormData({ ...modelFormData, modelId: e.target.value })} disabled={isLoading} />
                        </div>
                    </div>

                    <div>
                        <label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormType')} *</label>
                        <select className="w-full text-sm border rounded-md px-3 py-2" value={modelFormData.type} onChange={e => setModelFormData({ ...modelFormData, type: e.target.value as ModelType })} disabled={isLoading}>
                            <option value={ModelType.LLM}>{t('typeLLM')}</option>
                            <option value={ModelType.EMBEDDING}>{t('typeEmbedding')}</option>
                            <option value={ModelType.RERANK}>{t('typeRerank')}</option>
                        </select>
                        {(modelFormData.type === ModelType.LLM || String(modelFormData.type).toLowerCase() === 'llm') && (
                            <div className="mt-2 flex items-center gap-2 p-2 bg-blue-50/50 rounded-md border border-blue-100/50">
                                <input
                                    type="checkbox"
                                    id="supportsVision"
                                    className="w-4 h-4 text-blue-600 rounded cursor-pointer"
                                    checked={modelFormData.supportsVision}
                                    onChange={e => setModelFormData({ ...modelFormData, supportsVision: e.target.checked })}
                                />
                                <label htmlFor="supportsVision" className="text-sm text-blue-700 font-medium cursor-pointer select-none">
                                    {t('mmFormVision')}
                                </label>
                            </div>
                        )}
                    </div>

                    <div>
                        <label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormBaseUrl')} *</label>
                        <input className="w-full text-sm border rounded-md px-3 py-2 font-mono" value={modelFormData.baseUrl} onChange={e => setModelFormData({ ...modelFormData, baseUrl: e.target.value })} disabled={isLoading} autoComplete="off" />
                    </div>

                    <div>
                        <label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormApiKey')} {editingId === 'new' && '*'}</label>
                        <input type="password" className="w-full text-sm border rounded-md px-3 py-2 font-mono" value={modelFormData.apiKey} onChange={e => setModelFormData({ ...modelFormData, apiKey: e.target.value })} placeholder={editingId === 'new' ? '' : t('leaveEmptyNoChange')} disabled={isLoading} autoComplete="new-password" />
                        <div className="mt-2 flex items-center gap-2">
                            <input type="checkbox" id="skipVal" checked={skipValidation} onChange={e => setSkipValidation(e.target.checked)} />
                            <label htmlFor="skipVal" className="text-xs text-slate-500">{t('skipApiValidation')}</label>
                        </div>
                    </div>

                    {modelFormData.type === ModelType.EMBEDDING && (
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="block text-xs font-medium text-slate-500 mb-1">Max Input</label>
                                <input type="number" className="w-full text-sm border rounded px-3 py-2" value={modelFormData.maxInputTokens || 8191} onChange={e => setModelFormData({ ...modelFormData, maxInputTokens: parseInt(e.target.value) })} />
                            </div>
                            <div>
                                <label className="block text-xs font-medium text-slate-500 mb-1">Dimensions</label>
                                <input type="number" className="w-full text-sm border rounded px-3 py-2" value={modelFormData.dimensions || 1536} onChange={e => setModelFormData({ ...modelFormData, dimensions: parseInt(e.target.value) })} />
                            </div>
                        </div>
                    )}

                    <div className="flex justify-end gap-2 pt-2">
                        <button onClick={() => { setEditingId(null); setError(null); }} className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg">{t('mmCancel')}</button>
                        <button onClick={handleSaveModel} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg flex items-center gap-2" disabled={isLoading}>
                            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
                            {t('mmSave')}
                        </button>
                    </div>
                </div>
            ) : (
                <div className="space-y-3">
                    {models.map(model => (
                        <div key={model.id} className="bg-white border border-slate-200 rounded-lg p-3 flex justify-between items-start">
                            <div className="flex gap-3">
                                <div className="w-10 h-10 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center"><Cpu className="w-5 h-5" /></div>
                                <div>
                                    <h4 className="font-semibold text-sm text-slate-800">{model.name}</h4>
                                    <div className="flex gap-2 text-xs text-slate-500">
                                        <span className="bg-slate-100 px-1 rounded">{getTypeLabel(model.type)}</span>
                                        <span className="font-mono">{model.modelId}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="flex gap-1">
                                <button
                                    onClick={() => handleToggleModel(model)}
                                    className={`p-2 transition-colors ${model.isEnabled !== false ? 'text-emerald-500 hover:text-emerald-600' : 'text-slate-300 hover:text-slate-400'}`}
                                    title={model.isEnabled !== false ? t('modelEnabled') : t('modelDisabled')}
                                >
                                    {model.isEnabled !== false ? <ToggleRight className="w-6 h-6" /> : <ToggleLeft className="w-6 h-6" />}
                                </button>
                                <button onClick={() => { setEditingId(model.id); setModelFormData({ ...model, apiKey: '' }); }} className="p-2 text-slate-400 hover:text-blue-600"><Edit2 className="w-4 h-4" /></button>
                                <button onClick={() => handleDeleteModel(model.id)} className="p-2 text-slate-400 hover:text-red-600"><Trash2 className="w-4 h-4" /></button>
                            </div>
                        </div>
                    ))}
                    <button onClick={() => { setEditingId('new'); setModelFormData({ type: ModelType.LLM, supportsVision: false, baseUrl: '', apiKey: '', modelId: '', name: '', dimensions: 1536 }); }} className="w-full py-3 border-2 border-dashed border-slate-200 rounded-lg text-slate-500 hover:border-blue-400 hover:text-blue-600 flex justify-center gap-2 items-center">
                        <Plus className="w-5 h-5" /> {t('mmAddBtn')}
                    </button>
                </div>
            )}
        </div>
    );

    return (
        <div className="flex h-full bg-white relative">
            {/* サイドバー */}
            <div className="w-64 bg-slate-50 border-r border-slate-200 flex flex-col shrink-0">
                <div className="p-6">
                    <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
                        <SettingsIcon className="w-6 h-6 text-blue-600" />
                        {t('settings')}
                    </h2>
                </div>

                <nav className="flex-1 px-4 space-y-1">
                    <button onClick={() => setActiveTab('general')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'general' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-600 hover:bg-slate-100'}`}>
                        <Globe className="w-5 h-5" /> {t('generalSettings')}
                    </button>
                    {isAdmin && (
                        <button onClick={() => setActiveTab('user')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'user' ? 'bg-white text-purple-600 shadow-sm' : 'text-slate-600 hover:bg-slate-100'}`}>
                            <User className="w-5 h-5" /> {t('userManagement')}
                        </button>
                    )}
                    {isAdmin && (
                        <button onClick={() => setActiveTab('model')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'model' ? 'bg-white text-emerald-600 shadow-sm' : 'text-slate-600 hover:bg-slate-100'}`}>
                            <Cpu className="w-5 h-5" /> {t('modelManagement')}
                        </button>
                    )}
                </nav>
            </div>

            {/* コンテンツエリア */}
            <div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
                <div className="flex items-center justify-between px-8 py-6 border-b border-slate-100 shrink-0">
                    <h3 className="text-xl font-bold text-slate-800">
                        {activeTab === 'general' ? t('generalSettings') : activeTab === 'user' ? t('userManagement') : activeTab === 'model' ? t('modelManagement') : t('generalSettings')}
                    </h3>
                </div>

                <div className="flex-1 overflow-y-auto p-8 bg-slate-50/50">
                    {error && (
                        <div className="mb-4 p-4 bg-red-50 text-red-700 rounded-lg flex gap-2 items-start text-sm">
                            <span className="font-bold">Error:</span> {error}
                        </div>
                    )}
                    {activeTab === 'general' && renderGeneralTab()}
                    {activeTab === 'user' && renderUserTab()}
                    {activeTab === 'model' && isAdmin && renderModelTab()}  {/* Only render model tab if user is admin */}
                </div>
            </div>
        </div>
    );
};