import React, { useState, useEffect, memo } from 'react';
import { ArrowLeft, FileText, Star, ChevronRight, Search } from 'lucide-react';
import { getBook } from '../services/api';
import { Section } from '../types/favorites';
import SectionPicker from './SectionPicker';

interface ChapterSelectorProps {
  book: string;
  onChapterSelect: (chapter: string) => void;
  onBack: () => void;
  formatBookName: (bookName: string) => string;
  user?: any;
  onFavoriteChange?: () => void;
  version?: string;
  onSearchClick?: () => void;
  favorites?: Set<string>;
  sections?: Section[];
  onSectionChange?: () => void;
}

const ChapterSelector: React.FC<ChapterSelectorProps> = memo(({
  book,
  onChapterSelect,
  onBack,
  formatBookName,
  user,
  onFavoriteChange,
  version = 'esv',
  onSearchClick,
  favorites = new Set(),
  sections = [],
  onSectionChange
}) => {
  const [chapters, setChapters] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [showSectionPicker, setShowSectionPicker] = useState(false);
  const [pendingChapter, setPendingChapter] = useState<string | null>(null);

  useEffect(() => {
    loadChapters();
  }, [book]);

  const toggleFavorite = async (chapter: string, event: React.MouseEvent, sectionId?: number | null) => {
    event.stopPropagation();

    if (!user) return;

    const isFavorited = favorites.has(chapter);

    try {
      if (isFavorited) {
        // Remove favorite
        const response = await fetch('/api/favorites', {
          credentials: 'include'
        });

        if (response.ok) {
          const data = await response.json();
          const chapterFavorite = data.favorites.find((fav: any) =>
            fav.book === book && fav.chapter === chapter && !fav.verse_start
          );

          if (chapterFavorite) {
            await fetch(`/api/favorites/${chapterFavorite.id}`, {
              method: 'DELETE',
              credentials: 'include'
            });

            console.log('Removed chapter favorite:', chapter);
            onFavoriteChange?.();
          }
        }
      } else {
        // Add favorite - check if we need section picker
        if (sections.length > 0 && sectionId === undefined) {
          const defaultSection = sections.find(s => s.is_default);
          if (defaultSection) {
            await addFavoriteWithSection(chapter, defaultSection.id);
          } else {
            setPendingChapter(chapter);
            setShowSectionPicker(true);
          }
        } else {
          await addFavoriteWithSection(chapter, sectionId ?? null);
        }
      }
    } catch (error) {
      console.error('Failed to toggle favorite:', error);
    }
  };

  const addFavoriteWithSection = async (chapter: string, sectionId: number | null) => {
    try {
      const response = await fetch('/api/favorites', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          book: book,
          chapter: chapter,
          version: version,
          section_id: sectionId
        })
      });

      if (response.ok) {
        console.log('Added chapter favorite:', chapter, 'to section:', sectionId);
        onFavoriteChange?.();
      }
    } catch (error) {
      console.error('Failed to add favorite:', error);
    }
  };

  const handleSectionSelect = async (sectionId: number | null) => {
    if (pendingChapter) {
      await addFavoriteWithSection(pendingChapter, sectionId);
      setPendingChapter(null);
    }
    setShowSectionPicker(false);
  };

  const loadChapters = async () => {
    try {
      setLoading(true);
      const response = await getBook(book, version);

      if (response.chapters) {
        const sortedChapters = response.chapters.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
        setChapters(sortedChapters);
      } else {
        console.error('API returned no chapters data');
        setChapters([]);
      }
    } catch (error) {
      console.error('Failed to load chapters:', error);
      setChapters([]);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="text-center py-12">
        <FileText className="mx-auto h-12 w-12 text-blue-600 animate-pulse mb-4" />
        <p className="text-lg text-gray-600 dark:text-gray-400">Loading chapters...</p>
      </div>
    );
  }

  return (
    <div>
      {/* Search Bar */}
      <div className="flex justify-center mb-4">
        <div className="w-full max-w-md relative">
          <input
            type="text"
            placeholder="Search for verses, words, or phrases..."
            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            onClick={onSearchClick}
            readOnly
          />
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
        </div>
      </div>

      {/* Breadcrumb Navigation */}
      <div className="flex items-center justify-center space-x-1 mb-4">
        <button
          onClick={() => window.location.href = `/version/${version}`}
          className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
        >
          <ArrowLeft className="h-4 w-4" />
          <span>Books</span>
        </button>
        <ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
          {formatBookName(book)}
        </span>
      </div>

      {/* Book Title */}
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
          {formatBookName(book)}
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          Select a chapter to read
        </p>
        {user && (
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
            Click the star to add chapters to your favorites
          </p>
        )}
      </div>

      {/* Chapters Grid */}
      <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-w-4xl mx-auto">
        {chapters.map((chapter) => (
          <div key={chapter} className="relative">
            <button
              onClick={() => onChapterSelect(chapter)}
              className="group bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 text-center w-full"
            >
              <FileText className="mx-auto h-6 w-6 text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
              <span className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
                {chapter}
              </span>
            </button>

            {user && (
              <button
                onClick={(e) => toggleFavorite(chapter, e)}
                className="absolute top-1 right-1 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                title={favorites.has(chapter) ? 'Remove from favorites' : 'Add to favorites'}
              >
                <Star
                  className={`h-3 w-3 ${
                    favorites.has(chapter)
                      ? 'text-yellow-500 fill-yellow-500'
                      : 'text-gray-400 hover:text-yellow-500'
                  } transition-colors`}
                />
              </button>
            )}
          </div>
        ))}
      </div>

      {/* Chapter Count */}
      <div className="text-center mt-8">
        <p className="text-sm text-gray-500 dark:text-gray-400">
          {chapters.length} chapters available
        </p>
      </div>

      {/* Section Picker Modal */}
      {showSectionPicker && (
        <SectionPicker
          sections={sections}
          onSelect={handleSectionSelect}
          onCancel={() => {
            setShowSectionPicker(false);
            setPendingChapter(null);
          }}
          onSectionCreated={onSectionChange}
        />
      )}
    </div>
  );
});

export default ChapterSelector;