KnowledgeBase/web/components/views/SettingsView.tsx

import React, { useState, useEffect } from 'react';
import { ModelConfig, ModelType, AppSettings, KnowledgeGroup, Tenant, TenantMember } from '../../types';
import { useLanguage } from '../../contexts/LanguageContext';
import { X, Plus, Trash2, Edit2, Save, Cpu, Box, Loader2, User, Users, Shield, Key, LogOut, Globe, Search, Settings as SettingsIcon, ToggleLeft, ToggleRight, Database, Sparkles, ChevronRight, ChevronDown, Lock, Building2, BookOpen, UserCircle, HardDrive, LayoutGrid } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { userService } from '../../services/userService';
import { settingsService } from '../../services/settingsService';
import { userSettingService } from '../../services/userSettingService';
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
import { apiClient } from '../../services/apiClient';

import { useConfirm } from '../../contexts/ConfirmContext';
import { useToast } from '../../contexts/ToastContext';

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
    initialTab?: TabType;
}

type TabType = 'general' | 'user' | 'model' | 'tenants' | 'knowledge_base' | 'import_tasks';

const buildTenantTree = (tenants: Tenant[]): Tenant[] => {
    const map = new Map<string, Tenant>();
    const roots: Tenant[] = [];

    tenants.forEach(t => {
        map.set(t.id, { ...t, children: [] });
    });

    tenants.forEach(t => {
        const node = map.get(t.id)!;
        if (t.parentId && map.has(t.parentId)) {
            const parent = map.get(t.parentId)!;
            parent.children = parent.children || [];
            parent.children.push(node);
        } else {
            roots.push(node);
        }
    });

    return roots;
};

