'use client'

import { useEffect, useMemo, useState } from 'react'
import { useRouter } from 'next/navigation'
import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
import AdminShell from '../ui/AdminShell'

type AdminSetting = {
  key: string
  value: string | null
  isSet: boolean
  source: string
  sensitive: boolean
}

type ServiceOptions = {
  rootFolders: { id: number; path: string; label: string }[]
  qualityProfiles: { id: number; name: string; label: string }[]
}

const SECTION_LABELS: Record<string, string> = {
  jellyseerr: 'Jellyseerr',
  jellyfin: 'Jellyfin',
  artwork: 'Artwork',
  cache: 'Cache',
  sonarr: 'Sonarr',
  radarr: 'Radarr',
  prowlarr: 'Prowlarr',
  qbittorrent: 'qBittorrent',
  log: 'Activity log',
  requests: 'Request syncing',
  invites: 'Invites',
  password: 'Password rules',
  captcha: 'Captcha',
  smtp: 'Email (SMTP)',
  notify: 'Notifications',
  expiry: 'Account expiry',
}

const BOOL_SETTINGS = new Set([
  'jellyfin_sync_to_arr',
  'invites_enabled',
  'invites_require_captcha',
  'signup_allow_referrals',
  'password_require_upper',
  'password_require_lower',
  'password_require_number',
  'password_require_symbol',
  'password_reset_enabled',
  'smtp_tls',
  'smtp_starttls',
  'notify_email_enabled',
  'notify_discord_enabled',
  'notify_telegram_enabled',
  'notify_matrix_enabled',
  'notify_pushover_enabled',
  'notify_pushbullet_enabled',
  'notify_gotify_enabled',
  'notify_ntfy_enabled',
  'jellyseerr_sync_users',
])
const NUMBER_SETTINGS = new Set([
  'invite_default_profile_id',
  'referral_default_uses',
  'password_min_length',
  'smtp_port',
  'expiry_default_days',
  'expiry_warning_days',
  'expiry_check_interval_minutes',
  'jellyseerr_sync_interval_minutes',
])

const SECTION_DESCRIPTIONS: Record<string, string> = {
  jellyseerr: 'Connect the request system where users submit content.',
  jellyfin: 'Control Jellyfin login and availability checks.',
  artwork: 'Configure how posters and artwork are loaded.',
  cache: 'Manage saved request data and offline artwork.',
  sonarr: 'TV automation settings.',
  radarr: 'Movie automation settings.',
  prowlarr: 'Indexer search settings.',
  qbittorrent: 'Downloader connection settings.',
  requests: 'Sync and refresh cadence for requests.',
  log: 'Activity log for troubleshooting.',
  invites: 'Invite-only sign-ups and default rules.',
  password: 'Set global password rules and local reset settings.',
  captcha: 'Choose and configure captcha providers.',
  smtp: 'Email delivery settings for password resets and notices.',
  notify: 'Where system messages should be sent.',
  expiry: 'Handle account expiry and automated actions.',
}

const SETTINGS_SECTION_MAP: Record<string, string | null> = {
  jellyseerr: 'jellyseerr',
  jellyfin: 'jellyfin',
  artwork: 'artwork',
  sonarr: 'sonarr',
  radarr: 'radarr',
  prowlarr: 'prowlarr',
  qbittorrent: 'qbittorrent',
  requests: 'requests',
  invites: 'invites',
  password: 'password',
  captcha: 'captcha',
  smtp: 'smtp',
  notifications: 'notify',
  expiry: 'expiry',
  cache: null,
  logs: 'log',
  maintenance: null,
}

const labelFromKey = (key: string) =>
  key
    .replaceAll('_', ' ')
    .replace('base url', 'URL')
    .replace('api key', 'API key')
    .replace('quality profile id', 'Quality profile ID')
    .replace('root folder', 'Root folder')
    .replace('qbittorrent', 'qBittorrent')
    .replace('requests sync ttl minutes', 'Refresh saved requests if older than (minutes)')
    .replace('requests poll interval seconds', 'Background refresh check (seconds)')
    .replace('requests delta sync interval minutes', 'Check for new or updated requests every (minutes)')
    .replace('requests full sync time', 'Full refresh time (24h)')
    .replace('requests cleanup time', 'Clean up old history time (24h)')
    .replace('requests cleanup days', 'Remove history older than (days)')
    .replace('requests data source', 'Where requests are loaded from')
    .replace('jellyfin public url', 'Jellyfin public URL')
    .replace('jellyfin sync to arr', 'Sync Jellyfin to Sonarr/Radarr')
    .replace('artwork cache mode', 'Artwork cache mode')
    .replace('invites enabled', 'Allow invite sign-ups')
    .replace('invites require captcha', 'Require captcha for invite sign-ups')
    .replace('invite default profile id', 'Default invite profile')
    .replace('signup allow referrals', 'Allow users to create referral invites')
    .replace('referral default uses', 'Default referral invite uses')
    .replace('password min length', 'Minimum password length')
    .replace('password require upper', 'Require uppercase letters')
    .replace('password require lower', 'Require lowercase letters')
    .replace('password require number', 'Require numbers')
    .replace('password require symbol', 'Require symbols')
    .replace('password reset enabled', 'Allow password reset emails')
    .replace('captcha provider', 'Captcha provider')
    .replace('hcaptcha site key', 'hCaptcha site key')
    .replace('hcaptcha secret key', 'hCaptcha secret key')
    .replace('recaptcha site key', 'reCAPTCHA site key')
    .replace('recaptcha secret key', 'reCAPTCHA secret key')
    .replace('turnstile site key', 'Turnstile site key')
    .replace('turnstile secret key', 'Turnstile secret key')
    .replace('smtp host', 'SMTP host')
    .replace('smtp port', 'SMTP port')
    .replace('smtp user', 'SMTP username')
    .replace('smtp password', 'SMTP password')
    .replace('smtp from', 'SMTP from address')
    .replace('smtp tls', 'Use TLS (SMTPS)')
    .replace('smtp starttls', 'Use STARTTLS')
    .replace('notify email enabled', 'Send emails')
    .replace('notify discord enabled', 'Send Discord alerts')
    .replace('notify telegram enabled', 'Send Telegram alerts')
    .replace('notify matrix enabled', 'Send Matrix alerts')
    .replace('notify pushover enabled', 'Send Pushover alerts')
    .replace('notify pushbullet enabled', 'Send Pushbullet alerts')
    .replace('notify gotify enabled', 'Send Gotify alerts')
    .replace('notify ntfy enabled', 'Send ntfy alerts')
    .replace('telegram bot token', 'Telegram bot token')
    .replace('telegram chat id', 'Telegram chat ID')
    .replace('matrix homeserver', 'Matrix homeserver')
    .replace('matrix user', 'Matrix username')
    .replace('matrix password', 'Matrix password')
    .replace('matrix access token', 'Matrix access token')
    .replace('matrix room id', 'Matrix room ID')
    .replace('pushover token', 'Pushover app token')
    .replace('pushover user key', 'Pushover user key')
    .replace('pushbullet token', 'Pushbullet access token')
    .replace('gotify url', 'Gotify URL')
    .replace('gotify token', 'Gotify token')
    .replace('ntfy url', 'ntfy URL')
    .replace('ntfy topic', 'ntfy topic')
    .replace('expiry default days', 'Default account expiry (days)')
    .replace('expiry default action', 'Expiry action')
    .replace('expiry warning days', 'Warn users this many days before expiry')
    .replace('expiry check interval minutes', 'Expiry check interval (minutes)')
    .replace('jellyseerr sync users', 'Sync Jellyseerr users into Magent')
    .replace('jellyseerr sync interval minutes', 'Jellyseerr sync interval (minutes)')

