import { useState } from 'react';
import { Modal, Select, message } from 'antd';
import { mediaApi } from '@/lib/media-api';
import { getErrorMessage } from '@/utils/getErrorMessage';

interface PublishModalProps {
  open: boolean;
  videoIds: number[];
  onSuccess: () => void;
  onCancel: () => void;
}

export default function PublishModal({ open, videoIds, onSuccess, onCancel }: PublishModalProps) {
  const [category, setCategory] = useState<string>('videos');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!category) {
      message.error('Please select a category');
      return;
    }

    setLoading(true);
    try {
      await mediaApi.post('/videos/bulk-publish', {
        videoIds,
        category,
      });
      message.success(`Successfully published ${videoIds.length} video(s) to ${category}`);
      onSuccess();
      setCategory('videos');
    } catch (error: unknown) {
      message.error(getErrorMessage(error, 'Failed to publish videos'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={`Publish ${videoIds.length} Video(s) to Gallery`}
      open={open}
      onOk={handleSubmit}
      onCancel={onCancel}
      confirmLoading={loading}
      okText="Publish"
    >
      <div style={{ marginTop: 16 }}>
        <label style={{ display: 'block', marginBottom: 8 }}>Select Category:</label>
        <Select
          value={category}
          onChange={setCategory}
          style={{ width: '100%' }}
          options={[
            { value: 'videos', label: 'Videos' },
            { value: 'curated', label: 'Curated' },
            { value: 'compilations', label: 'Compilations' },
            { value: 'playback', label: 'Playback' },
            { value: 'highlights', label: 'Highlights' },
          ]}
        />
      </div>
    </Modal>
  );
}
