/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useOutsideClick } from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import React, { useRef, useState } from 'react';
import ReactDOM from 'react-dom';

import {
  CoverCreateIcon,
  ExtendRightIcon,
  FilterIcon,
  FourStarIcon,
  GlobeIcon,
  PersonaSmileIcon,
  StemsIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
  UploadIcon,
  VideoIcon,
  VinylIcon,
} from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

import { AvatarMaskShape } from '../image/Avatar';

export interface FilterOption {
  key: string;
  name: string;
  icon: React.ReactNode;
  type: 'checkbox' | 'radio';
  flags_and?: string[];
  flags_or?: string[];
}

export interface FilterState {
  [key: string]: any;
}

export interface BaseMultiSelectDropdownProps {
  store: {
    filters: FilterState;
    updateFilters: (filters: Partial<FilterState>) => void;
    clearFilters: () => void;
  };
  actionName:
    | 'LibraryMultiSelectDropdownClicked'
    | 'ProjectMultiSelectDropdownClicked';
  context?: Record<string, any>;
  flags?: Record<string, boolean>;
}

const FILTER_OPTIONS: FilterOption[] = [
  {
    key: 'liked',
    name: 'Liked',
    icon: <ThumbsUpIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    key: 'hide_disliked',
    name: 'Hide Disliked',
    icon: <ThumbsDownIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    key: 'hide_gen_stems',
    name: 'Hide Stems',
    icon: <StemsIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    key: 'hide_studio_clips',
    name: 'Hide Clips from Edit Mode',
    icon: <StemsIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    key: 'public',
    name: 'Public',
    icon: <GlobeIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    key: 'is_suno_short',
    name: 'Scenes',
    icon: <VideoIcon className='h-3 w-3' />,
    type: 'checkbox',
    flags_and: ['show_scenes_filters'],
  },
  {
    key: 'is_uploaded_audio',
    name: 'Uploads',
    icon: <UploadIcon className='h-3 w-3' />,
    type: 'radio',
  },
  {
    key: 'full_song',
    name: 'Full Songs',
    icon: <VinylIcon className='h-3 w-3' />,
    type: 'radio',
  },
  {
    key: 'is_extend',
    name: 'Extensions',
    icon: <ExtendRightIcon className='h-3 w-3' />,
    type: 'radio',
  },
  {
    key: 'is_cover',
    name: 'Covers',
    icon: <CoverCreateIcon className='h-3 w-3' />,
    type: 'radio',
  },
  {
    key: 'is_persona',
    name: 'Personas',
    icon: (
      <span className='inline-flex h-3 w-3 items-center justify-center'>
        <div className='relative h-full w-full'>
          <div
            className='absolute inset-0 bg-current'
            style={AvatarMaskShape.Persona}
          />
          <PersonaSmileIcon className='absolute inset-0 top-[5%] left-[5%] h-[90%] w-[90%] text-dumbo-50' />
        </div>
      </span>
    ),
    type: 'radio',
  },
  {
    key: 'is_upsample',
    name: 'Remasters',
    icon: <FourStarIcon className='h-3 w-3' />,
    type: 'radio',
  },
];

