'use client';

// @design-system: domain/translation/ReportTranslationButton
/**
 * ReportTranslationButton — lets authenticated users report a bad translation
 * on a specific deal field.
 *
 * Shows only when locale !== 'he' (i.e., content is translated).
 * POST /api/translations/report with { dealId, locale, field }.
 */

import { useState } from 'react';
import { useT, useLocale } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { Button } from '@/components/ui/primitives/Button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/overlays/Dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { FormField } from '@/components/ui/primitives/FormField';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { captureCaught } from '@/lib/observability';

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

export interface ReportTranslationButtonProps {
  dealId: string;
  /** If true, the component renders nothing (original language shown). */
  isOriginalLocale?: boolean;
}

export function ReportTranslationButton({
  dealId,
  isOriginalLocale = false,
}: ReportTranslationButtonProps) {
  const t = useT('translations');
  const { locale } = useLocale();
  const [open, setOpen] = useState(false);
  const [field, setField] = useState<TranslationField>('title');
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');

  if (isOriginalLocale || locale === 'he') return null;

  async function handleSubmit() {
    setLoading(true);
    setStatus('idle');
    try {
      const csrf = getCsrfToken();
      const res = await fetch('/api/translations/report', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': csrf,
        },
        body: JSON.stringify({ dealId, locale, field }),
      });
      if (res.status === 202 || res.ok) {
        setStatus('success');
        setTimeout(() => {
          setOpen(false);
          setStatus('idle');
        }, 1500);
      } else {
        setStatus('error');
      }
    } catch (err) {
      captureCaught(err, {
        scope: 'components.translation.ReportTranslationButton.handleSubmit',
        severity: 'warning',
      });
      setStatus('error');
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <Button
        variant="ghost"
        size="sm"
        className="text-text-muted text-xs"
        onClick={() => setOpen(true)}
        aria-label={t('report_bad_translation') as string}
      >
        {t('report_bad_translation') as string}
      </Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t('report_bad_translation') as string}</DialogTitle>
          </DialogHeader>

          {status === 'success' && (
            <InlineNotice tone="success" title={t('report_submitted') as string} />
          )}
          {status === 'error' && <InlineNotice tone="danger" title={t('report_error') as string} />}

          {status !== 'success' && (
            <div className="mt-3 flex flex-col gap-4">
              <FormField label="Field">
                <Select value={field} onValueChange={(v) => setField(v as TranslationField)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="title">{t('report_field_title') as string}</SelectItem>
                    <SelectItem value="description">
                      {t('report_field_description') as string}
                    </SelectItem>
                    <SelectItem value="specialInstructions">
                      {t('report_field_special') as string}
                    </SelectItem>
                  </SelectContent>
                </Select>
              </FormField>
              <div className="flex justify-end gap-2">
                <Button variant="ghost" size="sm" onClick={() => setOpen(false)} disabled={loading}>
                  Cancel
                </Button>
                <Button variant="primary" size="sm" onClick={handleSubmit} disabled={loading}>
                  {t('report_bad_translation') as string}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}