import React, { useState, useEffect } from 'react';
import {
    getUserProfile, updateUserProfile, getUserConfig, updateUserConfig,
    getUserAccessibleNodes, getUserNodePreferences, updateUserNodePreferences,
    updatePassword
} from '../../../services/apiService';

const ProfilePage = ({ onLogout }) => {
    const [profile, setProfile] = useState(null);
    const [config, setConfig] = useState(null);
    const [available, setAvailable] = useState({ llm: [], tts: [], stt: [] });
    const [accessibleNodes, setAccessibleNodes] = useState([]);
    const [nodePrefs, setNodePrefs] = useState({ default_node_ids: [], data_source: { source: 'empty', path: '' } });
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [pwdSaving, setPwdSaving] = useState(false);
    const [message, setMessage] = useState({ type: '', text: '' });
    const [providerStatuses, setProviderStatuses] = useState({});
    const [editData, setEditData] = useState({
        full_name: '',
        username: '',
        avatar_url: ''
    });
    const [passwordData, setPasswordData] = useState({ current: '', new: '' });

    useEffect(() => {
        loadData();
    }, []);

    const loadData = async () => {
        try {
            setLoading(true);
            const [prof, conf, nodes, nPrefs] = await Promise.all([
                getUserProfile(),
                getUserConfig(),
                getUserAccessibleNodes(),
                getUserNodePreferences()
            ]);
            setProfile(prof);
            setConfig(conf.preferences);
            setProviderStatuses(conf.preferences?.statuses || {});
            setAccessibleNodes(nodes);
            setNodePrefs(nPrefs);
            setAvailable({
                llm: Object.entries(conf.effective?.llm?.providers || {}).map(([id, p]) => ({ id, label: id, model: p?.model || null })),
                tts: Object.entries(conf.effective?.tts?.providers || {}).map(([id, p]) => ({ id, label: id, model: p?.model || null, voice: p?.voice || null })),
                stt: Object.entries(conf.effective?.stt?.providers || {}).map(([id, p]) => ({ id, label: id, model: p?.model || null }))
            });
            setEditData({
                full_name: prof.full_name || '',
                username: prof.username || '',
                avatar_url: prof.avatar_url || ''
            });
        } catch (err) {
            console.error("Failed to load profile data", err);
            setMessage({ type: 'error', text: 'Failed to load profile.' });
        } finally {
            setLoading(false);
        }
    };

    const handleProfileSubmit = async (e) => {
        e.preventDefault();
        try {
            setSaving(true);
            const updated = await updateUserProfile(editData);
            setProfile(updated);
            setMessage({ type: 'success', text: 'Profile updated successfully!' });
            setTimeout(() => setMessage({ type: '', text: '' }), 3000);
        } catch (err) {
            setMessage({ type: 'error', text: 'Failed to update profile.' });
        } finally {
            setSaving(false);
        }
    };

    const handlePasswordSubmit = async (e) => {
        e.preventDefault();
        try {
            setPwdSaving(true);
            await updatePassword(passwordData.current, passwordData.new);
            setPasswordData({ current: '', new: '' });
            setMessage({ type: 'success', text: 'Password set successfully!' });
            setTimeout(() => setMessage({ type: '', text: '' }), 5000);
        } catch (err) {
            setMessage({ type: 'error', text: err.message || 'Failed to update password.' });
            setTimeout(() => setMessage({ type: '', text: '' }), 5000);
        } finally {
            setPwdSaving(false);
        }
    };

    const handlePreferenceChange = async (section, providerId) => {
        try {
            const newConfig = {
                ...config,
                [section]: { ...config[section], active_provider: providerId }
            };
            await updateUserConfig(newConfig);
            setConfig(newConfig);
            setMessage({ type: 'success', text: `Primary ${section.toUpperCase()} set to ${providerId}` });
            setTimeout(() => setMessage({ type: '', text: '' }), 3000);
        } catch (err) {
            setMessage({ type: 'error', text: 'Failed to update preferences.' });
        }
    };

    const handleNodePrefChange = async (updates) => {
        try {
            const newNodePrefs = { ...nodePrefs, ...updates };
            await updateUserNodePreferences(newNodePrefs);
            setNodePrefs(newNodePrefs);
            setMessage({ type: 'success', text: 'Node preferences updated.' });
            setTimeout(() => setMessage({ type: '', text: '' }), 3000);
        } catch (err) {
            setMessage({ type: 'error', text: 'Failed to update node preferences.' });
        }
    };

    const toggleDefaultNode = (nodeId) => {
        const current = nodePrefs.default_node_ids || [];
        const isRemoving = current.includes(nodeId);
        const next = isRemoving
            ? current.filter(id => id !== nodeId)
            : [...current, nodeId];
            
        let updates = { default_node_ids: next };
        
        let nextDataSource = { ...nodePrefs.data_source };
        let sourceChanged = false;
        
        if (isRemoving && nextDataSource.source_node_id === nodeId) {
            nextDataSource.source_node_id = null;
            sourceChanged = true;
            if (next.length === 0) {
                nextDataSource.source = 'empty';
                nextDataSource.path = '';
            }
        }
        
        if (next.length === 1 && !nextDataSource.source_node_id) {
            nextDataSource.source_node_id = next[0];
            sourceChanged = true;
        }
        
        if (sourceChanged) {
            updates.data_source = nextDataSource;
        }

        handleNodePrefChange(updates);
    };

    const handleGeneralPreferenceUpdate = async (updates) => {
        try {
            const newConfig = {
                ...config,
                ...updates
            };
            await updateUserConfig(newConfig);
            setConfig(newConfig);
            setMessage({ type: 'success', text: 'Preferences updated.' });
            setTimeout(() => setMessage({ type: '', text: '' }), 3000);
        } catch (err) {
            setMessage({ type: 'error', text: 'Failed to update preferences.' });
        }
    };


    if (loading) {
        return (
            <div className="flex h-screen items-center justify-center dark:bg-gray-900">
                <div className="text-xl text-gray-400 animate-pulse">Loading identity...</div>
            </div>
        );
    }

    const inputClass = "w-full border border-gray-300 dark:border-gray-600 rounded-xl p-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all";
    const labelClass = "block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1";

    return (
        <div className="h-full overflow-y-auto bg-gray-50 dark:bg-gray-900 pt-20 px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto space-y-8">
                <header className="flex flex-col sm:flex-row items-center gap-6 bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border border-gray-100 dark:border-gray-700 backdrop-blur-sm">
                    <div className="relative group">
                        <div className="w-24 h-24 rounded-full bg-indigo-600 flex items-center justify-center text-white text-4xl font-black shadow-lg overflow-hidden border-4 border-white dark:border-gray-700">
                            {profile.avatar_url ? <img src={profile.avatar_url} alt="Avatar" className="w-full h-full object-cover" /> : profile.email[0].toUpperCase()}
                        </div>
                    </div>
                    <div className="flex flex-col sm:flex-row items-center gap-4">
                        <div className="text-center sm:text-left flex-1">
                            <h1 className="text-3xl font-black text-gray-900 dark:text-white truncate">
                                {profile.full_name || profile.username || 'Citizen'}
                            </h1>
                            <p className="text-indigo-500 font-bold">{profile.email}</p>
                            <p className="text-[10px] text-gray-400 font-bold mt-1">Member since {new Date(profile.created_at).toLocaleDateString()}</p>
                            <div className="mt-4 flex flex-wrap gap-2 justify-center sm:justify-start">
                                <span className="px-3 py-1 bg-indigo-50 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded-full text-xs font-black border border-indigo-100 dark:border-indigo-800">
                                    {profile.role}
                                </span>
                                {profile.group_name && (
                                    <span className="px-3 py-1 bg-emerald-50 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 rounded-full text-xs font-black border border-emerald-100 dark:border-emerald-800">
                                        {profile.group_name} Group
                                    </span>
                                )}
                            </div>
                        </div>
                        {onLogout && (
                            <button
                                onClick={onLogout}
                                className="px-6 py-2 bg-red-50 hover:bg-red-500 text-red-600 hover:text-white border-2 border-red-200 hover:border-red-500 rounded-xl text-xs font-black transition-all shadow-sm active:scale-95 flex items-center gap-2"
                            >
                                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                </svg>
                                Logout
                            </button>
                        )}
                    </div>
                </header>

                {message.text && (
                    <div className={`p-4 rounded-xl shadow-sm border animate-in fade-in slide-in-from-top-4 duration-300 ${message.type === 'error' ? 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800' : 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800'}`}>
                        {message.text}
                    </div>
                )}

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div className="space-y-8">
                        {/* General Information */}
                        <div className="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-lg border border-gray-100 dark:border-gray-700">
                            <h2 className="text-xl font-black mb-6 flex items-center gap-3">
                                <svg className="w-6 h-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                                General Information
                            </h2>
                            <form onSubmit={handleProfileSubmit} className="space-y-4">
                                <div>
                                    <label className={labelClass}>Full Name</label>
                                    <input
                                        className={inputClass}
                                        value={editData.full_name}
                                        onChange={e => setEditData({ ...editData, full_name: e.target.value })}
                                        placeholder="Enter your full name"
                                    />
                                </div>
                                <div>
                                    <label className={labelClass}>Username</label>
                                    <input
                                        className={inputClass}
                                        value={editData.username}
                                        onChange={e => setEditData({ ...editData, username: e.target.value })}
                                        placeholder="Display name"
                                    />
                                </div>
                                <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-dashed border-gray-200 dark:border-gray-700">
                                    <label className={labelClass}>Operational Group</label>
                                    <p className="ml-1 text-sm font-bold text-indigo-600 dark:text-indigo-400">
                                        {profile.group_name || 'Ungrouped'}
                                    </p>
                                    <p className="ml-1 mt-1 text-[10px] text-gray-400 italic">Groups are managed by your administrator.</p>
                                </div>
                                <div className="pt-4">
                                    <button
                                        type="submit"
                                        disabled={saving}
                                        className="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-xl shadow-lg shadow-indigo-200 dark:shadow-indigo-900/40 transition-all active:scale-95 disabled:opacity-50"
                                    >
                                        {saving ? 'Updating...' : 'Save Changes'}
                                    </button>
                                </div>
                            </form>
                        </div>

                        {/* Account Security */}
                        <div className="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-lg border border-gray-100 dark:border-gray-700">
                            <h2 className="text-xl font-black mb-2 flex items-center gap-3">
                                <svg className="w-6 h-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                </svg>
                                Account Security
                            </h2>
                            <p className="text-[11px] text-gray-500 dark:text-gray-400 mb-6 font-medium leading-relaxed">
                                Establishing a local password ensures you have a fallback authentication method in case your administrator disables Single Sign-On (OIDC) or if external login providers experience an outage.
                            </p>
                            <form onSubmit={handlePasswordSubmit} className="space-y-4">
                                <div>
                                    <label className={labelClass}>Current Password</label>
                                    <input 
                                        type="password"
                                        className={inputClass} 
                                        value={passwordData.current} 
                                        onChange={e => setPasswordData({...passwordData, current: e.target.value})} 
                                        placeholder="Leave empty if not set"
                                    />
                                </div>
                                <div>
                                    <label className={labelClass}>New Password</label>
                                    <input 
                                        type="password" 
                                        required 
                                        className={inputClass} 
                                        value={passwordData.new} 
                                        onChange={e => setPasswordData({...passwordData, new: e.target.value})} 
                                        placeholder="Enter new password"
                                    />
                                </div>
                                <div className="pt-4">
                                    <button 
                                        type="submit" 
                                        disabled={pwdSaving} 
                                        className="w-full py-3 bg-gray-900 hover:bg-black dark:bg-gray-100 dark:hover:bg-white text-white dark:text-gray-900 font-black rounded-xl shadow-lg shadow-gray-200 dark:shadow-gray-900/40 transition-all active:scale-95 disabled:opacity-50"
                                    >
                                        {pwdSaving ? 'Updating...' : 'Set / Update Password'}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {/* Service Preferences */}
                    <div className="bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-lg border border-gray-100 dark:border-gray-700">
                        <h2 className="text-xl font-black mb-6 flex items-center gap-3">
                            <svg className="w-6 h-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                            Service Preferences
                        </h2>
                        <div className="space-y-6">
                            <ServiceSelect
                                label="Primary LLM"
                                section="llm"
                                providers={available.llm}
                                active={config?.llm?.active_provider}
                                statuses={config?.statuses || {}}
                                onChange={handlePreferenceChange}
                            />
                            <ServiceSelect
                                label="Primary TTS"
                                section="tts"
                                providers={available.tts}
                                active={config?.tts?.active_provider}
                                statuses={config?.statuses || {}}
                                onChange={handlePreferenceChange}
                            />
                            <ServiceSelect
                                label="Primary STT"
                                section="stt"
                                providers={available.stt}
                                active={config?.stt?.active_provider}
                                statuses={config?.statuses || {}}
                                onChange={handlePreferenceChange}
                            />
                        </div>



                        {/* Node Defaults Section */}
                        <div className="mt-10 pt-8 border-t border-gray-100 dark:border-gray-700 space-y-6">
                            <h3 className="text-lg font-black flex items-center gap-3">
                                <svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-7 0V4" />
                                </svg>
                                Default Node Attachment
                            </h3>

                            {accessibleNodes.length > 0 ? (
                                <div className="space-y-4">
                                    <p className="text-xs text-gray-500 font-bold mb-2">Auto-attach these nodes to new sessions:</p>
                                    <div className="flex flex-wrap gap-2">
                                        {accessibleNodes.map(node => {
                                            const isActive = (nodePrefs.default_node_ids || []).includes(node.node_id);
                                            return (
                                                <button
                                                    key={node.node_id}
                                                    type="button"
                                                    onClick={() => toggleDefaultNode(node.node_id)}
                                                    className={`px-4 py-2 rounded-xl text-[10px] font-black border-2 transition-all ${isActive
                                                        ? 'bg-indigo-600 border-indigo-600 text-white shadow-lg shadow-indigo-200 dark:shadow-none translate-y-[-1px]'
                                                        : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-400 hover:border-indigo-300'
                                                        }`}
                                                >
                                                    {node.display_name}
                                                </button>
                                            );
                                        })}
                                    </div>
                                </div>
                            ) : (
                                <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-2xl border border-dashed border-gray-200 dark:border-gray-700">
                                    <p className="text-xs text-gray-500 italic">No agent nodes are currently assigned to your group.</p>
                                </div>
                            )}

                            {/* Workspace Directory (Only visible if nodes are attached) */}
                            {nodePrefs.default_node_ids?.length > 0 && (
                                <div className="space-y-3 pt-4 border-t border-gray-50 dark:border-gray-800">
                                    <label className={labelClass}>Default Sync Workspace Directory</label>
                                    <div className="flex flex-col sm:flex-row gap-3">
                                        <select
                                            value={nodePrefs.data_source?.source || 'empty'}
                                            onChange={(e) => handleNodePrefChange({ data_source: { ...nodePrefs.data_source, source: e.target.value } })}
                                            className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm font-bold text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm"
                                        >
                                            <option value="empty">Empty Workspace</option>
                                            <option value="node_local">Node Local Path</option>
                                        </select>
                                        
                                        {nodePrefs.data_source?.source === 'node_local' && (
                                            <>
                                                <select
                                                    value={nodePrefs.data_source?.source_node_id || ''}
                                                    onChange={(e) => handleNodePrefChange({ data_source: { ...nodePrefs.data_source, source_node_id: e.target.value } })}
                                                    className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm font-bold text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm"
                                                >
                                                    <option value="" disabled>Select Target Node</option>
                                                    {(nodePrefs.default_node_ids || []).map(id => {
                                                        const nodeLabel = accessibleNodes.find(an => an.node_id === id)?.display_name || id;
                                                        return <option key={id} value={id}>{nodeLabel}</option>;
                                                    })}
                                                </select>
                                                
                                                <input
                                                    type="text"
                                                    value={nodePrefs.data_source?.path || ''}
                                                    onChange={(e) => handleNodePrefChange({ data_source: { ...nodePrefs.data_source, path: e.target.value } })}
                                                    placeholder="/absolute/path/on/target/node"
                                                    className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm font-mono text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm"
                                                />
                                            </>
                                        )}
                                    </div>
                                    <p className="text-[10px] text-gray-400 italic font-medium">
                                        Determines which node and directory path the agent should sync files from when starting a new chat.
                                    </p>
                                </div>
                            )}
                        </div>


                        <div className="mt-8 flex flex-wrap gap-4 items-center p-3 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-dashed border-gray-200 dark:border-gray-700">
                            <span className="text-[10px] font-black text-gray-400">Status:</span>
                            <div className="flex items-center gap-1.5">
                                <div className="w-2 h-2 rounded-full bg-emerald-500" />
                                <span className="text-[10px] font-bold text-gray-500">Verified</span>
                            </div>
                            <div className="flex items-center gap-1.5">
                                <div className="w-2 h-2 rounded-full bg-red-500" />
                                <span className="text-[10px] font-bold text-gray-500">Failed</span>
                            </div>
                            <div className="flex items-center gap-1.5">
                                <div className="w-2 h-2 rounded-full bg-gray-300" />
                                <span className="text-[10px] font-bold text-gray-500">Untested</span>
                            </div>
                        </div>
                        <p className="mt-8 text-xs text-gray-400 italic font-medium leading-relaxed">
                            These selections determine which AI service and nodes are used by default when you interact with the hub. Individual session settings may override these.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
};

const ServiceSelect = ({ label, section, providers, active, statuses, onChange }) => {
    return (
        <div className="space-y-3">
            <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 ml-1">{label}</label>
            <div className="flex flex-wrap gap-2">
                {providers.length === 0 ? (
                    <p className="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 p-3 rounded-xl w-full border border-dashed border-gray-300 dark:border-gray-700">No providers configured yet.</p>
                ) : (
                    providers.map(p => {
                        const statusKey = `${section}_${p.id}`;
                        const status = statuses?.[statusKey];
                        const statusColor = status === 'success' ? 'bg-emerald-500' : status === 'error' ? 'bg-red-500' : 'bg-gray-300';

                        const baseType = p.id.split('_')[0];
                        const suffix = p.id.includes('_') ? p.id.split('_').slice(1).join('_') : '';
                        const formattedLabel = baseType.charAt(0).toUpperCase() + baseType.slice(1) + (suffix ? ` (${suffix})` : '');

                        const modelDisplay = p.model || null;
                        const voiceDisplay = section === 'tts' ? (p.voice || null) : null;
                        const isActive = active === p.id;

                        return (
                            <button
                                key={p.id}
                                onClick={() => onChange(section, p.id)}
                                title={[
                                    modelDisplay && `Model: ${modelDisplay}`,
                                    voiceDisplay && `Voice: ${voiceDisplay}`
                                ].filter(Boolean).join(' · ') || undefined}
                                className={`group flex flex-col items-start gap-0.5 px-4 py-2 rounded-xl text-xs font-black border-2 transition-all ${isActive
                                    ? 'bg-indigo-600 border-indigo-600 text-white shadow-lg shadow-indigo-200 dark:shadow-none translate-y-[-2px]'
                                    : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:border-indigo-300 dark:hover:border-indigo-600'
                                    }`}
                            >
                                <div className="flex items-center gap-2">
                                    <div className={`w-2 h-2 rounded-full flex-shrink-0 transition-transform group-hover:scale-125 ${statusColor}`} />
                                    <span>{formattedLabel}</span>
                                </div>
                                {modelDisplay && (
                                    <span
                                        className={`text-[9px] font-medium normal-case tracking-normal leading-tight pl-4 truncate max-w-[180px] ${isActive ? 'text-indigo-200' : 'text-gray-400 dark:text-gray-500'
                                            }`}
                                        title={modelDisplay}
                                    >
                                        {modelDisplay}
                                        {voiceDisplay && <span className="ml-1 opacity-70">· {voiceDisplay}</span>}
                                    </span>
                                )}
                            </button>
                        );
                    })
                )}
            </div>
        </div>
    );
};

export default ProfilePage;
