import { useMemo, useState } from 'preact/hooks';
import { getStatusLabel } from '../../stores/taskStore';
import LeftSlideDrawer from '../layout/LeftSlideDrawer';
import { getTaskCraneKind, getTaskCraneOwner, getTaskCraneSerial } from '../../lib/taskCraneDisplay';

const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Če', 'Pe', 'Su', 'Ne'];
const MONTH_NAMES = [
    'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
    'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
];
function toIsoDateKey(dateStr) {
    if (!dateStr) return null;
    const d = new Date(dateStr);
    if (Number.isNaN(d.getTime())) return null;
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

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

export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick }) {
    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
    const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
    const [selectedDay, setSelectedDay] = useState(null);

    // Map: "YYYY-MM-DD" -> task[]
    const tasksByDate = useMemo(() => {
        const map = {};
        for (const task of tasks) {
            const key = toIsoDateKey(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 = toIsoDateKey(note.note_date);
            if (!key) continue;
            if (!map[key]) map[key] = [];
            map[key].push(note);
        }
        return map;
    }, [notes]);

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

    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();

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

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

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

    const totalScheduled = Object.values(tasksByDate).flat().length;
    const totalNoteReminders = Object.values(notesByDate).flat().length;

    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]"
        >
            {({ close }) => (
                <>

                {/* Month navigation */}
                <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"
                    >
                        ◀
                    </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="Sljedeći mjesec"
                    >
                        ▶
                    </button>
                </div>

                {/* Calendar grid */}
                <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} bilješki`
                                            : 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>

                {/* Divider */}
                <div className="mt-2 border-t border-border-hairline" />

                {/* Task list for selected day OR hint */}
                <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 događaja 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">Bilješke</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 hover:bg-indigo-50 hover:border-indigo-200 transition-colors"
                                                        >
                                                            <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} bilješki/podsjetnika u kalendaru.
                                </p>
                            )}
                            {totalScheduled === 0 && (
                                <p className="mt-1.5 text-[11px] text-text-muted">
                                    Nijedan zadatak nema postavljen planirani datum.
                                </p>
                            )}
                        </>
                    )}
                </div>
                </>
            )}
        </LeftSlideDrawer>
    );
}