'use client';

import clsx from 'clsx';
import React, { useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Link from '@/components/link/Link';
import {
  FALLBACK_IMAGE_URL,
  LARGE_IMAGE,
  SMALL_IMAGE,
} from '@/utils/constants';

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

interface PersonaCardProps {
  name: string;
  id: string;
  image_url: string;
  user_image_url: string | null;
  user_display_name: string | null;
  user_handle: string | null;
  root_clip_id: string | null;
  is_profile_view?: boolean;
}

export default function PersonaCard({
  name,
  id,
  image_url,
  user_image_url,
  user_display_name,
  user_handle,
  root_clip_id,
  is_profile_view = false,
}: PersonaCardProps) {
  const { clips } = useStores();

  const [rootClip, setRootClip] = useState<any>(null);

  useEffect(() => {
    const fetchRootClip = async () => {
      if (root_clip_id) {
        const clipData = await clips.loadClipById(root_clip_id);
        if (clipData) {
          setRootClip(clipData);
        }
      }
    };

    fetchRootClip();
  }, [root_clip_id, clips]);
  return (
    <Link
      href={`/persona/${id}`}
      title={name}
      className={clsx(
        'group relative flex h-full w-60 cursor-pointer flex-col gap-4 rounded-lg p-2 transition ease-in-out',
        { 'w-[170px]': is_profile_view }
      )}
    >
      <div className='relative aspect-square h-auto w-full transition duration-300 ease-in-out group-hover:-translate-y-2'>
        <div className='relative mx-auto w-full overflow-hidden bg-inherit pb-[100%]'>
          <div className='absolute top-0 left-0 h-full w-full'>
            <div className='relative h-full w-full'>
              <div
                className='absolute top-1/2 left-1/2 h-[95%] w-[95%] -translate-x-1/2 -translate-y-1/2 transform overflow-hidden'
                style={AvatarMaskShape.Persona}
              >
                <ImageWithFallback
                  imageSize={LARGE_IMAGE}
                  className='h-full w-full object-cover'
                  src={image_url || rootClip?.image_url || FALLBACK_IMAGE_URL}
                  alt={`Persona image for ${name}`}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='flex h-full w-full flex-col'>
        <h2
          className={clsx(
            'overflow-hidden pl-4 font-sans text-lg font-semibold text-ellipsis whitespace-nowrap text-foreground-primary',
            { 'text-center text-base leading-6 font-medium': is_profile_view }
          )}
        >
          {name}
        </h2>
        <div
          className={clsx(
            'overflow-hidden py-1 pl-4 text-sm text-ellipsis whitespace-nowrap text-foreground-secondary',
            { 'text-center': is_profile_view }
          )}
        >
          {rootClip?.metadata.tags || '(no style)'}
        </div>
        {!is_profile_view && (
          <div className='my-0 line-clamp-1 flex items-center overflow-hidden pl-4 font-sans text-sm text-ellipsis whitespace-nowrap text-foreground-primary'>
            <div className='mr-2'>By</div>
            <ImageWithFallback
              className='mr-2 h-6 w-6 rounded-full'
              src={user_image_url || FALLBACK_IMAGE_URL}
              imageSize={SMALL_IMAGE}
              alt='User avatar'
            />
            <div className='max-w-[150px] overflow-hidden text-ellipsis hover:underline'>
              <Link
                href={`/@${user_handle}`}
                onClick={(e) => {
                  e.stopPropagation();
                }}
              >
                {user_display_name || user_handle || ''}
              </Link>
            </div>
          </div>
        )}
      </div>
    </Link>
  );
}