'use client'

import { BarChart3 } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'

const SECTIONS = [
  { id: 'revenue', titleKey: 'admin.stats.sectionRevenue' },
  { id: 'subscriptions', titleKey: 'admin.stats.sectionSubscriptions' },
  { id: 'usage', titleKey: 'admin.stats.sectionUsage' },
  { id: 'campaigns', titleKey: 'admin.stats.sectionCampaigns' },
] as const

export function StatsAdminClient() {
  const { t } = useLanguage()

  return (
    <div className="space-y-6" dir="auto">
      <div>
        <div className="flex items-center gap-2">
          <BarChart3 size={20} className="shrink-0 text-brand-accent" aria-hidden />
          <h1 className="text-2xl font-bold tracking-tight text-foreground">
            {t('admin.stats.title')}
          </h1>
        </div>
        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
          {t('admin.stats.description')}
        </p>
        <p className="mt-2 text-xs text-muted-foreground">
          {t('admin.stats.lastSyncUnknown')} · {t('admin.stats.timezoneNote')}
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        {SECTIONS.map((section) => (
          <section
            key={section.id}
            aria-labelledby={`stats-${section.id}`}
            className="rounded-xl border border-border bg-card px-4 py-4"
          >
            <h2 id={`stats-${section.id}`} className="text-sm font-semibold text-foreground">
              {t(section.titleKey)}
            </h2>
            <p className="mt-3 text-sm font-medium text-foreground">
              {t('admin.stats.unavailable')}
            </p>
            <p className="mt-1 text-[13px] leading-relaxed text-muted-foreground">
              {t('admin.stats.unavailableBody')}
            </p>
          </section>
        ))}
      </div>
    </div>
  )
}