import { type FC, type JSX, useState } from "react";
import { useTranslation } from "@/i18n/provider.js";
import type { IFlightLeg } from "../../types.js";
import { shouldShowTransition, shouldShowAircraft, type DetailsViewType } from "./shared.js";
import { RegistrationPanel } from "./RegistrationPanel.js";
import { BoardingPanel } from "./BoardingPanel.js";
import { DeboardingPanel } from "./DeboardingPanel.js";
import { AircraftPanel } from "./AircraftPanel.js";
import { MealPanel } from "./MealPanel.js";
import { ServicesPanel } from "./ServicesPanel.js";
import "./FlightDetailsAccordion.scss";

export interface FlightDetailsAccordionProps {
  leg: IFlightLeg;
  viewType: DetailsViewType;
}

interface PanelDef {
  id: string;
  header: string;
  content: JSX.Element;
}

export const FlightDetailsAccordion: FC<FlightDetailsAccordionProps> = ({ leg, viewType }) => {
  const { t } = useTranslation();
  const [openIds, setOpenIds] = useState<Set<string>>(new Set());

  const panels: PanelDef[] = [];

  if (shouldShowTransition(leg.transition?.registration, leg.status, viewType)) {
    panels.push({
      id: "registration",
      header: t("DETAILS.REGISTRATION"),
      content: <RegistrationPanel item={leg.transition!.registration!} />,
    });
  }
  if (shouldShowTransition(leg.transition?.boarding, leg.status, viewType)) {
    panels.push({
      id: "boarding",
      header: t("DETAILS.BOARDING"),
      content: <BoardingPanel item={leg.transition!.boarding!} />,
    });
  }
  if (shouldShowTransition(leg.transition?.deboarding, leg.status, viewType)) {
    panels.push({
      id: "deboarding",
      header: t("DETAILS.DEBOARDING"),
      content: <DeboardingPanel item={leg.transition!.deboarding!} arrival={leg.arrival} />,
    });
  }
  if (shouldShowAircraft(leg.equipment)) {
    panels.push({
      id: "aircraft",
      header: t("DETAILS.AIRCRAFT"),
      content: <AircraftPanel equipment={leg.equipment} />,
    });
  }
  if ((leg.equipment.meal?.length ?? 0) > 0) {
    panels.push({
      id: "meal",
      header: t("DETAILS.MEAL"),
      content: <MealPanel meals={leg.equipment.meal!} />,
    });
  }
  if ((leg.equipment.aircraft?.actual?.onBoardServices?.length ?? 0) > 0) {
    panels.push({
      id: "services",
      header: t("DETAILS.ON_BOARD_SERVICES"),
      content: <ServicesPanel services={leg.equipment.aircraft!.actual!.onBoardServices!} />,
    });
  }

  if (panels.length === 0) return null;

  const toggle = (id: string) => {
    setOpenIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  return (
    <div className="flight-details-accordion p-accordion" data-testid="flight-details-accordion">
      {panels.map((panel) => {
        const isOpen = openIds.has(panel.id);
        return (
          <div
            key={panel.id}
            className={`p-accordion-tab${isOpen ? " p-accordion-tab--active" : ""}`}
            data-testid={`accordion-tab-${panel.id}`}
          >
            <div
              className={`p-accordion-header${isOpen ? " p-highlight" : ""}`}
              role="button"
              tabIndex={0}
              onClick={() => toggle(panel.id)}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  toggle(panel.id);
                }
              }}
            >
              <span>{panel.header}</span>
              <span aria-hidden="true">{isOpen ? "\u25B2" : "\u25BC"}</span>
            </div>
            {isOpen && <div className="p-accordion-content">{panel.content}</div>}
          </div>
        );
      })}
    </div>
  );
};
