'use client';
import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Text } from '@/components/ui/text';
import { Input } from '@/components/ui/input';
import { API_ENDPOINTS } from '@/constants';
import { store } from '@/store/store';
import { globalApiGet, globalApiPost } from '@/services/global/globalApiCalls';
import { fnEmpty, fnString, UnknownRecord } from '@/types';
import { useDispatch, useSelector } from 'react-redux';
import { hydrateSession } from '@/store/slices/sessionSlice';

// Define proper props interface
interface TimezoneSwitcherProps {
  setSelectedCountry: fnString;
  toggleCountryPanel: fnEmpty;
  isCountryPanelVisible: boolean;
}

const TimezoneSwitcher = ({
  setSelectedCountry,
  toggleCountryPanel,
  isCountryPanelVisible,
}: TimezoneSwitcherProps) => {
  const dispatch = useDispatch();
  // const selectedTimezone = store.getState().session?.timezone;
  const selectedTimezone = useSelector((state: any) => state.session.timezone);

  const [searchTerm, setSearchTerm] = useState('');
  const [timezonesList, setTimezonesList] = useState<UnknownRecord[]>([]);

  const handleTimezoneUpdates = async (timezone: UnknownRecord) => {
    const updatedTimezone: UnknownRecord = {
      defaultSetBackendTimeZoneID: String(timezone.timezone_id),
      defaultSetBackendTimeZoneCountryID: String(timezone.country_id),
      defaultSetBackendTimeZoneName: String(timezone.timezone_name),
      defaultSetBackendTimeZoneUtc: String(timezone.utc),
      defaultSetBackendTimeZoneCountryName: String(timezone.country_name),
    };
    dispatch(
      hydrateSession({
        timezone: updatedTimezone,
      }),
    );
    await globalApiPost(
      API_ENDPOINTS.MASTERS.TIMEZONES.UPDATE_BE,
      updatedTimezone,
    );
  };

  useEffect(() => {
    async function fetchData() {
      async function fetchTimezones() {
        const timezones = await globalApiGet(
          API_ENDPOINTS.MASTERS.TIMEZONES.LIST,
        );
        return Array.isArray(timezones) ? timezones : [];
      }
      const [timezones] = await Promise.all([fetchTimezones()]);

      setTimezonesList(timezones);
    }
    fetchData();
  }, []);

  useEffect(() => {
    if (selectedTimezone && !searchTerm) {
      setSelectedCountry(
        `${selectedTimezone.defaultSetBackendTimeZoneCountryName} - ${
          selectedTimezone.defaultSetBackendTimeZoneName
        } (${selectedTimezone.defaultSetBackendTimeZoneUtc})`,
      );
    }
  }, []);
  // Filtered list based on search term
  const filteredTimezones = useMemo(() => {
    return timezonesList.filter((item) => {
      const searchLower = searchTerm.toLowerCase();
      return (
        item.country_name?.toLowerCase().includes(searchLower) ||
        item.timezone_name?.toLowerCase().includes(searchLower) ||
        item.timezone?.toLowerCase().includes(searchLower)
      );
    });
  }, [timezonesList, searchTerm]);

  return (
    <>
      {isCountryPanelVisible && (
        <Text className="right-panel-utilities">
          <Input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="mb-2 country-search-list"
            placeholder="Search timezones..."
          />
          <ul className="country-name-list overflow-auto scrl-y">
            {filteredTimezones.length > 0 ? (
              filteredTimezones.map((item) => {
                const isSelected =
                  String(selectedTimezone?.defaultSetBackendTimeZoneID) ===
                  String(item.timezone_id);

                return (
                  <li
                    key={item.timezone_id}
                    aria-selected={isSelected}
                    role="option"
                    onClick={async () => {
                      await handleTimezoneUpdates(item);
                      toggleCountryPanel();
                      setSelectedCountry(
                        `${item.country_name} - ${item.timezone_name} (${item.timezone})`,
                      );
                      setSearchTerm(''); // Reset search after selection
                    }}
                    className={`cursor-pointer px-3 py-2 transition-colors ${
                      isSelected ? 'active' : ''
                    }`}
                  >
                    {item.country_name} - {item.timezone_name} ({item.timezone})
                  </li>
                );
              })
            ) : (
              <li className="no-match-text">No match found "{searchTerm}"</li>
            )}
          </ul>
        </Text>
      )}
    </>
  );
};

export default TimezoneSwitcher;