import React, { useState, memo } from 'react';
import { Link } from 'react-router-dom';
import { FaFire, FaRegCommentDots, FaEye, FaClock, FaCheckCircle, FaGamepad } from 'react-icons/fa';
import { getFileUrl } from '../../services/pocketbaseService';
import DOMPurify from 'dompurify';
import LikeButton from './LikeButton';
import { PixelCard } from '../reactbits';
import LazyImage from '../common/LazyImage';

// Mapping for watched/completed status values
const watchedStatusLabels = {
  not_watched: 'Не просмотрено',
  watched: 'Просмотрено',
};

const completedStatusLabels = {
  not_completed: 'Не пройдено',
  completed: 'Пройдено',
};


// ReviewItem now expects review, media, season, reviewCharacteristics, isProfilePage, and isSmallCard props
const ReviewItem = memo(function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfilePage = false, isSmallCard = false }) {
  const [showFullReview, setShowFullReview] = useState(false);
  const [showSpoilers, setShowSpoilers] = useState(false);

  const reviewMedia = media || review.expand?.media_id;
  const reviewSeason = season || review.expand?.season_id;
  const reviewUser = review.expand?.user_id;

  const characteristics = reviewMedia?.characteristics && typeof reviewMedia.characteristics === 'object'
      ? reviewMedia.characteristics
      : reviewCharacteristics;

  const reviewTitle = reviewMedia
      ? `${reviewMedia.title}${reviewSeason ? ` - Сезон ${reviewSeason.season_number}${reviewSeason.title ? `: ${reviewSeason.title}` : ''}` : ''}`
      : 'Загрузка...';

  const reviewLink = reviewMedia ? `/media/${reviewMedia.path}` : '#';


  // Sanitize HTML content from the rich text editor
  const sanitizedContent = DOMPurify.sanitize(review.content);
  const plainTextContent = sanitizedContent.replace(/<[^>]*>?/gm, '');
  const isLongReview = plainTextContent.length > 300;


  // Determine progress display based on media's progress_type
  const renderProgress = () => {
      if (!reviewMedia || !reviewMedia.progress_type || review.progress === undefined || review.progress === null) {
          return null;
      }

      const progressType = reviewMedia.progress_type;
      const progressValue = review.progress;

      if (progressType === 'hours') {
          return (
              <span className="flex items-center text-campfire-ash text-sm">
                  <FaClock className="mr-1 text-base" /> {progressValue} часов
              </span>
          );
      } else if (progressType === 'watched') {
           const label = watchedStatusLabels[progressValue] || progressValue;
           return (
               <span className="flex items-center text-campfire-ash text-sm">
                   <FaEye className="mr-1 text-base" /> {label}
               </span>
           );
      } else if (progressType === 'completed') {
           const label = completedStatusLabels[progressValue] || progressValue;
           return (
               <span className="flex items-center text-campfire-ash text-sm">
                   <FaCheckCircle className="mr-1 text-base" /> {label}
               </span>
           );
      }
      return (
          <span className="flex items-center text-campfire-ash text-sm">
              Прогресс: {progressValue}
          </span>
      );
  };

  // Render as a small card for the "All Reviews" section on the profile page
  if (isSmallCard) {
      return (
          <Link to={reviewLink} className="bg-campfire-charcoal rounded-lg shadow-md p-4 border border-campfire-ash/20 flex flex-col hover:border-campfire-amber transition-colors duration-200 relative overflow-hidden"> {/* Added relative and overflow-hidden */}
              {/* Small Poster in corner - Only show on profile page small cards */}
              {isProfilePage && reviewMedia?.poster && (
                  <div className="absolute top-0 right-0 w-16 h-24 overflow-hidden rounded-tr-lg rounded-bl-lg border-b border-l border-campfire-ash/30"> {/* Adjusted size and positioning */}
                      <LazyImage
                          src={getFileUrl(reviewMedia, 'poster')}
                          alt={`Постер ${reviewMedia.title}`}
                          className="w-full h-full"
                      />
                  </div>
              )}

              {/* User Avatar and Title */}
              <div className={`flex items-center mb-3 ${isProfilePage && reviewMedia?.poster ? 'pr-20' : ''}`}> {/* Added right padding conditionally */}
                  {reviewUser && (
                      <LazyImage
                          src={getFileUrl(reviewUser, 'profile_picture') || 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
                          alt={reviewUser.username}
                          className="w-8 h-8 rounded-full mr-3 border border-campfire-ash/30"
                      />
                  )}
                  <h3 className="text-sm font-bold text-campfire-amber leading-tight line-clamp-2 flex-grow">
                      {reviewTitle}
                  </h3>
              </div>

              {/* Overall Rating */}
              <div className="flex items-center text-campfire-amber font-bold text-lg mb-3">
                  <FaFire className="mr-1 text-base" />
                  {review.overall_rating !== null && review.overall_rating !== undefined ? parseFloat(review.overall_rating).toFixed(1) : 'N/A'} / 10
              </div>

              {/* Progress Display */}
              {renderProgress() && (
                  <div className="text-campfire-ash text-xs mb-3">
                      {renderProgress()}
                  </div>
              )}

              {/* Snippet of Review Content */}
              <div className="text-campfire-ash text-xs leading-relaxed line-clamp-3 mb-3">
                  {/* Strip HTML for small card snippet */}
                  {sanitizedContent.replace(/<[^>]*>?/gm, '').substring(0, 150)}{sanitizedContent.replace(/<[^>]*>?/gm, '').length > 150 ? '...' : ''}
              </div>

              {/* Date */}
              <div className="text-campfire-ash text-xs mt-auto pt-2 border-t border-campfire-ash/20">
                  <span>{new Date(review.created).toLocaleDateString()}</span>
              </div>
          </Link>
      );
  }


  // Default rendering for larger cards (Showcase, Media Page)
  return (
    <div className="bg-campfire-charcoal rounded-lg shadow-md p-6 border border-campfire-ash/20 flex flex-col">
      {/* Media Poster - Only show on profile page large cards (Showcase) */}
      {isProfilePage && reviewMedia?.poster && (
          <Link to={reviewLink} className="block mb-4 self-center">
              <LazyImage
                  src={getFileUrl(reviewMedia, 'poster')}
                  alt={`Постер ${reviewMedia.title}`}
                  className="w-32 h-auto rounded-md"
              />
          </Link>
      )}

      {/* Header: User, Media Title, Overall Rating */}
      <div className="flex items-center justify-between mb-4 border-b border-campfire-ash/20 pb-4">
        <div className="flex items-center">
          {/* User Avatar */}
          {reviewUser && (
             <Link to={`/profile/${reviewUser.login}`} className="flex-shrink-0 mr-4">
                <LazyImage
                   src={getFileUrl(reviewUser, 'profile_picture') || 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
                   alt={reviewUser.username}
                   className="w-10 h-10 rounded-full border border-campfire-ash/30"
                />
             </Link>
          )}
          <div>
            {/* User Link */}
            {reviewUser && (
                <Link to={`/profile/${reviewUser.login}`} className="text-campfire-light font-semibold hover:underline text-sm">
                    {reviewUser.username}
                </Link>
            )}
            {/* Media Title Link */}
            <h3 className="text-lg font-bold text-campfire-amber leading-tight">
              <Link to={reviewLink} className="hover:underline">
                {reviewTitle}
              </Link>
            </h3>
          </div>
        </div>
        {/* Overall Rating */}
        <div className="flex items-center text-campfire-amber font-bold text-xl flex-shrink-0">
          <FaFire className="mr-1 text-lg" />
          {review.overall_rating !== null && review.overall_rating !== undefined ? parseFloat(review.overall_rating).toFixed(1) : 'N/A'} / 10
        </div>
      </div>

      {/* Characteristics Ratings */}
      {Object.keys(characteristics).length > 0 && (
          <div className="mb-4">
              <p className="text-campfire-light text-sm font-semibold mb-2">Оценки по характеристикам:</p>
              <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-campfire-ash text-sm">
                  {Object.entries(characteristics).map(([key, label]) => {
                      const ratingValue = review.ratings?.[key];
                      if (typeof ratingValue === 'number' && ratingValue >= 1 && ratingValue <= 10) {
                          return (
                              <div key={key} className="flex justify-between items-center">
                                  <span>{label}:</span>
                                  <span className="flex items-center text-campfire-amber font-bold">
                                      <FaFire className="mr-1 text-xs" /> {ratingValue}
                                  </span>
                              </div>
                          );
                      }
                      return null;
                  })}
              </div>
          </div>
      )}

      {/* Review Content and Footer (Flex container) */}
      <div className="flex flex-col flex-grow">
          {/* Review Content */}
          <div className="text-campfire-ash leading-relaxed mb-4">
            {review.has_spoilers && !showSpoilers ? (
              <PixelCard
                variant="default"
                className="w-full group"
                noFocus={true}
                gap={9}
                onMouseEnter={() => setShowSpoilers(true)}
              >
                <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center opacity-100 transition-opacity duration-300 group-hover:opacity-0 pointer-events-none">
                  <div className="text-2xl font-bold text-campfire-amber mb-4">⚠️ Внимание!</div>
                  <p className="text-campfire-light mb-6">Эта рецензия содержит спойлеры к произведению</p>
                  <div className="px-6 py-2 bg-campfire-ash/20 text-campfire-amber rounded-xl">
                    Наведите для просмотра
                  </div>
                </div>
                <div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                  <div className="p-6 h-full overflow-y-auto custom-scrollbar">
                    <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
                  </div>
                </div>
              </PixelCard>
            ) : (
              <div className="relative group">
                <div className="p-6 overflow-y-auto custom-scrollbar max-h-[400px] border rounded-xl border-campfire-ash/20">
                  <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
                </div>
              </div>
            )}
          </div>

          {/* Footer: Date, Comment Count (Placeholder) and Progress */}
          <div className="flex items-end justify-between text-campfire-ash text-xs mt-auto pt-4 border-t border-campfire-ash/20">
            <div className="flex items-center space-x-4">
              <span>{new Date(review.created).toLocaleDateString()}</span>
              {renderProgress()}
            </div>
            <LikeButton 
              reviewId={review.id} 
              initialLikes={review.like_count || 0} 
              reviewOwnerId={review.user_id}
            />
          </div>
      </div>
    </div>
  );
});

export default ReviewItem;
