import { useMemo, useState } from 'preact/hooks';
import { animated, useSpring } from '@react-spring/web';
import { getStatusLabel } from '../../stores/taskStore';

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',
];
const PANEL_WIDTH = 300;

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 = [], onTaskClick }) {
    const [open, setOpen] = useState(false);
    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
    const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
    const [selectedDay, setSelectedDay] = useState(null);

    const panelSpring = useSpring({
        left: open ? 0 : -PANEL_WIDTH,
        config: { tension: 260, friction: 28 },
    });

    const buttonSpring = useSpring({
        left: open ? PANEL_WIDTH : 0,
        config: { tension: 260, friction: 28 },
    });

    // 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]);

    // 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 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) {
        onTaskClick?.(task);
        setOpen(false);
    }

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

    return (
        <>
            {/* Backdrop */}
            {open && (
                <div
                    role="presentation"
                    className="fixed inset-0 z-[45] bg-black/20 backdrop-blur-[1px]"
                    onClick={() => setOpen(false)}
                />
            )}

            {/* Clipping wrapper — animates width 0→300, clips shadow+border completely */}
            <animated.div
                style={{
                    width: panelSpring.left.to((v) => `${Math.max(0, v + PANEL_WIDTH)}px`),
                    pointerEvents: open ? 'auto' : 'none',
                }}
                className="fixed left-0 top-0 z-[46] h-screen overflow-hidden"
            >
                {/* Inner panel — always 300px, anchored to right edge of wrapper */}
                <div
                    style={{ width: `${PANEL_WIDTH}px` }}
                    className="absolute right-0 top-0 flex h-full flex-col border-r border-border-hairline bg-canvas-elevated shadow-2xl"
                >
                {/* Header */}
                <div className="flex items-center justify-between border-b border-border-hairline px-4 py-3">
                    <h2 className="text-sm font-semibold text-text-main">📅 Kalendar zadataka</h2>
                    <button
                        type="button"
                        onClick={() => setOpen(false)}
                        className="rounded-md p-1 text-text-muted hover:bg-canvas-deep"
                        aria-label="Zatvori kalendar"
                    >
                        ✕
                    </button>
                </div>

                {/* 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 taskCount = tasksByDate[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 ? `${taskCount} zadatak/a` : 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 && (
                                        <span
                                            className={[
                                                'absolute bottom-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full',
                                                isSelected ? 'bg-white' : 'bg-indigo-500',
                                            ].join(' ')}
                                        />
                                    )}
                                </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 ? (
                                <p className="text-sm text-text-muted">Nema zadataka za odabrani datum.</p>
                            ) : (
                                <ul className="space-y-1.5">
                                    {selectedDayTasks.map((task) => (
                                        <li key={task.id}>
                                            <button
                                                type="button"
                                                onClick={() => handleTaskClick(task)}
                                                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>
                                            </button>
                                        </li>
                                    ))}
                                </ul>
                            )}
                        </>
                    ) : (
                        <>
                            <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>
                            )}
                            {totalScheduled === 0 && (
                                <p className="mt-1.5 text-[11px] text-text-muted">
                                    Nijedan zadatak nema postavljen planirani datum.
                                </p>
                            )}
                        </>
                    )}
                </div>
                </div>
            </animated.div>

            {/* Toggle tab button — slides right as panel opens */}
            <animated.button
                type="button"
                style={{ left: buttonSpring.left.to((v) => `${v}px`) }}
                onClick={() => setOpen((o) => !o)}
                className="fixed top-1/2 z-[47] -translate-y-1/2 rounded-r-xl border border-l-0 border-border-hairline bg-canvas-elevated px-1.5 py-4 shadow-md hover:bg-indigo-50 focus:outline-none"
                aria-label={open ? 'Zatvori kalendar' : 'Otvori kalendar'}
                title="Kalendar zadataka"
            >
                <span
                    style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
                    className="select-none text-[11px] font-medium text-text-main"
                >
                    📅 Kalendar
                </span>
            </animated.button>
        </>
    );
}