import { useModalAmbientDuck } from '../../context/AmbientMusicContext';
import { HelpTip } from '../HelpTip';
import './FleetDeleteConfirmModal.css';

interface Props {
  open: boolean;
  count: number;
  agentName?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function FleetDeleteConfirmModal({
  open,
  count,
  agentName,
  onConfirm,
  onCancel,
}: Props) {
  useModalAmbientDuck(open);

  if (!open || count < 1) return null;

  const title =
    count === 1 && agentName
      ? `Remove "${agentName}" from fleet?`
      : `Remove ${count} machine${count === 1 ? '' : 's'} from fleet?`;

  return (
    <div className="fleet-delete-modal-backdrop" role="presentation" onClick={onCancel}>
      <div
        className="fleet-delete-modal card"
        role="dialog"
        aria-labelledby="fleet-delete-modal-title"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 id="fleet-delete-modal-title" className="font-display">
          Remove from fleet
          <HelpTip field="fl_delete_roster" />
        </h2>
        <p className="fleet-delete-modal-lead">{title}</p>
        <p className="form-hint fleet-delete-modal-honest">
          Removes the record from the server fleet registry only — does not uninstall the agent on
          the host. Use Remote Actions → Uninstall if you need to remove the miner binary.
        </p>
        <div className="fleet-delete-modal-actions">
          <button type="button" className="btn btn-outline" onClick={onCancel}>
            Cancel
          </button>
          <button
            type="button"
            className="btn btn-sm fleet-delete-modal-confirm"
            onClick={onConfirm}
          >
            Remove from fleet
          </button>
        </div>
      </div>
    </div>
  );
}