import { type Component, For, createMemo, onMount } from "solid-js";
import { store, getCombinedScore, matchesFilter } from "@/store";
import { TaskCard } from "@/components/TaskCard";
import { useDelayedSort } from "@/hooks/useDelayedSort";
import autoAnimate from "@formkit/auto-animate";

export const DigInView: Component = () => {
    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));

    const { displayedTasks, shakingTaskIds } = useDelayedSort(
        sourceTasks,
        (a, b) => {
            if (a.completed !== b.completed) return a.completed ? 1 : -1;
            // Primary: Size descending (largest first)
            const sizeA = a.size ?? 5;
            const sizeB = b.size ?? 5;
            if (sizeA !== sizeB) return sizeB - sizeA;
            // Secondary: Combined score descending (higher focus first)
            return getCombinedScore(b) - getCombinedScore(a);
        },
        300
    );

    let listRef: HTMLDivElement | undefined;
    onMount(() => {
        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
    });

    return (
        <div class="space-y-6">
            <header>
                <h2 class="text-3xl font-bold tracking-tight">Dig In</h2>
                <p class="text-muted-foreground mt-1 text-lg">Largest tasks first. Tackle big projects head-on.</p>
            </header>

            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                <For each={displayedTasks()}>
                    {(task) => (
                        <div class="w-full min-w-0">
                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                        </div>
                    )}
                </For>
            </div>

            {displayedTasks().length === 0 && (
                <div class="flex flex-col items-center justify-center py-20 text-center">
                    <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                        <span class="text-2xl">⛏️</span>
                    </div>
                    <p class="text-muted-foreground">Nothing here. Add some tasks to dig into!</p>
                </div>
            )}
        </div>
    );
};