'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { cn } from '@/shared/lib/utils';
import {
  User,
  Settings,
  Shield,
  Bell,
  CreditCard,
  Key,
} from 'lucide-react';
import { useTranslations } from 'next-intl';

/**
 * EN: Settings navigation tabs configuration
 * VI: Cấu hình các tab điều hướng Settings
 */
function getSettingsTabs(t: (key: string) => string) {
  return [
    {
      id: 'profile',
      label: t('settings.profile.label'),
      href: '/settings/profile',
      icon: User,
    },
    {
      id: 'preferences',
      label: t('settings.preferences.label'),
      href: '/settings/preferences',
      icon: Settings,
    },
    {
      id: 'security',
      label: t('settings.security.label'),
      href: '/settings/security',
      icon: Shield,
    },
    {
      id: 'notifications',
      label: t('settings.notifications.label'),
      href: '/settings/notifications',
      icon: Bell,
    },
    {
      id: 'billing',
      label: t('settings.billing.label'),
      href: '/settings/billing',
      icon: CreditCard,
    },
    {
      id: 'api-keys',
      label: t('settings.apiKeys.label'),
      href: '/settings/api-keys',
      icon: Key,
    },
  ];
}

/**
 * EN: Settings layout component with tab navigation
 * VI: Component layout Settings với điều hướng tab
 *
 * Features:
 * - Tab navigation for different settings sections
 * - Active tab highlighting
 * - Responsive design
 * - Icon support for each tab
 */
export default function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // EN: Translation hook / VI: Hook translation
  const t = useTranslations();
  const pathname = usePathname();
  const settingsTabs = getSettingsTabs(t);

  return (
    <div className="min-h-screen bg-bg-primary">
      {/* EN: Settings header / VI: Header Settings */}
      <div className="border-b border-border-primary bg-bg-secondary">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="py-6">
            <h1 className="text-3xl font-bold text-text-primary">
              {t('settings.title')}
            </h1>
            <p className="mt-1 text-sm text-text-tertiary">
              {t('settings.description')}
            </p>
          </div>
        </div>
      </div>

      {/* EN: Settings content with tabs / VI: Nội dung Settings với tabs */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="py-8">
          <div className="lg:grid lg:grid-cols-12 lg:gap-8">
            {/* EN: Sidebar navigation / VI: Điều hướng sidebar */}
            <aside className="lg:col-span-3">
              <nav
                className="space-y-1"
                aria-label={t('settings.navigation')}
              >
                {settingsTabs.map((tab) => {
                  const Icon = tab.icon;
                  const isActive = pathname === tab.href;

                  return (
                    <Link
                      key={tab.id}
                      href={tab.href}
                      className={cn(
                        // EN: Base styles / VI: Styles cơ bản
                        'group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-[150ms]',
                        // EN: Active state / VI: Trạng thái active
                        isActive
                          ? 'bg-accent-primary text-white shadow-md'
                          : 'text-text-secondary hover:bg-bg-tertiary hover:text-text-primary',
                      )}
                      aria-current={isActive ? 'page' : undefined}
                    >
                      <Icon
                        className={cn(
                          'h-5 w-5 flex-shrink-0',
                          isActive ? 'text-white' : 'text-text-tertiary group-hover:text-text-primary',
                        )}
                        aria-hidden="true"
                      />
                      <span>{tab.label}</span>
                    </Link>
                  );
                })}
              </nav>
            </aside>

            {/* EN: Main content area / VI: Khu vực nội dung chính */}
            <div className="mt-8 lg:col-span-9 lg:mt-0">{children}</div>
          </div>
        </div>
      </div>
    </div>
  );
}
