'use client'

import PageLayout from '../components/PageLayout'
import Waves from '../components/background/waves'
import BlueBlurryBackground from '../components/background/blueblurry' // NEW
import {
  UsersIcon,
  ExclamationTriangleIcon,
  CpuChipIcon,
  ServerStackIcon,
  ArrowRightIcon,
  Squares2X2Icon,
  BanknotesIcon,
  ClipboardDocumentListIcon,
  CommandLineIcon,
  LanguageIcon
} from '@heroicons/react/24/outline'
import { useMemo, useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useAdminUsers } from '../hooks/useAdminUsers'
import useAuthStore from '../store/authStore'
import { useTranslation } from '../i18n/useTranslation'

// env-based feature flags
const DISPLAY_MATRIX = process.env.NEXT_PUBLIC_DISPLAY_MATRIX !== 'false'
const DISPLAY_ABONEMENTS = process.env.NEXT_PUBLIC_DISPLAY_ABONEMMENTS !== 'false'
const DISPLAY_NEWS = process.env.NEXT_PUBLIC_DISPLAY_NEWS !== 'false'
const DISPLAY_DEV_MANAGEMENT = process.env.NEXT_PUBLIC_DISPLAY_DEV_MANAGEMENT !== 'false'

export default function AdminDashboardPage() {
  const router = useRouter()
  const { t } = useTranslation()
  const { userStats, isAdmin } = useAdminUsers()
  const user = useAuthStore(s => s.user)
  const isAdminOrSuper =
    !!user &&
    (
      (user as any)?.role === 'admin' ||
      (user as any)?.userType === 'admin' ||
      (user as any)?.isAdmin === true ||
      ((user as any)?.roles?.includes?.('admin')) ||
      (user as any)?.role === 'super_admin' ||
      (user as any)?.userType === 'super_admin' ||
      (user as any)?.isSuperAdmin === true ||
      ((user as any)?.roles?.includes?.('super_admin'))
    )
  const [isClient, setIsClient] = useState(false)
  const [isMobile, setIsMobile] = useState(false)

  // Handle client-side mounting
  useEffect(() => {
    setIsClient(true)
  }, [])

  useEffect(() => {
    const mq = window.matchMedia('(max-width: 768px)')
    const apply = () => setIsMobile(mq.matches)
    apply()
    mq.addEventListener?.('change', apply)
    window.addEventListener('resize', apply, { passive: true })
    return () => {
      mq.removeEventListener?.('change', apply)
      window.removeEventListener('resize', apply)
    }
  }, [])

  // Fallback for loading/no data
  const displayStats = userStats || {
    totalUsers: 0,
    adminUsers: 0,
    verificationPending: 0,
    activeUsers: 0,
    personalUsers: 0,
    companyUsers: 0
  }

  const permissionStats = useMemo(() => ({
    permissions: 1 // TODO: fetch permission definitions
  }), [])

  const serverStats = useMemo(() => ({
    status: 'Online',
    uptime: '4 days, 8 hours',
    cpu: '0%',
    memory: '0.1 / 7.8',
    recentErrors: [] as { id: string; ts: string; msg: string }[]
  }), [])
  
  // Show loading during SSR/initial client render
  if (!isClient) {
    return (
      <PageLayout>
        <div className="min-h-screen flex items-center justify-center bg-blue-50">
          <div className="text-center">
            <div className="h-12 w-12 rounded-full border-2 border-blue-900 border-b-transparent animate-spin mx-auto mb-4" />
            <p className="text-blue-900">{t('adminDashboard.loading')}</p>
          </div>
        </div>
      </PageLayout>
    )
  }

  // Access check (only after client-side hydration)
  if (!isAdmin) {
    return (
      <PageLayout>
        <div className="min-h-screen flex items-center justify-center bg-blue-50">
          <div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
            <div className="text-center">
              <h1 className="text-2xl font-bold text-red-600 mb-2">{t('adminDashboard.accessDenied')}</h1>
              <p className="text-gray-600">{t('adminDashboard.accessDeniedMessage')}</p>
            </div>
          </div>
        </div>
      </PageLayout>
    )
  }

  const content = (
    <div className="relative z-10 min-h-screen flex flex-col">
      <main className="flex-1 max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8 w-full">
        <div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
          {/* Header */}
          <header className="flex flex-col gap-4 mb-8">
            <div>
              <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">{t('adminDashboard.title')}</h1>
              <p className="text-lg text-blue-700 mt-2">
                {t('adminDashboard.subtitle')}
              </p>
            </div>
          </header>

          {/* Warning banner */}
          <div className="rounded-2xl border border-red-300 bg-red-50 text-red-700 px-8 py-6 flex gap-3 items-start text-base mb-8 shadow">
            <ExclamationTriangleIcon className="h-6 w-6 flex-shrink-0 text-red-500 mt-0.5" />
            <div className="leading-relaxed">
              <p className="font-semibold mb-0.5">
                {t('adminDashboard.warningTitle')}
              </p>
              <p className="text-red-600/80 hidden sm:block">
                {t('adminDashboard.warningMessage')}
              </p>
            </div>
          </div>

          {/* Stats Card */}
          <div className="mb-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">
            <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
              <div className="text-xs text-gray-500">{t('adminDashboard.totalUsers')}</div>
              <div className="text-xl font-semibold text-blue-900">{displayStats.totalUsers}</div>
            </div>
            <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
              <div className="text-xs text-gray-500">{t('adminDashboard.admins')}</div>
              <div className="text-xl font-semibold text-indigo-700">{displayStats.adminUsers}</div>
            </div>
            <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
              <div className="text-xs text-gray-500">{t('adminDashboard.active')}</div>
              <div className="text-xl font-semibold text-green-700">{displayStats.activeUsers}</div>
            </div>
            <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
              <div className="text-xs text-gray-500">{t('adminDashboard.pendingVerification')}</div>
              <div className="text-xl font-semibold text-amber-700">{displayStats.verificationPending}</div>
            </div>
            <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
              <div className="text-xs text-gray-500">{t('adminDashboard.personal')}</div>
              <div className="text-xl font-semibold text-blue-700">{displayStats.personalUsers}</div>
            </div>
            <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
              <div className="text-xs text-gray-500">{t('adminDashboard.company')}</div>
              <div className="text-xl font-semibold text-purple-700">{displayStats.companyUsers}</div>
            </div>
          </div>

          {/* Management Shortcuts Card */}
          <div className="mb-8">
            <div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition">
              <div className="flex items-start gap-4 mb-6">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
                  <Squares2X2Icon className="h-7 w-7 text-blue-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-blue-900">{t('adminDashboard.managementShortcuts')}</h2>
                  <p className="text-sm text-blue-700 mt-0.5">
                    {t('adminDashboard.managementShortcutsSubtitle')}
                  </p>
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* Matrix Management */}
                <button
                  type="button"
                  disabled={!DISPLAY_MATRIX}
                  onClick={DISPLAY_MATRIX ? () => router.push('/admin/matrix-management') : undefined}
                  className={`group w-full flex items-center justify-between rounded-lg px-4 py-4 ${
                    DISPLAY_MATRIX
                      ? 'border border-blue-200 bg-blue-50 hover:bg-blue-100 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md'
                      : 'border border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <span
                      className={`inline-flex h-10 w-10 items-center justify-center rounded-md border ${
                        DISPLAY_MATRIX
                          ? 'bg-blue-100 border-blue-200 group-hover:animate-pulse'
                          : 'bg-gray-100 border-gray-300'
                      }`}
                    >
                      <Squares2X2Icon className={`h-6 w-6 ${DISPLAY_MATRIX ? 'text-blue-600' : 'text-gray-400'}`} />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-blue-900">{t('adminDashboard.matrixManagement')}</div>
                      <div className="text-xs text-blue-700">{t('adminDashboard.matrixManagementDesc')}</div>
                      {!DISPLAY_MATRIX && (
                        <p className="mt-1 text-xs text-gray-500 italic">
                          {t('adminDashboard.moduleDisabled')}
                        </p>
                      )}
                    </div>
                  </div>
                  <ArrowRightIcon
                    className={`h-5 w-5 ${
                      DISPLAY_MATRIX ? 'text-blue-600 opacity-70 group-hover:opacity-100' : 'text-gray-400 opacity-60'
                    }`}
                  />
                </button>

                {/* Coffee Subscription Management */}
                <button
                  type="button"
                  disabled={!DISPLAY_ABONEMENTS}
                  onClick={DISPLAY_ABONEMENTS ? () => router.push('/admin/subscriptions') : undefined}
                  className={`group w-full flex items-center justify-between rounded-lg px-4 py-4 ${
                    DISPLAY_ABONEMENTS
                      ? 'border border-amber-200 bg-amber-50 hover:bg-amber-100 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md'
                      : 'border border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <span
                      className={`inline-flex h-10 w-10 items-center justify-center rounded-md border ${
                        DISPLAY_ABONEMENTS
                          ? 'bg-amber-100 border-amber-200 group-hover:animate-pulse'
                          : 'bg-gray-100 border-gray-300'
                      }`}
                    >
                      <BanknotesIcon className={`h-6 w-6 ${DISPLAY_ABONEMENTS ? 'text-amber-600' : 'text-gray-400'}`} />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-amber-900">{t('adminDashboard.coffeeSubscriptions')}</div>
                      <div className="text-xs text-amber-700">{t('adminDashboard.coffeeSubscriptionsDesc')}</div>
                      {!DISPLAY_ABONEMENTS && (
                        <p className="mt-1 text-xs text-gray-500 italic">
                          {t('adminDashboard.moduleDisabled')}
                        </p>
                      )}
                    </div>
                  </div>
                  <ArrowRightIcon
                    className={`h-5 w-5 ${
                      DISPLAY_ABONEMENTS
                        ? 'text-amber-600 opacity-70 group-hover:opacity-100'
                        : 'text-gray-400 opacity-60'
                    }`}
                  />
                </button>

                {/* Contract Management (unchanged) */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/contract-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-indigo-100 border border-indigo-200 group-hover:animate-pulse">
                      <ClipboardDocumentListIcon className="h-6 w-6 text-indigo-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-indigo-900">{t('adminDashboard.contractManagement')}</div>
                      <div className="text-xs text-indigo-700">{t('adminDashboard.contractManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-indigo-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* Dashboard Management */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/dashboard-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 hover:bg-blue-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-blue-100 border border-blue-200 group-hover:animate-pulse">
                      <Squares2X2Icon className="h-6 w-6 text-blue-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-blue-900">{t('adminDashboard.dashboardManagement')}</div>
                      <div className="text-xs text-blue-700">{t('adminDashboard.dashboardManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-blue-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* User Management (unchanged) */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/user-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 hover:bg-blue-50 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-blue-100 border border-blue-200 group-hover:animate-pulse">
                      <UsersIcon className="h-6 w-6 text-blue-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-blue-900">{t('adminDashboard.userManagement')}</div>
                      <div className="text-xs text-blue-700">{t('adminDashboard.userManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-blue-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* User Verify */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/user-verify')}
                  className="group w-full flex items-center justify-between rounded-lg border border-rose-200 bg-rose-50 hover:bg-rose-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-rose-100 border border-rose-200 group-hover:animate-pulse">
                      <ExclamationTriangleIcon className="h-6 w-6 text-rose-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-rose-900">{t('adminDashboard.userVerify')}</div>
                      <div className="text-xs text-rose-700">{t('adminDashboard.userVerifyDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-rose-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* Finance Management */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/finance-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-emerald-200 bg-emerald-50 hover:bg-emerald-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-emerald-100 border border-emerald-200 group-hover:animate-pulse">
                      <BanknotesIcon className="h-6 w-6 text-emerald-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-emerald-900">{t('adminDashboard.financeManagement')}</div>
                      <div className="text-xs text-emerald-700">{t('adminDashboard.financeManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-emerald-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* Pool Management */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/pool-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-cyan-200 bg-cyan-50 hover:bg-cyan-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-cyan-100 border border-cyan-200 group-hover:animate-pulse">
                      <ServerStackIcon className="h-6 w-6 text-cyan-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-cyan-900">{t('adminDashboard.poolManagement')}</div>
                      <div className="text-xs text-cyan-700">{t('adminDashboard.poolManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-cyan-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* Affiliate Management */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/affiliate-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-violet-200 bg-violet-50 hover:bg-violet-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-violet-100 border border-violet-200 group-hover:animate-pulse">
                      <UsersIcon className="h-6 w-6 text-violet-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-violet-900">{t('adminDashboard.affiliateManagement')}</div>
                      <div className="text-xs text-violet-700">{t('adminDashboard.affiliateManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-violet-600 opacity-70 group-hover:opacity-100" />
                </button>

                {/* News Management */}
                <button
                  type="button"
                  disabled={!DISPLAY_NEWS}
                  onClick={DISPLAY_NEWS ? () => router.push('/admin/news-management') : undefined}
                  className={`group w-full flex items-center justify-between rounded-lg px-4 py-4 ${
                    DISPLAY_NEWS
                      ? 'border border-green-200 bg-green-50 hover:bg-green-100 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md'
                      : 'border border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <span
                      className={`inline-flex h-10 w-10 items-center justify-center rounded-md border ${
                        DISPLAY_NEWS
                          ? 'bg-green-100 border-green-200 group-hover:animate-pulse'
                          : 'bg-gray-100 border-gray-300'
                      }`}
                    >
                      <ClipboardDocumentListIcon className={`h-6 w-6 ${DISPLAY_NEWS ? 'text-green-600' : 'text-gray-400'}`} />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-green-900">{t('adminDashboard.newsManagement')}</div>
                      <div className="text-xs text-green-700">{t('adminDashboard.newsManagementDesc')}</div>
                      {!DISPLAY_NEWS && (
                        <p className="mt-1 text-xs text-gray-500 italic">
                          {t('adminDashboard.moduleDisabled')}
                        </p>
                      )}
                    </div>
                  </div>
                  <ArrowRightIcon
                    className={`h-5 w-5 ${
                      DISPLAY_NEWS ? 'text-green-600 opacity-70 group-hover:opacity-100' : 'text-gray-400 opacity-60'
                    }`}
                  />
                </button>

                {/* Dev Management */}
                <button
                  type="button"
                  disabled={!DISPLAY_DEV_MANAGEMENT || !isAdminOrSuper}
                  onClick={DISPLAY_DEV_MANAGEMENT && isAdminOrSuper ? () => router.push('/admin/dev-management') : undefined}
                  className={`group w-full flex items-center justify-between rounded-lg px-4 py-4 ${
                    DISPLAY_DEV_MANAGEMENT && isAdminOrSuper
                      ? 'border border-slate-200 bg-slate-50 hover:bg-slate-100 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md'
                      : 'border border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <span
                      className={`inline-flex h-10 w-10 items-center justify-center rounded-md border ${
                        DISPLAY_DEV_MANAGEMENT && isAdminOrSuper
                          ? 'bg-slate-100 border-slate-200 group-hover:animate-pulse'
                          : 'bg-gray-100 border-gray-300'
                      }`}
                    >
                      <CommandLineIcon className={`h-6 w-6 ${DISPLAY_DEV_MANAGEMENT && isAdminOrSuper ? 'text-slate-600' : 'text-gray-400'}`} />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-slate-900">{t('adminDashboard.devManagement')}</div>
                      <div className="text-xs text-slate-700">{t('adminDashboard.devManagementDesc')}</div>
                      {!DISPLAY_DEV_MANAGEMENT && (
                        <p className="mt-1 text-xs text-gray-500 italic">
                          {t('adminDashboard.moduleDisabled')}
                        </p>
                      )}
                      {DISPLAY_DEV_MANAGEMENT && !isAdminOrSuper && (
                        <p className="mt-1 text-xs text-gray-500 italic">
                          {t('adminDashboard.adminAccessRequired')}
                        </p>
                      )}
                    </div>
                  </div>
                  <ArrowRightIcon
                    className={`h-5 w-5 ${
                      DISPLAY_DEV_MANAGEMENT && isAdminOrSuper ? 'text-slate-600 opacity-70 group-hover:opacity-100' : 'text-gray-400 opacity-60'
                    }`}
                  />
                </button>

                {/* Language Management */}
                <button
                  type="button"
                  onClick={() => router.push('/admin/language-management')}
                  className="group w-full flex items-center justify-between rounded-lg border border-teal-200 bg-teal-50 hover:bg-teal-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-teal-100 border border-teal-200 group-hover:animate-pulse">
                      <LanguageIcon className="h-6 w-6 text-teal-600" />
                    </span>
                    <div className="text-left">
                      <div className="text-base font-semibold text-teal-900">{t('adminDashboard.languageManagement')}</div>
                      <div className="text-xs text-teal-700">{t('adminDashboard.languageManagementDesc')}</div>
                    </div>
                  </div>
                  <ArrowRightIcon className="h-5 w-5 text-teal-600 opacity-70 group-hover:opacity-100" />
                </button>
              </div>
            </div>
          </div>

          {/* Server Status & Logs */}
          <div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition">
            <div className="flex items-start gap-4 mb-6">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100">
                <ServerStackIcon className="h-7 w-7 text-gray-700" />
              </div>
              <div>
                <h2 className="text-lg font-semibold text-gray-900">
                  {t('adminDashboard.serverStatusLogs')}
                </h2>
                <p className="text-sm text-gray-500 mt-0.5">
                  {t('adminDashboard.serverStatusLogsSubtitle')}
                </p>
              </div>
            </div>

            <div className="grid gap-8 lg:grid-cols-3">
              {/* Metrics */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <span className={`h-2.5 w-2.5 rounded-full ${serverStats.status === 'Online' ? 'bg-emerald-500' : 'bg-red-500'}`} />
                  <p className="text-base">
                    <span className="font-semibold">{t('adminDashboard.serverStatusLabel')}</span>{' '}
                    <span className={serverStats.status === 'Online' ? 'text-emerald-600 font-medium' : 'text-red-600 font-medium'}>
                      {serverStats.status === 'Online' ? t('adminDashboard.serverOnline') : t('adminDashboard.serverOffline')}
                    </span>
                  </p>
                </div>
                <div className="text-sm space-y-1 text-gray-600">
                  <p><span className="font-medium text-gray-700">{t('adminDashboard.uptime')}</span> {serverStats.uptime}</p>
                  <p><span className="font-medium text-gray-700">{t('adminDashboard.cpuUsage')}</span> {serverStats.cpu}</p>
                  <p><span className="font-medium text-gray-700">{t('adminDashboard.memoryUsage')}</span> {serverStats.memory} GB</p>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-500">
                  <CpuChipIcon className="h-4 w-4" />
                  <span>{t('adminDashboard.autoscaledEnvironment')}</span>
                </div>
              </div>

              {/* Divider */}
              <div className="hidden lg:block border-l border-gray-200" />

              {/* Logs */}
              <div className="lg:col-span-2">
                <h3 className="text-base font-semibold text-gray-800 mb-3">
                  {t('adminDashboard.recentErrorLogs')}
                </h3>
                {serverStats.recentErrors.length === 0 && (
                  <p className="text-sm text-gray-500 italic">
                    {t('adminDashboard.noRecentLogs')}
                  </p>
                )}
                {/* Placeholder for future logs list */}
                {/* TODO: Replace with mapped log entries */}
                <div className="mt-6">
                  <button
                    type="button"
                    className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm font-medium px-4 py-3 transition"
                    // TODO: navigate to logs / monitoring page
                    onClick={() => {}}
                  >
                    {t('adminDashboard.viewFullLogs')}
                    <ArrowRightIcon className="h-5 w-5" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )

  return (
    <PageLayout>
      {isMobile ? (
        <BlueBlurryBackground>{content}</BlueBlurryBackground>
      ) : (
        <div
          className="relative w-full flex flex-col min-h-screen overflow-hidden"
          style={{ backgroundImage: 'none', background: 'none' }}
        >
          <Waves
            className="pointer-events-none"
            lineColor="#0f172a"
            backgroundColor="rgba(245, 245, 240, 1)"
            waveSpeedX={0.02}
            waveSpeedY={0.01}
            waveAmpX={40}
            waveAmpY={20}
            friction={0.9}
            tension={0.01}
            maxCursorMove={120}
            xGap={12}
            yGap={36}
          />
          {content}
        </div>
      )}
    </PageLayout>
  )
}