import React, { useState, useRef, useEffect } from 'react'; import { X, User as UserIcon, Palette, Info, Edit3, ExternalLink, Globe, ChevronDown, Github } from 'lucide-react'; import { useAuth } from '../context/AuthContext'; import { useI18n } from '../context/I18nContext'; import { EditProfileModal } from './EditProfileModal'; interface SettingsModalProps { isOpen: boolean; onClose: () => void; theme: 'light' | 'dark'; onToggleTheme: () => void; onNavigateToProfile?: (username: string) => void; } export const SettingsModal: React.FC = ({ isOpen, onClose, theme, onToggleTheme, onNavigateToProfile }) => { const { user } = useAuth(); const { t, language, setLanguage } = useI18n(); const [isEditProfileOpen, setIsEditProfileOpen] = useState(false); const [showLangInfo, setShowLangInfo] = useState(false); const langInfoRef = useRef(null); useEffect(() => { if (!showLangInfo) return; const handleClick = (e: MouseEvent) => { if (langInfoRef.current && !langInfoRef.current.contains(e.target as Node)) { setShowLangInfo(false); } }; document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, [showLangInfo]); if (!isOpen || !user) { if (isEditProfileOpen && user) { return ( setIsEditProfileOpen(false)} onSaved={() => setIsEditProfileOpen(false)} /> ); } return null; } return (
e.stopPropagation()} > {/* Header */}

{t('settings')}

{/* User Profile Section */}
{user.avatar_url ? ( {user.username} ) : ( user.username[0].toUpperCase() )}

@{user.username}

{t('memberSince')} {new Date(user.createdAt).toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { month: 'long', year: 'numeric' })}

{/* Account Section */}

{t('account')}

@{user.username}

{/* Language Section */}

{t('language')}

{showLangInfo && (

{t('localizedBy')}

)}
{/* Theme Section */}

{t('appearance')}

{/* About Section */}

{t('about')}

{t('version')} 2.0.0

ACE-Step UI - {t('localAIMusicGenerator')}

{t('poweredBy')}

{t('createdBy')}

Report issues or request features on GitHub

{/* Footer */}
setIsEditProfileOpen(false)} onSaved={() => setIsEditProfileOpen(false)} />
); };