import { useTranslation } from 'react-i18next';
import { NavLink, Outlet } from 'react-router';

import { SettingsSuspense } from '@/pages/settings/SettingsSection';
import { useCurrentUser } from '@/lib/hooks';

/**
 * Вкладки настроек аккаунта и инстанса. Живут внутри `/settings/account/*`
 * и выглядят так же, как панель выбора сервера в `/settings/servers/*`.
 */
export default function AccountSettingsLayout() {
  const { t } = useTranslation();
  const currentUser = useCurrentUser();

  const tabs = [
    { to: 'profile', label: t('settings.tabs.profile') },
    { to: 'security', label: t('settings.tabs.security') },
    { to: 'appearance', label: t('settings.tabs.appearance') },
    ...(currentUser.data?.is_instance_admin === true
      ? [{ to: 'instance', label: t('settings.tabs.instance') }]
      : []),
  ];

  return (
    <>
      <nav aria-label={t('settings.tabs.label')} className="flex flex-wrap gap-2">
        {tabs.map((tab) => (
          <NavLink
            key={tab.to}
            to={tab.to}
            className={({ isActive }) =>
              `rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors duration-[var(--duration-fast)] ${
                isActive
                  ? 'border-accent bg-surface-3 text-fg'
                  : 'border-border/60 bg-surface-1 text-fg-muted hover:bg-surface-2 hover:text-fg'
              }`
            }
          >
            {tab.label}
          </NavLink>
        ))}
      </nav>
      <SettingsSuspense>
        <Outlet />
      </SettingsSuspense>
    </>
  );
}