/**
 * Bulk Actions Component for Bookings
 */

'use client';

import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { ExportFormat, ExportOptions } from '@/types/booking';

interface BulkActionsProps {
  selectedCount: number;
  onExport: (options: ExportOptions) => Promise<void>;
  onClearSelection: () => void;
}

export const BulkActions: React.FC<BulkActionsProps> = ({
  selectedCount,
  onExport,
  onClearSelection,
}) => {
  const t = useTranslations('components.bulkActions');
  const [showExportMenu, setShowExportMenu] = useState(false);
  const [exporting, setExporting] = useState(false);

  const handleExport = async (format: ExportFormat) => {
    setExporting(true);
    try {
      await onExport({ format });
      setShowExportMenu(false);
    } catch (error: any) {
      alert(t('exportFailed', { message: error.message }));
    } finally {
      setExporting(false);
    }
  };

  if (selectedCount === 0) return null;

  return (
    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <span className="text-sm font-medium text-blue-900">
            {t('selectedCount', { count: selectedCount })}
          </span>
          <button
            onClick={onClearSelection}
            className="text-sm text-blue-600 hover:text-blue-700 underline"
          >
            {t('clearSelection')}
          </button>
        </div>

        <div className="flex items-center gap-2">
          {/* Export dropdown */}
          <div className="relative">
            <button
              onClick={() => setShowExportMenu(!showExportMenu)}
              disabled={exporting}
              className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {exporting ? t('exporting') : t('exportSelected')}
            </button>

            {showExportMenu && !exporting && (
              <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-20">
                <div className="py-1">
                  <button
                    onClick={() => handleExport(ExportFormat.CSV)}
                    className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                  >
                    {t('exportCsv')}
                  </button>
                  <button
                    onClick={() => handleExport(ExportFormat.EXCEL)}
                    className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                  >
                    {t('exportExcel')}
                  </button>
                  <button
                    onClick={() => handleExport(ExportFormat.JSON)}
                    className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                  >
                    {t('exportJson')}
                  </button>
                </div>
              </div>
            )}
          </div>

          {/* Bulk update button */}
          <button
            className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
            onClick={() => {
              alert(t('bulkUpdateSoon'));
            }}
          >
            {t('bulkUpdate')}
          </button>
        </div>
      </div>
    </div>
  );
};
