import { Card, Descriptions, Spin } from 'antd'
import { SettingOutlined } from '@ant-design/icons'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'

import apiClient, { isEnvelope } from '../../api/client'
import PageHeader from '../../components/PageHeader'

interface SetupStatus {
  completed: boolean
  admin_email: string
  fqdn: string
}

interface SystemHealth {
  status: string
  version: string
}

export default function SettingsPage() {
  const { t } = useTranslation()

  const { data: setupStatus, isLoading: loadingSetup } = useQuery({
    queryKey: ['setup', 'status'],
    queryFn: async () => {
      const r = await apiClient.get('/setup/status')
      if (isEnvelope(r.data)) return r.data.data as SetupStatus
      return null
    },
  })

  const { data: health, isLoading: loadingHealth } = useQuery({
    queryKey: ['system', 'health'],
    queryFn: async () => {
      const r = await apiClient.get('/system/health')
      if (isEnvelope(r.data)) return r.data.data as SystemHealth
      return null
    },
  })

  if (loadingSetup || loadingHealth) {
    return <Spin />
  }

  return (
    <div>
      <PageHeader
        icon={<SettingOutlined />}
        title={t('settings.title')}
        subtitle={t('settings.intro')}
      />

      <Card title={t('settings.systemInfo')} className="mb-12" size="small">
        <Descriptions column={1}>
          <Descriptions.Item label={t('settings.version')}>{health?.version ?? '—'}</Descriptions.Item>
          <Descriptions.Item label={t('settings.status')}>{health?.status ?? '—'}</Descriptions.Item>
        </Descriptions>
      </Card>

      <Card title={t('settings.setupInfo')} size="small">
        <Descriptions column={1}>
          <Descriptions.Item label={t('settings.adminEmail')}>{setupStatus?.admin_email ?? '—'}</Descriptions.Item>
          <Descriptions.Item label={t('settings.fqdn')}>{setupStatus?.fqdn ?? '—'}</Descriptions.Item>
          <Descriptions.Item label={t('settings.setupCompleted')}>
            {setupStatus?.completed ? t('common.yes') : t('common.no')}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  )
}