eryao/web/src/components/SettingsPage.tsx

import { logout } from '../lib/auth';

interface Props {
  locale: string;
  dashboard: { brandName: string; navHome: string; navStore: string; navDivination: string; navManual: string; navAuto: string; navHistory: string; navLanguage: string; navSettings: string; logout: string };
  settings: { title: string; profileTitle: string; emailLabel: string; nameLabel: string; joinedLabel: string; pointsTitle: string; pointsBalance: string; accountTitle: string; changeName: string; changeAvatar: string; changeLanguage: string; legalTitle: string; privacy: string; terms: string; logout: string; logoutConfirm: string };
}

export default function SettingsPage({ locale, settings: s }: Props) {
  const handleLogout = () => {
    if (confirm(s.logoutConfirm)) {
      logout().finally(() => {
        window.location.href = `/${locale}/login`;
      });
    }
  };

  return (
    <div className="flex flex-col gap-6 min-h-full">
        <h1 className="text-slate-900 text-xl font-bold">{s.title}</h1>

        <div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0">
          {/* Left column */}
          <div className="w-full lg:w-[360px] flex flex-col gap-4 shrink-0">
            {/* Profile summary */}
            <div className="bg-white rounded-2xl p-[18px] border border-slate-200 flex flex-col gap-3">
              <h3 className="text-slate-900 text-sm font-bold">{s.profileTitle}</h3>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-violet-600 flex items-center justify-center text-white text-sm font-bold">U</div>
                <div>
                  <p className="text-slate-900 text-sm font-medium">User</p>
                  <p className="text-slate-400 text-xs">user@example.com</p>
                </div>
              </div>
            </div>
            {/* Points */}
            <div className="bg-white rounded-2xl p-5 border border-slate-200 flex items-center gap-4">
              <span className="material-symbols-rounded text-violet-600 text-2xl">account_balance_wallet</span>
              <div>
                <p className="text-slate-400 text-xs">{s.pointsTitle}</p>
                <p className="text-slate-900 text-lg font-bold">210 <span className="text-sm font-normal text-slate-400">{s.pointsBalance}</span></p>
              </div>
            </div>
          </div>

          {/* Right column */}
          <div className="flex-1 flex flex-col gap-4">
            {/* Account settings */}
            <div className="bg-white rounded-2xl p-6 border border-slate-200 flex flex-col gap-4">
              <h3 className="text-slate-900 text-base font-bold">{s.accountTitle}</h3>
              <a href={`/${locale}/profile`} className="flex items-center justify-between py-2 hover:bg-slate-50 rounded-lg px-1 transition-colors">
                <span className="text-slate-600 text-sm">{s.changeAvatar}</span>
                <span className="material-symbols-rounded text-slate-400 text-lg">chevron_right</span>
              </a>
              <a href={`/${locale}/profile`} className="flex items-center justify-between py-2 hover:bg-slate-50 rounded-lg px-1 transition-colors">
                <span className="text-slate-600 text-sm">{s.changeName}</span>
                <span className="material-symbols-rounded text-slate-400 text-lg">chevron_right</span>
              </a>
              <div className="flex items-center justify-between py-2">
                <span className="text-slate-600 text-sm">{s.changeLanguage}</span>
                <span className="text-slate-400 text-sm">简体中文</span>
              </div>
            </div>

            {/* Legal */}
            <div className="bg-white rounded-2xl p-6 border border-slate-200 flex flex-col gap-4">
              <h3 className="text-slate-900 text-base font-bold">{s.legalTitle}</h3>
              <a href={`/${locale}/privacy`} className="text-slate-600 text-sm hover:text-violet-600">{s.privacy}</a>
              <a href={`/${locale}/terms`} className="text-slate-600 text-sm hover:text-violet-600">{s.terms}</a>
            </div>

            {/* Logout */}
            <button onClick={handleLogout} className="bg-white rounded-2xl px-5 py-3.5 border border-red-200 flex items-center justify-between hover:bg-red-50 transition-colors">
              <span className="text-red-500 text-sm font-medium">{s.logout}</span>
              <span className="material-symbols-rounded text-red-400 text-lg">logout</span>
            </button>
          </div>
        </div>
    </div>
  );
}