import { useState, useCallback } from 'react';

interface UseSelectionOptions<T> {
    items: T[];
    getKey: (item: T) => string;
}

export function useSelection<T>({ items, getKey }: UseSelectionOptions<T>) {
    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

    const isSelected = useCallback((item: T) => {
        return selectedIds.has(getKey(item));
    }, [selectedIds, getKey]);

    const toggle = useCallback((item: T) => {
        const key = getKey(item);
        setSelectedIds(prev => {
            const next = new Set(prev);
            if (next.has(key)) {
                next.delete(key);
            } else {
                next.add(key);
            }
            return next;
        });
    }, [getKey]);

    const select = useCallback((item: T) => {
        setSelectedIds(prev => new Set(prev).add(getKey(item)));
    }, [getKey]);

    const deselect = useCallback((item: T) => {
        const key = getKey(item);
        setSelectedIds(prev => {
            const next = new Set(prev);
            next.delete(key);
            return next;
        });
    }, [getKey]);

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

    const deselectAll = useCallback(() => {
        setSelectedIds(new Set());
    }, []);

    const toggleAll = useCallback(() => {
        if (selectedIds.size === items.length) {
            deselectAll();
        } else {
            selectAll();
        }
    }, [selectedIds.size, items.length, selectAll, deselectAll]);

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

    return {
        selectedIds,
        selectedItems,
        selectedCount: selectedIds.size,
        isSelected,
        toggle,
        select,
        deselect,
        selectAll,
        deselectAll,
        toggleAll,
        hasSelection: selectedIds.size > 0,
        allSelected: selectedIds.size === items.length && items.length > 0,
    };
}

// Bulk actions toolbar component
import { X, Trash2, CheckCircle, Archive, Tag } from 'lucide-react';

interface BulkActionsToolbarProps {
    selectedCount: number;
    onDeselectAll: () => void;
    onComplete?: () => void;
    onArchive?: () => void;
    onDelete?: () => void;
    onTag?: () => void;
    isLoading?: boolean;
}

export function BulkActionsToolbar({
    selectedCount,
    onDeselectAll,
    onComplete,
    onArchive,
    onDelete,
    onTag,
    isLoading = false
}: BulkActionsToolbarProps) {
    if (selectedCount === 0) return null;

    return (
        <div className="fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
            <div className="bg-slate-900 dark:bg-slate-700 text-white px-4 py-3 rounded-2xl shadow-2xl flex items-center gap-4">
                <div className="flex items-center gap-2 pr-4 border-r border-slate-700 dark:border-slate-600">
                    <button
                        onClick={onDeselectAll}
                        className="p-1 hover:bg-slate-700 dark:hover:bg-slate-600 rounded"
                    >
                        <X size={18} />
                    </button>
                    <span className="font-medium text-sm">
                        {selectedCount} selected
                    </span>
                </div>

                <div className="flex items-center gap-2">
                    {onComplete && (
                        <button
                            onClick={onComplete}
                            disabled={isLoading}
                            className="flex items-center gap-2 px-3 py-1.5 bg-[var(--color-primary)] hover:bg-[var(--color-primary)] disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
                        >
                            <CheckCircle size={16} />
                            Complete
                        </button>
                    )}

                    {onArchive && (
                        <button
                            onClick={onArchive}
                            disabled={isLoading}
                            className="flex items-center gap-2 px-3 py-1.5 bg-slate-600 hover:bg-slate-500 disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
                        >
                            <Archive size={16} />
                            Archive
                        </button>
                    )}

                    {onTag && (
                        <button
                            onClick={onTag}
                            disabled={isLoading}
                            className="flex items-center gap-2 px-3 py-1.5 bg-slate-600 hover:bg-slate-500 disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
                        >
                            <Tag size={16} />
                            Tag
                        </button>
                    )}

                    {onDelete && (
                        <button
                            onClick={onDelete}
                            disabled={isLoading}
                            className="flex items-center gap-2 px-3 py-1.5 bg-red-600 hover:bg-red-500 disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
                        >
                            <Trash2 size={16} />
                            Delete
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
}
