/**
 * Bulk actions bar for DMS file browser.
 * Shows when files are selected, offers bulk-move and bulk-delete.
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/Button';
import { Select } from '@/components/ui/Select';
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
import { useToast } from '@/components/ui/Toast';
import { bulkMoveFiles, bulkDeleteFiles, type DmsFolder } from '@/api/dms';

export interface BulkActionsProps {
  selectedFileIds: Set<string>;
  folders: DmsFolder[];
  onClear: () => void;
  onActionComplete: () => void;
}

export function BulkActions({
  selectedFileIds,
  folders,
  onClear,
  onActionComplete,
}: BulkActionsProps) {
  const { t } = useTranslation();
  const toast = useToast();
  const [showMoveDialog, setShowMoveDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [targetFolderId, setTargetFolderId] = useState<string>('');
  const [submitting, setSubmitting] = useState(false);

  const selectedCount = selectedFileIds.size;
  const fileIds = Array.from(selectedFileIds);

  const handleBulkMove = async () => {
    setSubmitting(true);
    try {
      await bulkMoveFiles({
        file_ids: fileIds,
        target_folder_id: targetFolderId || null,
      });
      toast.success(t('dms.shared'));
      setShowMoveDialog(false);
      onClear();
      onActionComplete();
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      toast.error(msg);
    }
    setSubmitting(false);
  };

  const handleBulkDelete = async () => {
    setSubmitting(true);
    try {
      await bulkDeleteFiles({ file_ids: fileIds });
      toast.success(t('dms.deleted'));
      setShowDeleteDialog(false);
      onClear();
      onActionComplete();
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      toast.error(msg);
    }
    setSubmitting(false);
  };

  if (selectedCount === 0) return null;

  const folderOptions = [
    { value: '', label: t('dms.allFiles') },
    ...folders.map((f) => ({ value: f.id, label: f.name })),
  ];

  return (
    <div
      className="flex items-center justify-between p-3 bg-primary-50 border border-primary-200 rounded-lg"
      data-testid="bulk-actions-bar"
    >
      <span className="text-sm font-medium text-primary-700">
        {selectedCount} {t('dms.selected')}
      </span>
      <div className="flex items-center gap-2">
        <Button
          variant="secondary"
          size="sm"
          onClick={() => setShowMoveDialog(true)}
        >
          {t('dms.bulkMove')}
        </Button>
        <Button
          variant="danger"
          size="sm"
          onClick={() => setShowDeleteDialog(true)}
        >
          {t('dms.bulkDelete')}
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={onClear}
        >
          {t('dms.cancel')}
        </Button>
      </div>

      <ConfirmDialog
        open={showMoveDialog}
        title={t('dms.bulkMoveTitle')}
        message={t('dms.selectTargetFolder')}
        confirmLabel={t('dms.bulkMove')}
        onConfirm={handleBulkMove}
        onCancel={() => setShowMoveDialog(false)}
      />
      <ConfirmDialog
        open={showDeleteDialog}
        title={t('dms.bulkDeleteTitle')}
        message={t('dms.confirmBulkDelete')}
        confirmLabel={t('dms.bulkDelete')}
        variant="danger"
        onConfirm={handleBulkDelete}
        onCancel={() => setShowDeleteDialog(false)}
      />
    </div>
  );
}
