import React, { useCallback, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { CheckIcon, CloseIcon } from '@/icons';
import { ProjectInviteSchema } from '@/state/projectStore';
import { FALLBACK_AURA_URL } from '@/utils/constants';
import { formatDateStringWTime } from '@/utils/utils';

interface ProjectInviteProps {
  invite: ProjectInviteSchema;
  onAccept?: (inviteId: string) => void;
  onReject?: (inviteId: string) => void;
}

const ProjectInvite: React.FC<ProjectInviteProps> = ({
  invite,
  onAccept,
  onReject,
}) => {
  const { project } = useStores();
  const [isLoading, setIsLoading] = useState(false);

  const handleAccept = useCallback(
    async (e: React.MouseEvent) => {
      e.stopPropagation();
      if (isLoading) return;

      setIsLoading(true);
      try {
        await onAccept?.(invite.id);
      } finally {
        setIsLoading(false);
      }
    },
    [invite.id, onAccept, isLoading]
  );

  const handleReject = useCallback(
    async (e: React.MouseEvent) => {
      e.stopPropagation();
      if (isLoading) return;

      setIsLoading(true);
      try {
        await onReject?.(invite.id);
      } finally {
        setIsLoading(false);
      }
    },
    [invite.id, onReject, isLoading]
  );

  const invitedByUser = {
    displayName: invite.invited_by_user_display_name,
    handle: invite.invited_by_user_handle,
    avatarUrl: invite.invited_by_user_avatar_url,
  };

  return (
    <div className='overflow-hidden rounded-lg px-[12px] py-[8px]'>
      <div className='flex items-center gap-[12px]'>
        <div className='relative flex-[0_0_64px]'>
          <ImageWithFallback
            src={project.getAuraImageForProject(invite.project.id)}
            alt={`Cover image for ${invite.project.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]'>
                  {invite.project.clip_count}
                </div>
                <div className='text-[12px] leading-[10px]'>
                  song
                  {invite.project.clip_count > 1 ||
                  invite.project.clip_count === 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'>
            <h3 className='truncate text-[16px] leading-[16px] font-medium text-foreground-primary'>
              {invite.project.name}
            </h3>
            <div className='mt-1 flex items-center gap-2'>
              <div className='flex items-center gap-1'>
                <ImageWithFallback
                  src={invitedByUser.avatarUrl || FALLBACK_AURA_URL}
                  alt={`Avatar of ${invitedByUser.displayName || invitedByUser.handle || 'User'}`}
                  className='h-4 w-4 rounded-full object-cover'
                  fallbackSrc={FALLBACK_AURA_URL}
                />
                <span className='text-[12px] font-medium text-foreground-secondary'>
                  Invited by{' '}
                  {invitedByUser.displayName ||
                    invitedByUser.handle ||
                    'Unknown'}
                </span>
              </div>
            </div>
          </div>
          <div className='flex items-center gap-2'>
            <div className='mr-4 hidden text-right md:block'>
              <p className='text-[12px] font-medium text-foreground-secondary'>
                {invite.created_at
                  ? formatDateStringWTime(invite.created_at, undefined, true)
                  : ''}
              </p>
            </div>
            <div className='flex gap-1'>
              <Button
                onClick={handleAccept}
                disabled={isLoading}
                title='Accept invite'
                variant={ButtonVariant.Primary}
                shape={ButtonShape.Pill}
                icon={<CheckIcon />}
              ></Button>
              <Button
                onClick={handleReject}
                disabled={isLoading}
                title='Reject invite'
                variant={ButtonVariant.Secondary}
                shape={ButtonShape.Pill}
                icon={<CloseIcon />}
              ></Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProjectInvite;