import type { FC } from "react";
import { formatLocalTime } from "@/shared/utils/datetime/index.js";
import {
  dayChangeBadgeTooltip,
  formatDayChangeBadge,
} from "@/features/online-board/dayChange.js";
import "./TimeGroup.scss";

export interface TimeGroupProps {
  /** Scheduled time (ISO 8601 string) */
  scheduled: string;
  /** Actual time (ISO 8601 string), if available */
  actual?: string | undefined;
  /**
   * Day-change offset for the *scheduled* time (e.g. +1, -1).
   * Per TZ §4.1.17-R4 each time type gets its own independent badge.
   * When `actualDayChange` is not provided this value is also used for
   * the actual time (legacy single-badge behaviour).
   *
   * @deprecated Prefer explicit `scheduledDayChange` + `actualDayChange`.
   */
  dayChange?: number | undefined;
  /**
   * Day-change offset for the scheduled time only (TZ §4.1.17-R4).
   * Takes precedence over the legacy `dayChange` prop.
   */
  scheduledDayChange?: number | undefined;
  /**
   * Day-change offset for the actual/estimated time only (TZ §4.1.17-R4).
   * When absent the component falls back to `dayChange` if no actual exists.
   */
  actualDayChange?: number | undefined;
  /** Label for the time group, e.g. "Departure" */
  label?: string;
}

/**
 * Displays scheduled + actual times with per-type day-change indicators.
 *
 * Per TZ §4.1.17-R4 each time type (scheduled / expected / actual) gets
 * its own independent badge so that e.g. a flight scheduled for 23:50 (+0)
 * but actually arriving at 00:30 (+1) shows no badge on the scheduled time
 * and +1 on the actual time.
 *
 * If actual differs from scheduled, scheduled is shown with strikethrough
 * and actual is shown in bold.
 *
 * Tooltips per TZ §4.1.17-R5:
 * - ±1  → "День"
 * - ±2+ → "DD.MM.YYYY" (the shifted date)
 */
export const TimeGroup: FC<TimeGroupProps> = ({
  scheduled,
  actual,
  dayChange,
  scheduledDayChange: scheduledDayChangeProp,
  actualDayChange: actualDayChangeProp,
  label,
}) => {
  const scheduledTime = formatLocalTime(scheduled);
  const actualTime = actual ? formatLocalTime(actual) : undefined;
  const hasDelay = actualTime !== undefined && actualTime !== scheduledTime;

  // Resolve per-type day-change values.
  // scheduledDayChange takes precedence over legacy `dayChange`.
  const schedDC =
    scheduledDayChangeProp !== undefined ? scheduledDayChangeProp : dayChange;
  // actualDayChange takes precedence; fall back to dayChange only when no
  // separate actual badge is provided.
  const actDC =
    actualDayChangeProp !== undefined
      ? actualDayChangeProp
      : hasDelay
        ? dayChange // legacy: single shared badge
        : undefined;

  const schedBadge = formatDayChangeBadge(schedDC ?? 0);
  const actBadge = formatDayChangeBadge(actDC ?? 0);

  return (
    <div className="time-group">
      {label ? <span className="time-group__label">{label}</span> : null}
      <div className="time-group__times">
        {hasDelay && actual !== undefined ? (
          <>
            <span className="time-group__actual">
              {actualTime}
              {actBadge ? (
                <span
                  className="time-group__day-change"
                  title={dayChangeBadgeTooltip(actual, actDC ?? 0)}
                >
                  {actBadge}
                </span>
              ) : null}
            </span>
            <span className="time-group__scheduled time-group__scheduled--delayed">
              {scheduledTime}
              {schedBadge ? (
                <span
                  className="time-group__day-change time-group__day-change--scheduled"
                  title={dayChangeBadgeTooltip(scheduled, schedDC ?? 0)}
                >
                  {schedBadge}
                </span>
              ) : null}
            </span>
          </>
        ) : (
          <span className="time-group__scheduled">
            {scheduledTime}
            {schedBadge ? (
              <span
                className="time-group__day-change"
                title={dayChangeBadgeTooltip(scheduled, schedDC ?? 0)}
              >
                {schedBadge}
              </span>
            ) : null}
          </span>
        )}
      </div>
    </div>
  );
};
