import { useState } from 'react';
import { Modal, Input, Alert } from 'antd';

interface DeleteConfirmModalProps {
  open: boolean;
  count: number;
  onConfirm: () => void;
  onCancel: () => void;
  loading?: boolean;
}

export default function DeleteConfirmModal({ open, count, onConfirm, onCancel, loading }: DeleteConfirmModalProps) {
  const [confirmText, setConfirmText] = useState('');

  const handleOk = () => {
    if (confirmText === 'DELETE') {
      onConfirm();
      setConfirmText('');
    }
  };

  const handleCancel = () => {
    setConfirmText('');
    onCancel();
  };

  return (
    <Modal
      title="Confirm Deletion"
      open={open}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="Delete"
      okButtonProps={{ danger: true, disabled: confirmText !== 'DELETE' }}
      confirmLoading={loading}
    >
      <Alert
        message="Warning"
        description={`You are about to delete ${count} video(s). This action cannot be undone.`}
        type="warning"
        showIcon
        style={{ marginBottom: 16 }}
      />

      <div>
        <label style={{ display: 'block', marginBottom: 8 }}>
          Type <strong>DELETE</strong> to confirm:
        </label>
        <Input
          value={confirmText}
          onChange={(e) => setConfirmText(e.target.value)}
          placeholder="DELETE"
          autoFocus
        />
      </div>
    </Modal>
  );
}
