import type { FC } from "react";
import "./DayQuickPick.scss";

export interface DayQuickPickProps {
  /** Currently selected date (or null). */
  value: Date | null;
  /** Locale code (e.g. "ru", "en"). Drives day/month names via Intl. */
  locale: string;
  /** Number of buttons to render. Defaults to 3 (today + next 2 days). */
  count?: number;
  /** Called with the chosen Date on click. */
  onChange: (date: Date) => void;
  /**
   * When true, all quick-pick buttons are disabled and non-interactive.
   * TZ §4.1.24.2 R16: days must not be selectable until Город вылета is set.
   */
  disabled?: boolean;
}

function addDays(base: Date, n: number): Date {
  const d = new Date(base);
  d.setDate(d.getDate() + n);
  d.setHours(0, 0, 0, 0);
  return d;
}

function isSameDay(a: Date | null, b: Date | null): boolean {
  if (!a || !b) return false;
  return (
    a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
  );
}

/**
 * Mobile-only 3-day quick-pick row that mirrors Angular's
 * `calendar-input.component` `.calendar--mobile` block: today + next 2
 * days as tap targets, each showing day-number / weekday-short / month.
 *
 * Hidden on tablet+ via DayQuickPick.scss media query.
 */
export const DayQuickPick: FC<DayQuickPickProps> = ({
  value,
  locale,
  count = 3,
  onChange,
  disabled = false,
}) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const dayFormatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
  // Use a date+month formatter and pluck out the month part — this yields
  // the genitive form in Russian ('апреля') instead of the standalone
  // nominative ('апрель') that `{ month: "long" }` alone returns.
  const monthFormatter = new Intl.DateTimeFormat(locale, {
    day: "numeric",
    month: "long",
  });
  const formatMonth = (d: Date): string => {
    const part = monthFormatter
      .formatToParts(d)
      .find((p) => p.type === "month");
    return part?.value ?? "";
  };

  return (
    <div className="day-quick-pick" data-testid="day-quick-pick">
      {Array.from({ length: count }, (_, i) => addDays(today, i)).map((d, i) => {
        const selected = isSameDay(value, d);
        const dayName = dayFormatter.format(d).replace(/\.$/, "");
        const monthName = formatMonth(d);
        return (
          <button
            key={i}
            type="button"
            className={`day-quick-pick__btn${selected ? " day-quick-pick__btn--selected" : ""}${disabled ? " day-quick-pick__btn--disabled" : ""}`}
            aria-pressed={selected}
            disabled={disabled}
            onClick={() => onChange(d)}
            data-testid={`day-quick-pick-${i}`}
          >
            <span className="day-quick-pick__row">
              <span className="day-quick-pick__date">{d.getDate()}</span>
              <span className="day-quick-pick__day">
                {dayName.charAt(0).toUpperCase() + dayName.slice(1)}.
              </span>
            </span>
            <span className="day-quick-pick__month">
              {monthName.charAt(0).toUpperCase() + monthName.slice(1)}
            </span>
          </button>
        );
      })}
    </div>
  );
};
