// todo google calendar integration??
// todo eső helyszín

'use client';

import React, { useEffect, useMemo, useState, useTransition } from 'react';

import { useLocale, useTranslations } from 'next-intl';
import { useSearchParams } from 'next/navigation';

import {
  addDays,
  differenceInCalendarDays,
  eachDayOfInterval,
  format,
  isSameDay,
  startOfDay,
  startOfWeek,
} from 'date-fns';
import { enUS, hu } from 'date-fns/locale';
import { FaRegFilePdf } from 'react-icons/fa6';
import { MdOutlineChevronLeft, MdOutlineChevronRight } from 'react-icons/md';
import { useMediaQuery } from 'react-responsive';

import { cn } from '@/lib/utils';
import { formatWeekCode, parseWeekCode } from '@/utils/weekRange';

import { Event } from '@/types/Events';

import { useRouter } from '@/i18n/navigation';

import Button from '@/components/Button';
import CalendarEventBar from './CalendarEventBar';
import CalendarMultiDayBar from './CalendarMultiDayBar';
import DayCarousel from './DayCarousel';
import EventListView from './EventListView';
import PrintableEventList from './PrintableEventList';

interface CalendarProps {
  initialEvents: Event[];
  weekCode: string;
}

type CalendarView = 'single' | 'multi';

const MAX_VISIBLE_EVENTS = 3;
const SHOW_EXPAND_BUTTONS = false; // Set to true to enable expand/collapse functionality
const MAX_PAST_PERIODS = 5; // Number of 4-week periods allowed to go back

function parseCalendarView(
  view: string | null,
  params: { single: string; multi: string }
): CalendarView {
  if (!view) return 'single';

  if (view === params.multi || view === 'multi') return 'multi';
  if (view === params.single || view === 'single') return 'single';

  return 'single';
}

function getCalendarViewParam(searchParams: URLSearchParams) {
  return searchParams.get('nezet') ?? searchParams.get('view');
}

