import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'

import type { Flight } from '@/constants/tripDetails/Flight'

import CpTripDetails from '@/components/CpTripDetails.vue'

const parisAirport = {
  city_name: 'Paris',
  iata_code: 'CDG',
  name: 'Paris Charles de Gaulle Airport',
  timezone: 'Europe/Paris',
}

const munichAirport = {
  city_name: 'Munich',
  iata_code: 'MUC',
  name: 'Franz Josef Strauss Airport',
  timezone: 'Europe/Berlin',
}

const newYorkAirport = {
  city_name: 'New York',
  iata_code: 'JFK',
  name: 'John F. Kennedy International Airport',
  timezone: 'America/New_York',
}

const directFlight: Flight = {
  segments: [
    {
      airline: { iata_code: 'AF', name: 'Air France' },
      arrival_date: '2026-06-10T17:40:00',
      departure_date: '2026-06-10T09:00:00',
      destination: newYorkAirport,
      destination_terminal: { label: 'Terminal 1', terminal_code: '1' },
      flight_number: 'AF008',
      origin: parisAirport,
      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
    },
  ],
}

const oneStopFlight: Flight = {
  segments: [
    {
      airline: { iata_code: 'AF', name: 'Air France' },
      arrival_date: '2026-06-10T11:10:00',
      departure_date: '2026-06-10T09:00:00',
      destination: munichAirport,
      flight_number: 'AF1234',
      origin: parisAirport,
      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
      via_airport: { city_name: 'Munich', iata_code: 'MUC' },
    },
    {
      airline: { iata_code: 'KL', name: 'KLM' },
      arrival_date: '2026-06-10T20:25:00',
      departure_date: '2026-06-10T13:20:00',
      destination: newYorkAirport,
      destination_terminal: { label: 'Terminal 4', terminal_code: '4' },
      flight_number: 'KL5678',
      origin: munichAirport,
    },
  ],
}

/** Luxon formats times and durations through `Intl`, so any BCP 47 tag works. */
const localeOptions = ['en', 'fr', 'de', 'es', 'it', 'nl', 'pt']

const localeLabels: Record<string, string> = {
  de: 'Deutsch (de)',
  en: 'English (en)',
  es: 'Español (es)',
  fr: 'Français (fr)',
  it: 'Italiano (it)',
  nl: 'Nederlands (nl)',
  pt: 'Português (pt)',
}

const meta = {
  title: 'Business/CpTripDetails',
  component: CpTripDetails,
  argTypes: {
    flight: {
      control: 'object',
      description: 'Raw flight data (segments) the leg-by-leg route detail is built from',
    },
    config: {
      control: 'object',
      description: 'Static label overrides — Pimp has no i18n, so the consumer supplies its own translations',
    },
    locale: {
      control: { type: 'select', labels: localeLabels },
      options: localeOptions,
      description: 'Locale used to format durations and the date tooltips. Does not translate the `config` labels.',
      table: { defaultValue: { summary: 'en' } },
    },
  },
} satisfies Meta<typeof CpTripDetails>

export default meta

type Story = StoryObj<typeof meta>

const defaultRender = (args: Args) => ({
  components: { CpTripDetails },
  setup() {
    return { args }
  },
  template: `<CpTripDetails v-bind="args" />`,
})

/**
 * Direct flight: a single segment, no layover section.
 */
export const DirectFlight: Story = {
  args: {
    flight: directFlight,
    locale: 'en',
  },
  render: defaultRender,
}

/**
 * One-stop itinerary: the layover section appears between the two segments,
 * and the technical-stop row is visible in the connection details.
 */
export const OneStop: Story = {
  args: {
    flight: oneStopFlight,
    locale: 'en',
  },
  render: defaultRender,
}