/**
 * Bulk Status Update Modal
 * Reusable modal for updating status of multiple selected records
 * Used across all table pages (Keywords, Clusters, Ideas, Tasks, etc.)
 */

import { useState } from 'react';
import { Modal } from '../ui/modal';
import Button from '../ui/button/Button';
import SelectDropdown from '../form/SelectDropdown';
import Label from '../form/Label';
import { InfoIcon } from '../../icons';

interface BulkStatusUpdateModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (status: string) => void | Promise<void>;
  title: string;
  message: string;
  confirmText?: string;
  statusOptions: Array<{ value: string; label: string }>;
  isLoading?: boolean;
}

export default function BulkStatusUpdateModal({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = 'Update Status',
  statusOptions,
  isLoading = false,
}: BulkStatusUpdateModalProps) {
  const [selectedStatus, setSelectedStatus] = useState<string>('');

  const handleConfirm = async () => {
    if (!selectedStatus) return;
    await onConfirm(selectedStatus);
    // Reset on success (onClose will be called by parent)
    setSelectedStatus('');
  };

  const handleClose = () => {
    setSelectedStatus('');
    onClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      className="max-w-md"
    >
      <div className="p-6">
        {/* Header with icon */}
        <div className="flex items-center gap-3 mb-4">
          <div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
            <InfoIcon className="w-5 h-5 text-brand-500" />
          </div>
          <h2 className="text-xl font-bold text-gray-800 dark:text-white">
            {title}
          </h2>
        </div>

        {/* Message */}
        <p className="text-gray-600 dark:text-gray-400 mb-4">
          {message}
        </p>

        {/* Status Selector */}
        <div className="mb-6">
          <Label className="mb-2">
            New Status
          </Label>
          <SelectDropdown
            options={statusOptions}
            placeholder="Select status"
            value={selectedStatus}
            onChange={(value) => setSelectedStatus(value || '')}
            className="w-full"
          />
        </div>

        {/* Actions */}
        <div className="flex justify-end gap-4">
          <Button
            variant="outline"
            onClick={handleClose}
            disabled={isLoading}
          >
            Cancel
          </Button>
          <Button
            variant="primary"
            onClick={handleConfirm}
            disabled={isLoading || !selectedStatus}
          >
            {isLoading ? 'Updating...' : confirmText}
          </Button>
        </div>
      </div>
    </Modal>
  );
}