import type { FC } from "react";
import { useMemo } from "react";
import { useTranslation } from "@/i18n/provider.js";
import type { IMealItem, MealType } from "../../types.js";
import { MEAL_LINKS } from "./shared.js";
import { useSpecialMeal } from "../../hooks/useSpecialMeal.js";
import econoIcon from "./icons/econom.svg";
import comfortIcon from "./icons/comfort.svg";
import businessIcon from "./icons/business.svg";
import specialIcon from "./icons/special-food.svg";
import "./panels.scss";

const MEAL_ICON_URL: Record<MealType, string> = {
  Economy: econoIcon,
  Comfort: comfortIcon,
  Business: businessIcon,
  Special: specialIcon,
};

// Label keys mirror Angular's flight-details-meal template (FOOD.*).
// Results: 'Эконом класс', 'Комфорт класс', 'Бизнес класс',
// 'Специальное питание' (ru); English fallbacks under FOOD in each locale.
const MEAL_LABEL_KEYS: Record<MealType, string> = {
  Economy: "FOOD.ECONOMY",
  Comfort: "FOOD.COMFORT",
  Business: "FOOD.BUSINESS",
  Special: "FOOD.SPECIAL",
};

const MEAL_ORDER: MealType[] = ["Economy", "Comfort", "Business", "Special"];

export interface MealPanelProps {
  meals: IMealItem[];
  /**
   * Optional flight context for the TZ §4.1.15.10 special-meal probe.
   * When all five fields are present, the panel calls the ws2 meal API
   * and surfaces the "Special" icon in addition to the class-based ones
   * when the API reports availability. Skipped entirely otherwise — the
   * panel falls back to what's in the `meals` array.
   */
  specialMealContext?: {
    origin?: string;
    destination?: string;
    airline?: string;
    number?: string;
    scheduledDepartureUtc?: string;
  };
}

export const MealPanel: FC<MealPanelProps> = ({ meals, specialMealContext }) => {
  const { t } = useTranslation();
  const types = new Set(meals.map((m) => m.type));

  const cabins = useMemo(() => Array.from(types), [types]);
  const { available: specialAvailable } = useSpecialMeal({
    origin: specialMealContext?.origin,
    destination: specialMealContext?.destination,
    airline: specialMealContext?.airline,
    number: specialMealContext?.number,
    scheduledDepartureUtc: specialMealContext?.scheduledDepartureUtc,
    cabins,
  });

  const showSpecial = types.has("Special") || specialAvailable === true;

  return (
    <div className="details-panel" data-testid="meal-panel">
      <div className="details-panel__icons">
        {MEAL_ORDER.map((type) => {
          const visible = type === "Special" ? showSpecial : types.has(type);
          if (!visible) return null;
          return (
            <a
              key={type}
              href={MEAL_LINKS[type]}
              target="_blank"
              rel="noopener noreferrer"
              className="details-panel__icon"
            >
              <img
                src={MEAL_ICON_URL[type]}
                alt={t(MEAL_LABEL_KEYS[type])}
                data-testid={`meal-icon-${type}`}
              />
              <span>{t(MEAL_LABEL_KEYS[type])}</span>
            </a>
          );
        })}
      </div>
    </div>
  );
};
