'use client';

import * as React from 'react';

// Force dynamic rendering to avoid static generation issues with translations
export const dynamic = 'force-dynamic';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useTranslation } from '@/hooks/use-translation';
// EN: Lazy load settings forms / VI: Lazy load các form cài đặt
const GeneralSettings = React.lazy(() => import('@/components/admin/settings/general-settings').then(m => ({ default: m.GeneralSettings })));
const EmailSettings = React.lazy(() => import('@/components/admin/settings/email-settings').then(m => ({ default: m.EmailSettings })));
const SecuritySettings = React.lazy(() => import('@/components/admin/settings/security-settings').then(m => ({ default: m.SecuritySettings })));
const ApiSettings = React.lazy(() => import('@/components/admin/settings/api-settings').then(m => ({ default: m.ApiSettings })));
const AdvancedSettings = React.lazy(() => import('@/components/admin/settings/advanced-settings').then(m => ({ default: m.AdvancedSettings })));

/**
 * EN: System Settings page component
 * VI: Component trang cài đặt hệ thống
 *
 * Features:
 * - Tab navigation (General, Email, Security, API, Advanced)
 * - Settings forms for each category
 *
 * Tính năng:
 * - Điều hướng tab (General, Email, Security, API, Advanced)
 * - Forms cài đặt cho mỗi danh mục
 */
export default function SystemSettingsPage() {
  const { t } = useTranslation();
  
  return (
    <div className="space-y-6">
      {/* EN: Page header / VI: Header trang */}
      <div>
        <h1 className="text-3xl font-bold text-text-primary">
          {t('admin.settings.title')}
        </h1>
        <p className="mt-1 text-sm text-text-tertiary">
          {t('admin.settings.description')}
        </p>
      </div>

      {/* EN: Settings tabs / VI: Tabs cài đặt */}
      <Tabs defaultValue="general" className="w-full">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="general">{t('admin.settings.general')}</TabsTrigger>
          <TabsTrigger value="email">{t('admin.settings.email')}</TabsTrigger>
          <TabsTrigger value="security">{t('admin.settings.security')}</TabsTrigger>
          <TabsTrigger value="api">{t('admin.settings.api')}</TabsTrigger>
          <TabsTrigger value="advanced">{t('admin.settings.advanced')}</TabsTrigger>
        </TabsList>

        {/* EN: General settings tab / VI: Tab cài đặt chung */}
        <TabsContent value="general" className="space-y-6">
          <React.Suspense fallback={<div className="p-8 text-center"><div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-accent-primary border-r-transparent" /><p className="mt-4 text-sm text-text-tertiary">{t('common.loading')}</p></div>}>
            <GeneralSettings />
          </React.Suspense>
        </TabsContent>

        {/* EN: Email settings tab / VI: Tab cài đặt email */}
        <TabsContent value="email" className="space-y-6">
          <React.Suspense fallback={<div className="p-8 text-center"><div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-accent-primary border-r-transparent" /><p className="mt-4 text-sm text-text-tertiary">{t('common.loading')}</p></div>}>
            <EmailSettings />
          </React.Suspense>
        </TabsContent>

        {/* EN: Security settings tab / VI: Tab cài đặt bảo mật */}
        <TabsContent value="security" className="space-y-6">
          <React.Suspense fallback={<div className="p-8 text-center"><div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-accent-primary border-r-transparent" /><p className="mt-4 text-sm text-text-tertiary">{t('common.loading')}</p></div>}>
            <SecuritySettings />
          </React.Suspense>
        </TabsContent>

        {/* EN: API settings tab / VI: Tab cài đặt API */}
        <TabsContent value="api" className="space-y-6">
          <React.Suspense fallback={<div className="p-8 text-center"><div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-accent-primary border-r-transparent" /><p className="mt-4 text-sm text-text-tertiary">{t('common.loading')}</p></div>}>
            <ApiSettings />
          </React.Suspense>
        </TabsContent>

        {/* EN: Advanced settings tab / VI: Tab cài đặt nâng cao */}
        <TabsContent value="advanced" className="space-y-6">
          <React.Suspense fallback={<div className="p-8 text-center"><div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-accent-primary border-r-transparent" /><p className="mt-4 text-sm text-text-tertiary">{t('common.loading')}</p></div>}>
            <AdvancedSettings />
          </React.Suspense>
        </TabsContent>
      </Tabs>
    </div>
  );
}
