import * as React from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useTranslation } from '@/i18n'
import { Badge } from '@/components/ui/badge'
import { Ic } from '@/icons'
import { AdminManagementTab } from './components/AdminManagementTab'
import { NotificationsTab } from './components/NotificationsTab'
import { SocialMediaSettingsTab } from './components/SocialMediaSettingsTab'
import { TestimonialsSettingsTab } from './components/TestimonialsSettingsTab'

export default function SettingsPage() {
  const { t } = useTranslation()
  const { section } = useParams<{ section?: string }>()
  const navigate = useNavigate()

  React.useEffect(() => {
    if (!section || !['admins', 'social', 'notifications', 'testimonials'].includes(section)) {
      navigate('/settings/admins', { replace: true })
    }
  }, [section, navigate])

  const activeSection = section && ['admins', 'social', 'notifications', 'testimonials'].includes(section)
    ? section
    : 'admins'

  return (
    <div className="space-y-6 pt-2 pb-14">
      {/* سربرگ اختصاصی بخش مدیریت مدیران و دسترسی‌ها */}
      {activeSection === 'admins' && (
        <div className="flex flex-col gap-4 rounded-2xl border border-white/[0.08] bg-[#1e2129] p-4 sm:p-6 shadow-sm sm:flex-row sm:items-center sm:justify-between">
          <div className="space-y-1.5">
            <div className="flex flex-wrap items-center gap-2.5">
              <div className="flex size-9 items-center justify-center rounded-xl bg-primary/15 text-primary border border-primary/20">
                <Ic name="users" className="size-5" />
              </div>
              <h1 className="text-xl font-black text-white">
                {t('settings.tabAdmins')}
              </h1>
              <Badge
                variant="outline"
                className="border-primary/30 bg-primary/10 text-primary font-bold text-xs px-2.5 py-0.5 justify-center"
              >
                {t('settings.badgeRoleControl')}
              </Badge>
            </div>
            <p className="text-xs text-slate-400">
              {t('settings.pageDescription')}
            </p>
          </div>
        </div>
      )}

      {/* محتوای بخش فعال بر اساس مسیر سایدبار (تب‌های درون‌صفحه‌ای حذف شدند) */}
      {activeSection === 'admins' ? (
        <AdminManagementTab />
      ) : activeSection === 'social' ? (
        <SocialMediaSettingsTab />
      ) : activeSection === 'testimonials' ? (
        <TestimonialsSettingsTab />
      ) : (
        <NotificationsTab />
      )}
    </div>
  )
}