import { useEffect, useMemo, useState } from 'preact/hooks';
import { getStatusLabel } from '../../stores/taskStore';
import {
    downloadMonthlyServiceTasksArchive,
    downloadMonthlyCostsReport,
    downloadMonthlyServiserReport,
    downloadMonthlyWorkOrdersArchive,
    fetchMonthlyCostInvoices,
    fetchMonthlyServicerEntries,
    upsertMonthlyServicerEntry,
} from '../../stores/fleetDashboardStore';
import LeftSlideDrawer from '../layout/LeftSlideDrawer';
import { getTaskCraneKind, getTaskCraneOwner, getTaskCraneSerial } from '../../lib/taskCraneDisplay';

const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Ce', 'Pe', 'Su', 'Ne'];
const MONTH_NAMES = [
    'Sijecanj', 'Veljaca', 'Ozujak', 'Travanj', 'Svibanj', 'Lipanj',
    'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
];
const SERVICER_HEADERS = ['DATUM', 'OPIS POSLA', 'BR. DIZALICE', 'KOMITENT', 'MJESTO RADA', 'POCETAK RADA', 'KRAJ RADA', 'REDOVAN RAD (h)', 'PREKOVREMENI (h)', 'RADNI NALOG'];
const COST_HEADERS = ['DATUM', 'NAZIV RACUNA', 'LOKACIJA', 'OPIS', 'RADNI NALOG'];

function toDateKey(value) {
    const text = String(value || '').trim();
    if (!text) return null;
    if (/^\d{4}-\d{2}-\d{2}$/.test(text)) return text;
    const croatian = text.match(/^(\d{2})\.(\d{2})\.(\d{4})\.?$/);
    if (croatian) {
        return `${croatian[3]}-${croatian[2]}-${croatian[1]}`;
    }
    const parsed = new Date(text);
    if (Number.isNaN(parsed.getTime())) return null;
    return `${parsed.getFullYear()}-${String(parsed.getMonth() + 1).padStart(2, '0')}-${String(parsed.getDate()).padStart(2, '0')}`;
}

function formatDayLabel(year, month, day) {
    return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
}

function formatDateFromKey(dateKey) {
    const [year, month, day] = String(dateKey || '').split('-');
    if (!year || !month || !day) return '-';
    return `${day}.${month}.${year}.`;
}

function formatTime(value) {
    if (!value) return '-';
    if (typeof value === 'string' && /^\d{2}:\d{2}/.test(value)) {
        return value.slice(0, 5);
    }
    const parsed = new Date(value);
    if (Number.isNaN(parsed.getTime())) return '-';
    return parsed.toLocaleTimeString('hr-HR', { hour: '2-digit', minute: '2-digit' });
}

function toTimeInputValue(value) {
    const formatted = formatTime(value);
    return formatted === '-' ? '' : formatted;
}

function calculateHours(startTime, endTime) {
    if (!startTime || !endTime) return null;
    const [startHour, startMinute] = String(startTime).split(':').map((part) => Number(part));
    const [endHour, endMinute] = String(endTime).split(':').map((part) => Number(part));
    if (![startHour, startMinute, endHour, endMinute].every((value) => Number.isFinite(value))) return null;
    const startTotal = (startHour * 60) + startMinute;
    const endTotal = (endHour * 60) + endMinute;
    if (endTotal <= startTotal) return null;
    return ((endTotal - startTotal) / 60).toFixed(2).replace(/\.?0+$/, '');
}

function formatHourValue(value, fallback = '-') {
    if (value == null || value === '') return fallback;
    const numeric = Number(value);
    if (!Number.isFinite(numeric)) return String(value);
    if (Number.isInteger(numeric)) return String(numeric);
    return numeric.toFixed(2).replace(/\.?0+$/, '');
}

function joinUnique(values) {
    return Array.from(new Set(values.filter(Boolean).map((item) => String(item).trim()).filter(Boolean))).join(', ');
}

function parseReportHours(value) {
    if (value == null || value === '') return 0;
    const numeric = Number(String(value).replace(',', '.'));
    return Number.isFinite(numeric) ? numeric : 0;
}

function parseReportDateTime(dateKey, value) {
    if (value == null || value === '') return null;
    if (value instanceof Date) {
        return new Date(value.getTime());
    }
    const text = String(value).trim();
    if (!text) return null;
    const timeMatch = text.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
    if (dateKey && timeMatch) {
        const hours = String(timeMatch[1]).padStart(2, '0');
        const minutes = timeMatch[2];
        const seconds = timeMatch[3] || '00';
        return new Date(`${dateKey}T${hours}:${minutes}:${seconds}`);
    }
    const parsed = new Date(text);
    return Number.isNaN(parsed.getTime()) ? null : parsed;
}

