/**
 * 批量操作工具栏组件
 * 
 * 功能：
 * 1. 显示选中数量
 * 2. 全选/取消全选
 * 3. 批量操作菜单
 * 4. 固定在列表上方
 */

'use client';

import React from 'react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { ChevronDown, X } from 'lucide-react';

export interface BatchAction {
  key: string;
  label: string;
  icon?: React.ReactNode;
  variant?: 'default' | 'destructive';
  disabled?: boolean;
  onClick: () => void;
}

interface BatchOperationBarProps {
  /** 选中的项目数量 */
  selectedCount: number;
  /** 总项目数量 */
  totalCount: number;
  /** 是否全选 */
  isAllSelected: boolean;
  /** 全选回调 */
  onSelectAll: () => void;
  /** 取消全选回调 */
  onDeselectAll: () => void;
  /** 批量操作列表 */
  actions: BatchAction[];
  /** 是否显示全选按钮 */
  showSelectAll?: boolean;
  /** 自定义样式类名 */
  className?: string;
}

export function BatchOperationBar({
  selectedCount,
  totalCount,
  isAllSelected,
  onSelectAll,
  onDeselectAll,
  actions,
  showSelectAll = true,
  className = '',
}: BatchOperationBarProps) {
  if (selectedCount === 0) {
    return null;
  }

  return (
    <div
      className={`
        sticky top-0 z-10
        flex items-center justify-between
        px-6 py-3
        bg-blue-50 border-b border-blue-200
        ${className}
      `}
    >
      {/* 左侧：选中信息 + 全选按钮 */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <div className="flex items-center justify-center w-6 h-6 bg-blue-600 text-white text-xs font-semibold rounded">
            {selectedCount}
          </div>
          <span className="text-sm font-medium text-gray-700">
            已选中 {selectedCount} 项
          </span>
        </div>

        {showSelectAll && !isAllSelected && selectedCount < totalCount && (
          <Button
            variant="outline"
            size="sm"
            onClick={onSelectAll}
            className="h-8 text-xs"
          >
            全选 {totalCount} 项
          </Button>
        )}

        <Button
          variant="ghost"
          size="sm"
          onClick={onDeselectAll}
          className="h-8 text-xs text-gray-500 hover:text-gray-700"
        >
          <X className="w-4 h-4 mr-1" />
          取消选择
        </Button>
      </div>

      {/* 右侧：批量操作菜单 */}
      <div className="flex items-center gap-2">
        {actions.length > 0 && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="default"
                size="sm"
                className="h-8 bg-blue-600 hover:bg-blue-700"
              >
                批量操作
                <ChevronDown className="w-4 h-4 ml-1" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              {actions.map((action, index) => (
                <React.Fragment key={action.key}>
                  {index > 0 && actions[index - 1].variant === 'destructive' && action.variant !== 'destructive' && (
                    <DropdownMenuSeparator />
                  )}
                  <DropdownMenuItem
                    onClick={action.onClick}
                    disabled={action.disabled}
                    className={
                      action.variant === 'destructive'
                        ? 'text-red-600 focus:text-red-600 focus:bg-red-50'
                        : ''
                    }
                  >
                    {action.icon && <span className="mr-2">{action.icon}</span>}
                    {action.label}
                  </DropdownMenuItem>
                </React.Fragment>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>
    </div>
  );
}

/**
 * 批量操作 Hook
 * 
 * 使用示例：
 * ```tsx
 * const { selectedIds, toggleSelect, toggleSelectAll, isSelected, isAllSelected, clearSelection } = useBatchSelection(items);
 * ```
 */
export function useBatchSelection<T extends { id: string }>(items: T[]) {
  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set());

  const toggleSelect = React.useCallback((id: string) => {
    setSelectedIds((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(id)) {
        newSet.delete(id);
      } else {
        newSet.add(id);
      }
      return newSet;
    });
  }, []);

  const toggleSelectAll = React.useCallback(() => {
    setSelectedIds((prev) => {
      if (prev.size === items.length) {
        return new Set();
      } else {
        return new Set(items.map((item) => item.id));
      }
    });
  }, [items]);

  const selectAll = React.useCallback(() => {
    setSelectedIds(new Set(items.map((item) => item.id)));
  }, [items]);

  const clearSelection = React.useCallback(() => {
    setSelectedIds(new Set());
  }, []);

  const isSelected = (id: string) => selectedIds.has(id);

  const isAllSelected = items.length > 0 && selectedIds.size === items.length;

  const selectedCount = selectedIds.size;

  const selectedItems = items.filter((item) => selectedIds.has(item.id));

  return {
    selectedIds,
    selectedCount,
    selectedItems,
    toggleSelect,
    toggleSelectAll,
    selectAll,
    clearSelection,
    isSelected,
    isAllSelected,
  };
}