import { Suspense } from 'react'
import { redirect } from 'next/navigation'
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'

export const dynamic = 'force-dynamic'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { SettingsContent } from '@/components/settings/settings-content'

// Categories that only super admins can access
const SUPER_ADMIN_CATEGORIES = new Set(['AI', 'EMAIL', 'STORAGE', 'SECURITY', 'WHATSAPP'])

async function SettingsLoader({ isSuperAdmin }: { isSuperAdmin: boolean }) {
  const settings = await prisma.systemSettings.findMany({
    orderBy: [{ category: 'asc' }, { key: 'asc' }],
  })

  // Convert settings array to key-value map
  // For secrets, pass a marker but not the actual value
  // For non-super-admins, filter out infrastructure categories
  const settingsMap: Record<string, string> = {}
  settings.forEach((setting) => {
    if (!isSuperAdmin && SUPER_ADMIN_CATEGORIES.has(setting.category)) {
      return
    }
    if (setting.isSecret && setting.value) {
      // Pass marker for UI to show "existing" state
      settingsMap[setting.key] = '********'
    } else {
      settingsMap[setting.key] = setting.value
    }
  })

  return <SettingsContent initialSettings={settingsMap} isSuperAdmin={isSuperAdmin} />
}

function SettingsSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-10 w-full" />
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-32" />
          <Skeleton className="h-4 w-64" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[...Array(4)].map((_, i) => (
              <Skeleton key={i} className="h-16 w-full" />
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default async function SettingsPage() {
  const session = await auth()

  // Only admins (super admin + program admin) can access settings
  if (session?.user?.role !== 'SUPER_ADMIN' && session?.user?.role !== 'PROGRAM_ADMIN') {
    redirect('/admin')
  }

  const isSuperAdmin = session?.user?.role === 'SUPER_ADMIN'

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
        <p className="text-muted-foreground">
          Configure platform settings and preferences
        </p>
      </div>

      {/* Content */}
      <Suspense fallback={<SettingsSkeleton />}>
        <SettingsLoader isSuperAdmin={isSuperAdmin} />
      </Suspense>
    </div>
  )
}