export const SettingsView: React.FC<SettingsViewProps> = ({
    models,
    authToken,
    onUpdateModels,
    isAdmin = false,
    currentUser,
    initialTab = 'general',
}) => {
    const { t, language, setLanguage } = useLanguage();
    const { confirm } = useConfirm();
    const { showError, showSuccess } = useToast();
    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,
        baseUrl: 'http://localhost:11434/v1',
        modelId: 'llama3',
        name: '',
        dimensions: 1536,
        apiKey: '',
        maxInputTokens: 8191,
        maxBatchSize: 2048
    });

    const [users, setUsers] = useState<any[]>([]);
    const [isUserLoading, setIsUserLoading] = useState(false);
    const [userPage, setUserPage] = useState(1);
    const USER_PAGE_SIZE = 20;
    const [showAddUser, setShowAddUser] = useState(false);
    const [newUser, setNewUser] = useState({ username: '', password: '', displayName: '' });
    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);
    const [enabledModelIds, setEnabledModelIds] = useState<string[]>([]);

    // --- Tenant Admin Binding Search State ---
    const [bindingTenantId, setBindingTenantId] = useState<string | null>(null);
    const [userSearchQuery, setUserSearchQuery] = useState('');

    // --- Manage Members Modal State ---
    const [managingMembersTenantId, setManagingMembersTenantId] = useState<string | null>(null);
    const [tenantMembers, setTenantMembers] = useState<any[]>([]);
    const [memberUserSearch, setMemberUserSearch] = useState('');
    const [bindingRole, setBindingRole] = useState('USER');
    const [currentMemberSearch, setCurrentMemberSearch] = useState('');
    const [isMembersLoading, setIsMembersLoading] = useState(false);
    const [activeTenantManagementId, setActiveTenantManagementId] = useState<string | null>(null);
    const [memberPage, setMemberPage] = useState(1);
    const [memberTotal, setMemberTotal] = useState(0);
    const MEMBER_PAGE_SIZE = 10;

    const [userTotal, setUserTotal] = useState(0);

    // --- Tenant Tree & Global Management State ---
    const [tenants, setTenants] = useState<Tenant[]>([]);
    const [selectedTenantId, setSelectedTenantId] = useState<string | null>(null);
    const [stats, setStats] = useState({ users: 0, tenants: 0 });
    const [showCreateTenant, setShowCreateTenant] = useState(false);
    const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
    const [newTenant, setNewTenant] = useState<{ name: string; domain: string; parentId: string | null }>({
        name: '',
        domain: '',
        parentId: null
    });

    useEffect(() => {
        setMemberPage(1);
    }, [activeTenantManagementId, currentMemberSearch]);


    useEffect(() => {
        if (initialTab) {
            setActiveTab(initialTab);
        }
    }, [initialTab]);

    useEffect(() => {
        if (activeTab === 'user') {
            fetchUsers();
        }
    }, [userPage]);

    useEffect(() => {
        if (selectedTenantId) {
            fetchTenantMembers(selectedTenantId);
        }
    }, [memberPage, selectedTenantId]);

    const Pagination: React.FC<{
        current: number;
        total: number;
        pageSize: number;
        onChange: (page: number) => void;
    }> = ({ current, total, pageSize, onChange }) => {
        const totalPages = Math.ceil(total / pageSize);
        if (totalPages <= 1) return null;

        return (
            <div className="flex items-center justify-center gap-2 mt-6">
                <button
                    disabled={current === 1}
                    onClick={() => onChange(current - 1)}
                    className="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
                >
                    <ChevronDown className="w-4 h-4 rotate-90" />
                </button>
                <div className="flex items-center gap-1">
                    {[...Array(totalPages)].map((_, i) => {
                        const p = i + 1;
                        if (totalPages > 7) {
                            if (p !== 1 && p !== totalPages && Math.abs(p - current) > 1) {
                                if (p === 2 || p === totalPages - 1) return <span key={p} className="px-1 font-bold text-slate-300">...</span>;
                                return null;
                            }
                        }
                        return (
                            <button
                                key={p}
                                onClick={() => onChange(p)}
                                className={`w-9 h-9 flex items-center justify-center rounded-xl text-xs font-black transition-all ${current === p ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'bg-white border border-slate-200 text-slate-500 hover:border-indigo-500 hover:text-indigo-600'}`}
                            >
                                {p}
                            </button>
                        );
                    })}
                </div>
                <button
                    disabled={current === totalPages}
                    onClick={() => onChange(current + 1)}
                    className="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
                >
                    <ChevronDown className="w-4 h-4 -rotate-90" />
                </button>
            </div>
        );
    };

    // ユーザー一覧の取得（ユーザータブがアクティブな場合）
    // Data fetching on tab change
    useEffect(() => {
        if (activeTab === 'user') {
            fetchUsers();
        } else if (activeTab === 'general') {
            fetchSettingsAndGroups();
        } else if (activeTab === 'tenants' && currentUser?.role === 'SUPER_ADMIN') {
            fetchTenantsData();
            fetchUsers(); // Ensure users are loaded for admin binding
        }

        // Independent check for KB/Model settings to avoid being blocked by the branches above
        if ((activeTab === 'knowledge_base' || activeTab === 'model') &&
            (currentUser?.role === 'TENANT_ADMIN' || currentUser?.role === 'SUPER_ADMIN' || isAdmin)) {
            fetchKnowledgeBaseSettings();
        }
    }, [activeTab, currentUser, authToken, isAdmin]);

    const [kbSettings, setKbSettings] = useState<any>(null);
    const [localKbSettings, setLocalKbSettings] = useState<any>(null);
    const [isSavingKbSettings, setIsSavingKbSettings] = useState(false);
    const fetchKnowledgeBaseSettings = async () => {
        if (!authToken) return;
        setIsLoading(true);
        try {
            const data = await userSettingService.get(authToken);
            if (data && Object.keys(data).length > 0) {
                setKbSettings(data);
                setLocalKbSettings(data);
                if (data.selectedVisionId) {
                    // Vision model ID is part of settings now
                }
            }
        } catch (error) {
            console.error(error);
        } finally {
            setIsLoading(false);
        }
    };

    const handleUpdateKbSettings = (key: string, value: any) => {
        setLocalKbSettings((prev: any) => ({ ...prev, [key]: value }));
    };

    const handleSaveKbSettings = async () => {
        if (!authToken || !localKbSettings) return;
        setIsSavingKbSettings(true);
        try {
            await userSettingService.update(authToken, localKbSettings);
            setKbSettings(localKbSettings);
            showSuccess(t('kbSettingsSaved'));
        } catch (error) {
            console.error(error);
            showError(t('actionFailed'));
        } finally {
            setIsSavingKbSettings(false);
        }
    };

    const handleCancelKbSettings = () => {
        setLocalKbSettings(kbSettings);
    };

    const fetchSettingsAndGroups = async () => {
        if (!authToken) return;
        setIsSettingsLoading(true);
        try {
            const [settings, groups, personal] = await Promise.all([
                userSettingService.get(authToken),
                knowledgeGroupService.getGroups(),
                userSettingService.getPersonal(authToken)
            ]);
            setAppSettings(settings);
            setKnowledgeGroups(groups);

            // Sync local language with user settings if they differ
            if (personal?.language && personal.language !== language) {
                setLanguage(personal.language as any);
            }

            // Also update KB settings with the same data if not already set
            if (settings && Object.keys(settings).length > 0) {
                setKbSettings(settings);
                setLocalKbSettings(settings);
            }
        } 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 result = await userService.getUsers(userPage, USER_PAGE_SIZE);
            if (result && result.data) {
                setUsers(result.data);
                setUserTotal(result.total);
            } else if (Array.isArray(result)) {
                setUsers(result);
                setUserTotal(result.length);
            }
        } catch (error: any) {
            setError(error.message || t('getUserListFailed'));
        } finally {
            setIsUserLoading(false);
        }
    };

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

        if (newUser.username && newUser.password && newUser.displayName) {
            setIsUserLoading(true);
            try {
                await userService.createUser(
                    newUser.username,
                    newUser.password,
                    false,
                    undefined,
                    newUser.displayName
                );
                showSuccess(t('userCreatedSuccess'));
                setNewUser({ username: '', password: '', displayName: '' });
                setShowAddUser(false);
                fetchUsers();
            } catch (error: any) {
                setError(error.message || t('createUserFailed'));
            } finally {
                setIsUserLoading(false);
            }
        }
    };

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

    // --- Edit User State ---
    const [editUserData, setEditUserData] = useState<{ userId: string, username: string, displayName: 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 fetchTenantMembers = async (tenantId: string) => {
        setIsMembersLoading(true);
        try {
            const { data } = await apiClient.get(`/v1/tenants/${tenantId}/members?page=${memberPage}&limit=${MEMBER_PAGE_SIZE}`);
            if (data && data.data) {
                setTenantMembers(data.data);
                setMemberTotal(data.total);
            } else if (Array.isArray(data)) {
                setTenantMembers(data);
                setMemberTotal(data.length);
            }
        } catch (e) {
            console.error(e);
        } finally {
            setIsMembersLoading(false);
        }
    };

    const handleAddMember = async (tenantId: string, userId: string, role: string) => {
        try {
            await apiClient.post(`/v1/tenants/${tenantId}/members`, { userId, role: bindingRole });
            showSuccess(t('confirm'));
            fetchTenantMembers(tenantId);
            fetchTenantsData();
        } catch (e: any) {
            showError(e.message || 'Error adding member');
        }
    };

    const handleRemoveMember = async (tenantId: string, userId: string) => {
        try {
            await apiClient.delete(`/v1/tenants/${tenantId}/members/${userId}`);
            showSuccess('User removed from organization');
            fetchTenantMembers(tenantId);
            fetchTenantsData();
        } catch (e: any) {
            showError(e.message || 'Error removing member');
        }
    };

    const handleUpdateMemberRole = async (tenantId: string, userId: string, role: string) => {
        try {
            await apiClient.patch(`/v1/tenants/${tenantId}/members/${userId}`, { role });
            showSuccess(t('featureUpdated'));
            fetchTenantMembers(tenantId);
        } catch (e: any) {
            showError(e.message || 'Error updating role');
        }
    };

    const fetchTenantsData = async () => {
        if (!authToken) return;
        setIsLoading(true);
        try {
            const [tenRes, admRes] = await Promise.all([
                apiClient.get('/v1/tenants'),
                apiClient.get('/users?page=1&limit=1')
            ]);

            const data: Tenant[] = tenRes.data;
            const filteredData = data.filter(t => t.name !== 'Default');
            setTenants(filteredData);
            setStats(s => ({ ...s, tenants: filteredData.length }));

            const result = admRes.data;
            setStats(s => ({ ...s, users: result.total ?? result.length ?? 0 }));
        } catch (e) {
            console.error(e);
        } finally {
            setIsLoading(false);
        }
    };

    const handleCreateTenant = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const path = editingTenant ? `/v1/tenants/${editingTenant.id}` : '/v1/tenants';
            const body = {
                name: newTenant.name,
                domain: newTenant.domain,
                parentId: newTenant.parentId
            };

            if (editingTenant) {
                await apiClient.put(path, body);
            } else {
                await apiClient.post(path, body);
            }

            setShowCreateTenant(false);
            setEditingTenant(null);
            setNewTenant({ name: '', domain: '', parentId: null });
            fetchTenantsData();
            showSuccess(editingTenant ? 'Tenant updated' : 'Tenant created');
        } catch (e: any) {
            showError(e.message || 'Action failed');
        }
    };

    const handleRemoveTenant = async (tenantId: string) => {
        if (!(await confirm('Delete this organization?'))) return;
        try {
            await apiClient.delete(`/v1/tenants/${tenantId}`);
            setSelectedTenantId(null);
            fetchTenantsData();
            showSuccess('Tenant deleted');
        } catch (e: any) {
            showError(e.message || 'Delete failed');
        }
    };

    const handleUpdateUser = async () => {
        if (!editUserData) return;
        try {
            await userService.updateUserInfo(editUserData.userId, {
                username: editUserData.username,
                displayName: editUserData.displayName
            });
            showSuccess(t('featureUpdated'));
            setEditUserData(null);
            fetchUsers();
        } catch (error: any) {
            showError('Failed to update user');
        }
    };

    const handleDeleteUser = async (userId: string) => {
        if (!confirm(t('confirmDeleteUser') || "Are you sure?")) return;
        try {
            await userService.deleteUser(userId);
            showSuccess(t('userDeletedSuccessfully'));
            fetchUsers();
        } catch (error: any) {
            showError(error.message || t('deleteUserFailed'));
        }
    };

    const handleSaveModel = async () => {
        if (!authToken) return;
        setIsLoading(true);
        try {
            await onUpdateModels(editingId === 'new' ? 'create' : 'update', modelFormData as ModelConfig);
            setEditingId(null);
        } catch (err) {
            setError('Update failed');
        } finally {
            setIsLoading(false);
        }
    };

    const handleToggleModel = async (model: ModelConfig) => {
        if (currentUser?.role === 'TENANT_ADMIN') {
            const newEnabledIds = enabledModelIds.includes(model.id)
                ? enabledModelIds.filter(id => id !== model.id)
                : [...enabledModelIds, model.id];
            try {
                await apiClient.put('/v1/admin/settings', { enabledModelIds: newEnabledIds });
                setEnabledModelIds(newEnabledIds);
                setLocalKbSettings((prev: any) => ({ ...prev, enabledModelIds: newEnabledIds }));
                showSuccess('Updated');
            } catch (e: any) {
                showError(e.message || 'Update failed');
            }
            return;
        }
        await onUpdateModels('update', { ...model, isEnabled: !model.isEnabled });
    };

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

    const TenantTreeNode: React.FC<{
        tenant: Tenant;
        selectedTenantId: string | null;
        onSelect: (id: string) => void;
        onCreateSubtenant: (parentId: string) => void;
        depth?: number;
    }> = ({ tenant, selectedTenantId, onSelect, onCreateSubtenant, depth = 0 }) => {
        const [collapsed, setCollapsed] = useState(false);
        const hasChildren = tenant.children && tenant.children.length > 0;
        const isSelected = selectedTenantId === tenant.id;

        return (
            <div className="select-none">
                <div
                    className={`group flex items-center gap-2 px-3 py-2 rounded-xl cursor-pointer transition-all ${isSelected ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'hover:bg-slate-50 text-slate-600 hover:text-slate-900'}`}
                    style={{ paddingLeft: `${depth * 1.5 + 0.75}rem` }}
                    onClick={() => onSelect(tenant.id)}
                >
                    <div className="flex items-center gap-2 flex-1 min-w-0">
                        {hasChildren ? (
                            <button
                                onClick={(e) => { e.stopPropagation(); setCollapsed(!collapsed); }}
                                className={`p-0.5 rounded-md hover:bg-black/10 transition-colors ${isSelected ? 'text-white/70' : 'text-slate-400'}`}
                            >
                                {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
                            </button>
                        ) : (
                            <div className="w-5" />
                        )}
                        <Building2 size={16} className={isSelected ? 'text-white' : 'text-slate-400'} />
                        <span className="text-sm font-bold truncate">{tenant.name}</span>
                    </div>

                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            onCreateSubtenant(tenant.id);
                        }}
                        className={`p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-all ${isSelected ? 'hover:bg-white/20 text-white' : 'hover:bg-slate-200 text-slate-400 hover:text-indigo-600'}`}
                        title={t('createSubOrg')}
                    >
                        <Plus size={14} />
                    </button>
                </div>
                {hasChildren && !collapsed && (
                    <div className="mt-1">
                        {tenant.children?.map(child => (
                            <TenantTreeNode
                                key={child.id}
                                tenant={child}
                                selectedTenantId={selectedTenantId}
                                onSelect={onSelect}
                                onCreateSubtenant={onCreateSubtenant}
                                depth={depth + 1}
                            />
                        ))}
                    </div>
                )}
            </div>
        );
    };

    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>



            {/* 语言设置セクション */}
            <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">
                    <Globe className="w-4 h-4 text-blue-500" />
                    {t('languageSettings')}
                </h3>
                <div className="space-y-4 max-w-sm">
                    <div className="space-y-2">
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">
                            {t('switchLanguage')}
                        </label>
                        <select
                            value={language}
                            onChange={async (e) => {
                                const newLang = e.target.value as any;
                                setLanguage(newLang);
                                try {
                                    await settingsService.updateLanguage(newLang);
                                    showSuccess(t('confirm'));
                                } catch (err) {
                                    console.error('Failed to update backend language preference:', err);
                                }
                            }}
                            className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none bg-white"
                        >
                            <option value="en">English</option>
                            <option value="zh">中文 (Chinese)</option>
                            <option value="ja">日本語 (Japanese)</option>
                        </select>
                    </div>
                </div>
            </section>

        </div >
    );

    const renderUserTab = () => (
        <div className="space-y-6 w-full">
            <div className="flex justify-between items-center mb-6">
                <div>
                    <p className="text-xs text-slate-400 font-medium">{''}</p>
                </div>
                {currentUser?.role === 'SUPER_ADMIN' && (
                    <button
                        onClick={() => setShowAddUser(!showAddUser)}
                        className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-bold rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95"
                    >
                        <Plus className="w-4 h-4" />
                        {t('addUser')}
                    </button>
                )}
            </div>

            {showAddUser && (
                <motion.form
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    onSubmit={handleCreateUser}
                    className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-xl mb-8 space-y-5"
                >
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
                        <input
                            type="text"
                            placeholder={t('usernamePlaceholder')}
                            value={newUser.username}
                            onChange={e => setNewUser({ ...newUser, username: e.target.value })}
                            className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
                            required
                        />
                        <input
                            type="text"
                            placeholder={t('displayNamePlaceholder') || t('name')}
                            value={newUser.displayName}
                            onChange={e => setNewUser({ ...newUser, displayName: e.target.value })}
                            className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
                            required
                        />
                        <input
                            type="password"
                            placeholder={t('passwordPlaceholder')}
                            value={newUser.password}
                            onChange={e => setNewUser({ ...newUser, password: e.target.value })}
                            className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
                            required
                        />
                    </div>
                    <div className="flex items-center justify-between">
                        <div></div>
                        <div className="flex gap-3">
                            <button type="button" onClick={() => setShowAddUser(false)} className="px-5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700">{t('cancel')}</button>
                            <button type="submit" className="px-8 py-2 bg-slate-900 text-white rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-lg shadow-slate-100">{t('create')}</button>
                        </div>
                    </div>
                </motion.form>
            )}

            {passwordChangeUserData && (
                <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center z-[100] p-6">
                    <motion.div
                        initial={{ scale: 0.95, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        className="bg-white rounded-3xl p-10 w-full max-w-md shadow-2xl border border-white/20"
                    >
                        <div className="flex items-center justify-between mb-8">
                            <h3 className="text-xl font-black text-slate-900 tracking-tight">{t('changeUserPassword')}</h3>
                            <button onClick={() => setPasswordChangeUserData(null)} className="p-2 hover:bg-slate-100 rounded-xl transition-all">
                                <X size={20} className="text-slate-400" />
                            </button>
                        </div>

                        <form onSubmit={(e) => { e.preventDefault(); handleUserPasswordChange(); }} className="space-y-6">
                            <div>
                                <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
                                    {t('newPassword')}
                                </label>
                                <input
                                    type="password"
                                    value={passwordChangeUserData.newPassword}
                                    onChange={(e) => setPasswordChangeUserData({ ...passwordChangeUserData, newPassword: e.target.value })}
                                    className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
                                    placeholder={t('enterNewPassword')}
                                    required
                                />
                            </div>

                            <div className="flex gap-4 pt-4">
                                <button type="button" onClick={() => setPasswordChangeUserData(null)} className="flex-1 py-3.5 text-slate-500 font-bold text-sm">{t('cancel')}</button>
                                <button type="submit" className="flex-1 py-3.5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600 shadow-xl shadow-slate-100 transition-all">{t('confirmChange')}</button>
                            </div>
                        </form>
                    </motion.div>
                </div>
            )}

            {/* Edit User Modal */}
            {editUserData && (
                <div className="fixed inset-0 z-[110] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-4">
                    <motion.div
                        initial={{ scale: 0.95, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        className="bg-white rounded-3xl p-10 w-full max-w-md shadow-2xl border border-white/20"
                    >
                        <div className="flex items-center justify-between mb-8">
                            <h3 className="text-xl font-black text-slate-900 tracking-tight">{t('editUser')}</h3>
                            <button onClick={() => setEditUserData(null)} className="p-2 hover:bg-slate-100 rounded-xl transition-all">
                                <X size={20} className="text-slate-400" />
                            </button>
                        </div>

                        <form onSubmit={(e) => { e.preventDefault(); handleUpdateUser(); }} className="space-y-6">
                            <div>
                                <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
                                    {t('username')}
                                </label>
                                <input
                                    type="text"
                                    value={editUserData.username}
                                    onChange={(e) => setEditUserData({ ...editUserData, username: e.target.value })}
                                    className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
                                    placeholder={t('usernamePlaceholder')}
                                    required
                                />
                            </div>

                            <div>
                                <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
                                    {t('displayName') || t('name')}
                                </label>
                                <input
                                    type="text"
                                    value={editUserData.displayName}
                                    onChange={(e) => setEditUserData({ ...editUserData, displayName: e.target.value })}
                                    className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
                                    placeholder={t('displayNamePlaceholder') || t('namePlaceholder')}
                                    required
                                />
                            </div>
                            <div className="py-2.5 px-4 bg-indigo-50 rounded-2xl border border-indigo-100/50">
                                <p className="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1">{t('globalUserNote') || "Note"}</p>
                                <p className="text-[11px] text-indigo-700/70 leading-relaxed font-medium">
                                    {t('roleManagedInOrg') || "Roles are managed within organizations."}
                                </p>
                            </div>

                            <div className="flex gap-4 pt-4">
                                <button type="button" onClick={() => setEditUserData(null)} className="flex-1 py-3.5 text-slate-500 font-bold text-sm">{t('cancel')}</button>
                                <button type="submit" className="flex-1 py-3.5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600 shadow-xl shadow-slate-100 transition-all">{t('saveChanges')}</button>
                            </div>
                        </form>
                    </motion.div>
                </div>
            )}

            <div className="w-full bg-white/70 backdrop-blur-md border border-slate-200/50 rounded-2xl overflow-hidden shadow-sm">
                <table className="w-full border-collapse text-left">
                    <thead>
                        <tr className="bg-slate-50/50 border-b border-slate-200/50">
                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('username')}</th>
                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('displayName') || t('name')}</th>
                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('organizations')}</th>
                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('createdAt')}</th>
                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">{t('actions')}</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                        <AnimatePresence>
                            {users.map((user, index) => {
                                let IconComponent = User;
                                let iconColors = 'bg-slate-50 text-slate-400';
                                if (user.isAdmin) {
                                    IconComponent = Shield;
                                    iconColors = 'bg-red-50 text-red-600';
                                }

                                return (
                                    <motion.tr
                                        key={user.id}
                                        initial={{ opacity: 0, y: 10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: index * 0.03 }}
                                        className="group hover:bg-slate-50/50 transition-all"
                                    >
                                        <td className="px-6 py-4">
                                            <div className="flex items-center gap-3">
                                                <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${iconColors}`}>
                                                    <IconComponent size={18} />
                                                </div>
                                                <div className="min-w-0">
                                                    <p className="font-bold text-slate-900 truncate">{user.username}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4">
                                            <p className="text-sm text-slate-600 truncate">{user.displayName || '-'}</p>
                                        </td>
                                        <td className="px-6 py-4">
                                            {user.tenantMembers && user.tenantMembers.length > 0 ? (
                                                <div className="flex flex-wrap gap-1">
                                                    {user.tenantMembers
                                                        .filter((m: any) => m.tenant?.name !== 'Default')
                                                        .map((m: any) => (
                                                            <span
                                                                key={m.tenantId}
                                                                className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-50 text-emerald-700 text-[9px] font-black rounded-md uppercase tracking-wider border border-emerald-100"
                                                            >
                                                                <Building2 size={8} />
                                                                {m.tenant?.name || m.tenantId}
                                                            </span>
                                                        ))}
                                                </div>
                                            ) : (
                                                <span className="text-[10px] text-slate-400 italic">{t('noOrganization')}</span>
                                            )}
                                        </td>
                                        <td className="px-6 py-4">
                                            <p className="text-[11px] font-medium text-slate-600">
                                                {new Date(user.createdAt).toLocaleDateString()}
                                            </p>
                                        </td>
                                        <td className="px-6 py-4 text-right">
                                            <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all">
                                                {user.username !== 'admin' && (
                                                    <>
                                                        <button
                                                            onClick={(e) => {
                                                                e.preventDefault();
                                                                e.stopPropagation();
                                                                setEditUserData({
                                                                    userId: user.id,
                                                                    username: user.username,
                                                                    displayName: user.displayName || ''
                                                                });
                                                            }}
                                                            className="p-2 rounded-lg text-slate-400 hover:text-indigo-600 hover:bg-white shadow-sm transition-all"
                                                            title={t('edit')}
                                                        >
                                                            <Edit2 className="w-4 h-4" />
                                                        </button>
                                                        <button
                                                            onClick={() => setPasswordChangeUserData({ userId: user.id, newPassword: '' })}
                                                            className="p-2 rounded-lg text-slate-400 hover:text-indigo-600 hover:bg-white shadow-sm transition-all"
                                                            title={t('changeUserPassword')}
                                                        >
                                                            <Key className="w-4 h-4" />
                                                        </button>
                                                        {user.id !== currentUser?.id && (
                                                            <button
                                                                onClick={() => handleDeleteUser(user.id)}
                                                                className="p-2 rounded-lg text-slate-400 hover:text-red-500 hover:bg-white shadow-sm transition-all"
                                                                title={t('deleteUser')}
                                                            >
                                                                <Trash2 className="w-4 h-4" />
                                                            </button>
                                                        )}
                                                    </>
                                                )}
                                            </div>
                                        </td>
                                    </motion.tr>
                                );
                            })}
                        </AnimatePresence>
                    </tbody>
                </table>
            </div>

            <Pagination
                current={userPage}
                total={userTotal}
                pageSize={USER_PAGE_SIZE}
                onChange={setUserPage}
            />
        </div>
    );

    const renderTenantsTab = () => {
        const tenantTree = buildTenantTree(tenants);
        const activeTenant = selectedTenantId ? tenants.find(t => t.id === selectedTenantId) : null;

        return (
            <div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-12rem)] animate-in fade-in duration-500">
                {/* Left: Organization Tree */}
                <div className="w-full lg:w-80 flex flex-col bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden min-h-[400px] lg:min-h-0">
                    <div className="p-6 border-b border-slate-100 flex items-center justify-between shrink-0">
                        <div>
                            <h3 className="font-black text-slate-900 text-lg tracking-tight">{t('orgManagement')}</h3>
                            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{t('globalTenantControl')}</p>
                        </div>
                        <button
                            onClick={() => {
                                setNewTenant({ name: '', domain: '', parentId: null });
                                setEditingTenant(null);
                                setShowCreateTenant(true);
                            }}
                            className="p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-700 transition-all"
                        >
                            <Plus size={18} />
                        </button>
                    </div>

                    <div className="flex-1 overflow-y-auto p-4 space-y-1 custom-scrollbar">
                        {tenantTree.length > 0 ? (
                            tenantTree.map(t => (
                                <TenantTreeNode
                                    key={t.id}
                                    tenant={t}
                                    selectedTenantId={selectedTenantId}
                                    onSelect={(id) => {
                                        setSelectedTenantId(id);
                                        fetchTenantMembers(id);
                                    }}
                                    onCreateSubtenant={(parentId) => {
                                        setNewTenant({ name: '', domain: '', parentId });
                                        setEditingTenant(null);
                                        setShowCreateTenant(true);
                                    }}
                                />
                            ))
                        ) : (
                            <div className="py-20 text-center">
                                <Building2 size={32} className="mx-auto text-slate-200 mb-3" />
                                <p className="text-xs font-black text-slate-300 uppercase tracking-widest">{t('noOrganizations')}</p>
                            </div>
                        )}
                    </div>

                    <div className="p-4 bg-slate-50 border-t border-slate-100 shrink-0">
                        <div className="flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-2xl shadow-sm">
                            <div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
                                <Building2 size={20} />
                            </div>
                            <div>
                                <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('totalTenants')}</p>
                                <p className="text-xl font-black text-slate-900">{stats.tenants}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Right: User List & Management */}
                <div className="flex-1 flex flex-col bg-white border border-slate-200 rounded-3xl shadow-xl overflow-hidden min-h-[600px] lg:min-h-0">
                    {activeTenant ? (
                        <div className="flex flex-col h-full">
                            {/* Organization Header */}
                            <div className="p-8 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between shrink-0">
                                <div className="flex items-center gap-4">
                                    <div className="w-14 h-14 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-center text-indigo-600">
                                        <Building2 size={28} />
                                    </div>
                                    <div>
                                        <div className="flex items-center gap-2">
                                            <h2 className="text-2xl font-black text-slate-900 tracking-tight">{activeTenant.name}</h2>
                                            <span className="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[9px] font-black uppercase tracking-widest border border-indigo-100">{t('activeOrg')}</span>
                                        </div>
                                        <p className="text-xs font-medium text-slate-400">{activeTenant.domain || t('noCustomDomain')}</p>
                                    </div>
                                </div>
                                <div className="flex items-center gap-2">
                                    <button
                                        onClick={() => {
                                            setEditingTenant(activeTenant);
                                            setNewTenant({
                                                name: activeTenant.name,
                                                domain: activeTenant.domain || '',
                                                parentId: activeTenant.parentId || null
                                            });
                                            setShowCreateTenant(true);
                                        }}
                                        className="p-2.5 bg-white border border-slate-200 text-slate-600 rounded-xl hover:border-indigo-500 hover:text-indigo-600 transition-all shadow-sm"
                                        title={t('orgSettings')}
                                    >
                                        <SettingsIcon size={18} />
                                    </button>
                                    <button
                                        onClick={() => handleRemoveTenant(activeTenant.id)}
                                        className="p-2.5 bg-white border border-slate-200 text-slate-400 hover:text-red-500 hover:border-red-500 transition-all shadow-sm"
                                        title={t('deleteOrg')}
                                    >
                                        <Trash2 size={18} />
                                    </button>
                                </div>
                            </div>

                            {/* Main Content Split: Members vs All Users */}
                            <div className="flex-1 flex overflow-hidden">
                                {/* Current Members */}
                                <div className="flex-1 flex flex-col border-r border-slate-100 overflow-hidden">
                                    <div className="p-6 border-b border-slate-50 flex items-center justify-between shrink-0">
                                        <h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">{t('orgMembers')}</h4>
                                        <span className="text-[10px] font-black px-2 py-0.5 bg-slate-100 text-slate-500 rounded-full">
                                            {t('membersCount').replace('$1', (tenantMembers?.length || 0).toString())}
                                        </span>
                                    </div>
                                    <div className="flex-1 overflow-y-auto p-6 scrollbar-hide">
                                        <div className="grid grid-cols-1 gap-3">
                                            {tenantMembers?.map((m: any) => (
                                                <div key={m.id} className="p-4 bg-slate-50/50 border border-slate-100 rounded-2xl flex items-center justify-between group hover:bg-white hover:shadow-sm transition-all hover:border-slate-200">
                                                    <div className="flex items-center gap-3 min-w-0">
                                                        <div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-400 shadow-sm">
                                                            <User size={18} />
                                                        </div>
                                                        <div className="min-w-0">
                                                            <p className="text-sm font-black text-slate-900 truncate">{m.user?.username || m.userId}</p>
                                                            <select
                                                                value={m.role}
                                                                onChange={(e) => handleUpdateMemberRole(activeTenant.id, m.userId, e.target.value)}
                                                                className={`text-[9px] font-black uppercase tracking-widest bg-transparent border-none outline-none cursor-pointer hover:bg-slate-100 rounded px-1 transition-colors ${m.role === 'TENANT_ADMIN' ? 'text-indigo-500' : 'text-slate-400'}`}
                                                            >
                                                                <option value="USER">{t('roleRegularUser')}</option>
                                                                <option value="TENANT_ADMIN">{t('roleTenantAdmin')}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <button
                                                        onClick={() => handleRemoveMember(activeTenant.id, m.userId)}
                                                        className="p-2 text-slate-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
                                                    >
                                                        <Trash2 size={14} />
                                                    </button>
                                                </div>
                                            ))}
                                            {(!tenantMembers || tenantMembers.length === 0) && (
                                                <div className="py-20 text-center">
                                                    <Users size={24} className="mx-auto text-slate-200 mb-2" />
                                                    <p className="text-[10px] font-bold text-slate-300 uppercase tracking-wider">{t('noMembersAssigned')}</p>
                                                </div>
                                            )}
                                        </div>
                                        <Pagination
                                            current={memberPage}
                                            total={memberTotal}
                                            pageSize={MEMBER_PAGE_SIZE}
                                            onChange={setMemberPage}
                                        />
                                    </div>
                                </div>

                                {/* Add New Users (Right side of specific tenant view) */}
                                <div className="w-72 flex flex-col bg-slate-50/30 overflow-hidden shrink-0">
                                    <div className="p-6 border-b border-slate-100 shrink-0">
                                        <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3">{t('addMembers')}</h4>
                                        <div className="relative">
                                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                                            <input
                                                className="w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
                                                placeholder={t('searchSystemUsers')}
                                                value={userSearchQuery}
                                                onChange={e => setUserSearchQuery(e.target.value)}
                                            />
                                        </div>
                                        <div className="mt-3 flex gap-1 p-1 bg-white border border-slate-200 rounded-xl">
                                            <button
                                                onClick={() => setBindingRole('USER')}
                                                className={`flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${bindingRole === 'USER' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
                                            >
                                                {t('roleRegularUser')}
                                            </button>
                                            <button
                                                onClick={() => setBindingRole('TENANT_ADMIN')}
                                                className={`flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${bindingRole === 'TENANT_ADMIN' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
                                            >
                                                {t('roleTenantAdmin')}
                                            </button>
                                        </div>
                                    </div>
                                    <div className="flex-1 overflow-y-auto p-4 space-y-2">
                                        {users
                                            .filter(u =>
                                                !tenantMembers?.some((m: any) => m.userId === u.id) &&
                                                u.username.toLowerCase().includes(userSearchQuery.toLowerCase())
                                            )
                                            .map(u => (
                                                <button
                                                    key={u.id}
                                                    onClick={() => handleAddMember(activeTenant.id, u.id, bindingRole)}
                                                    className="w-full p-3 bg-white border border-slate-100 rounded-xl flex items-center justify-between group hover:border-indigo-500 hover:shadow-sm transition-all"
                                                >
                                                    <div className="flex items-center gap-2 min-w-0">
                                                        <div className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors">
                                                            <User size={14} />
                                                        </div>
                                                        <span className="text-[13px] font-bold text-slate-700 truncate">{u.username}</span>
                                                    </div>
                                                    <Plus size={14} className="text-slate-300 group-hover:text-indigo-600" />
                                                </button>
                                            ))
                                        }
                                        <Pagination
                                            current={userPage}
                                            total={userTotal}
                                            pageSize={USER_PAGE_SIZE}
                                            onChange={setUserPage}
                                        />
                                    </div>
                                </div>
                            </div>

                            {/* Create Tenant Modal (Nested in Tab Content for scope) */}
                            {showCreateTenant && (
                                <div className="fixed inset-0 z-[120] bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4 text-left">
                                    <motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
                                        <h3 className="text-xl font-black text-slate-900 mb-6">{editingTenant ? t('editOrg') : t('newTenant')}</h3>
                                        <form onSubmit={handleCreateTenant} className="space-y-5">
                                            <div>
                                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('tenantName')}</label>
                                                <input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('tenantName')} value={newTenant.name} onChange={e => setNewTenant({ ...newTenant, name: e.target.value })} required />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('domainOptional')}</label>
                                                <input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('domainOptional')} value={newTenant.domain} onChange={e => setNewTenant({ ...newTenant, domain: e.target.value })} />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('parentOrg')}</label>
                                                {!editingTenant ? (
                                                    <div className="w-full mt-1 px-4 py-3 bg-slate-100 border border-slate-200 rounded-2xl text-sm text-slate-500 font-bold">
                                                        {newTenant.parentId ? tenants.find(t => t.id === newTenant.parentId)?.name : t('noneRoot')}
                                                    </div>
                                                ) : (
                                                    <select
                                                        className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500/20"
                                                        value={newTenant.parentId || ''}
                                                        onChange={e => setNewTenant({ ...newTenant, parentId: e.target.value || null })}
                                                    >
                                                        <option value="">{t('noneRoot')}</option>
                                                        {tenants.filter(t => t.id !== editingTenant?.id).map(t => (
                                                            <option key={t.id} value={t.id}>{t.name}</option>
                                                        ))}
                                                    </select>
                                                )}
                                            </div>

                                            <div className="flex gap-4 pt-2">
                                                <button type="button" onClick={() => { setShowCreateTenant(false); setEditingTenant(null); }} className="flex-1 py-3 text-slate-500 font-bold text-sm">{t('cancel')}</button>
                                                <button type="submit" className="flex-1 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600">{editingTenant ? t('update') : t('create')}</button>
                                            </div>
                                        </form>
                                    </motion.div>
                                </div>
                            )}
                        </div>
                    ) : (
                        <div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-slate-50/30">
                            <div className="w-24 h-24 rounded-[2rem] bg-indigo-50 flex items-center justify-center text-indigo-400 mb-6 shadow-xl shadow-indigo-100/50">
                                <Building2 size={48} />
                            </div>
                            <h2 className="text-2xl font-black text-slate-900 tracking-tight mb-2">{t('selectOrg')}</h2>
                            <p className="text-sm text-slate-400 max-w-xs font-medium leading-relaxed">{t('selectOrgDesc')}</p>

                            <div className="mt-12 grid grid-cols-2 gap-4 w-full max-w-lg">
                                <div className="p-6 bg-white border border-slate-200 rounded-3xl text-left shadow-sm">
                                    <div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600 mb-4">
                                        <Users size={20} />
                                    </div>
                                    <p className="text-xl font-black text-slate-900">{stats.users}</p>
                                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('totalSystemUsers')}</p>
                                </div>
                                <div className="p-6 bg-white border border-slate-200 rounded-3xl text-left shadow-sm">
                                    <div className="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600 mb-4">
                                        <Shield size={20} />
                                    </div>
                                    <p className="text-xl font-black text-slate-900">{tenants.filter(t => t.parentId === null).length}</p>
                                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('rootOrgs')}</p>
                                </div>
                            </div>

                            {/* Scope Modal for Create even when no selection */}
                            {showCreateTenant && (
                                <div className="fixed inset-0 z-[120] bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4 text-left">
                                    <motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
                                        <h3 className="text-xl font-black text-slate-900 mb-6">{t('newTenant')}</h3>
                                        <form onSubmit={handleCreateTenant} className="space-y-5">
                                            <div>
                                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('tenantName')}</label>
                                                <input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('tenantName')} value={newTenant.name} onChange={e => setNewTenant({ ...newTenant, name: e.target.value })} required />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('domainOptional')}</label>
                                                <input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('domainOptional')} value={newTenant.domain} onChange={e => setNewTenant({ ...newTenant, domain: e.target.value })} />
                                            </div>
                                            <div>
                                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('parentOrg')}</label>
                                                <select
                                                    className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500/20"
                                                    value={newTenant.parentId || ''}
                                                    onChange={e => setNewTenant({ ...newTenant, parentId: e.target.value || null })}
                                                >
                                                    <option value="">{t('noneRoot')}</option>
                                                    {tenants.map(t => (
                                                        <option key={t.id} value={t.id}>{t.name}</option>
                                                    ))}
                                                </select>
                                            </div>

                                            <div className="flex gap-4 pt-2">
                                                <button
                                                    type="button"
                                                    onClick={() => {
                                                        setShowCreateTenant(false);
                                                        setNewTenant({ name: '', domain: '', parentId: null });
                                                    }}
                                                    className="flex-1 py-3 text-slate-500 font-bold text-sm"
                                                >
                                                    {t('cancel')}
                                                </button>
                                                <button type="submit" className="flex-1 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600">{t('create')}</button>
                                            </div>
                                        </form>
                                    </motion.div>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        );
    };

    const renderKnowledgeBaseTab = () => (
        <div className="space-y-8 animate-in slide-in-from-right duration-300 w-full max-w-5xl pb-10">
            {localKbSettings && (
                <>
                    {/* Save/Cancel Bar */}
                    <div className="flex justify-end gap-3 sticky top-0 z-20 py-4 bg-white/50 backdrop-blur-sm border-b border-slate-100 mb-6">
                        <button
                            onClick={handleCancelKbSettings}
                            disabled={isSavingKbSettings || JSON.stringify(localKbSettings) === JSON.stringify(kbSettings)}
                            className="px-6 py-2 text-sm font-bold text-slate-500 hover:text-slate-700 disabled:opacity-30"
                        >
                            {t('cancel')}
                        </button>
                        <button
                            onClick={handleSaveKbSettings}
                            disabled={isSavingKbSettings || JSON.stringify(localKbSettings) === JSON.stringify(kbSettings)}
                            className="flex items-center gap-2 px-8 py-2 bg-indigo-600 text-white text-sm font-black uppercase tracking-widest rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95 disabled:opacity-50"
                        >
                            {isSavingKbSettings ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
                            {t('saveChanges')}
                        </button>
                    </div>

                    {/* Model Configuration */}
                    <section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
                        <div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
                            <div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
                                <Cpu size={16} />
                            </div>
                            {t('modelConfiguration')}
                        </div>
                        <div className="grid grid-cols-1 gap-6">
                            <div>
                                <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('defaultLLMModel')}</label>
                                <select
                                    value={localKbSettings.selectedLLMId || ''}
                                    onChange={(e) => handleUpdateKbSettings('selectedLLMId', e.target.value)}
                                    className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all cursor-pointer appearance-none"
                                >
                                    <option value="">{t('selectLLM')}</option>
                                    {models.filter(m => m.type === ModelType.LLM).map(m => (
                                        <option key={m.id} value={m.id}>{m.name} ({m.modelId})</option>
                                    ))}
                                </select>
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('embeddingModel')}</label>
                                    <select
                                        value={localKbSettings.selectedEmbeddingId || ''}
                                        onChange={(e) => handleUpdateKbSettings('selectedEmbeddingId', e.target.value)}
                                        className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
                                    >
                                        <option value="">{t('selectEmbedding')}</option>
                                        {models.filter(m => m.type === ModelType.EMBEDDING).map(m => (
                                            <option key={m.id} value={m.id}>{m.name}</option>
                                        ))}
                                    </select>
                                </div>
                                <div>
                                    <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('rerankModel')}</label>
                                    <select
                                        value={localKbSettings.selectedRerankId || ''}
                                        onChange={(e) => handleUpdateKbSettings('selectedRerankId', e.target.value)}
                                        className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
                                    >
                                        <option value="">{t('none')}</option>
                                        {models.filter(m => m.type === ModelType.RERANK).map(m => (
                                            <option key={m.id} value={m.id}>{m.name}</option>
                                        ))}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </section>

                    {/* Indexing & Chunking Configuration */}
                    <section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
                        <div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
                            <div className="w-8 h-8 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600">
                                <BookOpen size={16} />
                            </div>
                            {t('indexingChunkingConfig')}
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div>
                                <div className="flex justify-between mb-3 px-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('chunkSize')}</label>
                                    <span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.chunkSize || 1000}</span>
                                </div>
                                <input
                                    type="range"
                                    min="100"
                                    max="8192"
                                    step="100"
                                    value={localKbSettings.chunkSize || 1000}
                                    onChange={(e) => handleUpdateKbSettings('chunkSize', parseInt(e.target.value))}
                                    className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                />
                            </div>
                            <div>
                                <div className="flex justify-between mb-3 px-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('chunkOverlap')}</label>
                                    <span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.chunkOverlap || 100}</span>
                                </div>
                                <input
                                    type="range"
                                    min="0"
                                    max="2048"
                                    step="10"
                                    value={localKbSettings.chunkOverlap || 100}
                                    onChange={(e) => handleUpdateKbSettings('chunkOverlap', parseInt(e.target.value))}
                                    className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                />
                            </div>
                        </div>
                    </section >

                    {/* Chat Hyperparameters */}
                    < section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6" >
                        <div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
                            <div className="w-8 h-8 rounded-xl bg-pink-50 flex items-center justify-center text-pink-600">
                                <Sparkles size={16} />
                            </div>
                            {t('chatHyperparameters')}
                        </div>
                        <div className="space-y-8">
                            <div>
                                <div className="flex justify-between mb-3 px-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('temperature')}</label>
                                    <span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.temperature}</span>
                                </div>
                                <input
                                    type="range"
                                    min="0"
                                    max="1"
                                    step="0.1"
                                    value={localKbSettings.temperature || 0.7}
                                    onChange={(e) => handleUpdateKbSettings('temperature', parseFloat(e.target.value))}
                                    className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                />
                                <div className="flex justify-between mt-2 px-1 text-[9px] font-bold text-slate-300 uppercase tracking-tighter">
                                    <span>{t('precise')}</span>
                                    <span>{t('creative')}</span>
                                </div>
                            </div>
                            <div>
                                <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('maxResponseTokens')}</label>
                                <input
                                    type="number"
                                    value={localKbSettings.maxTokens || 2000}
                                    onChange={(e) => handleUpdateKbSettings('maxTokens', parseInt(e.target.value))}
                                    className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
                                />
                            </div>
                        </div>
                    </section >

                    {/* Retrieval & Search Settings */}
                    < section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6" >
                        <div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
                            <div className="w-8 h-8 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
                                <Database size={16} />
                            </div>
                            {t('retrievalSearchSettings')}
                        </div>
                        <div className="space-y-8">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div>
                                    <div className="flex justify-between mb-3 px-1">
                                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('topK')}</label>
                                        <span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.topK}</span>
                                    </div>
                                    <input
                                        type="range"
                                        min="1"
                                        max="50"
                                        step="1"
                                        value={localKbSettings.topK || 10}
                                        onChange={(e) => handleUpdateKbSettings('topK', parseInt(e.target.value))}
                                        className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                    />
                                </div>
                                <div>
                                    <div className="flex justify-between mb-3 px-1">
                                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('similarityThreshold')}</label>
                                        <span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.similarityThreshold}</span>
                                    </div>
                                    <input
                                        type="range"
                                        min="0"
                                        max="1"
                                        step="0.05"
                                        value={localKbSettings.similarityThreshold || 0.5}
                                        onChange={(e) => handleUpdateKbSettings('similarityThreshold', parseFloat(e.target.value))}
                                        className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                    />
                                </div>
                            </div>

                            <div className="space-y-4 pt-4 border-t border-slate-100">
                                <div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
                                    <div>
                                        <div className="text-sm font-bold text-slate-800">{t('enableHybridSearch')}</div>
                                        <div className="text-[10px] text-slate-400 font-medium">{t('hybridSearchDesc')}</div>
                                    </div>
                                    <button
                                        onClick={() => handleUpdateKbSettings('enableFullTextSearch', !localKbSettings.enableFullTextSearch)}
                                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableFullTextSearch ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
                                    >
                                        <span className={`${localKbSettings.enableFullTextSearch ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
                                    </button>
                                </div>

                                {localKbSettings.enableFullTextSearch && (
                                    <motion.div
                                        initial={{ opacity: 0, y: -10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        className="p-5 bg-indigo-50/30 rounded-2xl border border-indigo-100/50 space-y-4"
                                    >
                                        <div className="flex justify-between mb-2 px-1">
                                            <label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">{t('hybridWeight')}</label>
                                            <span className="text-sm font-black text-indigo-600">{localKbSettings.hybridVectorWeight || 0.5}</span>
                                        </div>
                                        <input
                                            type="range"
                                            min="0"
                                            max="1"
                                            step="0.05"
                                            value={localKbSettings.hybridVectorWeight || 0.5}
                                            onChange={(e) => handleUpdateKbSettings('hybridVectorWeight', parseFloat(e.target.value))}
                                            className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                        />
                                        <div className="flex justify-between mt-1 px-1 text-[9px] font-bold text-indigo-300 uppercase">
                                            <span>{t('pureText')}</span>
                                            <span>{t('pureVector')}</span>
                                        </div>
                                    </motion.div>
                                )}

                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
                                        <div>
                                            <div className="text-sm font-bold text-slate-800">{t('enableQueryExpansion')}</div>
                                            <div className="text-[10px] text-slate-400 font-medium">{t('queryExpansionDesc')}</div>
                                        </div>
                                        <button
                                            onClick={() => handleUpdateKbSettings('enableQueryExpansion', !localKbSettings.enableQueryExpansion)}
                                            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableQueryExpansion ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
                                        >
                                            <span className={`${localKbSettings.enableQueryExpansion ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
                                        </button>
                                    </div>

                                    <div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
                                        <div>
                                            <div className="text-sm font-bold text-slate-800">{t('enableHyDE')}</div>
                                            <div className="text-[10px] text-slate-400 font-medium">{t('hydeDesc')}</div>
                                        </div>
                                        <button
                                            onClick={() => handleUpdateKbSettings('enableHyDE', !localKbSettings.enableHyDE)}
                                            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableHyDE ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
                                        >
                                            <span className={`${localKbSettings.enableHyDE ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
                                        </button>
                                    </div>
                                </div>

                                <div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
                                    <div>
                                        <div className="text-sm font-bold text-slate-800">{t('enableReranking')}</div>
                                        <div className="text-[10px] text-slate-400 font-medium">{t('rerankingDesc')}</div>
                                    </div>
                                    <button
                                        onClick={() => handleUpdateKbSettings('enableRerank', !localKbSettings.enableRerank)}
                                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableRerank ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
                                    >
                                        <span className={`${localKbSettings.enableRerank ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
                                    </button>
                                </div>

                                {localKbSettings.enableRerank && (
                                    <motion.div
                                        initial={{ opacity: 0, y: -10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        className="p-5 bg-indigo-50/30 rounded-2xl border border-indigo-100/50 space-y-4"
                                    >
                                        <div className="flex justify-between mb-2 px-1">
                                            <label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">{t('rerankSimilarityThreshold')}</label>
                                            <span className="text-sm font-black text-indigo-600">{localKbSettings.rerankSimilarityThreshold || 0.5}</span>
                                        </div>
                                        <input
                                            type="range"
                                            min="0"
                                            max="1"
                                            step="0.05"
                                            value={localKbSettings.rerankSimilarityThreshold || 0.5}
                                            onChange={(e) => handleUpdateKbSettings('rerankSimilarityThreshold', parseFloat(e.target.value))}
                                            className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                                        />
                                        <div className="flex justify-between mt-1 px-1 text-[9px] font-bold text-indigo-300 uppercase">
                                            <span>{t('broad')}</span>
                                            <span>{t('strict')}</span>
                                        </div>
                                    </motion.div>
                                )}
                            </div>
                        </div>
                    </section>
                </>
            )}
        </div>
    );

    const renderModelTab = () => (
        <div className="w-full space-y-6">
            <div className="flex justify-between items-center mb-6">
                <div>
                </div>
                {!editingId && currentUser?.role === 'SUPER_ADMIN' && (
                    <button
                        onClick={() => { setEditingId('new'); setModelFormData({ type: ModelType.LLM, baseUrl: 'http://localhost:11434/v1', modelId: 'llama3', name: '', dimensions: 1536 }); }}
                        className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-bold rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95"
                    >
                        <Plus className="w-4 h-4" />
                        {t('mmAddBtn')}
                    </button>
                )}
            </div>

            {editingId ? (
                <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="bg-white/90 backdrop-blur-md p-10 rounded-3xl border border-slate-200/50 shadow-xl space-y-8"
                >
                    <div className="flex items-center gap-4 mb-2">
                        <div className="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600">
                            <Cpu className="w-6 h-6" />
                        </div>
                        <h3 className="text-xl font-black text-slate-900 tracking-tight">{editingId === 'new' ? t('mmAddBtn') : t('mmEdit')}</h3>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="space-y-2">
                            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormName')} *</label>
                            <input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.name || ''} onChange={e => setModelFormData({ ...modelFormData, name: e.target.value })} disabled={isLoading} />
                        </div>
                        <div className="space-y-2">
                            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormModelId')} *</label>
                            <input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.modelId || ''} onChange={e => setModelFormData({ ...modelFormData, modelId: e.target.value })} disabled={isLoading} />
                        </div>
                    </div>

                    <div className="space-y-2">
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormType')} *</label>
                        <select className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all appearance-none" 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>
                            <option value={ModelType.VISION}>{t('typeVision')}</option>
                        </select>
                    </div>

                    <div className="space-y-2">
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormBaseUrl')} *</label>
                        <input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.baseUrl || ''} onChange={e => setModelFormData({ ...modelFormData, baseUrl: e.target.value })} disabled={isLoading} />
                    </div>

                    <div className="space-y-2">
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormApiKey')}</label>
                        <input
                            type="password"
                            className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
                            value={modelFormData.apiKey || ''}
                            onChange={e => setModelFormData({ ...modelFormData, apiKey: e.target.value })}
                            disabled={isLoading}
                            placeholder={t('mmFormApiKeyPlaceholder')}
                        />
                    </div>

                    {modelFormData.type === ModelType.EMBEDDING && (
                        <div className="grid grid-cols-2 gap-6 p-6 bg-slate-50 rounded-3xl border border-slate-200/50">
                            <div className="space-y-2">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('maxInput')}</label>
                                <input type="number" className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold" value={modelFormData.maxInputTokens || 8191} onChange={e => setModelFormData({ ...modelFormData, maxInputTokens: parseInt(e.target.value) })} />
                            </div>
                            <div className="space-y-2">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('dimensions')}</label>
                                <input type="number" className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold" value={modelFormData.dimensions || 1536} onChange={e => setModelFormData({ ...modelFormData, dimensions: parseInt(e.target.value) })} />
                            </div>
                        </div>
                    )}

                    <div className="flex justify-end gap-3 pt-4">
                        <button onClick={() => { setEditingId(null); setError(null); }} className="px-6 py-3 text-sm font-bold text-slate-500 hover:text-slate-700">{t('mmCancel')}</button>
                        <button onClick={handleSaveModel} className="px-10 py-3 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-xs shadow-xl shadow-indigo-100 transition-all active:scale-95 flex items-center gap-2" disabled={isLoading}>
                            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
                            {t('mmSave')}
                        </button>
                    </div>
                </motion.div>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 overflow-y-auto pr-2 pb-6 scrollbar-hide">
                    <AnimatePresence>
                        {models.map((model, index) => (
                            <motion.div
                                key={model.id}
                                initial={{ opacity: 0, scale: 0.95 }}
                                animate={{ opacity: 1, scale: 1 }}
                                transition={{ delay: index * 0.05 }}
                                className="bg-white/70 backdrop-blur-md border border-slate-200/50 rounded-[2rem] p-6 flex flex-col justify-between group hover:shadow-xl hover:shadow-indigo-500/5 hover:border-indigo-500/30 transition-all duration-300 relative overflow-hidden"
                            >
                                {/* Subtle background pattern/glow */}
                                <div className="absolute -top-12 -right-12 w-32 h-32 bg-indigo-500/5 rounded-full blur-3xl group-hover:bg-indigo-500/10 transition-all duration-500" />

                                <div className="relative z-10">
                                    <div className="flex items-start justify-between mb-5">
                                        <div className={`w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-500 ${model.isEnabled !== false ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100 rotate-0 group-hover:rotate-6' : 'bg-slate-100 text-slate-400 opacity-60'}`}>
                                            <Cpu size={26} strokeWidth={2.5} />
                                        </div>
                                        <div className="flex gap-1 items-center bg-slate-50 p-1 rounded-xl border border-slate-100/50">
                                            <button
                                                onClick={() => handleToggleModel(model)}
                                                className={`p-1.5 rounded-lg transition-all ${((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? 'text-indigo-600 bg-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
                                                title={((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? t('modelEnabled') : t('modelDisabled')}
                                            >
                                                {((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? <ToggleRight size={24} /> : <ToggleLeft size={24} />}
                                            </button>
                                        </div>
                                    </div>

                                    <div className="space-y-1 mb-6">
                                        <div className="flex items-center gap-2.5">
                                            <h4 className="font-black text-slate-900 text-lg tracking-tight truncate">{model.name}</h4>
                                        </div>
                                        <div className="flex items-center gap-2">
                                            <span className="text-[9px] font-black bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-lg uppercase tracking-wider border border-indigo-100/50">
                                                {getTypeLabel(model.type)}
                                            </span>
                                            {model.isDefault && (
                                                <span className="text-[9px] font-black bg-amber-50 text-amber-600 px-2 py-0.5 rounded-lg uppercase tracking-wider border border-amber-100/50 flex items-center gap-1">
                                                    <Sparkles size={8} /> {t('defaultBadge')}
                                                </span>
                                            )}
                                        </div>
                                        <p className="text-[11px] font-mono text-slate-400 mt-2 truncate bg-slate-50 px-2 py-1 rounded-lg border border-slate-100/50 inline-block max-w-full">
                                            {model.modelId}
                                        </p>
                                    </div>

                                    {/* Additional info grid */}
                                    <div className="grid grid-cols-2 gap-3 mb-6">
                                        {model.type === ModelType.EMBEDDING && (
                                            <>
                                                <div className="bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50">
                                                    <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('dims')}</span>
                                                    <span className="text-xs font-bold text-slate-700">{model.dimensions || '-'}</span>
                                                </div>
                                                <div className="bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50">
                                                    <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('ctx')}</span>
                                                    <span className="text-xs font-bold text-slate-700">{model.maxInputTokens || '-'}</span>
                                                </div>
                                            </>
                                        )}
                                        {model.type === ModelType.LLM && (
                                            <div className="col-span-2 bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50 flex items-center justify-between">
                                                <span className="text-[8px] font-black text-slate-400 uppercase tracking-widest">{t('baseApi')}</span>
                                                <span className="text-[9px] font-mono font-medium text-slate-600 max-w-[140px] truncate">{model.baseUrl}</span>
                                            </div>
                                        )}
                                    </div>
                                </div>

                                <div className="flex items-center justify-between pt-4 border-t border-slate-100/50 relative z-10">
                                    <div className="flex items-center gap-1 text-[10px] font-bold text-slate-400">
                                        <SettingsIcon size={12} />
                                        {t('configured')}
                                    </div>
                                    <div className="flex gap-2">
                                        {currentUser?.role === 'SUPER_ADMIN' && (
                                            <>
                                                <button
                                                    onClick={() => { setEditingId(model.id); setModelFormData({ ...model }); }}
                                                    className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-sm transition-all"
                                                >
                                                    <Edit2 size={15} />
                                                </button>
                                                <button
                                                    onClick={() => handleDeleteModel(model.id)}
                                                    className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:text-red-500 hover:bg-red-50 hover:shadow-sm transition-all"
                                                >
                                                    <Trash2 size={15} />
                                                </button>
                                            </>
                                        )}
                                    </div>
                                </div>
                            </motion.div>
                        ))}
                    </AnimatePresence>

                    {models.length === 0 && (
                        <div className="bg-white/50 border-2 border-dashed border-slate-200 rounded-3xl p-16 text-center">
                            <Cpu className="w-12 h-12 text-slate-200 mx-auto mb-4" />
                            <p className="text-slate-400 font-bold uppercase tracking-widest text-xs">{t('mmEmpty')}</p>
                        </div>
                    )}
                </div>
            )}
        </div>
    );

    return (
        <div className="flex h-full bg-[#FCFDFF] overflow-hidden relative">
            {/* Settings Sidebar */}
            <div className="w-64 bg-slate-50/50 border-r border-slate-200/60 flex flex-col shrink-0 z-20">
                <div className="p-6 pb-2">
                    <h2 className="text-lg font-bold text-slate-900 tracking-tight">{t('tabSettings')}</h2>
                </div>
                <div className="flex-1 overflow-y-auto p-3 space-y-1">
                    <button
                        onClick={() => setActiveTab('general')}
                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'general' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
                            }`}
                    >
                        <SettingsIcon size={18} />
                        {t('generalSettings')}
                    </button>
                    {(currentUser?.role === 'TENANT_ADMIN' || currentUser?.role === 'SUPER_ADMIN' || isAdmin) && (
                        <>
                            <button
                                onClick={() => setActiveTab('user')}
                                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'user' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
                                    }`}
                            >
                                <UserCircle size={18} />
                                {t('userManagement')}
                            </button>
                            <button
                                onClick={() => setActiveTab('model')}
                                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'model' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
                                    }`}
                            >
                                <HardDrive size={18} />
                                {t('modelManagement')}
                            </button>
                            <button
                                onClick={() => setActiveTab('knowledge_base')}
                                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'knowledge_base' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
                                    }`}
                            >
                                <Database size={18} />
                                {t('sidebarTitle')}
                            </button>
                        </>
                    )}
                    {currentUser?.role === 'SUPER_ADMIN' && (
                        <button
                            onClick={() => setActiveTab('tenants')}
                            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'tenants' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
                                }`}
                        >
                            <LayoutGrid size={18} />
                            {t('navTenants')}
                        </button>
                    )}
                </div>
            </div>

            {/* Content Area */}
            <div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden relative bg-white z-10">
                <div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
                    <div>
                        <h1 className="text-2xl font-bold text-slate-900 leading-tight">
                            {activeTab === 'general' ? t('generalSettings') : activeTab === 'user' ? t('userManagement') : activeTab === 'model' ? t('modelManagement') : activeTab === 'knowledge_base' ? t('sidebarTitle') : t('navTenants')}
                        </h1>
                        <p className="text-[15px] text-slate-500 mt-1">
                            {activeTab === 'general' ? t('generalSettingsSubtitle') : activeTab === 'user' ? t('userManagementSubtitle') : activeTab === 'model' ? t('modelManagementSubtitle') : activeTab === 'knowledge_base' ? t('kbSettingsSubtitle') : t('tenantsSubtitle')}
                        </p>
                    </div>
                </div>

                <div className="flex-1 overflow-y-auto px-10 pb-10 scrollbar-hide">
                    <div className="w-full">
                        {error && (
                            <motion.div
                                initial={{ opacity: 0, y: -10 }}
                                animate={{ opacity: 1, y: 0 }}
                                className="mb-8 p-4 bg-red-50/80 backdrop-blur-md border border-red-200/50 text-red-700 rounded-2xl flex gap-3 items-center text-sm shadow-sm"
                            >
                                <div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center shrink-0">
                                    <X className="w-4 h-4 text-red-600" />
                                </div>
                                <div>
                                    <span className="font-black uppercase tracking-widest text-[10px] block mb-0.5">{t('errorLabel')}</span>
                                    {error}
                                </div>
                            </motion.div>
                        )}

                        <AnimatePresence mode="wait">
                            <motion.div
                                key={activeTab}
                                initial={{ opacity: 0, x: 20 }}
                                animate={{ opacity: 1, x: 0 }}
                                exit={{ opacity: 0, x: -20 }}
                                transition={{ duration: 0.3 }}
                            >
                                {activeTab === 'general' && renderGeneralTab()}
                                {activeTab === 'user' && renderUserTab()}
                                {activeTab === 'model' && (isAdmin || currentUser?.role === 'SUPER_ADMIN') && renderModelTab()}
                                {activeTab === 'knowledge_base' && (isAdmin || currentUser?.role === 'SUPER_ADMIN') && renderKnowledgeBaseTab()}
                                {activeTab === 'tenants' && currentUser?.role === 'SUPER_ADMIN' && renderTenantsTab()}
                            </motion.div>
                        </AnimatePresence>
                    </div>
                </div>
            </div>
        </div>
    );
};