JustAnime/src/components/AnimeDetails.js

'use client';

import { useState, useRef, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import AnimeRow from './AnimeRow';
import SeasonRow from './SeasonRow';

export default function AnimeDetails({ anime }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [activeVideo, setActiveVideo] = useState(null);
  const [activeTab, setActiveTab] = useState('synopsis');
  const [synopsisOverflows, setSynopsisOverflows] = useState(false);
  const synopsisRef = useRef(null);
  
  console.log('AnimeDetails received:', anime);
  
  if (!anime?.info) {
    console.error('Invalid anime data structure:', anime);
    return null;
  }
  
  const { info, moreInfo, relatedAnime, recommendations, seasons } = anime;
  const hasCharacters = info.characterVoiceActor?.length > 0 || info.charactersVoiceActors?.length > 0;
  const hasVideos = info.promotionalVideos && info.promotionalVideos.length > 0;

  // Check if synopsis overflows when component mounts or when content changes
  useEffect(() => {
    if (synopsisRef.current) {
      const element = synopsisRef.current;
      setSynopsisOverflows(element.scrollHeight > element.clientHeight);
    }
  }, [info.description, activeTab]);

  // Video modal for promotional videos
  const VideoModal = ({ video, onClose }) => {
    if (!video) return null;
    
    return (
      <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
        <div className="relative max-w-4xl w-full bg-[var(--card)] rounded-lg overflow-hidden shadow-2xl border border-gray-700 animate-fadeIn">
          <button 
            onClick={onClose}
            className="absolute top-3 right-3 z-10 bg-black/50 rounded-full p-1 hover:bg-black/70 transition-colors"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          
          <div className="aspect-video w-full">
            <iframe
              src={video.source}
              title={video.title || "Promotional Video"}
              allowFullScreen
              className="w-full h-full"
            ></iframe>
          </div>
        </div>
      </div>
    );
  };

  // Format status with aired date
  const getStatusWithAired = () => {
    let status = moreInfo?.status || '';
    if (moreInfo?.aired) {
      status += ` (${moreInfo.aired})`;
    }
    return status;
  };

  return (
    <div className="relative">
      {/* Video Modal */}
      {activeVideo && <VideoModal video={activeVideo} onClose={() => setActiveVideo(null)} />}
    
      {/* Background Image with Gradient Overlay */}
      <div className="absolute inset-0 h-[200px] sm:h-[250px] md:h-[400px] overflow-hidden -z-10">
        {info.poster && (
          <>
            <Image
              src={info.poster}
              alt={info.name}
              fill
              className="object-cover opacity-18"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[rgba(0,0,0,0.6)] to-[var(--background)]"></div>
          </>
        )}
      </div>

      {/* Main Content */}
      <div className="container mx-auto px-3 sm:px-4 pt-4 sm:pt-6 md:pt-10">
        {/* Header Section - Title and Basic Info */}
        <div className="flex flex-col md:flex-row gap-4 md:gap-10 mb-6 md:mb-8">
          {/* Poster */}
          <div className="w-[180px] sm:w-[220px] md:w-1/4 max-w-[240px] mx-auto md:mx-0">
            <div className="bg-[var(--card)] rounded-xl overflow-hidden shadow-lg border border-gray-800">
              <div className="relative aspect-[3/4] w-full">
                <Image
                  src={info.poster}
                  alt={info.name}
                  fill
                  className="object-cover"
                  priority
                />
              </div>
            </div>
            
            {/* Watch Button - Mobile & Desktop */}
            {info.stats?.episodes && (info.stats.episodes.sub > 0 || info.stats.episodes.dub > 0) && (
              <Link 
                href={`/watch/${info.id}?ep=1`}
                className="bg-[#ffffff] text-[var(--background)] px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl mt-3 sm:mt-4 hover:opacity-90 transition-opacity flex items-center justify-center font-medium text-sm sm:text-base w-full shadow-lg"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-4 w-4 sm:h-5 sm:w-5 mr-1.5 sm:mr-2"
                >
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
                </svg>
                <span>Start Watching</span>
              </Link>
            )}
          </div>

          {/* Title and Metadata */}
          <div className="flex-1 pt-3 md:pt-2">
            {/* Title Section */}
            <div className="text-center md:text-left">
              <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-1 sm:mb-2">
                {info.name}
              </h1>
              
              {moreInfo?.japanese && (
                <h2 className="text-sm sm:text-base md:text-lg text-gray-400 mb-1 sm:mb-2">{moreInfo.japanese}</h2>
              )}
              
              {/* Synonyms */}
              {moreInfo?.synonyms && (
                <div className="mt-1 sm:mt-2 mb-2 sm:mb-4">
                  <p className="text-xs sm:text-sm text-gray-400 italic">{moreInfo.synonyms}</p>
                </div>
              )}
            </div>
            
            {/* Status Badges */}
            <div className="flex flex-wrap justify-center md:justify-start gap-1.5 sm:gap-2 my-4 sm:my-5">
              {info.stats?.rating && (
                <div className="flex items-center bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-yellow-400 mr-1"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </svg>
                  <span className="text-white text-xs sm:text-sm font-medium">{info.stats.rating}</span>
                </div>
              )}
              
              {/* Status with Aired Date */}
              {moreInfo?.status && (
                <div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
                  {getStatusWithAired()}
                </div>
              )}
              
              {info.stats?.type && (
                <div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
                  {info.stats.type}
                </div>
              )}
              
              {info.stats?.episodes && (
                <div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
                  {info.stats.episodes.sub > 0 && `SUB ${info.stats.episodes.sub}`}
                  {info.stats.episodes.dub > 0 && info.stats.episodes.sub > 0 && ' | '}
                  {info.stats.episodes.dub > 0 && `DUB ${info.stats.episodes.dub}`}
                </div>
              )}
              
              {info.stats?.quality && (
                <div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
                  {info.stats.quality}
                </div>
              )}
              
              {info.stats?.duration && (
                <div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
                  {info.stats.duration}
                </div>
              )}
            </div>
            
            {/* Genres & Studios */}
            <div className="space-y-3 sm:space-y-4 mt-3 sm:mt-5">
              {/* Genres */}
              {moreInfo?.genres && moreInfo.genres.length > 0 && (
                <div>
                  <h3 className="text-white text-sm sm:text-base font-medium mb-2 sm:mb-3 text-center md:text-left">Genres</h3>
                  <div className="flex flex-wrap justify-center md:justify-start gap-1.5 sm:gap-2">
                    {moreInfo.genres.map((genre, index) => (
                      <Link
                        key={index}
                        href={`/genre/${genre.toLowerCase()}`}
                        className="px-2 sm:px-3 py-1 sm:py-1.5 bg-[var(--card)] text-gray-300 text-xs sm:text-sm rounded-full whitespace-nowrap hover:text-white transition-colors hover:bg-[var(--card-hover)]"
                      >
                        {genre}
                      </Link>
                    ))}
                  </div>
                </div>
              )}

              {/* Studios */}
              {moreInfo?.studios && (
                <div>
                  <h3 className="text-white text-sm sm:text-base font-medium mb-2 sm:mb-3 text-center md:text-left">Studios</h3>
                  <div className="flex flex-wrap justify-center md:justify-start gap-1.5 sm:gap-2">
                    <div className="px-2 sm:px-3 py-1 sm:py-1.5 bg-[var(--card)] text-gray-300 text-xs sm:text-sm rounded-full hover:text-white">
                      {moreInfo.studios}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
        
        {/* Details Tabs - Synopsis, Characters, Videos */}
        <div className="bg-[var(--card)] rounded-xl shadow-lg mb-6 sm:mb-8 border border-gray-800">
          {/* Tab Navigation */}
          <div className="flex flex-wrap border-b border-gray-800">
            <button 
              className={`px-3 sm:px-5 py-2.5 sm:py-3 text-sm sm:text-base font-medium transition-colors ${activeTab === 'synopsis' ? 'text-white border-b-2 border-[var(--primary)]' : 'text-gray-400 hover:text-white'}`}
              onClick={() => setActiveTab('synopsis')}
            >
              Synopsis
            </button>
            
            {hasCharacters && (
              <button 
                className={`px-3 sm:px-5 py-2.5 sm:py-3 text-sm sm:text-base font-medium transition-colors ${activeTab === 'characters' ? 'text-white border-b-2 border-[var(--primary)]' : 'text-gray-400 hover:text-white'}`}
                onClick={() => setActiveTab('characters')}
              >
                Characters
              </button>
            )}
            
            {hasVideos && (
              <button 
                className={`px-3 sm:px-5 py-2.5 sm:py-3 text-sm sm:text-base font-medium transition-colors ${activeTab === 'videos' ? 'text-white border-b-2 border-[var(--primary)]' : 'text-gray-400 hover:text-white'}`}
                onClick={() => setActiveTab('videos')}
              >
                Promotional Videos
              </button>
            )}
          </div>
          
          {/* Tab Content */}
          <div className="p-3 sm:p-5">
            {/* Synopsis Tab */}
            {activeTab === 'synopsis' && (
              <div className="relative">
                <p 
                  ref={synopsisRef}
                  className={`text-gray-300 leading-relaxed text-xs sm:text-sm md:text-base ${!isExpanded ? 'line-clamp-4 md:line-clamp-6' : ''}`}
                >
                  {info.description || 'No description available for this anime.'}
                </p>
                {synopsisOverflows && (
                  <button
                    onClick={() => setIsExpanded(!isExpanded)}
                    className="text-[var(--primary)] hover:underline text-xs sm:text-sm mt-2 sm:mt-3 font-medium"
                  >
                    {isExpanded ? 'Show Less' : 'Read More'}
                  </button>
                )}
              </div>
            )}
            
            {/* Characters Tab */}
            {activeTab === 'characters' && hasCharacters && (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-2 sm:gap-4 max-h-[70vh] overflow-y-auto pr-1">
                {(info.characterVoiceActor || info.charactersVoiceActors || []).map((item, index) => (
                  <div key={index} className="bg-[var(--background)] rounded overflow-hidden">
                    <div className="flex">
                      {/* Character Image - No padding */}
                      <div className="relative w-[50px] sm:w-[60px] h-[60px] sm:h-[72px] flex-shrink-0">
                        <Image
                          src={item.character.poster}
                          alt={item.character.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                      
                      {/* Text content in the middle */}
                      <div className="flex-1 py-1.5 sm:py-2.5 px-2 sm:px-3 flex flex-col justify-center min-w-0">
                        <div className="flex justify-between items-center gap-2 sm:gap-3">
                          {/* Character Name */}
                          <div className="min-w-0 flex-1">
                            <p className="text-white font-medium text-xs sm:text-sm truncate">{item.character.name}</p>
                            <p className="text-[10px] sm:text-xs text-gray-400 truncate">{item.character.cast || 'Main'}</p>
                          </div>
                          
                          {/* Voice Actor Name */}
                          <div className="min-w-0 flex-1 text-right">
                            <p className="text-white font-medium text-xs sm:text-sm truncate">{item.voiceActor.name}</p>
                            <p className="text-[10px] sm:text-xs text-gray-400 truncate">{item.voiceActor.cast || 'Japanese'}</p>
                          </div>
                        </div>
                      </div>
                      
                      {/* Voice Actor Image - No padding */}
                      <div className="relative w-[50px] sm:w-[60px] h-[60px] sm:h-[72px] flex-shrink-0">
                        <Image
                          src={item.voiceActor.poster}
                          alt={item.voiceActor.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
            
            {/* Videos Tab */}
            {activeTab === 'videos' && hasVideos && (
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-3">
                {info.promotionalVideos.map((video, index) => (
                  <div 
                    key={index} 
                    className="relative aspect-video cursor-pointer group overflow-hidden rounded-md"
                    onClick={() => setActiveVideo(video)}
                  >
                    <div className="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-all duration-300 flex items-center justify-center">
                      <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[var(--primary)] flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 sm:h-5 sm:w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
                        </svg>
                      </div>
                    </div>
                    <Image
                      src={video.thumbnail || '/images/video-placeholder.jpg'}
                      alt={video.title || `Promotional Video ${index + 1}`}
                      fill
                      className="object-cover"
                    />
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
        
        {/* Seasons Section */}
        {seasons && seasons.length > 0 && (
          <SeasonRow title="Seasons" seasons={seasons} />
        )}
        
        {/* Related Anime Section */}
        {relatedAnime && relatedAnime.length > 0 && (
          <AnimeRow title="Related Anime" animeList={relatedAnime} />
        )}
        
        {/* Recommendations Section */}
        {recommendations && recommendations.length > 0 && (
          <AnimeRow title="You May Also Like" animeList={recommendations} />
        )}
      </div>
    </div>
  );
}