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

/**
 * TranslationOverrideEditor — per-deal translation editor with manual override
 * and slug regeneration.
 *
 * Renders per-locale tabs. Each field shows: source (read-only), translated
 * value (editable when manualOverride=true), lock toggle, and slug-regen button.
 */

import { useState } from 'react';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { FormField } from '@/components/ui/primitives/FormField';
import { Switch } from '@/components/ui/primitives/Switch';
import { Label } from '@/components/ui/primitives/Label';
import { Badge } from '@/components/ui/primitives/Badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip/Tooltip';
import { useT } from '@/lib/i18n/react';
import { interpolate } from '@/lib/i18n/interpolate';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import { fetchWithRefresh } from '@/lib/api/refresh-on-401';
import { SlugRegenerateButton } from '@/components/ui/admin/SlugRegenerateButton/SlugRegenerateButton';
import { Tabs } from '@/components/ui/layout/Tabs';
import type { StringBundle } from '@/lib/i18n/types';

export interface TranslationRow {
  id: string;
  dealId: string;
  locale: string;
  slug: string | null;
  title: string;
  description: string;
  specialInstructions: string | null;
  titleManualOverride: boolean;
  descriptionManualOverride: boolean;
  specialInstructionsManualOverride: boolean;
  status: string;
  translatedAt: string | null;
}

export interface SourceDeal {
  id: string;
  title: string;
  description: string;
  specialInstructions: string | null;
  sourceLanguage: string | null;
}

export interface TranslationOverrideEditorProps {
  deal: SourceDeal;
  translations: TranslationRow[];
  onRefresh?: () => void;
}

type Field = 'title' | 'description' | 'specialInstructions';

const FIELDS: Field[] = ['title', 'description', 'specialInstructions'];

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;
}

function statusBadgeLabel(t: AdminTranslationsT, status: string): string {
  if (status === 'OK') return t('status_ok_badge');
  if (status === 'STALE') return t('status_stale_badge');
  if (status === 'FAILED') return t('status_failed_badge');
  return status;
}

function statusBadgeTone(status: string): 'success' | 'warning' | 'danger' | 'neutral' {
  if (status === 'OK') return 'success';
  if (status === 'STALE') return 'warning';
  if (status === 'FAILED') return 'danger';
  return 'neutral';
}

function statusBadgeTooltip(t: AdminTranslationsT, status: string): string | undefined {
  if (status === 'STALE') return t('status_stale_tooltip');
  if (status === 'FAILED') return t('status_failed_tooltip');
  return undefined;
}