const Calendar: React.FC<CalendarProps> = ({ initialEvents, weekCode }) => {
  const isMobile = useMediaQuery({ maxWidth: 1023 });
  const t = useTranslations('eventsPage.calendar');
  const locale = useLocale();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isNavigating, startTransition] = useTransition();
  const viewParams = useMemo(
    () => ({
      single: t('searchParams.single'),
      multi: t('searchParams.multi'),
    }),
    [t]
  );
  const dateLocale = locale === 'hu' ? hu : enUS;
  const calendarStartDate = useMemo(() => {
    const parsed = parseWeekCode(weekCode);
    return parsed ?? startOfWeek(new Date(), { weekStartsOn: 1 });
  }, [weekCode]);
  const [calendarView, setCalendarView] = useState<CalendarView>(() =>
    parseCalendarView(getCalendarViewParam(searchParams), viewParams)
  );

  const [showPrintableList, setShowPrintableList] = useState(false);
  const [selectedDayInWeek, setSelectedDayInWeek] = useState<Date | null>(null);
  const [expandedDays, setExpandedDays] = useState<Set<string>>(() => {
    // Load expanded weeks from session storage
    if (typeof window !== 'undefined') {
      const stored = sessionStorage.getItem('calendar-expanded-weeks');
      if (stored) {
        try {
          return new Set(JSON.parse(stored));
        } catch {
          return new Set();
        }
      }
    }
    return new Set();
  });

  // Save expanded weeks to session storage whenever it changes
  useEffect(() => {
    if (typeof window !== 'undefined') {
      sessionStorage.setItem('calendar-expanded-weeks', JSON.stringify([...expandedDays]));
    }
  }, [expandedDays]);

  useEffect(() => {
    setSelectedDayInWeek(null);
  }, [weekCode]);

  useEffect(() => {
    const nextView = parseCalendarView(getCalendarViewParam(searchParams), viewParams);
    setCalendarView((prev) => (prev === nextView ? prev : nextView));
  }, [searchParams, viewParams]);

  // ---------- Time conversion ----------
  function toBudapestDate(utcString: string) {
    const utcDate = new Date(utcString);
    const local = new Date(utcDate.toLocaleString('en-US', { timeZone: 'Europe/Budapest' }));
    return local;
  }

  function safeBudapestDate(isoString: string) {
    try {
      return toBudapestDate(isoString);
    } catch {
      return new Date(isoString);
    }
  }

  function getEventRange(event: Event) {
    const start = safeBudapestDate(event.kezdete);
    const end = event.vege ? safeBudapestDate(event.vege) : start;
    return { start, end };
  }

  function isMultiDayEvent(event: Event) {
    if (!event.vege) return false;
    const { start, end } = getEventRange(event);
    return differenceInCalendarDays(startOfDay(end), startOfDay(start)) >= 1;
  }

  function groupEventsByStartDate(list: Event[]) {
    const map: Record<string, Event[]> = {};
    for (const event of list) {
      try {
        const d = toBudapestDate(event.kezdete);
        const key = format(d, 'yyyy-MM-dd');
        if (!map[key]) map[key] = [];
        map[key].push(event);
      } catch {
        const fallbackKey = new Date(event.kezdete).toISOString().split('T')[0];
        if (!map[fallbackKey]) map[fallbackKey] = [];
        map[fallbackKey].push(event);
      }
    }
    return map;
  }

  function getEventCity(event: Event) {
    const city = event.intezmeny?.[0]?.intezmeny?.intezmenyCime?.city;
    return (city || '').trim();
  }

  function eventOverlapsDay(event: Event, day: Date) {
    const { start, end } = getEventRange(event);
    const dayStart = startOfDay(day);
    const startDay = startOfDay(start);
    const endDay = startOfDay(end);
    return startDay <= dayStart && endDay >= dayStart;
  }

  const { singleDayEvents, multiDayEvents } = useMemo(() => {
    const single: Event[] = [];
    const multi: Event[] = [];

    for (const event of initialEvents) {
      if (isMultiDayEvent(event)) {
        multi.push(event);
      } else {
        single.push(event);
      }
    }

    return { singleDayEvents: single, multiDayEvents: multi };
  }, [initialEvents]);

  // ---------- Group single-day events by date (yyyy-MM-dd) ----------
  const eventsByDate = useMemo(() => groupEventsByStartDate(singleDayEvents), [singleDayEvents]);

  // ---------- Build 4 weeks starting from calendarStartDate ----------
  const today = useMemo(() => new Date(), []);

  // Get 4 weeks (28 days) starting from calendarStartDate
  const fourWeeksStart = calendarStartDate;
  const fourWeeksEnd = addDays(calendarStartDate, 27);

  const allDaysInFourWeeks = eachDayOfInterval({
    start: fourWeeksStart,
    end: fourWeeksEnd,
  });

  // Group into 4 week arrays
  const fourWeeks: Date[][] = [];
  for (let i = 0; i < allDaysInFourWeeks.length; i += 7) {
    fourWeeks.push(allDaysInFourWeeks.slice(i, i + 7));
  }

  // Get all days in current 4-week view for carousel (28 days)
  const allDaysInCarousel = allDaysInFourWeeks;
  const todayStart = useMemo(() => startOfDay(new Date()), []);

  const eventsByDateForCarousel = (() => {
    if (calendarView === 'single') {
      return groupEventsByStartDate(singleDayEvents);
    }

    const map: Record<string, Event[]> = {};
    for (const day of allDaysInCarousel) {
      const key = format(day, 'yyyy-MM-dd');
      map[key] = multiDayEvents.filter((event) => eventOverlapsDay(event, day));
    }
    return map;
  })();

  const formatShortDate = (date: Date) =>
    format(date, 'MMM d', { locale: dateLocale }).replace(/\.$/, '');

  const formatRangeLabel = (start: Date, end: Date) => {
    const startLabel = formatShortDate(start);
    const endLabel = formatShortDate(end);
    return startLabel === endLabel ? startLabel : `${startLabel} - ${endLabel}`;
  };
  const singleViewLabel = t('views.single');
  const multiViewLabel = t('views.multi');
  const sortLocale = locale === 'hu' ? 'hu-HU' : 'en-US';

  const buildMultiDayLayout = (week: Date[]) => {
    const weekStart = startOfDay(week[0]);
    const weekEnd = startOfDay(week[6]);
    const items: Array<{
      event: Event;
      startIdx: number;
      endIdx: number;
      lane: number;
      isStart: boolean;
      isEnd: boolean;
      rangeLabel: string;
      isPast: boolean;
    }> = [];

    for (const event of multiDayEvents) {
      const { start, end } = getEventRange(event);
      const startDay = startOfDay(start);
      const endDay = startOfDay(end);

      if (endDay < weekStart || startDay > weekEnd) continue;

      const startIdx = Math.max(0, differenceInCalendarDays(startDay, weekStart));
      const endIdx = Math.min(6, differenceInCalendarDays(endDay, weekStart));
      const isStart = startDay >= weekStart;
      const isEnd = endDay <= weekEnd;

      items.push({
        event,
        startIdx,
        endIdx,
        lane: 0,
        isStart,
        isEnd,
        rangeLabel: formatRangeLabel(startDay, endDay),
        isPast: endDay < todayStart,
      });
    }

    items.sort((a, b) => {
      const cityA = getEventCity(a.event);
      const cityB = getEventCity(b.event);

      if (cityA && !cityB) return -1;
      if (!cityA && cityB) return 1;

      if (cityA && cityB) {
        const cityCompare = cityA.localeCompare(cityB, sortLocale, {
          sensitivity: 'base',
        });
        if (cityCompare !== 0) return cityCompare;
      }

      const titleCompare = (a.event.nev || '').localeCompare(b.event.nev || '', sortLocale, {
        sensitivity: 'base',
      });
      if (titleCompare !== 0) return titleCompare;

      return a.event.id - b.event.id;
    });

    const placed = items.map((item, index) => ({
      ...item,
      lane: index,
    }));

    return { items: placed, laneCount: placed.length };
  };

  // month navigation - 4-week (28d) navigation
  const todayWeekStart = useMemo(() => startOfWeek(new Date(), { weekStartsOn: 1 }), []);

  // Calculate the earliest allowed date (MAX_PAST_PERIODS * 28 days before today's week)
  const minAllowedDate = useMemo(
    () => addDays(todayWeekStart, -28 * MAX_PAST_PERIODS),
    [todayWeekStart]
  );

  const setCalendarViewAndSyncUrl = (nextView: CalendarView) => {
    setCalendarView(nextView);
    router.replace(
      {
        pathname: '/programok/[week]',
        params: { week: weekCode },
        query: {
          nezet: nextView === 'multi' ? viewParams.multi : viewParams.single,
        },
      },
      { locale }
    );
  };

  const navigateToPeriod = (nextStartDate: Date) => {
    const nextWeekCode = formatWeekCode(nextStartDate);
    if (nextWeekCode === weekCode) return;

    startTransition(() => {
      router.push(
        {
          pathname: '/programok/[week]',
          params: { week: nextWeekCode },
          query: {
            nezet: calendarView === 'multi' ? viewParams.multi : viewParams.single,
          },
        },
        { locale }
      );
    });
  };

  const goPrev = () => {
    if (!canGoPrev || isNavigating) return;
    const newDate = addDays(calendarStartDate, -28);
    if (newDate < minAllowedDate) return;
    navigateToPeriod(newDate);
  };

  const goNext = () => {
    if (isNavigating) return;
    navigateToPeriod(addDays(calendarStartDate, 28));
  };

  const goToday = () => {
    if (isNavigating) return;
    navigateToPeriod(todayWeekStart);
  };

  // Check if we can go back further
  const canGoPrev = useMemo(
    () => addDays(calendarStartDate, -28) >= minAllowedDate,
    [calendarStartDate, minAllowedDate]
  );

  // toggle expanded state for a week (all days in the week)
  const toggleWeekExpanded = (weekDays: Date[]) => {
    const weekKeys = weekDays.map((day) => format(day, 'yyyy-MM-dd'));
    const allExpanded = weekKeys.every((key) => expandedDays.has(key));

    setExpandedDays((prev) => {
      const newSet = new Set(prev);
      if (allExpanded) {
        // Collapse all days in the week
        weekKeys.forEach((key) => newSet.delete(key));
      } else {
        // Expand all days in the week
        weekKeys.forEach((key) => newSet.add(key));
      }
      return newSet;
    });
  };

  const mobileBaseEvents = calendarView === 'multi' ? multiDayEvents : singleDayEvents;

  // Mobile default list: current active 4-week period.
  const eventsInActivePeriod = [...mobileBaseEvents].sort(
    (a, b) => getEventRange(a).start.getTime() - getEventRange(b).start.getTime()
  );

  const selectedDayEvents = (() => {
    if (!selectedDayInWeek) return [];

    if (calendarView === 'multi') {
      return mobileBaseEvents
        .filter((event) => eventOverlapsDay(event, selectedDayInWeek))
        .sort((a, b) => getEventRange(a).start.getTime() - getEventRange(b).start.getTime());
    }

    return mobileBaseEvents
      .filter((event) => isSameDay(getEventRange(event).start, selectedDayInWeek))
      .sort((a, b) => getEventRange(a).start.getTime() - getEventRange(b).start.getTime());
  })();

  const mobileEvents = selectedDayInWeek ? selectedDayEvents : eventsInActivePeriod;

  const printableEvents = useMemo(() => {
    if (calendarView !== 'multi') {
      return eventsInActivePeriod;
    }

    const rangeStart = startOfDay(calendarStartDate);
    const rangeEnd = startOfDay(addDays(calendarStartDate, 6));
    const getComparableDate = (isoString: string) => {
      try {
        return toBudapestDate(isoString);
      } catch {
        return new Date(isoString);
      }
    };

    return multiDayEvents
      .filter((event) => {
        const start = getComparableDate(event.kezdete);
        const end = event.vege ? getComparableDate(event.vege) : start;
        const startDay = startOfDay(start);
        const endDay = startOfDay(end);
        return !(endDay < rangeStart || startDay > rangeEnd);
      })
      .sort((a, b) => {
        const startA = startOfDay(getComparableDate(a.kezdete)).getTime();
        const startB = startOfDay(getComparableDate(b.kezdete)).getTime();
        return startA - startB;
      });
  }, [calendarView, eventsInActivePeriod, calendarStartDate, multiDayEvents]);

  const printableDateRange = useMemo(() => {
    const periodLength = calendarView === 'multi' ? 6 : 27;
    const periodEnd = addDays(calendarStartDate, periodLength);
    return `${format(calendarStartDate, 'MMMM d', {
      locale: dateLocale,
    })} - ${format(periodEnd, 'MMMM d', {
      locale: dateLocale,
    })}`;
  }, [calendarStartDate, calendarView, dateLocale]);

  const printableTitle =
    calendarView === 'multi' ? t('printableTitles.multi') : t('printableTitles.single');

  const buttonSize = 'small';
  const isSingleView = calendarView === 'single';
  const isMultiView = calendarView === 'multi';
  const menuButtonClass =
    'ui-control ui-control-label !bg-white !border-[#151720]/25 !text-[#151720] hover:!bg-[#151720] hover:!text-white !px-2.5 !py-1.5 !text-[10px] sm:!text-[11px] !tracking-[0.16em] !font-semibold';
  const iconButtonClass =
    'ui-control !bg-white !border-[#151720]/25 !text-[#151720] hover:!bg-[#151720] hover:!text-white !px-2 !py-1.5';
  const dateRangeTitle = isMobile
    ? `${format(calendarStartDate, 'MMM d', {
        locale: dateLocale,
      }).replace(/\.$/, '')} - ${format(addDays(calendarStartDate, 27), 'MMM d', {
        locale: dateLocale,
      }).replace(/\.$/, '')}`
    : `${format(calendarStartDate, 'MMMM d', {
        locale: dateLocale,
      })} - ${format(addDays(calendarStartDate, 27), 'MMMM d', {
        locale: dateLocale,
      })}`;
  const loadingLabel = t('loading');

  return (
    <div className="w-full flex flex-col">
      {/* HEADER */}
      <div className="ui-panel p-2 sm:p-3">
        {isMobile ? (
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between gap-1.5">
              <Button
                onClick={() => setShowPrintableList(true)}
                size={buttonSize}
                disabled={isNavigating}
                className={menuButtonClass}
              >
                <FaRegFilePdf size={15} />
              </Button>

              <div className="min-w-0 flex-1 px-1 flex items-center justify-center gap-2">
                <h2 className="min-w-0 text-center text-[11px] font-semibold text-[#151720] uppercase tracking-[0.14em] whitespace-nowrap overflow-hidden text-ellipsis">
                  {dateRangeTitle}
                </h2>
                {isNavigating && (
                  <span
                    className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-[#151720]/25 border-t-[#151720]"
                    aria-label={loadingLabel}
                  />
                )}
              </div>

              <div className="flex items-center gap-1.5">
                <Button
                  onClick={goPrev}
                  size={buttonSize}
                  title={t('previous')}
                  disabled={!canGoPrev || isNavigating}
                  className={iconButtonClass}
                >
                  <MdOutlineChevronLeft size={16} />
                </Button>
                <Button
                  onClick={goNext}
                  size={buttonSize}
                  title={t('next')}
                  disabled={isNavigating}
                  className={iconButtonClass}
                >
                  <MdOutlineChevronRight size={16} />
                </Button>
              </div>
            </div>

            <div className="relative grid h-8 w-full grid-cols-2 border border-[#151720]/30 bg-[#151720]/8 p-[2px]">
              <span
                className={cn(
                  'pointer-events-none absolute inset-y-[2px] left-[2px] w-[calc(50%-2px)] bg-[#151720] transition-transform duration-250',
                  isMultiView && 'translate-x-full'
                )}
              />
              <button
                type="button"
                onClick={() => setCalendarViewAndSyncUrl('single')}
                aria-pressed={isSingleView}
                className={cn(
                  'relative z-[1] px-2 text-[10px] sm:text-[11px] font-semibold uppercase tracking-[0.16em] transition-colors',
                  isSingleView ? 'text-white' : 'text-[#151720]/75 hover:bg-[#151720]/10'
                )}
              >
                {singleViewLabel}
              </button>
              <button
                type="button"
                onClick={() => setCalendarViewAndSyncUrl('multi')}
                aria-pressed={isMultiView}
                className={cn(
                  'relative z-[1] px-2 text-[10px] sm:text-[11px] font-semibold uppercase tracking-[0.16em] transition-colors',
                  isMultiView ? 'text-white' : 'text-[#151720]/75 hover:bg-[#151720]/10'
                )}
              >
                {multiViewLabel}
              </button>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-2 lg:grid-cols-[auto_1fr_auto] lg:items-center">
            <div className="flex items-center gap-1.5 sm:gap-2">
              <Button
                onClick={goToday}
                size={buttonSize}
                disabled={isNavigating}
                className={menuButtonClass}
              >
                {t('today')}
              </Button>

              <Button
                onClick={goPrev}
                size={buttonSize}
                title={t('previous')}
                disabled={!canGoPrev || isNavigating}
                className={iconButtonClass}
              >
                <MdOutlineChevronLeft size={20} />
              </Button>
              <Button
                onClick={goNext}
                size={buttonSize}
                title={t('next')}
                disabled={isNavigating}
                className={iconButtonClass}
              >
                <MdOutlineChevronRight size={20} />
              </Button>
            </div>

            <div className="order-3 lg:order-2 min-w-0">
              <div className="flex items-center justify-center gap-2">
                <h2 className="text-center text-xs sm:text-sm lg:text-base font-semibold text-[#151720] uppercase tracking-[0.18em] sm:tracking-[0.2em] whitespace-nowrap overflow-hidden text-ellipsis">
                  {dateRangeTitle}
                </h2>
                {isNavigating && (
                  <span
                    className="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-[#151720]/25 border-t-[#151720]"
                    aria-label={loadingLabel}
                  />
                )}
              </div>
            </div>

            <div className="order-2 lg:order-3 flex items-center justify-end gap-1.5 sm:gap-2">
              <div className="relative inline-grid h-8 sm:h-9 min-w-[176px] sm:min-w-[204px] grid-cols-2 border border-[#151720]/30 bg-[#151720]/8 p-[2px]">
                <span
                  className={cn(
                    'pointer-events-none absolute inset-y-[2px] left-[2px] w-[calc(50%-2px)] bg-[#151720] transition-transform duration-250',
                    isMultiView && 'translate-x-full'
                  )}
                />
                <button
                  type="button"
                  onClick={() => setCalendarViewAndSyncUrl('single')}
                  aria-pressed={isSingleView}
                  className={cn(
                    'relative z-[1] px-2 text-[10px] sm:text-[11px] font-semibold uppercase tracking-[0.16em] transition-colors',
                    isSingleView ? 'text-white' : 'text-[#151720]/75 hover:bg-[#151720]/10'
                  )}
                >
                  {singleViewLabel}
                </button>
                <button
                  type="button"
                  onClick={() => setCalendarViewAndSyncUrl('multi')}
                  aria-pressed={isMultiView}
                  className={cn(
                    'relative z-[1] px-2 text-[10px] sm:text-[11px] font-semibold uppercase tracking-[0.16em] transition-colors',
                    isMultiView ? 'text-white' : 'text-[#151720]/75 hover:bg-[#151720]/10'
                  )}
                >
                  {multiViewLabel}
                </button>
              </div>

              <Button
                onClick={() => setShowPrintableList(true)}
                size={buttonSize}
                disabled={isNavigating}
                className={menuButtonClass}
              >
                <span className="hidden sm:inline">{t('listView')}</span>
                <FaRegFilePdf size={15} />
              </Button>
            </div>
          </div>
        )}
      </div>

      {/* ===== MOBILE: Simple Events List ===== */}
      {isMobile && (
        <div className="w-full flex flex-col gap-2">
          {/* Day carousel for mobile */}
          <DayCarousel
            key={calendarView}
            days={allDaysInCarousel}
            selectedDay={selectedDayInWeek}
            onSelectDay={setSelectedDayInWeek}
            eventsByDate={eventsByDateForCarousel}
          />

          {/* Events for selected day or all events */}
          <EventListView events={mobileEvents} />
        </div>
      )}

      {/* ===== DESKTOP: Grid or List View ===== */}
      {!isMobile && (
        <>
          {/* Grid/Calendar View - 4 Weeks */}

          <div className="ui-card w-full overflow-hidden">
            {/* 4 Weeks Grid */}
            {fourWeeks.map((week, weekIndex) => {
              const weekStart = week[0];
              const weekStartKey = format(weekStart, 'yyyy-MM-dd');
              const multiDayLayout = buildMultiDayLayout(week);
              const visibleItems = multiDayLayout.items;

              return (
                <div
                  key={weekStartKey}
                  className={cn(
                    'overflow-hidden transition-colors border-t border-[#151720]/12',
                    weekIndex === 0 && 'border-t-0'
                  )}
                >
                  {/* HEADER ROW - Week dates */}
                  <div className="grid grid-cols-7 bg-[#151720]/[0.03] border-b border-[#151720]/12">
                    {week.map((day) => {
                      const key = format(day, 'yyyy-MM-dd');
                      const isToday = isSameDay(day, today);

                      return (
                        <div
                          key={key}
                          className={cn(
                            'px-2 py-3 flex flex-col items-center justify-center border-r border-[#151720]/10 last:border-r-0 transition-all duration-200',
                            isToday && 'bg-mma-yellow/35'
                          )}
                        >
                          <div className="flex items-baseline gap-1.5 uppercase">
                            <div className="text-sm lg:text-base font-semibold tracking-[0.08em] text-[#151720]">
                              {format(day, 'd', { locale: dateLocale })}.
                            </div>
                            <div
                              className={cn(
                                'text-sm lg:text-base font-semibold tracking-[0.08em] text-[#151720]/80'
                              )}
                            >
                              {format(day, 'EEEE', { locale: dateLocale })}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>

                  {/* MULTI-DAY EVENTS ROW */}
                  {calendarView === 'multi' && multiDayLayout.items.length > 0 && (
                    <div className="border-b border-[#151720]/12 bg-white/95 p-1.5">
                      <div
                        className="grid grid-cols-7"
                        style={{
                          gridAutoRows: '32px',
                          rowGap: '6px',
                          columnGap: '2px',
                        }}
                      >
                        {visibleItems.map((item) => {
                          const slug = item.event.url || item.event.id.toString();
                          return (
                            <div
                              key={`${item.event.id}-${item.startIdx}-${item.endIdx}`}
                              style={{
                                gridColumn: `${item.startIdx + 1} / ${item.endIdx + 2}`,
                                gridRow: item.lane + 1,
                              }}
                            >
                              <CalendarMultiDayBar
                                event={item.event}
                                slug={slug}
                                rangeLabel={item.rangeLabel}
                                isStart={item.isStart}
                                isEnd={item.isEnd}
                                isPast={item.isPast}
                              />
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  )}

                  {/* EVENTS ROW - Grid of day cells */}
                  {calendarView === 'single' && (
                    <div className="grid grid-cols-7">
                      {week.map((day) => {
                        const key = format(day, 'yyyy-MM-dd');
                        const dayEvents = eventsByDate[key] || [];
                        const isToday = isSameDay(day, today);
                        return (
                          <div
                            key={key}
                            className={cn(
                              'min-h-36 p-2 border-r border-[#151720]/10 last:border-r-0 flex flex-col bg-white/95',
                              isToday && 'bg-mma-yellow/20'
                            )}
                          >
                            {/* Events */}
                            <div className="flex flex-col gap-1">
                              {dayEvents.length === 0 ? (
                                <div className="ui-meta text-[#151720]/45 text-center py-6">
                                  {t('noEvent')}
                                </div>
                              ) : (
                                <>
                                  {/* Show events (limited or all) */}
                                  {(SHOW_EXPAND_BUTTONS && expandedDays.has(key)
                                    ? dayEvents
                                    : SHOW_EXPAND_BUTTONS
                                      ? dayEvents.slice(0, MAX_VISIBLE_EVENTS)
                                      : dayEvents
                                  ).map((ev) => {
                                    const time = format(toBudapestDate(ev.kezdete), 'HH:mm', {
                                      locale: dateLocale,
                                    });

                                    return (
                                      <CalendarEventBar
                                        key={ev.id}
                                        event={ev}
                                        time={time}
                                        slug={ev.url || ev.id.toString()}
                                      />
                                    );
                                  })}

                                  {/* Show more button */}
                                  {SHOW_EXPAND_BUTTONS && dayEvents.length > MAX_VISIBLE_EVENTS && (
                                    <button
                                      onClick={(e) => {
                                        e.stopPropagation();
                                        toggleWeekExpanded(week);
                                      }}
                                      className="mt-1 py-1.5 px-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-[#151720]/70 hover:bg-[#151720]/10 transition-colors border border-[#151720]/25 hover:border-[#151720]/40"
                                    >
                                      {expandedDays.has(key)
                                        ? t('showLess')
                                        : t('showMore', {
                                            count: dayEvents.length - MAX_VISIBLE_EVENTS,
                                          })}
                                    </button>
                                  )}
                                </>
                              )}
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </>
      )}

      {/* ===== PRINTABLE LIST MODAL ===== */}
      {showPrintableList && (
        <PrintableEventList
          events={printableEvents}
          onClose={() => setShowPrintableList(false)}
          dateRange={printableDateRange}
          title={printableTitle}
        />
      )}
    </div>
  );
};

export default Calendar;