"use client";

import { useLayoutEffect, useRef } from "react";
import { tasksDict } from "@/features/tasks/dict";
import {
  getJalaliDayNumber,
  getWeekdayIndex,
  isToday,
  type JalaliDay,
} from "@/features/tasks/utils/jalali";

type CalendarCarouselProps = {
  days: JalaliDay[];
  selectedDay: JalaliDay;
  daysWithTasks: Set<string>;
  daysWithHabits?: Set<string>;
  onSelectDay: (day: JalaliDay) => void;
};

function scrollItemIntoCenter(container: HTMLElement, item: HTMLElement) {
  const maxScroll = Math.max(0, container.scrollWidth - container.clientWidth);
  const targetScroll =
    item.offsetLeft - (container.clientWidth - item.offsetWidth) / 2;
  const clampedScroll = Math.max(0, Math.min(targetScroll, maxScroll));

  container.scrollLeft = clampedScroll;
}

export function CalendarCarousel({
  days,
  selectedDay,
  daysWithTasks,
  daysWithHabits = new Set<string>(),
  onSelectDay,
}: CalendarCarouselProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const selectedKey = selectedDay.format("YYYY-MM-DD");

  useLayoutEffect(() => {
    const container = scrollRef.current;
    const selectedButton = container?.querySelector<HTMLElement>(
      `[data-day-key="${selectedKey}"]`,
    );

    if (!container || !selectedButton) {
      return;
    }

    scrollItemIntoCenter(container, selectedButton);
  }, [selectedKey, days]);

  return (
    <div className="w-full min-w-0 max-w-full overflow-x-clip">
      <div
        ref={scrollRef}
        dir="ltr"
        className="flex w-full min-w-0 max-w-full touch-pan-x gap-3 overflow-x-auto overscroll-x-contain px-4 pb-2 pt-1 [-ms-overflow-style:none] [scrollbar-width:none] sm:px-6 [&::-webkit-scrollbar]:hidden"
      >
        {days.map((day) => {
          const dayKey = day.format("YYYY-MM-DD");
          const selected = dayKey === selectedKey;
          const hasTasks = daysWithTasks.has(dayKey);
          const hasHabits = daysWithHabits.has(dayKey);
          const weekday = tasksDict.weekdays[getWeekdayIndex(day)];
          const dayNumber = getJalaliDayNumber(day).toLocaleString("fa-IR");

          return (
            <button
              key={dayKey}
              type="button"
              data-day-key={dayKey}
              onClick={() => onSelectDay(day)}
              className="flex shrink-0 min-w-[4.5rem] flex-col items-center gap-2"
            >
              <div
                className={`flex w-[4.5rem] flex-col items-center rounded-2xl px-3 py-3 transition-all ${
                  selected
                    ? "bg-gradient-to-b from-[#FF8C42] to-[#FFA500] text-white shadow-[0_10px_24px_rgba(255,140,66,0.35)]"
                    : "bg-card text-[#1D2D50] shadow-soft-sm dark:text-card-foreground"
                }`}
              >
                <span
                  className={`text-xs font-medium ${
                    selected ? "text-white/90" : "text-muted-foreground"
                  }`}
                >
                  {weekday}
                </span>
                <span className="text-xl font-bold">{dayNumber}</span>
              </div>

              <div className="flex items-center gap-1">
                <span
                  className={`size-1.5 rounded-full ${
                    hasTasks ? "bg-[#2EC4B6]" : "bg-border"
                  }`}
                />
                <span
                  className={`size-1.5 rounded-full ${
                    hasHabits ? "bg-[#9B59B6]" : "bg-border"
                  }`}
                />
              </div>
              {isToday(day) && !selected ? (
                <span className="sr-only">امروز</span>
              ) : null}
            </button>
          );
        })}
      </div>
    </div>
  );
}