const BaseMultiSelectDropdown: React.FC<BaseMultiSelectDropdownProps> =
  observer(({ store, actionName, context = {}, flags = {} }) => {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);
    const buttonRef = useRef<HTMLDivElement>(null);

    useOutsideClick({
      ref: dropdownRef as React.RefObject<HTMLDivElement>,
      handler: (e) => {
        if (!buttonRef.current?.contains(e.target as any)) {
          setIsOpen(false);
        }
      },
    });

    const activeFilterCount = Object.entries(store.filters).filter(
      ([key, value]) => value === true && key !== 'page' && key !== 'query'
    ).length;

    const handleFilterToggle = (filterKey: string) => {
      const option = FILTER_OPTIONS.find((opt) => opt.key === filterKey);
      if (option?.type === 'checkbox') {
        store.updateFilters({
          [filterKey]: !store.filters[filterKey],
        });
      } else {
        const value = !store.filters[filterKey];
        if (value) {
          // For radio buttons, clear all other radio options
          const updatedFilters: Partial<FilterState> = {};
          FILTER_OPTIONS.filter((opt) => opt.type === 'radio').forEach(
            (opt) => {
              updatedFilters[opt.key] = false;
            }
          );
          updatedFilters[filterKey] = true;
          store.updateFilters(updatedFilters);
        } else {
          store.updateFilters({ [filterKey]: false });
        }
      }

      logWebUserEvent({
        actionName,
        context: {
          type: 'filter-toggle',
          active: store.filters[filterKey] as boolean,
          filter: filterKey,
          filters: store.filters,
          ...context,
        } as any,
      });
    };

    const clearAllFilters = () => {
      logWebUserEvent({
        actionName,
        context: {
          type: 'clear-all-filters',
          filters: store.filters,
          ...context,
        } as any,
      });
      store.clearFilters();
      store.updateFilters({});
      setIsOpen(false);
    };

    const rect = buttonRef.current?.getBoundingClientRect();
    const position = {
      top: rect ? rect.bottom + window.scrollY : 0,
      left: rect ? rect.left : 0,
    };

    // Filter options based on flags
    const visibleOptions = FILTER_OPTIONS.filter(
      (option) =>
        (!option.flags_and || option.flags_and.every((flag) => flags[flag])) &&
        (!option.flags_or || option.flags_or.some((flag) => flags[flag]))
    );

    let startIndexOfRadioSection = 0;
    for (let i = 0; i < visibleOptions.length; i++) {
      if (visibleOptions[i].type === 'radio') {
        startIndexOfRadioSection = i;
        break;
      }
    }

    return (
      <div className='relative inline-block text-left font-sans'>
        <div
          ref={buttonRef}
          className={`flex aspect-square h-10 cursor-pointer flex-row items-center justify-center gap-2 rounded-full px-3 font-sans text-sm whitespace-nowrap md:aspect-auto md:px-4 ${
            activeFilterCount > 0
              ? 'bg-foreground-primary text-background-primary'
              : 'bg-background-secondary text-foreground-primary hover:bg-background-tertiary'
          }`}
          onClick={() => setIsOpen(!isOpen)}
        >
          <FilterIcon
            className={`h-3 w-3 ${
              activeFilterCount > 0
                ? 'text-background-primary'
                : 'text-foreground-primary'
            }`}
          />
          <span className='line-clamp-1 hidden font-medium break-all md:inline'>
            Filters {activeFilterCount > 0 && `(${activeFilterCount})`}
          </span>
        </div>

        {isOpen &&
          ReactDOM.createPortal(
            <div
              className='absolute z-10000 mt-2 max-h-[445px] w-48 overflow-y-auto rounded-lg border border-border-secondary bg-background-secondary shadow-lg'
              style={{
                top: position.top,
                left: position.left,
                padding: '4px',
                fontSize: '14px',
                fontWeight: '500',
                cursor: 'pointer',
                transition: 'opacity 0.2s ease',
              }}
              ref={dropdownRef}
            >
              <div className='flex flex-col gap-1'>
                {visibleOptions.map((option, index) => (
                  <React.Fragment key={option.key}>
                    {index === startIndexOfRadioSection && (
                      <div className='my-[8px] border-b border-border-secondary' />
                    )}
                    <div
                      className={`flex cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 font-sans text-sm text-foreground-primary hover:bg-background-tertiary`}
                      style={{
                        transition: 'background-color 0.3s ease',
                        outline: 'none',
                        fontFamily: 'Neue Montreal, sans-serif',
                      }}
                      onClick={() => handleFilterToggle(option.key)}
                    >
                      <div className='flex items-center gap-3'>
                        {React.cloneElement(
                          option.icon as React.ReactElement<{
                            className: string;
                          }>,
                          {
                            className:
                              'w-3 h-3 text-foreground-primary shrink-0',
                          }
                        )}
                        <span>{option.name}</span>
                      </div>
                      {option.type === 'checkbox' ? (
                        <div
                          className={`h-4 w-4 shrink-0 rounded border-2 ${
                            store.filters[option.key]
                              ? 'border-[#C73D66] bg-[#C73D66]'
                              : 'border-foreground-primary/30'
                          } flex items-center justify-center`}
                        >
                          {store.filters[option.key] && (
                            <svg
                              className='h-3 w-3 text-white'
                              fill='none'
                              stroke='currentColor'
                              viewBox='0 0 24 24'
                            >
                              <path
                                strokeLinecap='round'
                                strokeLinejoin='round'
                                strokeWidth={4}
                                d='M5 13l4 4L19 7'
                              />
                            </svg>
                          )}
                        </div>
                      ) : (
                        <div
                          className={`h-4 w-4 rounded-full border-2 ${
                            store.filters[option.key]
                              ? 'border-[#C73D66] bg-[#C73D66]'
                              : 'border-foreground-primary/30'
                          } flex items-center justify-center`}
                        >
                          {store.filters[option.key] && (
                            <div className='h-2 w-2 rounded-full bg-white' />
                          )}
                        </div>
                      )}
                    </div>
                  </React.Fragment>
                ))}
                {activeFilterCount > 0 && (
                  <>
                    <div className='my-[8px] border-b border-border-secondary' />
                    <div
                      className='flex cursor-pointer rounded-lg px-3 py-2 font-sans text-sm text-foreground-primary hover:bg-background-tertiary'
                      style={{
                        transition: 'background-color 0.3s ease',
                        outline: 'none',
                        fontFamily: 'Neue Montreal, sans-serif',
                      }}
                      onClick={clearAllFilters}
                    >
                      Restore Defaults
                    </div>
                  </>
                )}
              </div>
            </div>,
            document.body
          )}
      </div>
    );
  });

export default BaseMultiSelectDropdown;