import { useMemo } from 'preact/hooks';
import { useStore } from '@nanostores/preact';
import { $tasks } from '../../stores/taskStore';
import { $user } from '../../stores/authStore';
import TaskCalendarWidget from '../dashboard/TaskCalendarWidget';

/**
 * Mountan u Layout.astro (van AnimatedPage transforma) pa fixed pozicija
 * uvijek ostaje uz viewport rub.
 *
 * Filtriranje taskova po ulozi:
 * - Serviser → samo taskovi dodijeljeni njemu
 * - Supervisor (nije serviser) → svi taskovi
 *
 * Kad korisnik klikne task u kalendaru, šaljemo custom event koji
 * FleetDashboardShell sluša i otvara TaskServiceRecordsModal.
 */
export default function TaskCalendarPortal() {
    const allTasks = useStore($tasks);
    const user = useStore($user);

    const isServiser = Boolean(user?.is_serviser);
    const isTeamMember = Boolean(user?.is_team_member);
    const isSupervisorNotServiser = isTeamMember && !isServiser;

    const tasks = useMemo(() => {
        if (!user?.id) return [];
        // Supervisor vidi sve; serviser vidi samo svoje
        if (isSupervisorNotServiser) return allTasks;
        return allTasks.filter(
            (t) => String(t.assigned_to || '') === String(user.id)
        );
    }, [allTasks, user, isSupervisorNotServiser]);

    // Ne renderiramo ništa ako korisnik nije prijavljen
    if (!user?.id) return null;

    function handleTaskClick(task) {
        window.dispatchEvent(
            new CustomEvent('calendar:open-task', { detail: { task } })
        );
    }

    return (
        <TaskCalendarWidget
            tasks={tasks}
            onTaskClick={handleTaskClick}
        />
    );
}