'use client';
import React, { useEffect, useState, useMemo } from 'react';
import { useTheme } from 'next-themes';
import CommonImage from '../common/CommonImage';
import { Text } from '@/components/ui/text';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import Benchmark from './shortcuts-menu/Benchmark';
import ReleaseNotes from './shortcuts-menu/ReleaseNotes';
import { API_ENDPOINTS } from '@/constants';
import { store } from '@/store/store';
import { globalApiGet, globalApiPost } from '@/services/global/globalApiCalls';
import { UnknownRecord } from '@/types';

const themeClass: UnknownRecord = {
  'white-color-theme': 'marble',
  'black-color-theme': 'graphite',
  'darkblue-color-theme': 'sapphire',
  'purple-color-theme': 'lavender',
  'lightblue-color-theme': 'azure',
  'dark-color-theme': 'dark',
};

const FooterSection = () => {
  const selectedTheme = store.getState().session?.panelTheme?.themeColor;
  const selectedTimezone = store.getState().session?.timezone;

  const { theme, setTheme, systemTheme } = useTheme();
  const current = theme === 'system' ? systemTheme : theme;
  const [isThemePanelVisible, setIsThemePanelVisible] = useState(false);
  const [isCountryPanelVisible, setIsCountryPanelVisible] = useState(false);
  const [selectedCountry, setSelectedCountry] = useState<string>('');
  const [searchTerm, setSearchTerm] = useState('');
  const [dashboardQuote, setDashboardQuote] = useState<UnknownRecord>({});
  const [timezonesList, setTimezonesList] = useState<UnknownRecord[]>([]);

  const updateTheme = async (theme: string) => {
    await globalApiPost(API_ENDPOINTS.USER.UPDATE_THEME, {
      user_id: store.getState().session?.user?.id,
      theme: theme,
    });
  };

  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);

  const toggleThemePanel = () => {
    setIsThemePanelVisible((prev) => !prev);
    setIsCountryPanelVisible(false);
  };

  const toggleCountryPanel = () => {
    setIsCountryPanelVisible((prev) => !prev);
    setIsThemePanelVisible(false);
  };

  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),
    };
    await globalApiPost(
      API_ENDPOINTS.MASTERS.TIMEZONES.UPDATE_BE,
      updatedTimezone,
    );
  };

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

      setDashboardQuote(quote);
      setTimezonesList(timezones);
    }
    fetchData();
    if (selectedTheme) setTheme(themeClass[selectedTheme]);

    if (selectedTimezone)
      setSelectedCountry(
        `${selectedTimezone.defaultSetBackendTimeZoneCountryName} - ${
          selectedTimezone.defaultSetBackendTimeZoneName
        } (${selectedTimezone.defaultSetBackendTimeZoneUtc})`,
      );
  }, [selectedTheme, selectedTimezone, setTheme]);

  const themeIcons: Record<string, string> = {
    dark: 'fa-solid fa-moon',
    marble: 'fa-solid fa-sun',
  };
  const [isOpen, setIsOpen] = useState(false);

  // 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 (
    <footer className="main-footer">
      <Text className="container-widget mx-auto flex items-center justify-between">
        <Text className="footer-left-side flex items-center gap-4">
          <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
            <DropdownMenuTrigger asChild>
              <Text className="shortCodeWidget">
                <CommonImage
                  src={'/footer/icon-shortcut-utility.png'}
                  width={24}
                  height={24}
                  alt={'Shortcuts'}
                  classname={'Shortcuts'}
                />
                Shortcuts &amp; Utilities
              </Text>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              className="p-4 gap-4 flex flex-row utilities-widget"
              aria-describedby={undefined}
              onInteractOutside={(e) => e.preventDefault()}
            >
              <Text className="left-panel-utilities">
                {/* Country Panel Trigger */}
                <Text
                  weight="semibold"
                  onClick={toggleCountryPanel}
                  className={`relative theme-select-text mb-2 cursor-pointer text-sm ${
                    isCountryPanelVisible ? 'active' : ''
                  } `}
                >
                  <Text className="selectedCountry">
                    {selectedCountry.slice(0, 33) + '....'}
                  </Text>
                  <CommonImage
                    src="/footer/theme-arrow.webp"
                    width={12}
                    height={5}
                    alt="arrow"
                    classname="theme-arrow"
                  />
                </Text>
                {/* Theme Panel Trigger */}
                {/* <Text
                  weight="semibold"
                  onClick={toggleThemePanel}
                  className={`relative theme-select-text mb-2 cursor-pointer text-sm ${
                    isThemePanelVisible ? 'active' : ''
                  }`}
                >
                  Theme: {current}
                  <CommonImage
                    src="/footer/theme-arrow.webp"
                    width={12}
                    height={5}
                    alt="arrow"
                    classname="theme-arrow"
                  />
                </Text> */}
                <Benchmark />
                {/* <CourseDatabase /> */}
                <ReleaseNotes />
              </Text>
              {/* Theme Options Panel */}
              {/* {isThemePanelVisible && (
                <Text className="right-panel-utilities">
                  <ul className="theme-list">
                    {Object.entries(themeClass).map(([key, value]) => (
                      <li
                        key={value}
                        onClick={() => {
                          setTheme(value);
                          setIsThemePanelVisible(false);
                          updateTheme(key);
                        }}
                        className={`theme-item cursor-pointer ${
                          value === theme ? 'active' : ''
                        }`}
                      >
                        Theme: {value.charAt(0).toUpperCase() + value.slice(1)}
                      </li>
                    ))}
                  </ul>
                </Text>
              )} */}
              {/* Country Options Panel */}
              {isCountryPanelVisible && (
                <Text className="right-panel-utilities">
                  <Input
                    type="text"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="mb-2 country-search-list"
                  />
                  <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={() => {
                              handleTimezoneUpdates(item);
                              setIsCountryPanelVisible(false);
                              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 &quot;{searchTerm}&quot;
                      </li>
                    )}
                  </ul>
                </Text>
              )}

              <div className="shortcut-close-area">
                <div className="shortcut-left-icon">
                  <CommonImage
                    src={'/footer/icon-shortcut-utility.png'}
                    width={24}
                    height={24}
                    alt={'Shortcuts'}
                    classname={'Shortcuts'}
                  />
                  <span>Shortcuts &amp; Utilities</span>
                </div>
                <div
                  className="close-shortcut-utility"
                  onClick={() => setIsOpen(false)}
                >
                  <CommonImage
                    src={'/main/cross-arrow.webp'}
                    width={15}
                    height={15}
                    alt={'close'}
                    classname={'close'}
                  />
                </div>
              </div>
            </DropdownMenuContent>
          </DropdownMenu>
          <Text className="theme-footer-widget-ui m-0 p-0">
            <DropdownMenu
              open={isThemePanelVisible}
              onOpenChange={setIsThemePanelVisible}
            >
              <DropdownMenuTrigger asChild>
                <Text className="theme-choose-name">
                  {/* Theme Panel Trigger */}
                  <Text
                    weight="semibold"
                    onClick={toggleThemePanel}
                    className={`m-0 p-0 items-center relative flex gap-2 theme-select-text mb-2 cursor-pointer text-sm ${
                      isThemePanelVisible ? 'active' : ''
                    }`}
                  >
                    Theme:
                    <div
                      className={`flex gap-2 border items-center rounded-md pl-2 pr-4 pt-1 pb-1 text-theme-name theme-${mounted ? current : ''}`}
                    >
                      {mounted ? (
                        <i
                          className={
                            themeIcons[current ?? ''] || 'fa-solid fa-circle'
                          }
                        />
                      ) : (
                        <i className="fa-solid fa-sun" />
                      )}

                      {mounted ? current : 'Marble'}
                      <span className="caret"></span>
                    </div>
                  </Text>
                </Text>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="p-4 gap-4 flex flex-row theme-selection-name ml-72">
                <ul className="theme-list flex gap-4 ">
                  {Object.entries(themeClass).map(([key, value]) => (
                    <li
                      key={value}
                      onClick={() => {
                        setTheme(value);
                        setIsThemePanelVisible(false);
                        updateTheme(key);
                      }}
                      className={`border pl-4 pr-4 pt-1 pb-1 rounded-md theme-item cursor-pointer ${
                        value === theme ? 'active' : ''
                      } theme-${value.charAt(0).toLowerCase() + value.slice(1)}`}
                    >
                      {value === theme ? (
                        <span className="check-ok">
                          <CommonImage
                            src={'/main/arrow-theme-tick.webp'}
                            width={12}
                            height={11}
                            alt={'theme-ok'}
                            classname={'theme-ok'}
                          />
                        </span>
                      ) : null}
                      {/* {index.charAt(0).toUpperCase() + index.slice(1)} */}
                      {value === 'dark'
                        ? 'Dark Mode'
                        : value.charAt(0).toUpperCase() + value.slice(1)}
                    </li>
                  ))}
                </ul>
              </DropdownMenuContent>
            </DropdownMenu>
            {/* Theme Options Panel */}
          </Text>
        </Text>
        <Text className="footer-right-side">
          <Text className="showingAttentionWidget">
            {dashboardQuote?.quote_master_name}
          </Text>
        </Text>
      </Text>
    </footer>
  );
};
export default FooterSection;