'use client';

/**
 * TranslationsPageClient — wraps the translations admin page interactive layer.
 *
 * Renders:
 *   - "Translate missing deals" button that opens BackfillModal
 *   - BackfillModal (controlled open/close state)
 *   - TranslationDashboard below
 */

import { useState } from 'react';
import { Button } from '@/components/ui/primitives/Button';
import { BackfillModal } from '@/components/ui/admin/BackfillModal/BackfillModal';
import { TranslationDashboard } from '@/components/ui/admin/TranslationDashboard/TranslationDashboard';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip/Tooltip';
import { useT } from '@/lib/i18n/react';

export interface TranslationsPageClientProps {
  initialLocales: string[];
}

export function TranslationsPageClient({ initialLocales }: TranslationsPageClientProps) {
  const t = useT('admin_translations');
  const [backfillOpen, setBackfillOpen] = useState(false);

  return (
    <>
      <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
        <div className="flex min-w-0 flex-col gap-1">
          <p className="text-text-muted text-sm">{t('page_subtitle')}</p>
          <a
            href="/admin/languages"
            className="text-text-secondary hover:text-text-primary text-sm hover:underline"
          >
            {t('cross_link_languages')}
          </a>
        </div>
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="secondary" size="sm" onClick={() => setBackfillOpen(true)}>
                {t('backfill_title')}
              </Button>
            </TooltipTrigger>
            <TooltipContent>{t('backfill_tooltip')}</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
      <BackfillModal
        open={backfillOpen}
        locales={initialLocales}
        onClose={() => setBackfillOpen(false)}
      />
      <TranslationDashboard initialLocales={initialLocales} />
    </>
  );
}