import { SettingsModalShell, type SettingsSection } from '@app/domains/shared'
import { useT } from '@app/i18n'
import {
  IconActivity as Activity,
  IconBell as Bell,
  IconEye as Eye,
  IconId as IdCard,
  IconDevices as MonitorSmartphone,
  IconPalette as Palette,
  IconShieldCheck as ShieldCheck,
  IconTerminal2 as Terminal,
  IconUser as UserRound,
} from '@tabler/icons-react'
import { useState } from 'react'
import type { Me } from '../model/user-settings'
import { AccountSection } from './sections/account-section'
import { AppearanceSection } from './sections/appearance-section'
import { NotificationsSection } from './sections/notifications-section'
import { PrivacySection } from './sections/privacy-section'
import { ProfileSection } from './sections/profile-section'
import { SecuritySection } from './sections/security-section'
import { SessionsSection } from './sections/sessions-section'
import { SshKeysSection } from './sections/ssh-keys-section'
import { StatusSection } from './sections/status-section'

export interface UserSettingsModalProps {
  open: boolean
  onClose: () => void
  me: Me
  /** Refetch `me` after edits that change identity/profile fields. */
  onMeChanged: () => void
}

/** Discord-style full-screen settings overlay covering every user API. */
export function UserSettingsModal({ open, onClose, me, onMeChanged }: UserSettingsModalProps) {
  const { t } = useT()
  const [section, setSection] = useState('account')

  // Built per render so the section list follows the active language.
  const sections: SettingsSection[] = [
    { id: 'account', label: t('settings.section.account'), icon: UserRound, group: t('settings.group.account') },
    { id: 'profile', label: t('settings.section.profile'), icon: IdCard, group: t('settings.group.account') },
    { id: 'security', label: t('settings.section.security'), icon: ShieldCheck, group: t('settings.group.account') },
    {
      id: 'sessions',
      label: t('settings.section.sessions'),
      icon: MonitorSmartphone,
      group: t('settings.group.account'),
    },
    { id: 'privacy', label: t('settings.section.privacy'), icon: Eye, group: t('settings.group.preferences') },
    {
      id: 'notifications',
      label: t('settings.section.notifications'),
      icon: Bell,
      group: t('settings.group.preferences'),
    },
    {
      id: 'appearance',
      label: t('settings.section.appearance'),
      icon: Palette,
      group: t('settings.group.preferences'),
    },
    { id: 'sshKeys', label: t('settings.section.sshKeys'), icon: Terminal, group: t('settings.group.advanced') },
    { id: 'status', label: t('settings.section.status'), icon: Activity, group: t('settings.group.advanced') },
  ]

  if (!open) return null

  return (
    <SettingsModalShell
      title={t('settings.title')}
      sections={sections}
      active={section}
      onSelect={setSection}
      onClose={onClose}
    >
      {section === 'account' ? <AccountSection me={me} onMeChanged={onMeChanged} /> : null}
      {section === 'profile' ? <ProfileSection me={me} onMeChanged={onMeChanged} /> : null}
      {section === 'security' ? <SecuritySection /> : null}
      {section === 'sessions' ? <SessionsSection /> : null}
      {section === 'privacy' ? <PrivacySection /> : null}
      {section === 'notifications' ? <NotificationsSection /> : null}
      {section === 'appearance' ? <AppearanceSection /> : null}
      {section === 'sshKeys' ? <SshKeysSection /> : null}
      {section === 'status' ? <StatusSection /> : null}
    </SettingsModalShell>
  )
}