import { useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import { FormError } from '../components/forms';
import { apiDelete } from '../lib/api';

/**
 * The pond's danger zone: move a shared pond to the site-level trash
 * (`DELETE /ponds/:id`, Pond-Admin-gated in the api; a site admin can
 * restore it). Type-to-confirm with the pond name — the same backstop
 * pattern as the backup restore. Personal ponds never render this
 * section: they are the account's home and the api refuses anyway.
 */
export function DeletePondSection({
  pondId,
  pondName,
}: {
  pondId: string;
  pondName: string;
}): React.JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState<unknown>(null);
  const [busy, setBusy] = useState(false);

  const remove = async (event: React.FormEvent): Promise<void> => {
    event.preventDefault();
    setError(null);
    setBusy(true);
    try {
      await apiDelete(`/ponds/${pondId}`);
      await queryClient.invalidateQueries({ queryKey: ['ponds'] });
      navigate('/');
    } catch (err) {
      setError(err);
      setBusy(false);
    }
  };

  return (
    <section className="pond-delete">
      <h2>{t('pond.delete.title')}</h2>
      <p className="pond-delete__hint">{t('pond.delete.hint')}</p>
      <form onSubmit={(e) => void remove(e)}>
        <FormError error={error} />
        <label>
          {t('pond.delete.confirmLabel', { name: pondName })}
          <input
            type="text"
            value={confirm}
            autoComplete="off"
            onChange={(e) => setConfirm(e.target.value)}
          />
        </label>
        <button
          type="submit"
          className="button button--danger pond-delete__submit"
          disabled={busy || confirm !== pondName}
        >
          {t('pond.delete.submit')}
        </button>
      </form>
    </section>
  );
}