'use client';
// @design-system: admin/TranslationDashboard/TranslationDashboard

/**
 * TranslationDashboard — admin island for /admin/translations
 *
 * Shows aggregate counters + filterable paginated job table.
 * Composes AdminListPage, AdminTable, AdminFilterBar, Pagination.
 */

import React, { useState, useEffect, useCallback } from 'react';
import { AdminListPage } from '@/components/ui/domain/admin/AdminListPage';
import { AdminTable } from '@/components/ui/domain/admin/AdminTable';
import { AdminFilterBar } from '@/components/ui/domain/admin/AdminFilterBar';
import { useAdminFilters } from '@/components/ui/domain/admin/AdminFilterBar/useAdminFilters';
import { MetricTile } from '@/components/ui/domain/MetricTile';
import { Badge } from '@/components/ui/primitives/Badge';
import { Button } from '@/components/ui/primitives/Button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip/Tooltip';
import { useLocale, useT } from '@/lib/i18n/react';
import { formatDateTime } from '@/lib/format';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import { fetchWithRefresh } from '@/lib/api/refresh-on-401';
import type { StringBundle } from '@/lib/i18n/types';

interface JobRow {
  id: string;
  dealId: string;
  targetLocale: string;
  status: string;
  attempt: number;
  lastError: string | null;
  costUsd: string | null;
  forceFresh: boolean;
  scheduledAt: string | null;
  createdAt: string;
  dealTitle: string;
}

interface DashboardState {
  totals: Record<string, number>;
  rows: JobRow[];
  nextCursor: string | null;
}

const STATUS_FILTERS = [
  { value: '', label_key: 'status_all' },
  { value: 'PENDING', label_key: 'status_pending' },
  { value: 'RUNNING', label_key: 'status_running' },
  { value: 'DONE', label_key: 'status_done' },
  { value: 'FAILED', label_key: 'status_failed' },
];

type AdminTranslationsT = ReturnType<typeof useT<keyof StringBundle & 'admin_translations'>>;

function localeLabel(t: AdminTranslationsT, code: string): string {
  const langKey = `lang_${code}` as Parameters<AdminTranslationsT>[0];
  const name = t(langKey);
  return name !== langKey ? `${name} (${code})` : code;
}

export interface TranslationDashboardProps {
  initialLocales: string[];
}