type SettingsPageProps = {
  section: string
}

export default function SettingsPage({ section }: SettingsPageProps) {
  const router = useRouter()
  const [settings, setSettings] = useState<AdminSetting[]>([])
  const [formValues, setFormValues] = useState<Record<string, string>>({})
  const [status, setStatus] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)
  const [sonarrOptions, setSonarrOptions] = useState<ServiceOptions | null>(null)
  const [radarrOptions, setRadarrOptions] = useState<ServiceOptions | null>(null)
  const [sonarrError, setSonarrError] = useState<string | null>(null)
  const [radarrError, setRadarrError] = useState<string | null>(null)
  const [jellyfinSyncStatus, setJellyfinSyncStatus] = useState<string | null>(null)
  const [requestsSyncStatus, setRequestsSyncStatus] = useState<string | null>(null)
  const [artworkPrefetchStatus, setArtworkPrefetchStatus] = useState<string | null>(null)
  const [logsStatus, setLogsStatus] = useState<string | null>(null)
  const [logsLines, setLogsLines] = useState<string[]>([])
  const [logsCount, setLogsCount] = useState(200)
  const [cacheRows, setCacheRows] = useState<any[]>([])
  const [cacheCount, setCacheCount] = useState(50)
  const [cacheStatus, setCacheStatus] = useState<string | null>(null)
  const [requestsSync, setRequestsSync] = useState<any | null>(null)
  const [artworkPrefetch, setArtworkPrefetch] = useState<any | null>(null)
  const [maintenanceStatus, setMaintenanceStatus] = useState<string | null>(null)
  const [maintenanceBusy, setMaintenanceBusy] = useState(false)
  const [invites, setInvites] = useState<any[]>([])
  const [inviteProfiles, setInviteProfiles] = useState<any[]>([])
  const [inviteStatus, setInviteStatus] = useState<string | null>(null)
  const [inviteForm, setInviteForm] = useState({
    profile_id: '',
    max_uses: '1',
    require_captcha: false,
    allow_referrals: false,
  })
  const [profileForm, setProfileForm] = useState({
    name: '',
    description: '',
    max_uses: '',
    require_captcha: false,
    allow_referrals: false,
    referral_uses: '',
    user_expiry_action: 'disable',
  })
  const [inviteExpiry, setInviteExpiry] = useState({ unit: 'days', value: '7' })
  const [profileExpiry, setProfileExpiry] = useState({ unit: 'days', value: '' })
  const [profileUserExpiry, setProfileUserExpiry] = useState({ unit: 'days', value: '' })
  const [announcementSubject, setAnnouncementSubject] = useState('')
  const [announcementBody, setAnnouncementBody] = useState('')
  const [announcementChannels, setAnnouncementChannels] = useState<string[]>(['discord'])
  const [announcementStatus, setAnnouncementStatus] = useState<string | null>(null)

  const loadSettings = async () => {
    const baseUrl = getApiBase()
    const response = await authFetch(`${baseUrl}/admin/settings`)
    if (!response.ok) {
      if (response.status === 401) {
        clearToken()
        router.push('/login')
        return
      }
      if (response.status === 403) {
        router.push('/')
        return
      }
      throw new Error('Failed to load settings')
    }
    const data = await response.json()
    const fetched = Array.isArray(data?.settings) ? data.settings : []
    setSettings(fetched)
    const initialValues: Record<string, string> = {}
    for (const setting of fetched) {
      if (!setting.sensitive && setting.value) {
        if (BOOL_SETTINGS.has(setting.key)) {
          initialValues[setting.key] = String(setting.value).toLowerCase()
        } else {
          initialValues[setting.key] = setting.value
        }
      } else {
        initialValues[setting.key] = ''
      }
    }
    setFormValues(initialValues)
    setStatus(null)
  }

  const loadArtworkPrefetchStatus = async () => {
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/requests/artwork/status`)
      if (!response.ok) {
        return
      }
      const data = await response.json()
      setArtworkPrefetch(data?.prefetch ?? null)
    } catch (err) {
      console.error(err)
    }
  }


  const loadOptions = async (service: 'sonarr' | 'radarr') => {
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/${service}/options`)
      if (!response.ok) {
        throw new Error('Options unavailable')
      }
      const data = await response.json()
      if (service === 'sonarr') {
        setSonarrOptions({
          rootFolders: Array.isArray(data?.rootFolders) ? data.rootFolders : [],
          qualityProfiles: Array.isArray(data?.qualityProfiles) ? data.qualityProfiles : [],
        })
        setSonarrError(null)
      } else {
        setRadarrOptions({
          rootFolders: Array.isArray(data?.rootFolders) ? data.rootFolders : [],
          qualityProfiles: Array.isArray(data?.qualityProfiles) ? data.qualityProfiles : [],
        })
        setRadarrError(null)
      }
    } catch (err) {
      console.error(err)
      if (service === 'sonarr') {
        setSonarrError('Could not load Sonarr options.')
      } else {
        setRadarrError('Could not load Radarr options.')
      }
    }
  }

  useEffect(() => {
    const load = async () => {
      if (!getToken()) {
        router.push('/login')
        return
      }
      try {
        await loadSettings()
        if (section === 'artwork') {
          await loadArtworkPrefetchStatus()
        }
        if (section === 'invites') {
          await loadInviteProfiles()
          await loadInvites()
        }
      } catch (err) {
        console.error(err)
        setStatus('Could not load admin settings.')
      } finally {
        setLoading(false)
      }
    }

    load()
    if (section === 'sonarr') {
      void loadOptions('sonarr')
    }
    if (section === 'radarr') {
      void loadOptions('radarr')
    }
  }, [router, section])

  const groupedSettings = useMemo(() => {
    const groups: Record<string, AdminSetting[]> = {}
    for (const setting of settings) {
      const section = setting.key.split('_')[0] ?? 'other'
      if (!groups[section]) groups[section] = []
      groups[section].push(setting)
    }
    return groups
  }, [settings])

  const settingsSection = SETTINGS_SECTION_MAP[section] ?? null
  const visibleSections = settingsSection ? [settingsSection] : []
  const isCacheSection = section === 'cache'
  const cacheSettingKeys = new Set([
    'requests_sync_ttl_minutes',
    'requests_data_source',
    'artwork_cache_mode',
  ])
  const cacheSettings = settings.filter((setting) => cacheSettingKeys.has(setting.key))
  const settingsSections = isCacheSection
    ? [{ key: 'cache', title: 'Cache settings', items: cacheSettings }]
    : visibleSections.map((sectionKey) => ({
        key: sectionKey,
        title: SECTION_LABELS[sectionKey] ?? sectionKey,
        items:
          sectionKey === 'requests' || sectionKey === 'artwork'
            ? (groupedSettings[sectionKey] ?? []).filter(
                (setting) => !cacheSettingKeys.has(setting.key)
              )
            : groupedSettings[sectionKey] ?? [],
      }))
  const showLogs = section === 'logs'
  const showMaintenance = section === 'maintenance'
  const showRequestsExtras = section === 'requests'
  const showArtworkExtras = section === 'artwork'
  const showCacheExtras = section === 'cache'
  const showInviteExtras = section === 'invites'
  const showNotificationExtras = section === 'notifications'
  const shouldRenderSection = (sectionGroup: { key: string; items?: AdminSetting[] }) => {
    if (sectionGroup.items && sectionGroup.items.length > 0) return true
    if (showArtworkExtras && sectionGroup.key === 'artwork') return true
    if (showCacheExtras && sectionGroup.key === 'cache') return true
    if (showRequestsExtras && sectionGroup.key === 'requests') return true
    return false
  }

  const settingDescriptions: Record<string, string> = {
    jellyseerr_base_url: 'Base URL for your Jellyseerr server.',
    jellyseerr_api_key: 'API key used to read requests and status.',
    jellyfin_base_url: 'Local Jellyfin server URL for logins and lookups.',
    jellyfin_api_key: 'Admin API key for syncing users and availability.',
    jellyfin_public_url: 'Public Jellyfin URL used for the “Open in Jellyfin” button.',
    jellyfin_sync_to_arr: 'Auto-add items to Sonarr/Radarr when they already exist in Jellyfin.',
    artwork_cache_mode: 'Choose whether posters are cached locally or loaded from the web.',
    sonarr_base_url: 'Sonarr server URL for TV tracking.',
    sonarr_api_key: 'API key for Sonarr.',
    sonarr_quality_profile_id: 'Quality profile used when adding TV shows.',
    sonarr_root_folder: 'Root folder where Sonarr stores TV shows.',
    radarr_base_url: 'Radarr server URL for movies.',
    radarr_api_key: 'API key for Radarr.',
    radarr_quality_profile_id: 'Quality profile used when adding movies.',
    radarr_root_folder: 'Root folder where Radarr stores movies.',
    prowlarr_base_url: 'Prowlarr server URL for indexer searches.',
    prowlarr_api_key: 'API key for Prowlarr.',
    qbittorrent_base_url: 'qBittorrent server URL for download status.',
    qbittorrent_username: 'qBittorrent login username.',
    qbittorrent_password: 'qBittorrent login password.',
    requests_sync_ttl_minutes: 'How long saved requests stay fresh before a refresh is needed.',
    requests_poll_interval_seconds: 'How often the background checker runs.',
    requests_delta_sync_interval_minutes: 'How often we check for new or updated requests.',
    requests_full_sync_time: 'Daily time to refresh the full request list.',
    requests_cleanup_time: 'Daily time to trim old history.',
    requests_cleanup_days: 'History older than this is removed during cleanup.',
    requests_data_source: 'Pick where Magent should read requests from.',
    log_level: 'How much detail is written to the activity log.',
    log_file: 'Where the activity log is stored.',
    invites_enabled: 'Allow new users to register with invite links.',
    invites_require_captcha: 'Require a captcha on invite sign-up.',
    invite_default_profile_id: 'Default invite profile applied when creating invites.',
    signup_allow_referrals: 'Let users create referral invites for friends/family.',
    referral_default_uses: 'Default number of uses for referral invites.',
    password_min_length: 'Minimum length required for passwords.',
    password_require_upper: 'Require uppercase letters in passwords.',
    password_require_lower: 'Require lowercase letters in passwords.',
    password_require_number: 'Require numbers in passwords.',
    password_require_symbol: 'Require symbols in passwords.',
    password_reset_enabled: 'Allow local users to request password reset emails.',
    captcha_provider: 'Choose which captcha provider to use for sign-up.',
    hcaptcha_site_key: 'Public hCaptcha site key.',
    hcaptcha_secret_key: 'Secret hCaptcha key.',
    recaptcha_site_key: 'Public reCAPTCHA site key.',
    recaptcha_secret_key: 'Secret reCAPTCHA key.',
    turnstile_site_key: 'Public Turnstile site key.',
    turnstile_secret_key: 'Secret Turnstile key.',
    smtp_host: 'SMTP server hostname.',
    smtp_port: 'SMTP server port.',
    smtp_user: 'SMTP username (optional).',
    smtp_password: 'SMTP password (optional).',
    smtp_from: 'Default "from" address for system emails.',
    smtp_tls: 'Use TLS for SMTP (SMTPS).',
    smtp_starttls: 'Use STARTTLS for SMTP.',
    notify_email_enabled: 'Send notices by email.',
    notify_discord_enabled: 'Send notices to Discord.',
    notify_telegram_enabled: 'Send notices to Telegram.',
    notify_matrix_enabled: 'Send notices to Matrix.',
    notify_pushover_enabled: 'Send notices to Pushover.',
    notify_pushbullet_enabled: 'Send notices to Pushbullet.',
    notify_gotify_enabled: 'Send notices to Gotify.',
    notify_ntfy_enabled: 'Send notices to ntfy.',
    telegram_bot_token: 'Telegram bot token for sending notices.',
    telegram_chat_id: 'Default Telegram chat ID.',
    matrix_homeserver: 'Matrix server base URL.',
    matrix_user: 'Matrix bot username.',
    matrix_password: 'Matrix bot password.',
    matrix_access_token: 'Matrix access token.',
    matrix_room_id: 'Matrix room ID for announcements.',
    pushover_token: 'Pushover application token.',
    pushover_user_key: 'Pushover user key.',
    pushbullet_token: 'Pushbullet access token.',
    gotify_url: 'Gotify server URL.',
    gotify_token: 'Gotify app token.',
    ntfy_url: 'ntfy server URL.',
    ntfy_topic: 'ntfy topic for notifications.',
    expiry_default_days: 'Default number of days before accounts expire.',
    expiry_default_action: 'Action to take when an account expires.',
    expiry_warning_days: 'How many days before expiry to warn the user.',
    expiry_check_interval_minutes: 'How often expiry checks run.',
    jellyseerr_sync_users: 'Sync Jellyseerr users into Magent.',
    jellyseerr_sync_interval_minutes: 'How often Jellyseerr user sync runs.',
  }

  const buildSelectOptions = (
    currentValue: string,
    options: { id: number; label: string; path?: string }[],
    includePath: boolean
  ) => {
    const optionValues = new Set(options.map((option) => String(option.id)))
    const list = options.map((option) => (
      <option key={option.id} value={String(option.id)}>
        {includePath && option.path ? option.path : option.label}
      </option>
    ))
    if (currentValue && !optionValues.has(currentValue)) {
      list.unshift(
        <option key="custom" value={currentValue}>
          Custom: {currentValue}
        </option>
      )
    }
    return list
  }

  const durationOptions = {
    minutes: Array.from({ length: 60 }, (_, i) => String(i + 1)),
    hours: Array.from({ length: 24 }, (_, i) => String(i + 1)),
    days: Array.from({ length: 365 }, (_, i) => String(i + 1)),
  }

  const toDays = (choice: { unit: string; value: string }) => {
    if (!choice || choice.unit === 'unlimited') return null
    const amount = Number(choice.value)
    if (!amount || amount <= 0) return null
    if (choice.unit === 'minutes') return amount / 1440
    if (choice.unit === 'hours') return amount / 24
    if (choice.unit === 'months') return amount * 30
    return amount
  }

  const renderDurationControl = (
    label: string,
    choice: { unit: string; value: string },
    setChoice: (next: { unit: string; value: string }) => void
  ) => (
    <label>
      {label}
      <div className="duration-row">
        <input
          type="number"
          min={1}
          placeholder="Amount"
          value={choice.value}
          onChange={(event) =>
            setChoice({
              unit: choice.unit,
              value: event.target.value,
            })
          }
          disabled={choice.unit === 'unlimited'}
        />
        <select
          value={choice.unit}
          onChange={(event) =>
            setChoice({
              unit: event.target.value,
              value: event.target.value === 'unlimited' ? '' : choice.value,
            })
          }
        >
          <option value="minutes">Minutes</option>
          <option value="hours">Hours</option>
          <option value="days">Days</option>
          <option value="months">Months</option>
          <option value="unlimited">Unlimited</option>
        </select>
      </div>
    </label>
  )

  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setStatus(null)
    const payload: Record<string, string> = {}
    const formData = new FormData(event.currentTarget)
    for (const setting of settings) {
      const rawValue = formData.get(setting.key)
      if (typeof rawValue !== 'string') {
        continue
      }
      const value = rawValue.trim()
      if (value === '') {
        continue
      }
      payload[setting.key] = value
    }
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/settings`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Update failed')
      }
      setStatus('Settings saved. New values take effect immediately.')
      await loadSettings()
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not save settings.'
      setStatus(message)
    }
  }

  const syncJellyfinUsers = async () => {
    setJellyfinSyncStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/jellyfin/users/sync`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Sync failed')
      }
      const data = await response.json()
      setJellyfinSyncStatus(`Imported ${data?.imported ?? 0} users from Jellyfin.`)
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not import Jellyfin users.'
      setJellyfinSyncStatus(message)
    }
  }

  const syncRequests = async () => {
    setRequestsSyncStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/requests/sync`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Sync failed')
      }
      const data = await response.json()
      setRequestsSync(data?.sync ?? null)
      setRequestsSyncStatus('Sync started.')
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not sync requests.'
      setRequestsSyncStatus(message)
    }
  }

  const syncRequestsDelta = async () => {
    setRequestsSyncStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/requests/sync/delta`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Delta sync failed')
      }
      const data = await response.json()
      setRequestsSync(data?.sync ?? null)
      setRequestsSyncStatus('Delta sync started.')
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not run delta sync.'
      setRequestsSyncStatus(message)
    }
  }

  const loadInviteProfiles = async () => {
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/invite-profiles`)
      if (!response.ok) {
        throw new Error('Profiles unavailable')
      }
      const data = await response.json()
      setInviteProfiles(Array.isArray(data?.profiles) ? data.profiles : [])
    } catch (err) {
      console.error(err)
      setInviteProfiles([])
    }
  }

  const loadInvites = async () => {
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/invites`)
      if (!response.ok) {
        throw new Error('Invites unavailable')
      }
      const data = await response.json()
      setInvites(Array.isArray(data?.invites) ? data.invites : [])
    } catch (err) {
      console.error(err)
      setInvites([])
    }
  }

  const createInviteProfile = async () => {
    setInviteStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/invite-profiles`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...profileForm,
          max_uses: profileForm.max_uses ? Number(profileForm.max_uses) : null,
          expires_in_days: toDays(profileExpiry),
          referral_uses: profileForm.referral_uses ? Number(profileForm.referral_uses) : null,
          user_expiry_days: toDays(profileUserExpiry),
        }),
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Profile creation failed')
      }
      setProfileForm({
        name: '',
        description: '',
        max_uses: '',
        require_captcha: false,
        allow_referrals: false,
        referral_uses: '',
        user_expiry_action: 'disable',
      })
      setProfileExpiry({ unit: 'days', value: '' })
      setProfileUserExpiry({ unit: 'days', value: '' })
      setInviteStatus('Invite profile created.')
      await loadInviteProfiles()
    } catch (err) {
      console.error(err)
      setInviteStatus('Could not create invite profile.')
    }
  }

  const createInviteCode = async () => {
    setInviteStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/invites`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          profile_id: inviteForm.profile_id ? Number(inviteForm.profile_id) : null,
          max_uses: inviteForm.max_uses ? Number(inviteForm.max_uses) : null,
          expires_in_days: toDays(inviteExpiry),
          require_captcha: inviteForm.require_captcha,
          allow_referrals: inviteForm.allow_referrals,
        }),
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Invite creation failed')
      }
      setInviteStatus('Invite created.')
      await loadInvites()
    } catch (err) {
      console.error(err)
      setInviteStatus('Could not create invite.')
    }
  }

  const disableInviteCode = async (code: string) => {
    setInviteStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/invites/${encodeURIComponent(code)}/disable`, {
        method: 'POST',
      })
      if (!response.ok) {
        throw new Error('Disable failed')
      }
      setInviteStatus(`Invite ${code} disabled.`)
      await loadInvites()
    } catch (err) {
      console.error(err)
      setInviteStatus('Could not disable invite.')
    }
  }

  const deleteInviteCode = async (code: string) => {
    setInviteStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(
        `${baseUrl}/admin/invites/${encodeURIComponent(code)}`,
        { method: 'DELETE' }
      )
      if (!response.ok) {
        throw new Error('Delete failed')
      }
      setInviteStatus(`Invite ${code} deleted.`)
      await loadInvites()
    } catch (err) {
      console.error(err)
      setInviteStatus('Could not delete invite.')
    }
  }

  const toggleAnnouncementChannel = (channel: string) => {
    setAnnouncementChannels((current) =>
      current.includes(channel) ? current.filter((item) => item !== channel) : [...current, channel]
    )
  }

  const sendAnnouncement = async () => {
    setAnnouncementStatus(null)
    if (!announcementSubject || !announcementBody) {
      setAnnouncementStatus('Enter a subject and a message.')
      return
    }
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/announcements`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          subject: announcementSubject,
          body: announcementBody,
          channels: announcementChannels,
        }),
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Announcement failed')
      }
      setAnnouncementStatus('Announcement sent.')
      setAnnouncementBody('')
      setAnnouncementSubject('')
    } catch (err) {
      console.error(err)
      setAnnouncementStatus('Could not send the announcement.')
    }
  }

  const prefetchArtwork = async () => {
    setArtworkPrefetchStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/requests/artwork/prefetch`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Artwork prefetch failed')
      }
      const data = await response.json()
      setArtworkPrefetch(data?.prefetch ?? null)
      setArtworkPrefetchStatus('Artwork caching started.')
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not cache artwork.'
      setArtworkPrefetchStatus(message)
    }
  }

  useEffect(() => {
    if (!artworkPrefetch || artworkPrefetch.status !== 'running') {
      return
    }
    let active = true
    const timer = setInterval(async () => {
      try {
        const baseUrl = getApiBase()
        const response = await authFetch(`${baseUrl}/admin/requests/artwork/status`)
        if (!response.ok) {
          return
        }
        const data = await response.json()
        if (!active) return
        setArtworkPrefetch(data?.prefetch ?? null)
        if (data?.prefetch?.status && data.prefetch.status !== 'running') {
          setArtworkPrefetchStatus(data.prefetch.message || 'Artwork caching complete.')
        }
      } catch (err) {
        console.error(err)
      }
    }, 2000)
    return () => {
      active = false
      clearInterval(timer)
    }
  }, [artworkPrefetch?.status])

  useEffect(() => {
    if (!artworkPrefetch || artworkPrefetch.status === 'running') {
      return
    }
    const timer = setTimeout(() => {
      setArtworkPrefetch(null)
    }, 5000)
    return () => clearTimeout(timer)
  }, [artworkPrefetch?.status])

  useEffect(() => {
    if (!requestsSync || requestsSync.status !== 'running') {
      return
    }
    let active = true
    const timer = setInterval(async () => {
      try {
        const baseUrl = getApiBase()
        const response = await authFetch(`${baseUrl}/admin/requests/sync/status`)
        if (!response.ok) {
          return
        }
        const data = await response.json()
        if (!active) return
        setRequestsSync(data?.sync ?? null)
        if (data?.sync?.status && data.sync.status !== 'running') {
          setRequestsSyncStatus(data.sync.message || 'Sync complete.')
        }
      } catch (err) {
        console.error(err)
      }
    }, 2000)
    return () => {
      active = false
      clearInterval(timer)
    }
  }, [requestsSync?.status])

  useEffect(() => {
    if (!requestsSync || requestsSync.status === 'running') {
      return
    }
    const timer = setTimeout(() => {
      setRequestsSync(null)
    }, 5000)
    return () => clearTimeout(timer)
  }, [requestsSync?.status])

  const loadLogs = async () => {
    setLogsStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(
        `${baseUrl}/admin/logs?lines=${encodeURIComponent(String(logsCount))}`
      )
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Log fetch failed')
      }
      const data = await response.json()
      if (Array.isArray(data?.lines)) {
        setLogsLines(data.lines)
      } else {
        setLogsLines([])
      }
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not load logs.'
      setLogsStatus(message)
    }
  }

  useEffect(() => {
    if (!showLogs) {
      return
    }
    void loadLogs()
    const timer = setInterval(() => {
      void loadLogs()
    }, 5000)
    return () => clearInterval(timer)
  }, [logsCount, showLogs])

  const loadCache = async () => {
    setCacheStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(
        `${baseUrl}/admin/requests/cache?limit=${encodeURIComponent(String(cacheCount))}`
      )
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Cache fetch failed')
      }
      const data = await response.json()
      if (Array.isArray(data?.rows)) {
        setCacheRows(data.rows)
      } else {
        setCacheRows([])
      }
    } catch (err) {
      console.error(err)
      const message =
        err instanceof Error && err.message
          ? err.message.replace(/^\\{\"detail\":\"|\"\\}$/g, '')
          : 'Could not load cache.'
      setCacheStatus(message)
    }
  }

  const runRepair = async () => {
    setMaintenanceStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/maintenance/repair`, { method: 'POST' })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Repair failed')
      }
      const data = await response.json()
      setMaintenanceStatus(`Integrity check: ${data?.integrity ?? 'unknown'}. Vacuum complete.`)
    } catch (err) {
      console.error(err)
      setMaintenanceStatus('Database repair failed.')
    }
  }

  const runCleanup = async () => {
    setMaintenanceStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/maintenance/cleanup?days=90`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Cleanup failed')
      }
      const data = await response.json()
      setMaintenanceStatus(
        `Cleaned history older than ${data?.days ?? 90} days.`
      )
    } catch (err) {
      console.error(err)
      setMaintenanceStatus('Cleanup failed.')
    }
  }

  const runFlushAndResync = async () => {
    setMaintenanceStatus(null)
    setMaintenanceBusy(true)
    if (typeof window !== 'undefined') {
      const ok = window.confirm(
        'This will clear cached requests and history, then re-sync from Jellyseerr. Continue?'
      )
      if (!ok) {
        setMaintenanceBusy(false)
        return
      }
    }
    try {
      const baseUrl = getApiBase()
      setMaintenanceStatus('Flushing database...')
      const flushResponse = await authFetch(`${baseUrl}/admin/maintenance/flush`, {
        method: 'POST',
      })
      if (!flushResponse.ok) {
        const text = await flushResponse.text()
        throw new Error(text || 'Flush failed')
      }
      setMaintenanceStatus('Database flushed. Starting re-sync...')
      await syncRequests()
      setMaintenanceStatus('Database flushed. Re-sync running now.')
    } catch (err) {
      console.error(err)
      setMaintenanceStatus('Flush + resync failed.')
    } finally {
      setMaintenanceBusy(false)
    }
  }

  const clearLogFile = async () => {
    setMaintenanceStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/maintenance/logs/clear`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Clear logs failed')
      }
      setMaintenanceStatus('Log file cleared.')
      setLogsLines([])
    } catch (err) {
      console.error(err)
      setMaintenanceStatus('Clearing logs failed.')
    }
  }

  if (loading) {
    return <main className="card">Loading admin settings...</main>
  }

  return (
    <AdminShell
      title={SECTION_LABELS[section] ?? 'Settings'}
      subtitle={SECTION_DESCRIPTIONS[section] ?? 'Manage settings.'}
      actions={
        <button type="button" onClick={() => router.push('/admin')}>
          Back to settings
        </button>
      }
    >
      {settingsSections.length > 0 ? (
      <form onSubmit={submit} className="admin-form">
        {settingsSections
          .filter(shouldRenderSection)
          .map((sectionGroup) => (
          <section key={sectionGroup.key} className="admin-section">
            <div className="section-header">
              <h2>{sectionGroup.title}</h2>
              {sectionGroup.key === 'sonarr' && (
                <button type="button" onClick={() => loadOptions('sonarr')}>
                  Refresh Sonarr options
                </button>
              )}
              {sectionGroup.key === 'radarr' && (
                <button type="button" onClick={() => loadOptions('radarr')}>
                  Refresh Radarr options
                </button>
              )}
              {sectionGroup.key === 'jellyfin' && (
                <button type="button" onClick={syncJellyfinUsers}>
                  Import Jellyfin users
                </button>
              )}
              {(showArtworkExtras && sectionGroup.key === 'artwork') ||
              (showCacheExtras && sectionGroup.key === 'cache') ? (
                <button type="button" onClick={prefetchArtwork}>
                  Cache all artwork now
                </button>
              ) : null}
              {showRequestsExtras && sectionGroup.key === 'requests' && (
                <div className="sync-actions">
                  <button type="button" onClick={syncRequests}>
                    Full refresh
                  </button>
                  <button type="button" className="ghost-button" onClick={syncRequestsDelta}>
                    Quick refresh (new changes)
                  </button>
                </div>
              )}
            </div>
            {SECTION_DESCRIPTIONS[sectionGroup.key] && (
              <p className="section-subtitle">{SECTION_DESCRIPTIONS[sectionGroup.key]}</p>
            )}
            {sectionGroup.key === 'sonarr' && sonarrError && (
              <div className="error-banner">{sonarrError}</div>
            )}
            {sectionGroup.key === 'radarr' && radarrError && (
              <div className="error-banner">{radarrError}</div>
            )}
            {sectionGroup.key === 'jellyfin' && jellyfinSyncStatus && (
              <div className="status-banner">{jellyfinSyncStatus}</div>
            )}
            {((showArtworkExtras && sectionGroup.key === 'artwork') ||
              (showCacheExtras && sectionGroup.key === 'cache')) &&
              artworkPrefetchStatus && (
              <div className="status-banner">{artworkPrefetchStatus}</div>
            )}
            {showRequestsExtras && sectionGroup.key === 'requests' && requestsSyncStatus && (
              <div className="status-banner">{requestsSyncStatus}</div>
            )}
            {((showArtworkExtras && sectionGroup.key === 'artwork') ||
              (showCacheExtras && sectionGroup.key === 'cache')) &&
              artworkPrefetch && (
              <div className="sync-progress">
                <div className="sync-meta">
                  <span>Status: {artworkPrefetch.status}</span>
                  <span>
                    {artworkPrefetch.processed ?? 0}
                    {artworkPrefetch.total ? ` / ${artworkPrefetch.total}` : ''} cached
                  </span>
                </div>
                <div
                  className={`progress ${artworkPrefetch.total ? '' : 'progress-indeterminate'} ${
                    artworkPrefetch.status === 'completed' ? 'progress-complete' : ''
                  }`}
                >
                  <div
                    className="progress-fill"
                    style={{
                      width:
                        artworkPrefetch.status === 'completed'
                          ? '100%'
                          : artworkPrefetch.total
                            ? `${Math.min(
                                100,
                                Math.round((artworkPrefetch.processed / artworkPrefetch.total) * 100)
                              )}%`
                            : '30%',
                    }}
                  />
                </div>
                {artworkPrefetch.message && <div className="meta">{artworkPrefetch.message}</div>}
              </div>
            )}
            {showRequestsExtras && sectionGroup.key === 'requests' && requestsSync && (
              <div className="sync-progress">
                <div className="sync-meta">
                  <span>Status: {requestsSync.status}</span>
                  <span>
                    {requestsSync.stored ?? 0}
                    {requestsSync.total ? ` / ${requestsSync.total}` : ''} synced
                  </span>
                </div>
                <div
                  className={`progress ${requestsSync.total ? '' : 'progress-indeterminate'} ${
                    requestsSync.status === 'completed' ? 'progress-complete' : ''
                  }`}
                >
                  <div
                    className="progress-fill"
                    style={{
                      width:
                        requestsSync.status === 'completed'
                          ? '100%'
                          : requestsSync.total
                            ? `${Math.min(
                                100,
                                Math.round((requestsSync.stored / requestsSync.total) * 100)
                              )}%`
                            : '30%',
                    }}
                  />
                </div>
                {requestsSync.message && <div className="meta">{requestsSync.message}</div>}
              </div>
            )}
            <div className="admin-grid">
              {sectionGroup.items.map((setting) => {
                const value = formValues[setting.key] ?? ''
                const helperText = settingDescriptions[setting.key]
                const isSonarrProfile = setting.key === 'sonarr_quality_profile_id'
                const isSonarrRoot = setting.key === 'sonarr_root_folder'
                const isRadarrProfile = setting.key === 'radarr_quality_profile_id'
                const isRadarrRoot = setting.key === 'radarr_root_folder'
                const isBoolSetting = BOOL_SETTINGS.has(setting.key)
                if (isBoolSetting) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value || 'false'}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="true">Enabled</option>
                        <option value="false">Disabled</option>
                      </select>
                    </label>
                  )
                }
                if (isSonarrProfile && sonarrOptions) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                    <span className="meta">
                      {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                      {setting.sensitive && setting.isSet ? ' • stored' : ''}
                    </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="">Select a quality profile</option>
                        {buildSelectOptions(value, sonarrOptions.qualityProfiles, false)}
                      </select>
                    </label>
                  )
                }
                if (isSonarrRoot && sonarrOptions) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="">Select a root folder</option>
                        {buildSelectOptions(value, sonarrOptions.rootFolders, true)}
                      </select>
                    </label>
                  )
                }
                if (isRadarrProfile && radarrOptions) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="">Select a quality profile</option>
                        {buildSelectOptions(value, radarrOptions.qualityProfiles, false)}
                      </select>
                    </label>
                  )
                }
                if (isRadarrRoot && radarrOptions) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="">Select a root folder</option>
                        {buildSelectOptions(value, radarrOptions.rootFolders, true)}
                      </select>
                    </label>
                  )
                }
                if (setting.key === 'log_level') {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="DEBUG">DEBUG</option>
                        <option value="INFO">INFO</option>
                        <option value="WARNING">WARNING</option>
                        <option value="ERROR">ERROR</option>
                      </select>
                    </label>
                  )
                }
                if (setting.key === 'artwork_cache_mode') {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value || 'remote'}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="remote">Pull from the internet</option>
                        <option value="cache">Cache locally</option>
                      </select>
                    </label>
                  )
                }
                if (
                  setting.key === 'requests_full_sync_time' ||
                  setting.key === 'requests_cleanup_time'
                ) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <input
                        name={setting.key}
                        type="time"
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      />
                    </label>
                  )
                }
                if (
                  setting.key === 'requests_delta_sync_interval_minutes' ||
                  setting.key === 'requests_cleanup_days'
                ) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <input
                        name={setting.key}
                        type="number"
                        min={1}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      />
                    </label>
                  )
                }
                if (setting.key === 'requests_data_source') {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value || 'prefer_cache'}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="always_js">Always use Jellyseerr (slower)</option>
                        <option value="prefer_cache">Use saved requests first (faster)</option>
                      </select>
                    </label>
                  )
                }
                if (setting.key === 'captcha_provider') {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value || 'none'}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="none">No captcha</option>
                        <option value="hcaptcha">hCaptcha</option>
                        <option value="recaptcha">reCAPTCHA</option>
                        <option value="turnstile">Cloudflare Turnstile</option>
                      </select>
                    </label>
                  )
                }
                if (setting.key === 'expiry_default_action') {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <select
                        name={setting.key}
                        value={value || 'disable'}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      >
                        <option value="disable">Disable account</option>
                        <option value="delete">Delete account</option>
                        <option value="disable_then_delete">Disable, then delete</option>
                      </select>
                    </label>
                  )
                }
                if (NUMBER_SETTINGS.has(setting.key)) {
                  return (
                    <label key={setting.key} data-helper={helperText || undefined}>
                      <span className="label-row">
                        <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                        </span>
                      </span>
                      <input
                        name={setting.key}
                        type="number"
                        min={0}
                        value={value}
                        onChange={(event) =>
                          setFormValues((current) => ({
                            ...current,
                            [setting.key]: event.target.value,
                          }))
                        }
                      />
                    </label>
                  )
                }
                return (
                  <label key={setting.key} data-helper={helperText || undefined}>
                    <span className="label-row">
                      <span>{labelFromKey(setting.key)}</span>
                        <span className="meta">
                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
                          {setting.sensitive && setting.isSet ? ' • stored' : ''}
                        </span>
                    </span>
                    <input
                      name={setting.key}
                      type={setting.sensitive ? 'password' : 'text'}
                      placeholder={
                        setting.sensitive && setting.isSet ? 'Configured (enter to replace)' : ''
                      }
                      value={value}
                      onChange={(event) =>
                        setFormValues((current) => ({
                          ...current,
                          [setting.key]: event.target.value,
                        }))
                      }
                    />
                  </label>
                )
              })}
            </div>
          </section>
        ))}
        {status && <div className="status-banner">{status}</div>}
        <div className="admin-actions">
          <button type="submit">Save changes</button>
        </div>
      </form>
      ) : (
      <div className="status-banner">
        No settings to show here yet. Try the Cache page for artwork and saved-request controls.
      </div>
      )}
      {showLogs && (
      <section className="admin-section" id="logs">
        <div className="section-header">
          <h2>Activity log</h2>
          <div className="log-actions">
            <label className="recent-filter">
              <span>Lines to show</span>
              <select
                value={logsCount}
                onChange={(event) => setLogsCount(Number(event.target.value))}
              >
                <option value={100}>100</option>
                <option value={200}>200</option>
                <option value={500}>500</option>
                <option value={1000}>1000</option>
              </select>
            </label>
            <button type="button" onClick={loadLogs}>
              Refresh log
            </button>
          </div>
        </div>
        {logsStatus && <div className="error-banner">{logsStatus}</div>}
        <pre className="log-viewer">{logsLines.join('')}</pre>
      </section>
      )}
      {showCacheExtras && (
      <section className="admin-section" id="cache">
        <div className="section-header">
          <h2>Saved requests (cache)</h2>
          <div className="log-actions">
            <label className="recent-filter">
              <span>Rows to show</span>
              <select
                value={cacheCount}
                onChange={(event) => setCacheCount(Number(event.target.value))}
              >
                <option value={25}>25</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
                <option value={200}>200</option>
              </select>
            </label>
            <button type="button" onClick={loadCache}>
              Load saved requests
            </button>
          </div>
        </div>
        {cacheStatus && <div className="error-banner">{cacheStatus}</div>}
        <div className="cache-table">
          <div className="cache-row cache-head">
            <span>Request</span>
            <span>Title</span>
            <span>Type</span>
            <span>Status</span>
            <span>Last update</span>
          </div>
          {cacheRows.length === 0 ? (
            <div className="meta">No saved requests loaded yet.</div>
          ) : (
            cacheRows.map((row) => (
              <div key={row.request_id} className="cache-row">
                <span>#{row.request_id}</span>
                <span>{row.title || 'Untitled'}</span>
                <span>{row.media_type || 'unknown'}</span>
                <span>{row.status ?? 'n/a'}</span>
                <span>{row.updated_at || row.created_at || 'n/a'}</span>
              </div>
            ))
          )}
        </div>
      </section>
      )}
      {showMaintenance && (
      <section className="admin-section" id="maintenance">
        <div className="section-header">
          <h2>Maintenance</h2>
        </div>
        <div className="status-banner">
          Emergency tools. Use with care: flush will clear saved requests and history.
        </div>
        {maintenanceStatus && <div className="status-banner">{maintenanceStatus}</div>}
        <div className="maintenance-grid">
          <button type="button" onClick={runRepair}>
            Repair database
          </button>
          <button type="button" className="ghost-button" onClick={runCleanup}>
            Clean history (older than 90 days)
          </button>
          <button type="button" className="ghost-button" onClick={clearLogFile}>
            Clear activity log
          </button>
          <button
            type="button"
            className="danger-button"
            onClick={runFlushAndResync}
            disabled={maintenanceBusy}
          >
            Flush database + resync
          </button>
        </div>
      </section>
      )}
      {showRequestsExtras && (
      <section className="admin-section" id="schedules">
        <div className="section-header">
          <h2>Scheduled tasks</h2>
        </div>
        <div className="status-banner">
          Automated jobs keep requests and housekeeping up to date.
        </div>
        <div className="schedule-grid">
          <div className="schedule-card">
            <h3>Quick request check</h3>
            <p>
              Every {formValues.requests_delta_sync_interval_minutes || '5'} minutes, checks for
              new or updated requests.
            </p>
          </div>
          <div className="schedule-card">
            <h3>Full daily refresh</h3>
            <p>
              Every day at {formValues.requests_full_sync_time || '00:00'}, refreshes the entire
              requests list.
            </p>
          </div>
          <div className="schedule-card">
            <h3>History cleanup</h3>
            <p>
              Every day at {formValues.requests_cleanup_time || '02:00'}, removes history older
              than {formValues.requests_cleanup_days || '90'} days.
            </p>
          </div>
        </div>
      </section>
      )}
      {showInviteExtras && (
      <section className="admin-section" id="invites">
        <div className="section-header">
          <h2>Invites</h2>
        </div>
        <div className="status-banner">
          Create profiles for common rules, then issue invites in seconds.
        </div>
        {inviteStatus && <div className="status-banner">{inviteStatus}</div>}
        <div className="invite-stack">
          <div className="summary-card invite-card">
            <h3>Create a profile</h3>
            <p className="meta">Profiles save default rules for new invites.</p>
            <div className="invite-grid">
              <label>
                Profile name
                <input
                  value={profileForm.name}
                  onChange={(event) =>
                    setProfileForm((current) => ({ ...current, name: event.target.value }))
                  }
                />
              </label>
              <label>
                Description
                <input
                  value={profileForm.description}
                  onChange={(event) =>
                    setProfileForm((current) => ({ ...current, description: event.target.value }))
                  }
                />
              </label>
              <label>
                Max uses
                <input
                  type="number"
                  min={0}
                  value={profileForm.max_uses}
                  onChange={(event) =>
                    setProfileForm((current) => ({ ...current, max_uses: event.target.value }))
                  }
                />
                <span className="field-help">Leave blank for unlimited.</span>
              </label>
              {renderDurationControl('Invite expires after', profileExpiry, setProfileExpiry)}
              {renderDurationControl(
                'User account expires after',
                profileUserExpiry,
                setProfileUserExpiry
              )}
              <label>
                Expiry action
                <select
                  value={profileForm.user_expiry_action}
                  onChange={(event) =>
                    setProfileForm((current) => ({
                      ...current,
                      user_expiry_action: event.target.value,
                    }))
                  }
                >
                  <option value="disable">Disable account</option>
                  <option value="delete">Delete account</option>
                  <option value="disable_then_delete">Disable, then delete</option>
                </select>
              </label>
              <label>
                Referral uses
                <input
                  type="number"
                  min={0}
                  value={profileForm.referral_uses}
                  onChange={(event) =>
                    setProfileForm((current) => ({ ...current, referral_uses: event.target.value }))
                  }
                />
                <span className="field-help">Leave blank for 1.</span>
              </label>
            </div>
            <div className="toggle-row">
              <label className="toggle">
                <input
                  type="checkbox"
                  checked={profileForm.require_captcha}
                  onChange={(event) =>
                    setProfileForm((current) => ({
                      ...current,
                      require_captcha: event.target.checked,
                    }))
                  }
                />
                <span>Require captcha</span>
              </label>
              <span className="toggle-help">Adds a human check to sign-up.</span>
            </div>
            <div className="toggle-row">
              <label className="toggle">
                <input
                  type="checkbox"
                  checked={profileForm.allow_referrals}
                  onChange={(event) =>
                    setProfileForm((current) => ({
                      ...current,
                      allow_referrals: event.target.checked,
                    }))
                  }
                />
                <span>Allow referrals</span>
              </label>
              <span className="toggle-help">Let users share their own invite.</span>
            </div>
            <div className="admin-actions">
              <button type="button" onClick={createInviteProfile}>
                Save profile
              </button>
            </div>
          </div>

          <div className="summary-card invite-card">
            <h3>Create an invite</h3>
            <p className="meta">Pick a profile or customize a one-off invite.</p>
            <div className="invite-grid">
              <label>
                Profile
                <select
                  value={inviteForm.profile_id}
                  onChange={(event) =>
                    setInviteForm((current) => ({ ...current, profile_id: event.target.value }))
                  }
                >
                  <option value="">No profile</option>
                  {inviteProfiles.map((profile) => (
                    <option key={profile.id} value={String(profile.id)}>
                      {profile.name}
                    </option>
                  ))}
                </select>
              </label>
              <label>
                Max uses
                <input
                  type="number"
                  min={0}
                  value={inviteForm.max_uses}
                  onChange={(event) =>
                    setInviteForm((current) => ({ ...current, max_uses: event.target.value }))
                  }
                />
                <span className="field-help">Leave blank for unlimited.</span>
              </label>
              {renderDurationControl('Invite expires after', inviteExpiry, setInviteExpiry)}
            </div>
            <div className="toggle-row">
              <label className="toggle">
                <input
                  type="checkbox"
                  checked={inviteForm.require_captcha}
                  onChange={(event) =>
                    setInviteForm((current) => ({
                      ...current,
                      require_captcha: event.target.checked,
                    }))
                  }
                />
                <span>Require captcha</span>
              </label>
              <span className="toggle-help">Adds a human check to sign-up.</span>
            </div>
            <div className="toggle-row">
              <label className="toggle">
                <input
                  type="checkbox"
                  checked={inviteForm.allow_referrals}
                  onChange={(event) =>
                    setInviteForm((current) => ({
                      ...current,
                      allow_referrals: event.target.checked,
                    }))
                  }
                />
                <span>Allow referrals</span>
              </label>
              <span className="toggle-help">Lets this person create their own invite.</span>
            </div>
            <div className="admin-actions">
              <button type="button" onClick={createInviteCode}>
                Create invite
              </button>
              <button type="button" className="ghost-button" onClick={loadInvites}>
                Refresh invites
              </button>
            </div>
          </div>
        </div>

        <div className="cache-table">
          <div className="cache-row cache-head">
            <span>Code</span>
            <span>Uses</span>
            <span>Expires</span>
            <span>Status</span>
            <span>Actions</span>
          </div>
          {invites.length === 0 ? (
            <div className="meta">No invites yet.</div>
          ) : (
            invites.map((invite) => (
              <div key={invite.code} className="cache-row">
                <span>{invite.code}</span>
                <span>
                  {invite.uses_count ?? 0}/{invite.max_uses ?? 'Unlimited'}
                </span>
                <span>{invite.expires_at || 'Never'}</span>
                <span>{invite.disabled ? 'Disabled' : 'Active'}</span>
                <span className="cache-actions">
                  <button
                    type="button"
                    className="ghost-button"
                    onClick={() => disableInviteCode(invite.code)}
                    disabled={invite.disabled}
                  >
                    Disable
                  </button>
                  <button
                    type="button"
                    className="danger-button"
                    onClick={() => deleteInviteCode(invite.code)}
                  >
                    Delete
                  </button>
                </span>
              </div>
            ))
          )}
        </div>
      </section>
      )}
      {showNotificationExtras && (
      <section className="admin-section" id="announcements">
        <div className="section-header">
          <h2>Send an announcement</h2>
        </div>
        <div className="status-banner">
          Send a message to all users through the channels you select.
        </div>
        {announcementStatus && <div className="status-banner">{announcementStatus}</div>}
        <div className="admin-grid">
          <label>
            Subject
            <input
              value={announcementSubject}
              onChange={(event) => setAnnouncementSubject(event.target.value)}
            />
          </label>
          <label>
            Message
            <textarea
              rows={5}
              value={announcementBody}
              onChange={(event) => setAnnouncementBody(event.target.value)}
            />
          </label>
          <div className="settings-checkbox-grid">
            {[
              { id: 'email', label: 'Email' },
              { id: 'discord', label: 'Discord' },
              { id: 'telegram', label: 'Telegram' },
              { id: 'matrix', label: 'Matrix' },
              { id: 'pushover', label: 'Pushover' },
              { id: 'pushbullet', label: 'Pushbullet' },
              { id: 'gotify', label: 'Gotify' },
              { id: 'ntfy', label: 'ntfy' },
            ].map((channel) => (
              <label key={channel.id} className="toggle">
                <input
                  type="checkbox"
                  checked={announcementChannels.includes(channel.id)}
                  onChange={() => toggleAnnouncementChannel(channel.id)}
                />
                <span>{channel.label}</span>
              </label>
            ))}
          </div>
        </div>
        <div className="admin-actions">
          <button type="button" onClick={sendAnnouncement}>
            Send announcement
          </button>
        </div>
      </section>
      )}
    </AdminShell>
  )
}