export function TranslationOverrideEditor({
  deal,
  translations,
  onRefresh,
}: TranslationOverrideEditorProps) {
  const t = useT('admin_translations');
  const [activeLocale, setActiveLocale] = useState(translations[0]?.locale ?? '');
  const [saving, setSaving] = useState<string | null>(null);
  const [fieldValues, setFieldValues] = useState<Record<string, Record<Field, string>>>(() => {
    const init: Record<string, Record<Field, string>> = {};
    for (const tr of translations) {
      init[tr.locale] = {
        title: tr.title,
        description: tr.description,
        specialInstructions: tr.specialInstructions ?? '',
      };
    }
    return init;
  });

  const [saveError, setSaveError] = useState<string | null>(null);

  const sourceFieldMap: Record<Field, string> = {
    title: deal.title,
    description: deal.description,
    specialInstructions: deal.specialInstructions ?? '',
  };

  const sourceLanguageName = deal.sourceLanguage ? localeLabel(t, deal.sourceLanguage) : null;
  const sourceFieldLabel = sourceLanguageName
    ? interpolate(t('source_value'), { language: sourceLanguageName })
    : t('source_value_fallback');

  async function handleOverride(field: Field, manualOverride: boolean, locale: string) {
    const translation = translations.find((tr) => tr.locale === locale);
    if (!translation) return;
    const key = `${locale}:${field}`;
    setSaving(key);
    setSaveError(null);
    try {
      const res = await fetchWithRefresh(`/api/admin/translations/${deal.id}/override`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrfToken() },
        body: JSON.stringify({
          locale,
          field,
          value: fieldValues[locale]?.[field],
          manualOverride,
        }),
      });
      const json = (await res.json().catch((err) => {
        captureCaught(err, {
          scope: 'TranslationOverrideEditor.handleOverride.parse',
          severity: 'info',
        });
        return {};
      })) as { ok?: boolean };
      if (!res.ok || json.ok === false) {
        setSaveError(t('load_error'));
        return;
      }
      onRefresh?.();
    } catch (err) {
      captureCaught(err, {
        scope: 'TranslationOverrideEditor.handleOverride',
        severity: 'warning',
      });
      setSaveError(t('load_error'));
    } finally {
      setSaving(null);
    }
  }

  const overrideMapFor = (tr: TranslationRow): Record<Field, boolean> => ({
    title: tr.titleManualOverride,
    description: tr.descriptionManualOverride,
    specialInstructions: tr.specialInstructionsManualOverride,
  });

  const localePanels = Object.fromEntries(
    translations.map((tr) => [
      tr.locale,
      <div key={tr.locale} className="flex flex-col gap-6">
        <div className="flex flex-wrap items-center gap-3">
          {(() => {
            const badgeTooltip = statusBadgeTooltip(t, tr.status);
            const badge = (
              <Badge tone={statusBadgeTone(tr.status)}>{statusBadgeLabel(t, tr.status)}</Badge>
            );
            return badgeTooltip ? (
              <Tooltip>
                <TooltipTrigger asChild>{badge}</TooltipTrigger>
                <TooltipContent>{badgeTooltip}</TooltipContent>
              </Tooltip>
            ) : (
              badge
            );
          })()}
          {tr.slug && (
            <span className="text-text-muted text-sm">
              <span className="me-1">{t('slug_label')}</span>
              <span className="font-mono">{tr.slug}</span>
            </span>
          )}
          <SlugRegenerateButton dealId={deal.id} locale={tr.locale} onDone={onRefresh} />
        </div>

        {FIELDS.map((field) => {
          const isOverridden = overrideMapFor(tr)[field];
          const isSaving = saving === `${tr.locale}:${field}`;
          const currentValue = fieldValues[tr.locale]?.[field] ?? '';

          return (
            <div
              key={field}
              className="border-border-subtle flex flex-col gap-2 rounded-lg border p-4"
            >
              <div className="flex items-center justify-between gap-3">
                <Label className="font-semibold">
                  {t(`field_${field}` as Parameters<typeof t>[0])}
                </Label>
                <div className="flex items-center gap-2">
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Label
                        htmlFor={`override-${tr.locale}-${field}`}
                        className="text-text-muted text-sm"
                      >
                        {t('lock_as_manual')}
                      </Label>
                    </TooltipTrigger>
                    <TooltipContent>{t('lock_manual_tooltip')}</TooltipContent>
                  </Tooltip>
                  <Switch
                    id={`override-${tr.locale}-${field}`}
                    checked={isOverridden}
                    onCheckedChange={(checked) => handleOverride(field, checked, tr.locale)}
                    disabled={isSaving}
                    aria-label={t('lock_as_manual')}
                  />
                </div>
              </div>

              <FormField label={sourceFieldLabel} htmlFor={`source-${tr.locale}-${field}`}>
                <Input
                  id={`source-${tr.locale}-${field}`}
                  value={sourceFieldMap[field]}
                  readOnly
                  aria-readonly="true"
                  className="bg-surface-subtle opacity-70"
                />
              </FormField>

              <FormField
                label={interpolate(t('translated_value'), { language: localeLabel(t, tr.locale) })}
                htmlFor={`translated-${tr.locale}-${field}`}
              >
                <Input
                  id={`translated-${tr.locale}-${field}`}
                  value={currentValue}
                  onChange={(e) =>
                    setFieldValues((prev) => ({
                      ...prev,
                      [tr.locale]: { ...prev[tr.locale]!, [field]: e.target.value },
                    }))
                  }
                  readOnly={!isOverridden}
                  aria-readonly={!isOverridden}
                  dir={['he', 'ar'].includes(tr.locale) ? 'rtl' : 'ltr'}
                />
              </FormField>

              {isOverridden && (
                <Button
                  size="sm"
                  variant="primary"
                  disabled={isSaving}
                  onClick={() => handleOverride(field, true, tr.locale)}
                >
                  {isSaving ? t('saving') : t('save_override')}
                </Button>
              )}
            </div>
          );
        })}
      </div>,
    ]),
  );

  return (
    <TooltipProvider>
      <div className="flex flex-col gap-6">
        <Tabs
          items={translations.map((tr) => ({
            value: tr.locale,
            label: localeLabel(t, tr.locale),
            indicator: tr.status === 'STALE',
            ariaLabel:
              tr.status === 'STALE'
                ? `${localeLabel(t, tr.locale)} — ${t('stale_tab_aria')}`
                : undefined,
          }))}
          value={activeLocale}
          onValueChange={setActiveLocale}
          ariaLabel={t('locale_tabs_label')}
          panels={localePanels}
        />

        {saveError && (
          <p role="alert" className="text-danger-600 text-sm">
            {saveError}
          </p>
        )}
      </div>
    </TooltipProvider>
  );
}