import * as React from 'react';
import type { SubmitEvent } from 'react';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { NumberInput } from '@/components/ui/primitives/NumberInput';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';

type Limits = { maxImagesPerDeal: number; maxImagesPerSku: number };

export default function ImageLimitsForm({ initial }: { initial: Limits }) {
  const t = useT('vendor_images');
  const [state, setState] = React.useState<Limits>(initial);
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState<string | null>(null);
  const [savedMsg, setSavedMsg] = React.useState<string | null>(null);

  const onSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSaving(true);
    setErr(null);
    setSavedMsg(null);
    try {
      const res = await fetch('/api/admin/platform/image-limits', {
        method: 'PUT',
        headers: { 'content-type': 'application/json', 'x-csrf-token': getCsrfToken() },
        body: JSON.stringify(state),
      });
      if (!res.ok) {
        captureCaught(new Error(`image limits save failed: ${res.status}`), {
          scope: 'ImageLimitsForm.onSubmit',
          severity: 'warning',
        });
        setErr(t('save_error'));
      } else {
        setSavedMsg(t('saved'));
      }
    } catch (e_) {
      captureCaught(e_, { scope: 'ImageLimitsForm.onSubmit', severity: 'warning' });
      setErr(t('save_error'));
    } finally {
      setSaving(false);
    }
  };

  return (
    <form onSubmit={onSubmit} className="flex max-w-md flex-col gap-4">
      <label className="flex flex-col gap-1 text-sm">
        {t('maxPerDeal')}
        <NumberInput
          min={1}
          max={50}
          value={state.maxImagesPerDeal}
          onChange={(n) => setState((s) => ({ ...s, maxImagesPerDeal: n }))}
        />
        <span className="text-text-muted text-xs">{t('maxPerDealHint')}</span>
      </label>
      <label className="flex flex-col gap-1 text-sm">
        {t('maxPerSku')}
        <NumberInput
          min={1}
          max={50}
          value={state.maxImagesPerSku}
          onChange={(n) => setState((s) => ({ ...s, maxImagesPerSku: n }))}
        />
        <span className="text-text-muted text-xs">{t('maxPerSkuHint')}</span>
      </label>
      <Button type="submit" disabled={saving} variant="primary">
        {t('save')}
      </Button>
      {err && <p className="text-sm text-[color:var(--danger)]">{err}</p>}
      {savedMsg && <p className="text-sm text-[color:var(--success)]">{savedMsg}</p>}
    </form>
  );
}