function getTaskWorkHoursEntries(task, workOrdersById) {
    const tableData = task?.work_hours_table?.data ?? task?.work_hours_table ?? null;
    const rows = Array.isArray(tableData?.rows) ? tableData.rows : [];
    const workOrder = workOrdersById.get(String(task?.work_order || ''));
    const base = {
        title: task?.title || '',
        serial: getTaskCraneSerial(task) || '',
        client: getTaskCraneOwner(task) || '',
        location: workOrder?.location || '',
        workOrderLabel: task?.work_order_label || '',
    };
    const entries = [];

    for (const row of rows) {
        if (!row || typeof row !== 'object') continue;
        const dateKey = toDateKey(row.date) || toDateKey(task?.scheduled_date);
        if (!dateKey) continue;
        const startAt = parseReportDateTime(dateKey, row.work_time_from || row.travel_time_from || '');
        const endAt = parseReportDateTime(dateKey, row.work_time_to || row.travel_time_to || '');
        entries.push({
            ...base,
            dateKey,
            startAt,
            endAt,
            totalHours: parseReportHours(row.work_hours) + parseReportHours(row.travel_hours),
        });
    }

    if (entries.length > 0) {
        return entries;
    }

    const travelStart = workOrder?.travel_start_at;
    const travelEnd = workOrder?.travel_end_at;
    if (travelStart && travelEnd) {
        const startAt = parseReportDateTime(null, travelStart);
        const endAt = parseReportDateTime(null, travelEnd);
        const dateKey = toDateKey(task?.scheduled_date) || toDateKey(travelStart);
        const totalHours = startAt && endAt ? Math.max(0, (endAt.getTime() - startAt.getTime()) / 3600000) : 0;
        if (dateKey) {
            entries.push({
                ...base,
                dateKey,
                startAt,
                endAt,
                totalHours,
            });
        }
    }

    return entries;
}

