import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { useRequireAuth } from '@/features/auth/guards'
import { ActivationGate } from '@/features/activation/ActivationGate'
import { ConfigCard } from '@/features/configs/ConfigCard'
import { CreateConfigDialog } from '@/features/configs/CreateConfigDialog'
import { SubscriptionCard } from '@/features/configs/SubscriptionCard'
import { getMyConfigs, listAvailableInbounds } from '@/features/configs/api'

export const Route = createFileRoute('/dashboard')({ component: DashboardPage })

function DashboardPage() {
  const { isReady } = useRequireAuth()

  if (!isReady) return null

  return (
    <ActivationGate>
      <ConfigsList />
    </ActivationGate>
  )
}

function ConfigsList() {
  const { t } = useTranslation()
  const { data, isLoading } = useQuery({ queryKey: ['my-configs'], queryFn: getMyConfigs })
  const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds })

  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-10">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">{t('configs.title')}</h1>
          {data && (
            <p className="text-sm text-muted-foreground">
              {data.maxConfigs < 0
                ? t('configs.quotaUnlimited', { used: data.configs.length })
                : t('configs.quota', { used: data.configs.length, max: data.maxConfigs })}
            </p>
          )}
        </div>
        {inboundsQuery.data?.length === 0 ? (
          <p className="max-w-xs text-right text-sm text-muted-foreground">{t('configs.noInboundsNotice')}</p>
        ) : (
          inboundsQuery.data && <CreateConfigDialog inbounds={inboundsQuery.data} />
        )}
      </div>

      {!isLoading && data && data.configs.length > 0 && <SubscriptionCard />}

      {isLoading && <p className="text-sm text-muted-foreground">…</p>}

      {!isLoading && data && data.configs.length === 0 && (
        <p className="text-sm text-muted-foreground">{t('configs.empty')}</p>
      )}

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        {data?.configs.map((config) => <ConfigCard key={config.id} config={config} />)}
      </div>
    </div>
  )
}