import React, { ReactNode } from 'react';
import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
import SearchResults from '../..';
import { Footer, Navbar } from '../../../../src';
import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
import Icon from '../../../shared/components/icon';

interface FlightSearchResultsSelfContainedProps {}

const FlightSearchResultsSelfContained: React.FC<FlightSearchResultsSelfContainedProps> = () => {
  // Filters
  const filters: Filter[] = [
    {
      property: 'regime',
      label: 'Regime',
      type: 'checkbox',
      options: [
        { label: 'Room only', value: ['RO', 'LO', 'OB'], isChecked: false },
        { label: 'Bed & Beakfast', value: ['BB', 'KO'], isChecked: false },
        { label: 'Half board', value: ['HB'], isChecked: false },
        { label: 'Full board', value: ['FB'], isChecked: false }
      ],
      isFrontendFilter: false
    },
    {
      property: 'price',
      label: 'Prijs',
      type: 'slider',
      isFrontendFilter: false
    },
    {
      property: 'rating',
      label: 'Rating',
      type: 'star-rating',
      isFrontendFilter: true
    },
    {
      property: 'theme',
      label: "Thema's",
      type: 'toggle',
      options: [
        { label: 'Adults', value: 1, isChecked: false },
        { label: 'Luxury', value: 2, isChecked: false },
        { label: 'Welness & Spa', value: 3, isChecked: false },
        { label: 'familie', value: 4, isChecked: false }
      ],
      isFrontendFilter: false
    }
  ];

  const customCardRenderer = (result: SearchResult): ReactNode => {
    switch (result.type) {
      case 'flight':
        return <p>This should not be here...</p>;
      case 'hotel':
        // const formatDateTime = (date: Date) =>
        //   new Intl.DateTimeFormat('en-US', {
        //     hour: '2-digit',
        //     minute: '2-digit',
        //     hour12: false
        //   }).format(new Date(date));

        // const { outbound, return: returnLeg, price, ctaText, title, tags } = result;

        return (
          <>
            <div className="flight">
              <div className="flight__option">
                <div className="flight__content">
                  <div className="flight__flights">
                    <div className="flight__flight">
                      <div className="flight__flight__header">
                        <div className="flight__status__container"></div>
                        <div className="flight__price">
                          <span className="price price--increase">- € 375,98</span>
                          <button type="button" className="cta cta--select">
                            Select
                          </button>
                        </div>
                      </div>
                    </div>
                    {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
                    <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
                    <div className="flight__flight">
                      <div className="flight__flight__container">
                        <div className="flight__flight__wrapper">
                          <div className="flight__logo__wrapper">
                            <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
                            <span>Example Airline</span>
                          </div>
                          <div className="flight__info">
                            <div className="flight__info__times">
                              <strong>08:30 JFK</strong>
                              <p>Mon 12 Feb 2025</p>
                            </div>
                            <div className="flight__info__duration">
                              <p>7h 45m</p>
                              <div className="flight__info__duration__stops">
                                <div className="flight__info__duration__stop" />
                              </div>
                              <span>1 stop</span>
                            </div>
                            <div className="flight__info__times flight__info__times--arrival">
                              <strong>22:15 AMS</strong>
                              <p>Tue 13 Feb 2025</p>
                              <span className="flight__info__times__days">+1 day</span>
                            </div>
                          </div>
                        </div>

                        <div className="flight__detail__btn__wrapper">
                          <div className="flight__detail__btn">
                            {/* Static icon, no click logic */}
                            <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
                          </div>
                        </div>
                      </div>

                      {/* Detail section, always visible in this static version */}
                      <div className="flight__detail">
                        {/* Flight Line 1 */}
                        <div className="flight__info">
                          <div className="flight__info__times__wrapper">
                            <div className="flight__info__times">
                              <p>08:30</p>
                              <strong>JFK</strong>
                              <p>Mon 12 Feb 2025</p>
                            </div>
                            <div>
                              <Icon name="ui-plane-depart" width={30} height={20} />
                            </div>
                          </div>
                          <div className="flight__info__duration">
                            <p>6h 20m</p>
                            <div className="flight__info__duration__stops" />
                            <span>Example Airline</span>
                            <strong>EA123</strong>
                          </div>
                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
                            <div>
                              <Icon name="ui-plane-arrive" width={30} height={20} />
                            </div>
                            <div className="flight__info__times flight__info__times--arrival">
                              <p>20:50</p>
                              <strong>LHR</strong>
                              <p>Mon 12 Feb 2025</p>
                            </div>
                          </div>
                        </div>

                        {/* Wait time */}
                        <div className="flight__info">
                          <div className="flight__info__times" />
                          <div className="flight__info__duration flight__info__duration--waittime">
                            <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
                              <Icon name="ui-clock" width={24} height={24} />
                            </div>
                            <div className="flight__info__duration__stoptime">
                              <span>Stop time</span>
                              <strong>1h 15m</strong>
                            </div>
                          </div>
                          <div className="flight__info__times flight__info__times--arrival" />
                        </div>

                        {/* Flight Line 2 */}
                        <div className="flight__info">
                          <div className="flight__info__times__wrapper">
                            <div className="flight__info__times">
                              <p>22:05</p>
                              <strong>LHR</strong>
                              <p>Mon 12 Feb 2025</p>
                            </div>
                            <div>
                              <Icon name="ui-plane-depart" width={30} height={20} />
                            </div>
                          </div>
                          <div className="flight__info__duration">
                            <p>1h 10m</p>
                            <div className="flight__info__duration__stops" />
                            <span>Example Airline</span>
                            <strong>EA456</strong>
                          </div>
                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
                            <div>
                              <Icon name="ui-plane-arrive" width={30} height={20} />
                            </div>
                            <div className="flight__info__times flight__info__times--arrival">
                              <p>23:15</p>
                              <strong>AMS</strong>
                              <p>Mon 12 Feb 2025</p>
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* Rate section kept empty (original code was commented out) */}
                      <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        );
      default:
        return null;
    }
  };

  const configuration: SearchResultsConfiguration = {
    searchConfiguration: {
      id: 6,
      name: 'Search Flights',
      icon: '',
      defaultSearchType: 3,
      serviceTypes: [7],
      defaultCatalogueId: 1,
      defaultDuration: undefined,
      fromDateAmount: 1,
      fromDateAmountType: 1,
      toDateAmount: 7,
      toDateAmountType: 0,
      enableManualPackaging: false,
      allowFlights: false,
      allowAccommodations: false,
      allowCarRentals: false,
      allowTransfers: false,
      allowExcursions: false,
      qsmType: 3
    },
    tideConnection: {
      host: 'https://tide-default3468-acceptance.tidesoftware.be',
      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
      catalogueIds: [1, 2]
    }, // no backend needed for static content
    showFilters: true,
    showFlightResults: false,
    showHotelAccommodationResults: false,
    showFlightAccommodationResults: true,
    showRoundTripResults: false,
    showTabViews: true,
    // results,
    // customCards,
    filterIcon: (
      <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
        <path d="M7.429 16v-5.714h1.714v2H16V14h-6.857v2ZM0 14v-1.714h5.714V14Zm3.429-3.143v-2H0v-1.715h3.429v-2h1.714v5.715Zm3.428-2v-1.715H16v1.715Zm3.429-3.143V0H12v2h4v1.715h-4v2Zm-10.286-2V2h9.143v1.715Z" />
      </svg>
    ),
    useGlobalApplyFilterButton: true,
    onFilterChange: (updatedFilters) => {
      console.log('Filters changed:', updatedFilters);
    },

    // ---- Static results + custom renderer ----
    showCustomCards: true,
    customCardRenderer,

    filters,

    // Map View
    showMapView: false,

    // Pagination

    // State & UI
    isLoading: false,
    customSpinner: null,

    languageCode: 'en-GB',
    destinationImage: {
      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
      alt: 'Tenerife'
    }
  };

  return (
    <div id="tide-content">
      <Navbar
        logo={<TideLogo />}
        topLinks={topLinks}
        items={navItems}
        language={language}
        languages={languages}
        onLanguageChange={(lang) => console.log('Language changed:', lang)}
        onSearch={(query) => console.log('Search:', query)}
      />
      <SearchResults configuration={configuration} />
      <Footer />
    </div>
  );
};

export default FlightSearchResultsSelfContained;