'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { StoryWithCollectionContext } from '../../types/api';
import { storyApi, getImageUrl } from '../../lib/api';
import Button from '../ui/Button';
import TagDisplay from '../tags/TagDisplay';
import Link from 'next/link';

interface CollectionReadingViewProps {
  data: StoryWithCollectionContext;
  onNavigate: (storyId: string) => void;
  onBackToCollection: () => void;
}

export default function CollectionReadingView({
  data,
  onNavigate,
  onBackToCollection
}: CollectionReadingViewProps) {
  const { story, collection } = data;
  const [hasScrolledToPosition, setHasScrolledToPosition] = useState(false);
  const [readingPercentage, setReadingPercentage] = useState(0);
  const contentRef = useRef<HTMLDivElement>(null);
  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Convert scroll position to approximate character position in the content
  const getCharacterPositionFromScroll = useCallback((): number => {
    if (!contentRef.current || !story) return 0;
    
    const content = contentRef.current;
    const scrolled = window.scrollY;
    const contentTop = content.offsetTop;
    const contentHeight = content.scrollHeight;
    const windowHeight = window.innerHeight;
    
    // Calculate how far through the content we are (0-1)
    const scrollRatio = Math.min(1, Math.max(0, 
      (scrolled - contentTop + windowHeight * 0.3) / contentHeight
    ));
    
    // Convert to character position in the plain text content
    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
    return Math.floor(scrollRatio * textLength);
  }, [story]);

  // Calculate reading percentage from character position
  const calculateReadingPercentage = useCallback((currentPosition: number): number => {
    if (!story) return 0;

    const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
    if (totalLength === 0) return 0;

    return Math.round((currentPosition / totalLength) * 100);
  }, [story]);

  // Convert character position back to scroll position for auto-scroll
  const scrollToCharacterPosition = useCallback((position: number) => {
    if (!contentRef.current || !story || hasScrolledToPosition) return;

    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
    if (textLength === 0 || position === 0) return;

    const ratio = position / textLength;
    const content = contentRef.current;
    const contentTop = content.offsetTop;
    const contentHeight = content.scrollHeight;
    const windowHeight = window.innerHeight;

    // Calculate target scroll position
    const targetScroll = contentTop + (ratio * contentHeight) - (windowHeight * 0.3);

    // Smooth scroll to position
    window.scrollTo({
      top: Math.max(0, targetScroll),
      behavior: 'smooth'
    });

    setHasScrolledToPosition(true);
  }, [story, hasScrolledToPosition]);

  // Debounced function to save reading position
  const saveReadingPosition = useCallback(async (position: number) => {
    if (!story || position === story.readingPosition) {
      console.log('Collection view - skipping save - no story or position unchanged:', { story: !!story, position, current: story?.readingPosition });
      return;
    }
    
    console.log('Collection view - saving reading position:', position, 'for story:', story.id);
    try {
      await storyApi.updateReadingProgress(story.id, position);
      console.log('Collection view - reading position saved successfully');
    } catch (error) {
      console.error('Collection view - failed to save reading position:', error);
    }
  }, [story]);

  // Debounced version of saveReadingPosition
  const debouncedSavePosition = useCallback((position: number) => {
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
    
    saveTimeoutRef.current = setTimeout(() => {
      saveReadingPosition(position);
    }, 2000);
  }, [saveReadingPosition]);

  // Auto-scroll to saved reading position when story content is loaded
  useEffect(() => {
    if (story && !hasScrolledToPosition) {
      const timeout = setTimeout(() => {
        console.log('Collection view - initializing reading position tracking, saved position:', story.readingPosition);
        if (story.readingPosition && story.readingPosition > 0) {
          console.log('Collection view - auto-scrolling to saved position:', story.readingPosition);
          const initialPercentage = calculateReadingPercentage(story.readingPosition);
          setReadingPercentage(initialPercentage);
          scrollToCharacterPosition(story.readingPosition);
        } else {
          console.log('Collection view - no saved position, starting fresh tracking');
          setReadingPercentage(0);
          setHasScrolledToPosition(true);
        }
      }, 500);
      
      return () => clearTimeout(timeout);
    }
  }, [story, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);

  // Track reading progress and save position
  useEffect(() => {
    const handleScroll = () => {
      if (hasScrolledToPosition) {
        const characterPosition = getCharacterPositionFromScroll();
        const percentage = calculateReadingPercentage(characterPosition);
        console.log('Collection view - scroll detected, character position:', characterPosition, 'percentage:', percentage);
        setReadingPercentage(percentage);
        debouncedSavePosition(characterPosition);
      } else {
        console.log('Collection view - scroll detected but not ready for tracking yet');
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      if (saveTimeoutRef.current) {
        clearTimeout(saveTimeoutRef.current);
      }
    };
  }, [hasScrolledToPosition, getCharacterPositionFromScroll, calculateReadingPercentage, debouncedSavePosition]);

  const handlePrevious = () => {
    if (collection.previousStoryId) {
      onNavigate(collection.previousStoryId);
    }
  };

  const handleNext = () => {
    if (collection.nextStoryId) {
      onNavigate(collection.nextStoryId);
    }
  };

  const renderRatingStars = (rating?: number) => {
    if (!rating) return null;
    
    return (
      <div className="flex items-center">
        {[1, 2, 3, 4, 5].map((star) => (
          <span
            key={star}
            className={`text-sm ${
              star <= rating ? 'text-yellow-400' : 'text-gray-300'
            }`}
          >
            ★
          </span>
        ))}
      </div>
    );
  };

  return (
    <div className="max-w-4xl mx-auto">
      {/* Collection Context Header */}
      <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={onBackToCollection}
              className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
              title="Back to Collection"
            >
              ← Back
            </button>
            <div>
              <h2 className="font-semibold text-blue-900 dark:text-blue-100">
                Reading from: {collection.name}
              </h2>
              <p className="text-sm text-blue-700 dark:text-blue-300">
                Story {collection.currentPosition} of {collection.totalStories}
              </p>
            </div>
          </div>

          {/* Progress Bar */}
          <div className="flex items-center gap-4">
            {/* Reading percentage indicator */}
            <div className="text-sm text-blue-700 dark:text-blue-300 font-mono bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">
              {readingPercentage}%
            </div>

            <div className="w-32 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
              <div
                className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"
                style={{
                  width: `${(collection.currentPosition / collection.totalStories) * 100}%`
                }}
              />
            </div>
            <span className="text-sm text-blue-700 dark:text-blue-300 font-mono">
              {collection.currentPosition}/{collection.totalStories}
            </span>
          </div>
        </div>
      </div>

      {/* Story Header */}
      <div className="theme-card p-6 mb-6">
        <div className="flex flex-col md:flex-row gap-6">
          {/* Story Cover */}
          {story.coverPath && (
            <div className="flex-shrink-0">
              <img
                src={getImageUrl(story.coverPath)}
                alt={`${story.title} cover`}
                className="w-32 h-40 object-cover rounded-lg mx-auto md:mx-0"
              />
            </div>
          )}

          {/* Story Info */}
          <div className="flex-1">
            <h1 className="text-3xl font-bold theme-header mb-2">
              {story.title}
            </h1>
            
            <div className="flex flex-wrap items-center gap-4 mb-4 text-sm theme-text opacity-70">
              <Link
                href={`/stories/${story.id}`}
                className="hover:underline"
              >
                by {story.authorName}
              </Link>
              <span>{story.wordCount?.toLocaleString()} words</span>
              {story.rating && (
                <div className="flex items-center gap-1">
                  {renderRatingStars(story.rating)}
                </div>
              )}
              {story.seriesName && (
                <span>
                  {story.seriesName}
                  {story.volume && ` #${story.volume}`}
                </span>
              )}
            </div>

            {story.summary && (
              <p className="theme-text mb-4 italic">
                {story.summary}
              </p>
            )}

            {/* Tags */}
            {story.tags && story.tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {story.tags.map((tag) => (
                  <TagDisplay
                    key={tag.id}
                    tag={tag}
                    size="sm"
                    clickable={false}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Navigation Controls */}
      <div className="flex justify-between items-center mb-6">
        <Button
          variant="ghost"
          onClick={handlePrevious}
          disabled={!collection.previousStoryId}
          className="flex items-center gap-2"
        >
          ← Previous Story
        </Button>

        <div className="text-sm theme-text opacity-70">
          Story {collection.currentPosition} of {collection.totalStories}
        </div>

        <Button
          variant="ghost"
          onClick={handleNext}
          disabled={!collection.nextStoryId}
          className="flex items-center gap-2"
        >
          Next Story →
        </Button>
      </div>

      {/* Story Content */}
      <div className="theme-card p-8">
        <div
          ref={contentRef}
          className="prose prose-lg max-w-none theme-text"
          dangerouslySetInnerHTML={{ __html: story.contentHtml }}
        />
      </div>

      {/* Bottom Navigation */}
      <div className="flex justify-between items-center mt-8 p-4 theme-card">
        <Button
          variant="ghost"
          onClick={handlePrevious}
          disabled={!collection.previousStoryId}
          className="flex items-center gap-2"
        >
          ← Previous
        </Button>

        <Button
          variant="ghost"
          onClick={onBackToCollection}
          className="flex items-center gap-2"
        >
          Back to Collection
        </Button>

        <Button
          variant="ghost"
          onClick={handleNext}
          disabled={!collection.nextStoryId}
          className="flex items-center gap-2"
        >
          Next →
        </Button>
      </div>
    </div>
  );
}