"use client";

import { useEffect, useState } from "react";
import { jalaliDatePickerDict } from "@/components/jalali-date-picker/dict";
import {
  buildCalendarDays,
  toGregorianIso,
} from "@/components/jalali-date-picker/utils";
import { tasksDict } from "@/features/tasks/dict";
import {
  getToday,
  isToday,
  type JalaliDay,
} from "@/features/tasks/utils/jalali";
import { toPersianDigits } from "@/lib/to-english-digits";
import dayjs from "dayjs";

type TaskCalendarSheetProps = {
  open: boolean;
  selectedDay: JalaliDay;
  onClose: () => void;
  onSelectDay: (day: JalaliDay) => void;
};

export function TaskCalendarSheet({
  open,
  selectedDay,
  onClose,
  onSelectDay,
}: TaskCalendarSheetProps) {
  const [viewDate, setViewDate] = useState(() =>
    selectedDay.calendar("jalali"),
  );

  useEffect(() => {
    if (!open) {
      return;
    }

    setViewDate(selectedDay.calendar("jalali"));

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose();
      }
    };

    document.addEventListener("keydown", handleEscape);
    document.body.style.overflow = "hidden";

    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "";
    };
  }, [open, onClose, selectedDay]);

  if (!open) {
    return null;
  }

  const calendarDays = buildCalendarDays(viewDate);
  const monthLabel = `${jalaliDatePickerDict.months[viewDate.month()]} ${toPersianDigits(viewDate.year())}`;
  const selectedKey = selectedDay.format("YYYY-MM-DD");

  const handleSelectDay = (day: number) => {
    const iso = toGregorianIso(viewDate.year(), viewDate.month(), day);
    onSelectDay(dayjs(iso));
    onClose();
  };

  const handleSelectToday = () => {
    onSelectDay(getToday());
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-end justify-center bg-black/40 p-0 sm:items-center sm:p-4">
      <button
        type="button"
        aria-label={tasksDict.cancel}
        className="absolute inset-0"
        onClick={onClose}
      />

      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="task-calendar-title"
        className="relative z-10 w-full max-w-lg overflow-hidden rounded-t-3xl bg-card shadow-soft sm:rounded-3xl"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="px-6 pt-4">
          <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-border sm:hidden" />
          <div className="pb-2 text-center sm:text-start">
            <h2
              id="task-calendar-title"
              className="text-lg font-bold text-card-foreground"
            >
              {tasksDict.selectDate}
            </h2>
          </div>
        </div>

        <div className="px-4 pb-6 sm:px-6">
          <div className="mb-4 flex items-center justify-between gap-2">
            <button
              type="button"
              aria-label="ماه قبل"
              onClick={() => setViewDate((current) => current.subtract(1, "month"))}
              className="inline-flex size-10 items-center justify-center rounded-xl transition-colors hover:bg-accent"
            >
              <svg
                aria-hidden="true"
                className="size-5"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </button>

            <p className="text-base font-semibold text-foreground">{monthLabel}</p>

            <button
              type="button"
              aria-label="ماه بعد"
              onClick={() => setViewDate((current) => current.add(1, "month"))}
              className="inline-flex size-10 items-center justify-center rounded-xl transition-colors hover:bg-accent"
            >
              <svg
                aria-hidden="true"
                className="size-5"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path d="m15 18-6-6 6-6" />
              </svg>
            </button>
          </div>

          <div className="mb-3 grid grid-cols-7 gap-1">
            {jalaliDatePickerDict.weekdays.map((weekday) => (
              <span
                key={weekday}
                className="py-1 text-center text-xs font-medium text-muted-foreground"
              >
                {weekday}
              </span>
            ))}
          </div>

          <div className="grid grid-cols-7 gap-1.5">
            {calendarDays.map((cell, index) => {
              if (cell.type === "empty") {
                return <span key={`empty-${index}`} className="size-11" />;
              }

              const iso = toGregorianIso(
                viewDate.year(),
                viewDate.month(),
                cell.day,
              );
              const dayValue = dayjs(iso);
              const dayKey = dayValue.format("YYYY-MM-DD");
              const selected = dayKey === selectedKey;
              const today = isToday(dayValue);

              return (
                <button
                  key={cell.day}
                  type="button"
                  onClick={() => handleSelectDay(cell.day)}
                  className={`inline-flex size-11 items-center justify-center rounded-2xl text-sm font-semibold transition-colors ${
                    selected
                      ? "bg-gradient-to-b from-[#FF8C42] to-[#FFA500] text-white shadow-[0_8px_20px_rgba(255,140,66,0.35)]"
                      : today
                        ? "bg-accent text-accent-foreground"
                        : "hover:bg-accent hover:text-accent-foreground"
                  }`}
                >
                  {cell.day.toLocaleString("fa-IR")}
                </button>
              );
            })}
          </div>

          <button
            type="button"
            onClick={handleSelectToday}
            className="mt-4 w-full rounded-2xl border border-border bg-muted/40 py-3 text-sm font-semibold text-primary transition-colors hover:bg-muted/60"
          >
            {tasksDict.goToToday}
          </button>
        </div>
      </div>
    </div>
  );
}