/* 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 { useStores } from '@/app/(root)/AppProviders';
import {
  CloseIcon,
  CoversIcon,
  ExtendRightIcon,
  FilterIcon,
  FourStarIcon,
  GlobeIcon,
  PersonaSmileIcon,
  StemsIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
  UploadIcon,
  VinylIcon,
} from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { ProjectStore } from '@/state/projectStore';

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

interface ProjectFilterOption {
  key: string;
  name: string;
  icon: React.ReactNode;
  type: string;
  flags_and?: string[];
  flags_or?: string[];
}

const PROJECT_FILTER_OPTIONS: ProjectFilterOption[] = [
  {
    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 Edit Mode Clips', // TODO: make this "Edit & Studio" when studio is live
    icon: <StemsIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    key: 'public',
    name: 'Public',
    icon: <GlobeIcon className='h-3 w-3' />,
    type: 'checkbox',
  },
  {
    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: <CoversIcon 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',
  },
];

interface ProjectMultiSelectDropdownProps {
  project: ProjectStore;
}

const ProjectMultiSelectDropdown: React.FC<ProjectMultiSelectDropdownProps> =
  observer(({ project }) => {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);
    const buttonRef = useRef<HTMLDivElement>(null);
    const { session } = useStores();

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

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

    const handleFilterToggle = (filterKey: string) => {
      const option = PROJECT_FILTER_OPTIONS.find(
        (opt) => opt.key === filterKey
      );
      if (option?.type === 'checkbox') {
        project.updateFilters({
          [filterKey as keyof typeof project.filters]:
            !project.filters[filterKey as keyof typeof project.filters],
        });
      } else {
        const value =
          !project.filters[filterKey as keyof typeof project.filters];
        if (value) {
          const updatedFilters = {
            is_cover: false,
            is_extend: false,
            is_upsample: false,
            is_persona: false,
            full_song: false,
            is_uploaded_audio: false,
            [filterKey]: true,
          };
          project.updateFilters(updatedFilters);
        } else {
          project.updateFilters({ [filterKey]: false });
        }
      }

      logWebUserEvent({
        actionName: 'ProjectMultiSelectDropdownClicked',
        context: {
          type: 'filter-toggle',
          active: project.filters[
            filterKey as keyof typeof project.filters
          ] as boolean,
          filter: filterKey,
          filters: project.filters,
        },
      });
    };

    const clearAllFilters = () => {
      logWebUserEvent({
        actionName: 'ProjectMultiSelectDropdownClicked',
        context: {
          type: 'clear-all-filters',
          projectId: project.currentProjectId,
          filters: project.filters,
        },
      });
      project.clearFilters();
      project.updateFilters({});
      setIsOpen(false);
    };

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

    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-foreground-primary/10'
          }`}
          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>
          {false && (
            <>
              <span className='ml-0 hidden h-5 w-5 items-center justify-center rounded-full text-xs text-foreground-primary'>
                {activeFilterCount}
              </span>
              <CloseIcon
                className='ml-0 h-3 w-3'
                onClick={(e) => {
                  e.stopPropagation();
                  clearAllFilters();
                }}
              />
            </>
          )}
        </div>

        {isOpen &&
          ReactDOM.createPortal(
            <div
              className='absolute z-10000 mt-2 max-h-[445px] w-56 overflow-y-auto rounded-lg shadow-lg'
              style={{
                top: position.top,
                left: position.left,
                background: 'var(--color-background-primary)',
                padding: '4px',
                fontSize: '14px',
                fontWeight: '500',
                cursor: 'pointer',
                transition: 'opacity 0.2s ease',
                border: '1px solid var(--color-border-secondary)',
              }}
              ref={dropdownRef}
            >
              <div>
                {PROJECT_FILTER_OPTIONS.filter(
                  (option) =>
                    !option.flags_and ||
                    option.flags_and.every((flag) => session.flags?.[flag]) ||
                    !option.flags_or ||
                    option.flags_or.some((flag) => session.flags?.[flag])
                ).map((option, index) => (
                  <React.Fragment key={option.key}>
                    {index === 4 && (
                      <div
                        style={{
                          borderBottom:
                            '1px solid var(--color-border-secondary)',
                          margin: '8px 0 8px 0',
                        }}
                      />
                    )}
                    <div
                      className={`flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 font-sans text-sm 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-2'>
                        {React.cloneElement(
                          option.icon as React.ReactElement<{
                            className: string;
                          }>,
                          {
                            className: 'w-3 h-3 text-foreground-primary',
                          }
                        )}
                        <span>{option.name}</span>
                      </div>
                      {option.type === 'checkbox' ? (
                        <div
                          className={`h-4 w-4 rounded border-2 ${
                            project.filters[
                              option.key as keyof typeof project.filters
                            ]
                              ? 'border-[#C73D66] bg-[#C73D66]'
                              : 'border-quaternary'
                          } flex items-center justify-center`}
                        >
                          {project.filters[
                            option.key as keyof typeof project.filters
                          ] && (
                            <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 ${
                            project.filters[
                              option.key as keyof typeof project.filters
                            ]
                              ? 'border-[#C73D66] bg-[#C73D66]'
                              : 'border-quaternary'
                          } flex items-center justify-center`}
                        >
                          {project.filters[
                            option.key as keyof typeof project.filters
                          ] && (
                            <div className='h-2 w-2 rounded-full bg-white' />
                          )}
                        </div>
                      )}
                    </div>
                  </React.Fragment>
                ))}
                {activeFilterCount > 0 && (
                  <>
                    <div className='my-2 h-px bg-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}
                    >
                      Clear all ({activeFilterCount})
                    </div>
                  </>
                )}
              </div>
            </div>,
            document.body
          )}
      </div>
    );
  });

export default ProjectMultiSelectDropdown;