export default function TaskCalendarWidget({ tasks = [], notes = [], workOrders = [], onTaskClick }) {
    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
    const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
    const [selectedDay, setSelectedDay] = useState(null);
    const [reportType, setReportType] = useState(null);
    const [downloading, setDownloading] = useState(false);
    const [manualEntries, setManualEntries] = useState([]);
    const [costInvoices, setCostInvoices] = useState([]);
    const [loadingManualEntries, setLoadingManualEntries] = useState(false);
    const [loadingCostInvoices, setLoadingCostInvoices] = useState(false);
    const [manualEntryTarget, setManualEntryTarget] = useState(null);
    const [manualEntryDraft, setManualEntryDraft] = useState(null);
    const [manualEntryError, setManualEntryError] = useState('');
    const [savingManualEntry, setSavingManualEntry] = useState(false);
    const [bulkDownloadOpen, setBulkDownloadOpen] = useState(false);
    const [downloadingAllTasks, setDownloadingAllTasks] = useState(false);
    const [downloadingAllWorkOrders, setDownloadingAllWorkOrders] = useState(false);

    const reportOpen = reportType !== null;
    const panelWidth = reportOpen ? 920 : 300;

    const tasksByDate = useMemo(() => {
        const map = {};
        for (const task of tasks) {
            const key = toDateKey(task.scheduled_date);
            if (!key) continue;
            if (!map[key]) map[key] = [];
            map[key].push(task);
        }
        return map;
    }, [tasks]);

    const notesByDate = useMemo(() => {
        const map = {};
        for (const note of notes) {
            const key = toDateKey(note.note_date);
            if (!key) continue;
            if (!map[key]) map[key] = [];
            map[key].push(note);
        }
        return map;
    }, [notes]);

    const workOrdersById = useMemo(() => {
        const map = new Map();
        for (const workOrder of workOrders) {
            if (workOrder?.id) {
                map.set(String(workOrder.id), workOrder);
            }
        }
        return map;
    }, [workOrders]);

    const manualEntriesByDate = useMemo(() => {
        const map = {};
        for (const entry of manualEntries) {
            const key = toDateKey(entry.entry_date);
            if (key) {
                map[key] = entry;
            }
        }
        return map;
    }, [manualEntries]);

    const calendarDays = useMemo(() => {
        const firstDay = new Date(viewYear, viewMonth, 1);
        let startDow = firstDay.getDay();
        startDow = (startDow + 6) % 7;
        const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
        const cells = [];
        for (let i = 0; i < startDow; i += 1) cells.push(null);
        for (let d = 1; d <= daysInMonth; d += 1) cells.push(d);
        return cells;
    }, [viewYear, viewMonth]);

    useEffect(() => {
        if (!reportOpen || reportType !== 'servicer') return undefined;
        let active = true;
        setLoadingManualEntries(true);
        fetchMonthlyServicerEntries(viewYear, viewMonth + 1)
            .then((rows) => {
                if (!active) return;
                setManualEntries(Array.isArray(rows) ? rows : []);
            })
            .catch(() => {
                if (!active) return;
                setManualEntries([]);
            })
            .finally(() => {
                if (!active) return;
                setLoadingManualEntries(false);
            });
        return () => {
            active = false;
        };
    }, [reportOpen, reportType, viewYear, viewMonth]);

    useEffect(() => {
        if (!reportOpen || reportType !== 'costs') return undefined;
        let active = true;
        setLoadingCostInvoices(true);
        fetchMonthlyCostInvoices(viewYear, viewMonth + 1)
            .then((rows) => {
                if (!active) return;
                setCostInvoices(Array.isArray(rows) ? rows : []);
            })
            .catch(() => {
                if (!active) return;
                setCostInvoices([]);
            })
            .finally(() => {
                if (!active) return;
                setLoadingCostInvoices(false);
            });
        return () => {
            active = false;
        };
    }, [reportOpen, reportType, viewYear, viewMonth]);

    const reportTaskEntriesByDate = useMemo(() => {
        const map = {};
        for (const task of tasks) {
            for (const entry of getTaskWorkHoursEntries(task, workOrdersById)) {
                if (!map[entry.dateKey]) map[entry.dateKey] = [];
                map[entry.dateKey].push(entry);
            }
        }
        return map;
    }, [tasks, workOrdersById]);

    const servicerRows = useMemo(() => {
        if (reportType !== 'servicer') return [];
        const rows = [];
        const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
        const monthPrefix = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}`;

        for (let day = 1; day <= daysInMonth; day += 1) {
            const key = `${monthPrefix}-${String(day).padStart(2, '0')}`;
            const dayEntries = reportTaskEntriesByDate[key] ?? [];
            const manualEntry = manualEntriesByDate[key];

            if (dayEntries.length > 0) {
                const titles = [];
                const serials = [];
                const clients = [];
                const locations = [];
                const workOrderLabels = [];
                const startTimes = [];
                const endTimes = [];
                let totalHours = 0;

                for (const entry of dayEntries) {
                    if (entry.title) titles.push(entry.title);
                    if (entry.serial) serials.push(entry.serial);
                    if (entry.client) clients.push(entry.client);
                    if (entry.location) locations.push(entry.location);
                    if (entry.workOrderLabel) workOrderLabels.push(entry.workOrderLabel);
                    if (entry.startAt) startTimes.push(entry.startAt);
                    if (entry.endAt) endTimes.push(entry.endAt);
                    totalHours += Number(entry.totalHours || 0);
                }

                const regularHours = 8;
                const overtimeHours = Math.max(0, totalHours - regularHours);
                rows.push({
                    key,
                    clickable: false,
                    source: 'task',
                    cells: [
                        formatDateFromKey(key),
                        joinUnique(titles) || '-',
                        joinUnique(serials) || '-',
                        joinUnique(clients) || '-',
                        joinUnique(locations) || '-',
                        startTimes.length ? formatTime(new Date(Math.min(...startTimes.map((item) => item.getTime())))) : '-',
                        endTimes.length ? formatTime(new Date(Math.max(...endTimes.map((item) => item.getTime())))) : '-',
                        formatHourValue(regularHours, '0'),
                        formatHourValue(overtimeHours, '0'),
                        joinUnique(workOrderLabels) || '-',
                    ],
                });
                continue;
            }

            if (manualEntry) {
                rows.push({
                    key,
                    clickable: true,
                    source: manualEntry.entry_type,
                    cells: [
                        formatDateFromKey(key),
                        manualEntry.description || '-',
                        '-',
                        '-',
                        manualEntry.location || '-',
                        formatTime(manualEntry.start_time),
                        formatTime(manualEntry.end_time),
                        formatHourValue(manualEntry.regular_hours, '0'),
                        formatHourValue(manualEntry.overtime_hours, '0'),
                        '-',
                    ],
                });
                continue;
            }

            rows.push({
                key,
                clickable: true,
                source: 'empty',
                cells: [formatDateFromKey(key), 'Klikni za unos', '-', '-', '-', '-', '-', '-', '0', '-'],
            });
        }

        return rows;
    }, [manualEntriesByDate, reportTaskEntriesByDate, reportType, viewMonth, viewYear]);

    const costsRows = useMemo(() => {
        if (reportType !== 'costs') return [];
        return costInvoices.map((invoice) => ([
            invoice?.datum ? new Date(invoice.datum).toLocaleDateString('hr-HR') : '-',
            invoice?.naziv_racuna || '-',
            invoice?.lokacija || '-',
            invoice?.opis || '-',
            invoice?.work_order_display_code || '-',
        ]));
    }, [costInvoices, reportType]);

    const selectedDayKey = selectedDay
        ? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
        : null;
    const selectedDayTasks = selectedDayKey ? (tasksByDate[selectedDayKey] ?? []) : [];
    const selectedDayNotes = selectedDayKey ? (notesByDate[selectedDayKey] ?? []) : [];
    const today = new Date();
    const totalScheduled = Object.values(tasksByDate).flat().length;
    const totalNoteReminders = Object.values(notesByDate).flat().length;

    function prevMonth() {
        setSelectedDay(null);
        if (viewMonth === 0) {
            setViewYear((y) => y - 1);
            setViewMonth(11);
            return;
        }
        setViewMonth((m) => m - 1);
    }

    function nextMonth() {
        setSelectedDay(null);
        if (viewMonth === 11) {
            setViewYear((y) => y + 1);
            setViewMonth(0);
            return;
        }
        setViewMonth((m) => m + 1);
    }

    function handleDayClick(day) {
        setSelectedDay((prev) => (prev === day ? null : day));
    }

    function handleTaskClick(task, closePanel) {
        onTaskClick?.(task);
        closePanel?.();
    }

    function toggleReport(type) {
        setReportType((prev) => (prev === type ? null : type));
        setManualEntryTarget(null);
        if (type !== 'servicer') {
            setBulkDownloadOpen(false);
        }
    }

    async function handleDownload() {
        if (downloading) return;
        setDownloading(true);
        try {
            if (reportType === 'servicer') {
                await downloadMonthlyServiserReport(viewYear, viewMonth + 1);
            } else if (reportType === 'costs') {
                await downloadMonthlyCostsReport(viewYear, viewMonth + 1);
            }
        } finally {
            setDownloading(false);
        }
    }

    async function handleDownloadAllTasksArchive() {
        if (downloadingAllTasks) return;
        setBulkDownloadOpen(false);
        setDownloadingAllTasks(true);
        try {
            await downloadMonthlyServiceTasksArchive(viewYear, viewMonth + 1);
        } finally {
            setDownloadingAllTasks(false);
        }
    }

    async function handleDownloadAllWorkOrdersArchive() {
        if (downloadingAllWorkOrders) return;
        setBulkDownloadOpen(false);
        setDownloadingAllWorkOrders(true);
        try {
            await downloadMonthlyWorkOrdersArchive(viewYear, viewMonth + 1);
        } finally {
            setDownloadingAllWorkOrders(false);
        }
    }

    function handleServicerRowClick(row) {
        if (!row?.clickable) return;
        setManualEntryTarget(row);
        setManualEntryDraft(null);
        setManualEntryError('');
    }

    function startManualEntry(entryType) {
        if (!manualEntryTarget) return;
        const isOffice = entryType === 'office';
        setManualEntryError('');
        setManualEntryDraft({
            entryType,
            startTime: isOffice ? '08:00' : '',
            endTime: isOffice ? '16:00' : '',
        });
    }

    async function handleSaveManualEntry() {
        if (!manualEntryTarget || !manualEntryDraft || savingManualEntry) return;
        const { entryType, startTime, endTime } = manualEntryDraft;
        if (startTime && endTime && !calculateHours(startTime, endTime)) {
            setManualEntryError('Kraj rada mora biti nakon početka rada.');
            return;
        }
        setManualEntryError('');
        setSavingManualEntry(true);
        try {
            const saved = await upsertMonthlyServicerEntry({
                entry_date: manualEntryTarget.key,
                entry_type: entryType,
                start_time: startTime || undefined,
                end_time: endTime || undefined,
            });
            setManualEntries((prev) => {
                const next = Array.isArray(prev) ? [...prev] : [];
                const index = next.findIndex((item) => toDateKey(item.entry_date) === toDateKey(saved.entry_date));
                if (index >= 0) {
                    next[index] = saved;
                } else {
                    next.push(saved);
                }
                return next.sort((a, b) => String(a.entry_date || '').localeCompare(String(b.entry_date || '')));
            });
            setManualEntryTarget(null);
            setManualEntryDraft(null);
            setManualEntryError('');
        } finally {
            setSavingManualEntry(false);
        }
    }

    return (
        <LeftSlideDrawer
            drawerId="calendar"
            title="Kalendar zadataka"
            tabLabel="Kalendar"
            tabTitle="Kalendar zadataka"
            tabTopClassName="top-1/2"
            backdropClassName="z-[45]"
            panelClassName="z-[46]"
            tabClassName="z-[47]"
            panelWidth={panelWidth}
        >
            {({ close }) => (
                <div className="relative flex min-h-0 flex-1 overflow-hidden">
                    <div
                        className="flex w-[300px] flex-shrink-0 flex-col overflow-hidden"
                        style={reportOpen ? { borderRight: '1px solid var(--color-border-hairline, #e5e7eb)' } : {}}
                    >
                        <div className="flex gap-1.5 border-b border-border-hairline px-3 py-2">
                            <button
                                type="button"
                                onClick={() => toggleReport('servicer')}
                                className={[
                                    'flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors',
                                    reportType === 'servicer'
                                        ? 'bg-indigo-600 text-white'
                                        : 'bg-canvas-deep text-text-main hover:bg-indigo-50 hover:text-indigo-700',
                                ].join(' ')}
                                title="Otvori panel za mjesecni izvjestaj servisera"
                            >
                                Izvjestaj servisera
                            </button>
                            <button
                                type="button"
                                onClick={() => toggleReport('costs')}
                                className={[
                                    'flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors',
                                    reportType === 'costs'
                                        ? 'bg-emerald-600 text-white'
                                        : 'bg-canvas-deep text-text-main hover:bg-emerald-50 hover:text-emerald-700',
                                ].join(' ')}
                                title="Otvori panel za mjesecni izvjestaj troskova"
                            >
                                Izvjestaj troskova
                            </button>
                        </div>

                        <div className="flex items-center justify-between px-4 py-2">
                            <button
                                type="button"
                                onClick={prevMonth}
                                className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
                                aria-label="Prethodni mjesec"
                            >
                                &lt;
                            </button>
                            <span className="text-sm font-medium text-text-main">
                                {MONTH_NAMES[viewMonth]} {viewYear}
                            </span>
                            <button
                                type="button"
                                onClick={nextMonth}
                                className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
                                aria-label="Sljedeci mjesec"
                            >
                                &gt;
                            </button>
                        </div>

                        <div className="px-3">
                            <div className="grid grid-cols-7 text-center">
                                {WEEKDAY_LABELS.map((label) => (
                                    <div key={label} className="py-1 text-[11px] font-medium text-text-muted">
                                        {label}
                                    </div>
                                ))}
                            </div>
                            <div className="grid grid-cols-7 gap-y-0.5 text-center">
                                {calendarDays.map((day, idx) => {
                                    if (!day) return <div key={`e-${idx}`} />;
                                    const key = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                                    const hasTasks = Boolean(tasksByDate[key]?.length);
                                    const hasNotes = Boolean(notesByDate[key]?.length);
                                    const taskCount = tasksByDate[key]?.length ?? 0;
                                    const noteCount = notesByDate[key]?.length ?? 0;
                                    const isToday =
                                        today.getFullYear() === viewYear
                                        && today.getMonth() === viewMonth
                                        && today.getDate() === day;
                                    const isSelected = selectedDay === day;
                                    return (
                                        <button
                                            key={key}
                                            type="button"
                                            onClick={() => handleDayClick(day)}
                                            title={hasTasks || hasNotes ? `${taskCount} zadatak/a, ${noteCount} biljeski` : undefined}
                                            className={[
                                                'relative mx-auto flex h-8 w-8 items-center justify-center rounded-full text-xs transition-colors',
                                                isSelected
                                                    ? 'bg-indigo-600 font-semibold text-white'
                                                    : isToday
                                                    ? 'bg-indigo-50 font-semibold text-indigo-700'
                                                    : hasTasks
                                                    ? 'font-medium text-text-main hover:bg-canvas-deep'
                                                    : 'text-text-main hover:bg-canvas-deep',
                                            ].join(' ')}
                                        >
                                            {day}
                                            {(hasTasks || hasNotes) && (
                                                <span className="absolute bottom-0.5 left-1/2 flex -translate-x-1/2 items-center gap-0.5">
                                                    {hasTasks && (
                                                        <span className={['h-1.5 w-1.5 rounded-full', isSelected ? 'bg-white' : 'bg-indigo-500'].join(' ')} />
                                                    )}
                                                    {hasNotes && (
                                                        <span className={['h-1.5 w-1.5 rounded-full', isSelected ? 'bg-violet-200' : 'bg-violet-500'].join(' ')} />
                                                    )}
                                                </span>
                                            )}
                                        </button>
                                    );
                                })}
                            </div>
                        </div>

                        <div className="mt-2 border-t border-border-hairline" />

                        <div className="flex-1 overflow-y-auto px-4 py-3">
                            {selectedDay ? (
                                <>
                                    <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-text-muted">
                                        {formatDayLabel(viewYear, viewMonth, selectedDay)}
                                    </p>
                                    {selectedDayTasks.length === 0 && selectedDayNotes.length === 0 ? (
                                        <p className="text-sm text-text-muted">Nema dogadjaja za odabrani datum.</p>
                                    ) : (
                                        <div className="space-y-3">
                                            {selectedDayNotes.length > 0 && (
                                                <div>
                                                    <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-violet-700">Biljeske</p>
                                                    <ul className="space-y-1.5">
                                                        {selectedDayNotes.map((note) => (
                                                            <li key={note.id} className="rounded-lg border border-violet-200 bg-violet-50 px-3 py-2 text-sm text-violet-900">
                                                                <span className="block">{note.note}</span>
                                                                <span className="mt-0.5 block text-[11px] text-violet-700">
                                                                    {note.task_title || note.work_order_label || 'Servisni kontekst'}
                                                                </span>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            )}
                                            {selectedDayTasks.length > 0 && (
                                                <div>
                                                    <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-indigo-700">Zadaci</p>
                                                    <ul className="space-y-1.5">
                                                        {selectedDayTasks.map((task) => (
                                                            <li key={task.id}>
                                                                <button
                                                                    type="button"
                                                                    onClick={() => handleTaskClick(task, close)}
                                                                    className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-left text-sm transition-colors hover:border-indigo-200 hover:bg-indigo-50"
                                                                >
                                                                    <span className="block truncate font-medium text-text-main">
                                                                        {task.title || '-'}
                                                                    </span>
                                                                    <span className="mt-0.5 block text-[11px] text-text-muted">
                                                                        {task.assigned_to_name || '-'} | {getStatusLabel(task.status || '-')}
                                                                    </span>
                                                                    <span className="mt-0.5 block text-[11px] text-text-muted">
                                                                        {getTaskCraneSerial(task)} | {getTaskCraneKind(task)} | {getTaskCraneOwner(task)}
                                                                    </span>
                                                                </button>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            )}
                                        </div>
                                    )}
                                </>
                            ) : (
                                <>
                                    <p className="text-xs text-text-muted">
                                        Odaberite datum u kalendaru za prikaz zadataka.
                                    </p>
                                    {totalScheduled > 0 && (
                                        <p className="mt-1.5 text-xs font-medium text-indigo-600">
                                            {totalScheduled} zadatak/a s planiranim datumom.
                                        </p>
                                    )}
                                    {totalNoteReminders > 0 && (
                                        <p className="mt-1 text-xs font-medium text-violet-600">
                                            {totalNoteReminders} biljeski/podsjetnika u kalendaru.
                                        </p>
                                    )}
                                    {totalScheduled === 0 && (
                                        <p className="mt-1.5 text-[11px] text-text-muted">
                                            Nijedan zadatak nema postavljen planirani datum.
                                        </p>
                                    )}
                                </>
                            )}
                        </div>
                    </div>

                    {reportOpen && (
                        <div className="flex flex-1 flex-col overflow-hidden">
                            <div className="flex items-center justify-between border-b border-border-hairline px-4 py-2">
                                <div>
                                    <span className="text-sm font-semibold text-text-main">
                                        {reportType === 'servicer' ? 'Mjesecni izvjestaj servisera' : 'Mjesecni izvjestaj troskova'}
                                    </span>
                                    <span className="ml-2 text-xs text-text-muted">
                                        {MONTH_NAMES[viewMonth]} {viewYear}
                                    </span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <button
                                        type="button"
                                        onClick={handleDownload}
                                        disabled={downloading}
                                        className="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-60"
                                    >
                                        {downloading ? 'Preuzimanje...' : reportType === 'servicer' ? 'Preuzmi mjesečni izvještaj' : 'Preuzmi DOCX'}
                                    </button>
                                    {reportType === 'servicer' && (
                                        <button
                                            type="button"
                                            onClick={() => setBulkDownloadOpen(true)}
                                            className="rounded-md border border-border-hairline px-3 py-1.5 text-xs font-medium text-text-main hover:bg-canvas-deep"
                                        >
                                            Preuzmi ZIP
                                        </button>
                                    )}
                                </div>
                            </div>

                            <p className="border-b border-border-hairline bg-canvas-deep px-4 py-1.5 text-[11px] text-text-muted">
                                {reportType === 'servicer'
                                    ? 'Tablica prikazuje sve dane u mjesecu. Klikni na red bez putnog naloga i odaberi status dana.'
                                    : 'Pregled troskova iz racuna vezanih uz putne naloge u odabranom mjesecu.'}
                            </p>

                            <div className="flex-1 overflow-auto">
                                {reportType === 'servicer' && (
                                    loadingManualEntries ? (
                                        <p className="px-4 py-8 text-center text-sm text-text-muted">Ucitam dnevne unose...</p>
                                    ) : (
                                        <table className="w-full min-w-[980px] border-collapse text-[11px]">
                                            <thead>
                                                <tr className="bg-canvas-deep">
                                                    {SERVICER_HEADERS.map((header) => (
                                                        <th key={header} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
                                                            {header}
                                                        </th>
                                                    ))}
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {servicerRows.map((row, index) => (
                                                    <tr
                                                        key={row.key}
                                                        onClick={() => handleServicerRowClick(row)}
                                                        className={[
                                                            index % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep',
                                                            row.clickable ? 'cursor-pointer hover:bg-indigo-50' : '',
                                                        ].join(' ')}
                                                        title={row.clickable ? 'Klikni za unos ili izmjenu dana bez putnog naloga.' : undefined}
                                                    >
                                                        {row.cells.map((cell, cellIndex) => (
                                                            <td key={`${row.key}-${cellIndex}`} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
                                                                {cell}
                                                            </td>
                                                        ))}
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    )
                                )}

                                {reportType === 'costs' && (
                                    loadingCostInvoices ? (
                                        <p className="px-4 py-8 text-center text-sm text-text-muted">Ucitam troskove...</p>
                                    ) : costsRows.length === 0 ? (
                                        <p className="px-4 py-8 text-center text-sm text-text-muted">
                                            Nema troskova za {MONTH_NAMES[viewMonth]} {viewYear}.
                                        </p>
                                    ) : (
                                        <table className="w-full min-w-[640px] border-collapse text-[11px]">
                                            <thead>
                                                <tr className="bg-canvas-deep">
                                                    {COST_HEADERS.map((header) => (
                                                        <th key={header} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
                                                            {header}
                                                        </th>
                                                    ))}
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {costsRows.map((row, index) => (
                                                    <tr key={`${row[0]}-${row[1]}-${index}`} className={index % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep'}>
                                                        {row.map((cell, cellIndex) => (
                                                            <td key={cellIndex} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
                                                                {cell}
                                                            </td>
                                                        ))}
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    )
                                )}
                            </div>
                        </div>
                    )}

                    {manualEntryTarget && (
                        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/20">
                            <div className="w-full max-w-sm rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-2xl">
                                <div className="flex items-start justify-between gap-3">
                                    <div>
                                        <h3 className="text-sm font-semibold text-text-main">
                                            {manualEntryDraft ? 'Unos radnog dana' : 'Odaberi vrstu unosa'}
                                        </h3>
                                        <p className="mt-1 text-xs text-text-muted">
                                            {formatDateFromKey(manualEntryTarget.key)} nema putni nalog. Odaberi status dana.
                                        </p>
                                    </div>
                                    <button
                                        type="button"
                                        onClick={() => {
                                            setManualEntryTarget(null);
                                            setManualEntryDraft(null);
                                            setManualEntryError('');
                                        }}
                                        className="rounded p-1 text-text-muted hover:bg-canvas-deep"
                                        aria-label="Zatvori"
                                    >
                                        x
                                    </button>
                                </div>

                                {!manualEntryDraft ? (
                                    <div className="mt-4 grid gap-2">
                                        <button
                                            type="button"
                                            disabled={savingManualEntry}
                                            onClick={() => startManualEntry('office')}
                                            className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50"
                                        >
                                            <span className="block font-medium text-text-main">Rad u uredu</span>
                                            <span className="block text-xs text-text-muted">08:00 - 16:00, 8h, Zagreb (ured)</span>
                                        </button>
                                        <button
                                            type="button"
                                            disabled={savingManualEntry}
                                            onClick={() => startManualEntry('sick_leave')}
                                            className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50"
                                        >
                                            <span className="block font-medium text-text-main">Bolovanje</span>
                                            <span className="block text-xs text-text-muted">Unesi vrijeme po potrebi</span>
                                        </button>
                                        <button
                                            type="button"
                                            disabled={savingManualEntry}
                                            onClick={() => startManualEntry('vacation')}
                                            className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50"
                                        >
                                            <span className="block font-medium text-text-main">Godisnji</span>
                                            <span className="block text-xs text-text-muted">Unesi vrijeme po potrebi</span>
                                        </button>
                                    </div>
                                ) : (
                                    <div className="mt-4 space-y-3">
                                        <div className="grid grid-cols-2 gap-3">
                                            <label className="block">
                                                <span className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-text-muted">Početak rada</span>
                                                <input
                                                    type="time"
                                                    value={manualEntryDraft.startTime}
                                                    onChange={(event) => setManualEntryDraft((prev) => ({ ...prev, startTime: event.target.value }))}
                                                    className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm text-text-main"
                                                />
                                            </label>
                                            <label className="block">
                                                <span className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-text-muted">Kraj rada</span>
                                                <input
                                                    type="time"
                                                    value={manualEntryDraft.endTime}
                                                    onChange={(event) => setManualEntryDraft((prev) => ({ ...prev, endTime: event.target.value }))}
                                                    className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm text-text-main"
                                                />
                                            </label>
                                        </div>
                                        <div className="rounded-lg bg-canvas-deep px-3 py-2 text-xs text-text-muted">
                                            Redovan rad (h): {calculateHours(manualEntryDraft.startTime, manualEntryDraft.endTime) || '0'}
                                        </div>
                                        {manualEntryError && (
                                            <p className="text-xs text-red-600">{manualEntryError}</p>
                                        )}
                                        <div className="flex gap-2">
                                            <button
                                                type="button"
                                                disabled={savingManualEntry}
                                                onClick={() => {
                                                    setManualEntryDraft(null);
                                                    setManualEntryError('');
                                                }}
                                                className="flex-1 rounded-lg border border-border-hairline px-3 py-2 text-sm hover:bg-canvas-deep"
                                            >
                                                Nazad
                                            </button>
                                            <button
                                                type="button"
                                                disabled={savingManualEntry}
                                                onClick={handleSaveManualEntry}
                                                className="flex-1 rounded-lg bg-indigo-600 px-3 py-2 text-sm text-white hover:bg-indigo-700 disabled:opacity-60"
                                            >
                                                {savingManualEntry ? 'Spremam...' : 'Spremi'}
                                            </button>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {bulkDownloadOpen && reportType === 'servicer' && (
                        <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/30 px-4">
                            <div className="w-full max-w-md rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-2xl">
                                <div className="flex items-center justify-between gap-3">
                                    <div>
                                        <h3 className="text-sm font-semibold text-text-main">Preuzmi ZIP arhivu</h3>
                                        <p className="mt-1 text-xs text-text-muted">
                                            {MONTH_NAMES[viewMonth]} {viewYear}
                                        </p>
                                    </div>
                                    <button
                                        type="button"
                                        onClick={() => setBulkDownloadOpen(false)}
                                        className="rounded p-1 text-text-muted hover:bg-canvas-deep"
                                        aria-label="Zatvori"
                                    >
                                        x
                                    </button>
                                </div>

                                <div className="mt-4 grid gap-2">
                                    <button
                                        type="button"
                                        disabled={downloadingAllTasks || downloadingAllWorkOrders}
                                        onClick={handleDownloadAllTasksArchive}
                                        className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50 disabled:opacity-60"
                                    >
                                        {downloadingAllTasks ? 'Generiranje...' : 'Servisni taskovi (SN)'}
                                    </button>
                                    <button
                                        type="button"
                                        disabled={downloadingAllTasks || downloadingAllWorkOrders}
                                        onClick={handleDownloadAllWorkOrdersArchive}
                                        className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50 disabled:opacity-60"
                                    >
                                        {downloadingAllWorkOrders ? 'Generiranje...' : 'Putni nalozi + računi (PN)'}
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            )}
        </LeftSlideDrawer>
    );
}