'use client';

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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useAuth } from '@clerk/nextjs';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { components } from '@/lib/gen';
import { LARGE_IMAGE } from '@/utils/constants';

interface UserRowProps {
  user: components['schemas']['SimpleProfileInfoSchema'];
  onFollowToggle?: (userId: number | undefined, isFollowing: boolean) => void;
  hideFollowButton?: boolean;
}

// Only user row for profile page for now
const UserRow = ({
  user,
  onFollowToggle,
  hideFollowButton = false,
}: UserRowProps) => {
  const router = useRouter();
  const { isSignedIn } = useAuth();
  const [isFollowing, setIsFollowing] = useState(user.is_following || false);
  const [isLoading, setIsLoading] = useState(false);

  const handleFollowClick = async (e: React.MouseEvent) => {
    e.stopPropagation();

    if (!isSignedIn) return;

    setIsLoading(true);
    try {
      // Add your follow/unfollow API call here
      const newFollowingStatus = !isFollowing;
      setIsFollowing(newFollowingStatus);
      onFollowToggle?.(user.user_id, newFollowingStatus);
    } catch (error) {
      console.error('Error toggling follow:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleUserClick = () => {
    router.push(`/@${user.handle}`);
  };

  return (
    <div
      className='flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors'
      onClick={handleUserClick}
    >
      <div className='flex items-center gap-3'>
        <ImageWithFallback
          imageSize={LARGE_IMAGE}
          className='h-10 w-10 rounded-full'
          src={user.avatar_image_url}
          alt={`Profile picture for ${user.display_name || user.handle}`}
        />
        <div>
          <div className='text-sm font-medium'>
            {user.display_name || user.handle}
          </div>
          <div className='text-xs text-gray-400'>@{user.handle}</div>
        </div>
      </div>

      {isSignedIn && !hideFollowButton && (
        <Button
          variant={
            isFollowing ? ButtonVariant.Secondary : ButtonVariant.Primary
          }
          size={ButtonSize.Small}
          shape={ButtonShape.Pill}
          onClick={handleFollowClick}
          disabled={isLoading}
        >
          {isLoading ? '...' : isFollowing ? 'Following' : 'Follow'}
        </Button>
      )}
    </div>
  );
};

export default UserRow;