import React, { useState } from 'react';

import type { CompetitorSnapshot } from '../../service/visibility/visibility.interface';
import { excludeCompetitor } from '../../service/visibility/visibility.service';

import Modal from './Modal';

/** Props for {@link ConfirmExcludeCompetitorModal}. */
interface ConfirmExcludeCompetitorModalProps {
  /** Modal open flag. */
  open: boolean;
  /** Competitor row whose delete button was clicked. ``null`` hides the body. */
  competitor: CompetitorSnapshot | null;
  /** Close handler. Fires on cancel and after a successful exclude. */
  onClose: () => void;
  /**
   * Called after the backend confirms the exclusion. Parent should use it
   * to refetch the leaderboard so the excluded row disappears.
   */
  onExcluded: () => void;
  /** Recomaze client id. */
  clientId: string;
  /** Recomaze JWT. */
  token: string;
  /** Brand the competitor belongs to. */
  brandId: string;
}

/**
 * Confirmation dialog for the per-row "delete" button on the competitor
 * leaderboard. Sends ``POST /excluded-competitors`` which (a) drops the
 * rival from the current leaderboard view and (b) tells the scanner to
 * skip the domain on future weeks.
 *
 * @param {ConfirmExcludeCompetitorModalProps} props - Dialog props.
 * @returns {JSX.Element} The modal.
 */
const ConfirmExcludeCompetitorModal = ({
  open,
  competitor,
  onClose,
  onExcluded,
  clientId,
  token,
  brandId,
}: ConfirmExcludeCompetitorModalProps): JSX.Element => {
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleConfirm = async (): Promise<void> => {
    if (!competitor) return;
    setSubmitting(true);
    setError(null);
    try {
      await excludeCompetitor(clientId, token, brandId, {
        domain: competitor.competitor_domain,
      });
      onExcluded();
      onClose();
    } catch (err) {
      setError(
        err instanceof Error ? err.message : 'Failed to remove competitor.'
      );
    } finally {
      setSubmitting(false);
    }
  };

  const displayName =
    competitor?.competitor_name || competitor?.competitor_domain || '';

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Remove this competitor?"
      footer={
        <>
          <button
            type="button"
            onClick={onClose}
            disabled={submitting}
            className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={!competitor || submitting}
            className="rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60"
          >
            {submitting ? 'Removing...' : 'Remove competitor'}
          </button>
        </>
      }
    >
      <div className="flex flex-col gap-3">
        {error && (
          <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
            {error}
          </div>
        )}
        {competitor && (
          <p className="text-sm text-gray-700">
            <span className="font-semibold">{displayName}</span> will disappear
            from the leaderboard and we&apos;ll stop counting it on future
            scans. You can add it back manually under &ldquo;Tracked
            competitors&rdquo; if you change your mind.
          </p>
        )}
      </div>
    </Modal>
  );
};

export default ConfirmExcludeCompetitorModal;