'use client'

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

const COLUMN_KEYS = [
  'name',
  'goal',
  'audience',
  'language',
  'offer',
  'status',
  'scheduledAt',
  'accepted',
  'delivered',
  'paidConversions',
] as const

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

  return (
    <div className="space-y-6" dir="auto">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <Mail size={20} className="shrink-0 text-brand-accent" aria-hidden />
            <h1 className="text-2xl font-bold tracking-tight text-foreground">
              {t('admin.marketing.title')}
            </h1>
          </div>
          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
            {t('admin.marketing.description')}
          </p>
        </div>
        <button
          type="button"
          disabled
          title={t('admin.marketing.createDisabledHint')}
          className="inline-flex h-10 items-center justify-center rounded-xl border border-border bg-muted/40 px-4 text-sm font-medium text-muted-foreground opacity-70"
        >
          {t('admin.marketing.createCampaign')}
        </button>
      </div>

      <div className="overflow-x-auto rounded-xl border border-border bg-card">
        <table className="w-full min-w-[56rem] border-collapse text-start text-[13px]">
          <caption className="sr-only">{t('admin.marketing.title')}</caption>
          <thead>
            <tr className="border-b border-border bg-muted/30">
              {COLUMN_KEYS.map((key) => (
                <th
                  key={key}
                  scope="col"
                  className="whitespace-nowrap px-3 py-2.5 font-semibold text-foreground"
                >
                  {t(`admin.marketing.columns.${key}`)}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colSpan={COLUMN_KEYS.length} className="px-3 py-12 text-center">
                <p className="font-medium text-foreground">{t('admin.marketing.emptyTitle')}</p>
                <p className="mx-auto mt-1 max-w-lg text-sm text-muted-foreground">
                  {t('admin.marketing.emptyBody')}
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}