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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import React, { useCallback, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import ProjectDropdown from '@/components/song/ProjectDropdown';
import { UserGroupIcon } from '@/icons/generated';
import { DEFAULT_PROJECT_ID } from '@/utils/constants';
import { formatDateStringWTime } from '@/utils/utils';

interface ProjectRowProps {
  id: string;
  name: string;
  clipCount: number;
  lastUpdatedClip: string | null;
  shared: boolean;
  onClick: (id: string, name: string) => void;
  onArchive?: (id: string) => void;
  onEdit?: (id: string) => void;
  onUnArchive?: (id: string) => void;
}

const ProjectRow: React.FC<ProjectRowProps> = ({
  id,
  name,
  clipCount,
  lastUpdatedClip,
  shared,
  onClick,
  onArchive,
  onEdit,
  onUnArchive,
}) => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0 });
  const { project } = useStores();

  const handleContextMenu = useCallback((event: React.MouseEvent) => {
    event.preventDefault();
    openDropdown(event);
  }, []);

  const openDropdown = useCallback((event: React.MouseEvent) => {
    event.stopPropagation();
    setIsDropdownOpen(true);
    setDropdownPosition({ x: event.clientX, y: event.clientY });
  }, []);

  const handleCloseDropdown = useCallback(() => {
    setIsDropdownOpen(false);
  }, []);

  return (
    <div
      className='cursor-pointer overflow-hidden rounded-lg px-[12px] py-[8px] hover:bg-secondary/20'
      onContextMenu={id !== DEFAULT_PROJECT_ID ? handleContextMenu : undefined}
      onClick={() => onClick(id, name)}
    >
      <div className='flex items-center gap-[12px]'>
        <div className='relative flex-[0_0_64px]'>
          <ImageWithFallback
            src={project.getAuraImageForProject(id)}
            alt={`Cover image for ${name}`}
            className='h-[48px] w-[64px] rounded-[8px] object-cover'
            fallbackSrc='https://cdn-o.suno.com/auras/Aura-01.png'
          />
          {
            <div className='absolute inset-y-0 left-0 flex w-[75%] items-center justify-start rounded-l-[8px] bg-black/30 backdrop-blur-xs'>
              <span className='pl-2 font-medium text-white'>
                <div>
                  <div className='text-[14px] leading-[16px]'>{clipCount}</div>
                  <div className='text-[12px] leading-[10px]'>
                    song{clipCount > 1 || clipCount === 0 ? 's' : ''}
                  </div>
                </div>
              </span>
            </div>
          }
        </div>
        <div className='flex flex-1 flex-row items-center justify-between overflow-hidden'>
          <div className='min-w-0 flex-1'>
            <div className='flex items-center gap-1'>
              <h3 className='truncate text-[16px] leading-[16px] font-medium text-foreground-primary'>
                {name}
              </h3>
              {shared && (
                <div className='shrink-0 text-[12px] font-medium text-[#8F8B8A]'>
                  <UserGroupIcon />
                </div>
              )}
            </div>
          </div>
          <div className='flex items-center'>
            <div className='mr-4 hidden text-right md:block'>
              <p className='text-[12px] font-medium text-[#8F8B8A]'>
                {clipCount > 0 ? (
                  <>
                    {lastUpdatedClip
                      ? formatDateStringWTime(lastUpdatedClip, undefined, true)
                      : ''}
                  </>
                ) : null}
              </p>
            </div>
            <div className='w-[28px]'>
              {id !== DEFAULT_PROJECT_ID && (
                <div onClick={(e) => e.stopPropagation()}>
                  <ProjectDropdown
                    projectId={id}
                    projectName={name}
                    onArchive={onArchive}
                    onUnArchive={onUnArchive}
                    onEdit={onEdit}
                    isOpen={isDropdownOpen}
                    onOpen={openDropdown}
                    onClose={handleCloseDropdown}
                    position={dropdownPosition}
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProjectRow;