import * as React from 'react';
import { HoverPreview } from './HoverPreview';
import {
  getHeaderFooterClassName,
  getContentClassName,
  getHeaderTextClassName,
  getLabelTextClassName,
  getValueTextClassName,
  getSecondaryTextClassName,
  getAvatarContainerClassName,
  getAvatarImageClassName,
  getIconClassName,
} from '../utils/hoverPreviewUtils';

interface UserHoverPreviewProps {
  children: React.ReactNode;
  userName: string;
  userAvatarPath: string;
  userAvatarAlt: string;
  userDomainIcon?: string;
  userRegisteredAt?: string;
  userNumPosts?: number;
  userNumFollowedBy?: number;
  userNumFollowed?: number;
}

export const UserHoverPreview: React.FC<UserHoverPreviewProps> = ({
  children,
  userName,
  userAvatarPath,
  userAvatarAlt,
  userDomainIcon,
  userRegisteredAt,
  userNumPosts,
  userNumFollowedBy,
  userNumFollowed,
}) => {
  // Force eager loading of the avatar image
  React.useEffect(() => {
    if (userAvatarPath) {
      const img = new Image();
      img.src = userAvatarPath;
    }
  }, [userAvatarPath]);

  const previewContent = (
    <>
      {/* Header: User Name and Domain Icon */}
      <div className={`${getHeaderFooterClassName()} justify-between`}>
        <span className={getHeaderTextClassName()} title={userName}>
          {userName}
        </span>
        {userDomainIcon && (
          <img
            src={userDomainIcon}
            alt="Domain"
            className={getIconClassName()}
          />
        )}
      </div>

      {/* Profile Content */}
      <div className={getContentClassName()}>
        <div className="flex items-center gap-4">
          {/* Avatar */}
          <div className="flex-shrink-0">
            {userAvatarPath ? (
              <div className={getAvatarContainerClassName()}>
                <img
                  src={userAvatarPath}
                  alt={userAvatarAlt}
                  className={getAvatarImageClassName('medium')}
                  loading="eager"
                />
              </div>
            ) : (
              <span
                className={`block h-[80px] w-[80px] rounded-md border border-slate-300 bg-slate-200 p-2 text-xs italic ${getSecondaryTextClassName()}`}
              >
                No avatar
              </span>
            )}
          </div>

          {/* User Stats */}
          <div className="flex-grow">
            <div className="grid grid-cols-2 gap-3">
              <div className="text-center">
                <span className={getValueTextClassName()}>
                  {userNumPosts ?? '-'}
                </span>
                <span className={getLabelTextClassName()}>Posts</span>
              </div>

              <div className="text-center">
                <span className={getValueTextClassName()}>
                  {userNumFollowedBy ?? '-'}
                </span>
                <span className={getLabelTextClassName()}>Followers</span>
              </div>

              <div className="text-center">
                <span className={getValueTextClassName()}>
                  {userNumFollowed ?? '-'}
                </span>
                <span className={getLabelTextClassName()}>Following</span>
              </div>

              <div className="text-center">
                {userRegisteredAt && (
                  <>
                    <span
                      className={`text-2xs block font-medium text-slate-800`}
                    >
                      Member since
                    </span>
                    <span className={getLabelTextClassName()}>
                      {userRegisteredAt}
                    </span>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );

  return (
    <HoverPreview
      children={children}
      previewContent={previewContent}
      maxWidth="400px"
      maxHeight="280px"
    />
  );
};

export default UserHoverPreview;
