/**
 * Sortable column header row for the schedule route-results page.
 *
 * Structure mirrors Angular's `schedule-search-result-header` — a flex
 * row where each column cell contains a `.sort-label` (optionally with
 * an absolutely-positioned asterisk note) and a `.sort-container` with
 * stacked up/down sort buttons. Widths: РЕЙС 80px, АВИАКОМПАНИЯ 120px,
 * ВЫЛЕТ flex:1, ВРЕМЯ 80px, ПРИЛЕТ flex:1.
 *
 * Sort state is owned by the parent page (ScheduleSearchPage), which
 * also passes it to `DayGroupedFlightList` so the two stay in sync.
 *
 * @module
 */

import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import "./ScheduleColumnHeaders.scss";

export type ScheduleSortMode =
  | "none"
  | "departureUp"
  | "departureDown"
  | "timeUp"
  | "timeDown"
  | "arrivalUp"
  | "arrivalDown";

export interface ScheduleColumnHeadersProps {
  sortMode: ScheduleSortMode;
  onSortChange: (mode: ScheduleSortMode) => void;
}

export const ScheduleColumnHeaders: FC<ScheduleColumnHeadersProps> = ({
  sortMode,
  onSortChange,
}) => {
  const { t } = useTranslation();

  const toggle = (mode: ScheduleSortMode): void => {
    onSortChange(sortMode === mode ? "none" : mode);
  };

  const sortBtn = (mode: ScheduleSortMode, dir: "up" | "down") => (
    <button
      type="button"
      onClick={() => toggle(mode)}
      className={`schedule-col-header__sort schedule-col-header__sort--${dir}${
        sortMode === mode ? " schedule-col-header__sort--active" : ""
      }`}
      aria-label={`${dir === "up" ? "↑" : "↓"} ${mode}`}
      data-testid={`schedule-sort-${mode}`}
    >
      <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true">
        {dir === "up" ? (
          <path d="M5 2L9 8H1Z" fill="currentColor" />
        ) : (
          <path d="M5 8L1 2H9Z" fill="currentColor" />
        )}
      </svg>
    </button>
  );

  return (
    <div
      className="schedule-col-header"
      data-testid="schedule-column-headers"
    >
      <div className="schedule-col-header__flight">
        <div className="schedule-col-header__label">
          {t("SCHEDULE.COL-FLIGHT") || "РЕЙС"}
        </div>
      </div>
      <div className="schedule-col-header__company">
        <div className="schedule-col-header__label">
          {t("SCHEDULE.COL-AIRLINE") || "АВИАКОМПАНИЯ, БОРТ"}
        </div>
      </div>
      <div className="schedule-col-header__departure">
        <div className="schedule-col-header__label schedule-col-header__label--note">
          {t("SCHEDULE.COL-DEPARTURE") || "ВЫЛЕТ"}
          <span className="schedule-col-header__note" aria-hidden="true">*</span>
        </div>
        <div className="schedule-col-header__sort-container">
          {sortBtn("departureUp", "up")}
          {sortBtn("departureDown", "down")}
        </div>
      </div>
      <div className="schedule-col-header__time">
        <div className="schedule-col-header__label">
          {t("SCHEDULE.COL-DURATION") || "ВРЕМЯ В ПУТИ"}
        </div>
        <div className="schedule-col-header__sort-container">
          {sortBtn("timeUp", "up")}
          {sortBtn("timeDown", "down")}
        </div>
      </div>
      <div className="schedule-col-header__arrival">
        <div className="schedule-col-header__label schedule-col-header__label--note">
          {t("SCHEDULE.COL-ARRIVAL") || "ПРИЛЕТ"}
          <span className="schedule-col-header__note" aria-hidden="true">*</span>
        </div>
        <div className="schedule-col-header__sort-container">
          {sortBtn("arrivalUp", "up")}
          {sortBtn("arrivalDown", "down")}
        </div>
      </div>
    </div>
  );
};
