import { type Component, For, createMemo } from "solid-js";
import { store, getCombinedScore, matchesFilter } from "@/store";
import { TaskCard } from "@/components/TaskCard";

export const PriorityView: Component = () => {
    const sortedTasks = createMemo(() => {
        return [...store.tasks]
            .filter(t => !t.deletedAt && matchesFilter(t))
            .sort((a, b) => {
                if (a.completed !== b.completed) return a.completed ? 1 : -1;
                // Use combined score to account for priority, urgency, and tags
                return getCombinedScore(b) - getCombinedScore(a);
            });
    });

    return (
        <div class="space-y-6">
            <header>
                <h2 class="text-3xl font-bold tracking-tight">Priority</h2>
                <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by priority.</p>
            </header>

            <div class="grid gap-3">
                <For each={sortedTasks()}>
                    {(task) => <TaskCard task={task} />}
                </For>
            </div>

            {sortedTasks().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">Focus sharp. No high-priority tasks yet.</p>
                </div>
            )}
        </div>
    );
};