'use client';

import ProfileSettings from '@/components/dashboard/ProfileSettings';
import Sidebar from '@/components/dashboard/Sidebar';
import { useRouter } from 'next/navigation';
import { LogOut, Plus } from 'lucide-react';
import { useLanguage } from '@/lib/i18n/LanguageContext';

export default function SettingsPage() {
  const router = useRouter();
  const { t } = useLanguage();

  const handleLogout = () => {
    localStorage.removeItem('rsid');
    localStorage.removeItem('user_info');
    router.push('/login');
  };

  // 新增：处理侧边栏点击导航
  // 如果你的 Sidebar 是纯状态控制的，需要在这里处理跳转
  const handleTabChange = (tab: string) => {
    if (tab === 'overview') {
      router.push('/dashboard');
    } else if (tab === 'orders') {
      router.push('/dashboard/orders');
    }
    // 既然当前已经在 settings 页面，点击 settings 不需要跳转
  };

  return (
    <div className="min-h-screen bg-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        
        {/* Header */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">{t('settings.title')}</h1>
            <p className="text-sm text-gray-500 mt-1">{t('settings.subtitle')}</p>
          </div>
          <div className="flex gap-3">
             <button 
               onClick={() => router.push('/services')} 
               className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition shadow-sm"
             >
               <Plus size={16} /> {t('common.new_application')}
             </button>
             <button 
               onClick={handleLogout} 
               className="flex items-center gap-2 bg-white border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 text-gray-700 transition"
             >
               <LogOut size={16} /> {t('nav.logout')}
             </button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          
          {/* 左侧侧边栏 */}
          <div className="lg:col-span-1">
            {/* 🔴 修复部分：传入必要的 props */}
            <Sidebar 
              activeTab="settings" 
              setActiveTab={handleTabChange} 
            />
          </div>

          {/* 右侧内容区 */}
          <div className="lg:col-span-3">
            
            <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
              {/* 主要设置区域 */}
              <div className="xl:col-span-2">
                <ProfileSettings />
              </div>
              
              {/* 右侧提示信息 */}
              <div className="hidden xl:block space-y-6">
                <div className="bg-blue-50 p-6 rounded-xl border border-blue-100">
                  <h3 className="font-bold text-blue-800 mb-2 text-sm">{t('settings.security_tip_title')}</h3>
                  <p className="text-xs text-blue-600 leading-relaxed mb-4">
                    {t('settings.security_tip_desc')}
                  </p>
                  <div className="h-px bg-blue-200 my-4"></div>
                  <p className="text-xs text-blue-500">
                    {t('settings.account_status')} <span className="font-bold text-green-600">{t('settings.status_normal')}</span>
                  </p>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  );
}