import type { Metadata } from 'next'

import { PermissionGate } from '@/components/console/permission-gate'
import { IntegrationHub } from '@/components/integrations/integration-hub'
import { Badge, DemoDataBadge, PageHeader, Panel, PanelBody, PanelHeader } from '@/components/ui/display'
import { getCurrentUser } from '@/lib/auth/current-user'
import { prisma } from '@/lib/db'
import { getI18n, localised } from '@/lib/i18n/server'
import { getHubOverview } from '@/lib/services/integration-service'

export const metadata: Metadata = { title: 'Integration Hub' }
export const dynamic = 'force-dynamic'

/**
 * The Integration Hub (4.1).
 *
 * Two lists, deliberately separate. Above: connectors that exist, run a real pipeline and
 * produce numbers that move — all of them demonstration sources, all labelled as such.
 * Below: the adapter roadmap, contracts defined and adapters not built.
 *
 * Merging them would be the dishonest arrangement: a single list of "integrations" where
 * some are running and some are aspirations, distinguished only by a status word, reads as
 * a platform with more connections than it has.
 */
export default async function IntegrationsPage() {
  const user = await getCurrentUser()
  const { t, locale } = await getI18n()

  if (!user?.permissions.has('integrations.read')) return <PermissionGate />

  const [overview, catalogue] = await Promise.all([
    getHubOverview(),
    prisma.integration.findMany({ orderBy: [{ status: 'asc' }, { name: 'asc' }] }),
  ])

  return (
    <>
      <PageHeader
        title={t('integrations.hub.title')}
        subtitle={t('integrations.hub.subtitle')}
        badge={<DemoDataBadge label={t('common.simulated')} title={t('integrations.hub.honesty')} />}
      />

      <IntegrationHub
        initialOverview={overview}
        canSync={user.permissions.has('integrations.sync')}
        canMap={user.permissions.has('integrations.map')}
        canSimulate={user.permissions.has('integrations.simulate')}
      />

      <div className="mt-6">
        <Panel>
          <PanelHeader
            title={t('integrations.hub.catalogue')}
            subtitle={t('integrations.hub.catalogueNote')}
          />
          <PanelBody>
            <ul className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
              {catalogue.map((integration) => (
                <li key={integration.id} className="rounded-lg border border-border bg-surface-2/40 p-3">
                  <div className="flex items-start justify-between gap-2">
                    <div className="min-w-0">
                      <p className="truncate text-[12px] font-medium text-text">
                        {localised(integration, 'name', locale)}
                      </p>
                      <p className="mt-0.5 font-mono text-[10px] text-text-faint">{integration.protocol}</p>
                    </div>
                    <Badge tone={integration.status === 'planned' ? 'muted' : 'info'}>
                      {t(`integrations.status.${integration.status}`)}
                    </Badge>
                  </div>
                </li>
              ))}
            </ul>
          </PanelBody>
        </Panel>
      </div>
    </>
  )
}