export function TranslationDashboard({
  initialLocales: _initialLocales,
}: TranslationDashboardProps) {
  const t = useT('admin_translations');
  const { locale } = useLocale();
  const { filters } = useAdminFilters(['status', 'q']);
  const [state, setState] = useState<DashboardState>({ totals: {}, rows: [], nextCursor: null });
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [cursor, setCursor] = useState<string | undefined>(undefined);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [hasFetched, setHasFetched] = useState(false);

  const statusFilter = filters['status'] ?? '';
  const qFilter = filters['q'] ?? '';

  const load = useCallback(async () => {
    setLoading(true);
    setLoadError(null);
    try {
      const params = new URLSearchParams();
      if (statusFilter) params.set('status', statusFilter);
      if (qFilter) params.set('q', qFilter);
      if (cursor) params.set('cursor', cursor);
      params.set('limit', '20');

      const res = await fetchWithRefresh(`/api/admin/translations?${params}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const json = (await res.json()) as {
        ok: boolean;
        totals?: Record<string, number>;
        rows?: JobRow[];
        nextCursor?: string | null;
      };
      if (json.ok) {
        setState({
          totals: json.totals ?? {},
          rows: json.rows ?? [],
          nextCursor: json.nextCursor ?? null,
        });
      } else {
        throw new Error('Failed to load');
      }
    } catch (err) {
      captureCaught(err, { scope: 'TranslationDashboard.load', severity: 'warning' });
      setLoadError(t('load_error'));
    } finally {
      setHasFetched(true);
      setLoading(false);
    }
  }, [statusFilter, qFilter, cursor, t]);

  useEffect(() => {
    queueMicrotask(() => void load());
  }, [load]);

  async function handleBulkRetry() {
    const ids = Array.from(selected);
    let failed = false;
    for (const dealId of ids) {
      try {
        const res = await fetchWithRefresh(`/api/admin/translations/${dealId}/retry`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrfToken() },
          body: JSON.stringify({}),
        });
        const json = (await res.json()) as { ok?: boolean };
        if (!res.ok || !json.ok) failed = true;
      } catch (err) {
        failed = true;
        captureCaught(err, { scope: 'TranslationDashboard.bulkRetry', severity: 'warning' });
      }
    }
    setSelected(new Set());
    if (failed) setLoadError(t('bulk_retry_error'));
    void load();
  }

  const columns: Array<{
    key: string;
    label: string;
    headerTooltip?: string;
    render?: (row: JobRow) => React.ReactNode;
  }> = [
    {
      key: 'dealTitle',
      label: t('col_deal'),
      render: (row) => (
        <a
          href={`/admin/translations/${row.dealId}`}
          className="text-brand-primary-600 underline"
          data-user-content
        >
          {row.dealTitle}
        </a>
      ),
    },
    {
      key: 'targetLocale',
      label: t('col_locale'),
      render: (row) => localeLabel(t, row.targetLocale),
    },
    {
      key: 'status',
      label: t('col_status'),
      render: (row) => (
        <Badge
          tone={row.status === 'DONE' ? 'success' : row.status === 'FAILED' ? 'danger' : 'neutral'}
        >
          {t(`status_${row.status.toLowerCase()}` as Parameters<typeof t>[0]) ?? row.status}
        </Badge>
      ),
    },
    {
      key: 'attempt',
      label: t('col_attempt'),
      headerTooltip: t('attempts_col_tooltip'),
    },
    {
      key: 'costUsd',
      label: t('col_cost'),
      headerTooltip: t('cost_col_tooltip'),
      render: (row) => (row.costUsd ? `$${row.costUsd}` : '—'),
    },
    {
      key: 'createdAt',
      label: t('col_created'),
      render: (row) => formatDateTime(row.createdAt, locale),
    },
  ];

  const pendingCount = state.totals['PENDING'] ?? 0;
  const runningCount = state.totals['RUNNING'] ?? 0;
  const doneCount = state.totals['DONE'] ?? 0;
  const failedCount = state.totals['FAILED'] ?? 0;
  const isInitialLoading = loading && state.rows.length === 0 && !hasFetched;
  const isRefetching = loading && !isInitialLoading;

  return (
    <TooltipProvider>
      {loadError && (
        <div role="alert" className="text-danger-600 px-6 py-2 text-sm">
          {loadError}
        </div>
      )}
      <AdminListPage
        status={isInitialLoading ? 'loading' : 'idle'}
        busy={isRefetching}
        filterBar={
          <div className="flex flex-col gap-4">
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
              <Tooltip>
                <TooltipTrigger asChild>
                  <div>
                    <MetricTile label={t('counter_pending')} value={pendingCount} tone="default" />
                  </div>
                </TooltipTrigger>
                <TooltipContent>{t('pending_tile_tooltip')}</TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div>
                    <MetricTile label={t('counter_running')} value={runningCount} tone="default" />
                  </div>
                </TooltipTrigger>
                <TooltipContent>{t('running_tile_tooltip')}</TooltipContent>
              </Tooltip>
              <MetricTile label={t('counter_done')} value={doneCount} tone="success" />
              <MetricTile label={t('counter_failed')} value={failedCount} tone="warning" />
            </div>
            <AdminFilterBar
              searchKey="q"
              searchPlaceholder={t('search_placeholder')}
              chips={STATUS_FILTERS.map((f) => ({
                key: 'status',
                value: f.value,
                label: t(f.label_key as Parameters<typeof t>[0]),
              }))}
            />
            {selected.size > 0 && (
              <div className="flex items-center gap-3">
                <span className="text-text-muted text-sm">
                  {selected.size} {t('selected')}
                </span>
                <Button variant="secondary" size="sm" onClick={handleBulkRetry}>
                  {t('bulk_retry')}
                </Button>
              </div>
            )}
          </div>
        }
        table={
          <AdminTable
            columns={columns}
            rows={state.rows}
            rowHref={(row) => `/admin/translations/${row.dealId}`}
            loading={loading}
          />
        }
        pagination={
          state.nextCursor ? (
            <Button
              variant="secondary"
              onClick={() => {
                setCursor(state.nextCursor ?? undefined);
              }}
            >
              {t('load_more')}
            </Button>
          ) : null
        }
      />
    </TooltipProvider>
  );
}