import React, { useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Layout } from '../components/Layout/Layout.jsx';
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
import { useManga } from '../context/MangaContext.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faStar, 
  faDownload, 
  faEye, 
  faArrowLeft,
  faRefresh,
  faBookmark,
  faShare
} from '@fortawesome/free-solid-svg-icons';

export function MangaDetailPage() {
  const { slug } = useParams();
  const navigate = useNavigate();
  const { 
    detailedMangas, 
    loading, 
    error, 
    loadMangaDetail,
    getMangaFromCollection
  } = useManga();

  const manga = detailedMangas[slug];
  const collectionManga = getMangaFromCollection(slug);

  useEffect(() => {
    // Si on n'a pas les détails du manga, on les charge
    if (!manga) {
      loadMangaDetail(slug);
    }
  }, [slug, manga, loadMangaDetail]);

  const handleMangaClick = (mangaSlug) => {
    navigate(`/manga/${mangaSlug}`);
  };

  const handleAddMangaClick = (query = '') => {
    navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
  };

  const toolbarConfig = {
    leftSection: [
      { icon: faArrowLeft, onClick: () => navigate(-1) },
      { icon: faRefresh, onClick: () => loadMangaDetail(slug) }
    ],
    rightSection: [
      { icon: faBookmark, onClick: () => {} },
      { icon: faShare, onClick: () => {} },
      { icon: faDownload, onClick: () => {} }
    ]
  };

  if (loading) {
    return <div className="flex justify-center items-center h-screen">Loading...</div>;
  }

  if (error) {
    return <div className="text-red-500 text-center p-4">{error}</div>;
  }

  // Utiliser les données de base de la collection pendant le chargement des détails
  const displayManga = manga || collectionManga;
  if (!displayManga) {
    return <div className="text-center p-4">Manga not found</div>;
  }

  return (
    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
      <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />

      {/* Hero section with manga info */}
      <div className="relative h-[400px]">
        <div className="absolute inset-0">
          <img 
            src={displayManga.imageUrl} 
            alt={displayManga.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
        </div>
        
        <div className="relative h-full container mx-auto px-4 flex items-end pb-8">
          <div className="text-white">
            <div className="flex items-center gap-4 mb-2">
              <h1 className="text-4xl font-bold">{displayManga.title}</h1>
              <span className="px-2 py-1 bg-green-500 rounded-full text-sm">
                {displayManga.status}
              </span>
            </div>
            
            <div className="flex items-center gap-6 mb-4">
              <div className="flex items-center">
                <FontAwesomeIcon icon={faStar} className="text-yellow-400 mr-2" />
                <span>{displayManga.rating}</span>
              </div>
              <span>{displayManga.publicationYear}</span>
              <span>{displayManga.author}</span>
            </div>
            
            <div className="flex flex-wrap gap-2 mb-4">
              {displayManga.genres.map((genre, index) => (
                <span 
                  key={index}
                  className="px-3 py-1 bg-gray-700/50 rounded-full text-sm"
                >
                  {genre}
                </span>
              ))}
            </div>
            
            <p className="max-w-3xl text-gray-200">
              {displayManga.description}
            </p>
          </div>
        </div>
      </div>

      {/* Chapters section - only shown when full details are loaded */}
      {manga && manga.chapters && (
        <div className="container mx-auto px-4 py-8">
          {Array.from(manga.chapters.entries()).map(([volume, chapters]) => (
            <div key={volume} className="mb-8">
              <h2 className="text-xl font-semibold mb-4">
                Volume {volume || 'Unknown'}
                <span className="text-sm text-gray-500 ml-2">
                  ({chapters.length} chapters)
                </span>
              </h2>
              
              <div className="bg-white rounded-lg shadow overflow-hidden">
                <table className="w-full">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        #
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Title
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Added
                      </th>
                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {chapters.map((chapter) => (
                      <tr key={chapter.id} className="hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                          {chapter.number}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                          {chapter.title}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {new Date(chapter.createdAt).toLocaleDateString()}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                          <button 
                            onClick={() => navigate(`/reader/${chapter.id}`)}
                            className="text-gray-400 hover:text-gray-600 mx-2"
                          >
                            <FontAwesomeIcon icon={faEye} />
                          </button>
                          <button className="text-gray-400 hover:text-gray-600 mx-2">
                            <FontAwesomeIcon icon={faDownload} />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          ))}
        </div>
      )}
    </Layout>
  );
}