import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
import { GetMangaDetail } from '../../application/useCases/getMangaDetail.js';
import { Layout } from '../components/Layout/Layout.jsx';
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faStar, 
  faDownload, 
  faEye, 
  faArrowLeft,
  faRefresh,
  faBookmark,
  faShare
} from '@fortawesome/free-solid-svg-icons';

const mangaRepository = new MockMangaRepository();
const getMangaDetail = new GetMangaDetail(mangaRepository);

export function MangaDetailPage() {
  const { slug } = useParams();
  const navigate = useNavigate();
  const [manga, setManga] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const handleRefresh = async () => {
    setLoading(true);
    try {
      const mangaDetail = await getMangaDetail.execute(slug);
      setManga(mangaDetail);
    } catch (err) {
      setError('Failed to load manga details');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    handleRefresh();
  }, [slug]);

  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: handleRefresh }
    ],
    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>;
  }

  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={manga.imageUrl} 
            alt={manga.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">{manga.title}</h1>
              <span className="px-2 py-1 bg-green-500 rounded-full text-sm">
                {manga.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>{manga.rating}</span>
              </div>
              <span>{manga.publicationYear}</span>
              <span>{manga.author}</span>
            </div>
            
            <div className="flex flex-wrap gap-2 mb-4">
              {manga.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">
              {manga.description}
            </p>
          </div>
        </div>
      </div>

      {/* Chapters section */}
      <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 className="text-gray-400 hover:text-gray-600 mx-2">
                          <FontAwesomeIcon icon={faDownload} />
                        </button>
                        <button className="text-gray-400 hover:text-gray-600 mx-2">
                          <FontAwesomeIcon icon={faEye} />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        ))}
      </div>
    </Layout>
  );
}