import { useEffect, useRef, useState } from 'react';
import { useI18n } from '../i18n/I18nProvider';

// One field, one rule, shared by the two save flows that have to ask for a name:
// the photo being filed and the look being filed as a recipe. `check` is where a
// caller says a name is already taken — the reply is shown under the field and
// nothing is saved until it comes back clean.
export function NameModal({
  title,
  label,
  initial,
  check,
  onSubmit,
  onClose,
}: {
  title: string;
  label: string;
  initial: string;
  check?: (name: string) => string | null;
  onSubmit: (name: string) => void;
  onClose: () => void;
}) {
  const { t } = useI18n();
  const [name, setName] = useState(initial);
  const [problem, setProblem] = useState<string | null>(null);
  const field = useRef<HTMLInputElement>(null);

  useEffect(() => field.current?.select(), []);

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = name.trim();
    if (!trimmed) {
      setProblem(t('name.required'));
      return;
    }
    const clash = check?.(trimmed) ?? null;
    if (clash) {
      setProblem(clash);
      return;
    }
    onSubmit(trimmed);
  };

  return (
    <div className="modal-backdrop" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <form className="modal" data-key="name-modal" onSubmit={submit}>
        <h2>{title}</h2>
        <label className="hint" htmlFor="name-modal-field">
          {label}
        </label>
        <input
          id="name-modal-field"
          ref={field}
          className="field"
          data-key="name-input"
          value={name}
          maxLength={60}
          onChange={(e) => {
            setName(e.target.value);
            setProblem(null);
          }}
        />
        {problem ? (
          <p className="err" data-key="name-error">
            {problem}
          </p>
        ) : null}
        <button type="submit" className="btn primary" data-key="name-ok">
          {t('name.save')}
        </button>
        <button type="button" className="btn ghost" data-key="name-cancel" onClick={onClose}>
          {t('name.cancel')}
        </button>
      </form>
    </div>
  );
}