import { useState, useEffect, useRef } from "react";
import { EnhancedLineNumberedText } from "@/components/reading/EnhancedLineNumberedText";
import { TranslationSelector } from "@/components/reading/TranslationSelector";
import { ReadingControls } from "@/components/reading/ReadingControls";
import { AnnotationSystem } from "@/components/reading/AnnotationSystem";
import { useReadingSettings } from "@/hooks/use-reading-settings";
import { WorkWithDetails, TranslationWithDetails } from "@/lib/types";
import { AuthorChip } from "@/components/common/AuthorChip";
import { LanguageTag } from "@/components/common/LanguageTag";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { apiRequest } from "@/lib/queryClient";
import { useParams, useLocation } from "wouter";
import { 
  Heart,
  Bookmark,
  BookCopy,
  Share2,
  MessageCircle,
  FileText,
  Menu,
  X,
  AlignLeft
} from "lucide-react";
import { 
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@/components/ui/drawer";
import { useToast } from "@/hooks/use-toast";
import { useMediaQuery } from "@/hooks/use-media-query";

interface EnhancedReadingViewProps {
  work: WorkWithDetails;
  translations: TranslationWithDetails[];
}

export function EnhancedReadingView({ work, translations }: EnhancedReadingViewProps) {
  const { settings, increaseFontSize, decreaseFontSize, toggleZenMode } = useReadingSettings();
  const [selectedTranslationId, setSelectedTranslationId] = useState<number | undefined>(
    translations.length > 0 ? translations[0].id : undefined
  );
  const [readingProgress, setReadingProgress] = useState(0);
  const [selectedLineNumber, setSelectedLineNumber] = useState<number | null>(null);
  const [isAnnotationOpen, setIsAnnotationOpen] = useState(false);
  const [isActionPanelOpen, setIsActionPanelOpen] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);
  
  const isMobile = useMediaQuery("(max-width: 768px)");
  const { toast } = useToast();
  const [, navigate] = useLocation();
  const mainContentRef = useRef<HTMLDivElement>(null);
  
  // Get the selected translation
  const selectedTranslation = translations.find(t => t.id === selectedTranslationId);

  // Determine if original text is selected
  const isOriginalSelected = !selectedTranslationId;
  
  // Content to display - either the translation or original work
  const contentToDisplay = selectedTranslation ? selectedTranslation.content : work.content;
  
  // Handler for viewing original text
  const handleViewOriginal = () => {
    setSelectedTranslationId(undefined);
  };
  
  // Check if there's a line number in the URL hash
  useEffect(() => {
    if (window.location.hash) {
      const hash = window.location.hash;
      const lineMatch = hash.match(/^#line-(\d+)$/);
      if (lineMatch && lineMatch[1]) {
        const lineNumber = parseInt(lineMatch[1], 10);
        // Scroll to the line
        setTimeout(() => {
          const lineElement = document.getElementById(`line-${lineNumber}`);
          if (lineElement) {
            lineElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
            setSelectedLineNumber(lineNumber);
            setIsAnnotationOpen(true);
          }
        }, 500);
      }
    }
  }, [work.id]);
  
  // Update reading progress as user scrolls
  useEffect(() => {
    const handleScroll = () => {
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      const scrollTop = window.scrollY;
      
      // Calculate progress percentage
      const progress = Math.min(
        100,
        Math.round((scrollTop / (documentHeight - windowHeight)) * 100)
      );
      
      setReadingProgress(progress);
      
      // Update reading progress in backend (throttled to avoid too many requests)
      const debounced = setTimeout(() => {
        updateReadingProgress(progress);
      }, 2000);
      
      return () => clearTimeout(debounced);
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [work.id, selectedTranslationId]);
  
  // Update reading progress in backend
  const updateReadingProgress = async (progress: number) => {
    try {
      // In a real app, this would use the logged-in user ID
      // For demo purposes, we'll use a hard-coded user ID of 1
      await apiRequest('POST', '/api/reading-progress', {
        userId: 1,
        workId: work.id,
        translationId: selectedTranslationId,
        progress
      });
    } catch (error) {
      console.error('Failed to update reading progress:', error);
    }
  };
  
  // Handle line annotation
  const handleLineAnnotation = (lineNumber: number) => {
    setSelectedLineNumber(lineNumber);
    setIsAnnotationOpen(true);
    
    // Update the URL hash
    window.history.replaceState(null, '', `#line-${lineNumber}`);
    
    // On mobile, scroll to top of content to see the annotation
    if (isMobile && mainContentRef.current) {
      mainContentRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };
  
  // Close annotation panel
  const handleCloseAnnotation = () => {
    setIsAnnotationOpen(false);
    // Remove the line number from the URL hash
    window.history.replaceState(null, '', window.location.pathname + window.location.search);
  };
  
  // Toggle like for the work
  const handleLikeToggle = () => {
    setIsLiked(!isLiked);
    toast({
      description: isLiked ? "Removed from favorites" : "Added to favorites",
    });
  };
  
  // Toggle bookmark for the work
  const handleBookmarkToggle = () => {
    setIsBookmarked(!isBookmarked);
    toast({
      description: isBookmarked ? "Removed from your bookmarks" : "Added to your bookmarks",
    });
  };
  
  // Share the work
  const handleShare = async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: work.title,
          text: `Reading ${work.title} on Tercul`,
          url: window.location.href
        });
      } else {
        // Fallback for browsers that don't support the Web Share API
        navigator.clipboard.writeText(window.location.href);
        toast({
          description: "Link copied to clipboard",
        });
      }
    } catch (error) {
      console.error('Error sharing:', error);
    }
  };
  
  return (
    <section className={`enhanced-reading-view ${settings.zenMode ? 'zen-mode' : ''}`}>
      <div className={`flex flex-col lg:flex-row max-w-6xl mx-auto relative pb-12 ${isAnnotationOpen && !isMobile ? 'mr-96' : ''}`}>
        {/* Mobile contextual menu */}
        {isMobile && (
          <div className="sticky top-0 z-10 bg-cream dark:bg-dark-surface w-full border-b border-sage/20 dark:border-sage/10 flex justify-between items-center px-4 py-2">
            <Button 
              variant="ghost" 
              size="icon"
              onClick={() => setIsActionPanelOpen(true)}
              className="text-navy/70 dark:text-cream/70"
            >
              <Menu className="h-5 w-5" />
              <span className="sr-only">Menu</span>
            </Button>
            
            <h2 className="truncate text-navy dark:text-cream font-medium text-sm">
              {work.title}
            </h2>
            
            <div className="flex items-center gap-1">
              <Button
                variant="ghost"
                size="icon"
                className={`p-2 ${
                  isLiked 
                    ? 'text-russet' 
                    : 'text-navy/70 dark:text-cream/70'
                }`}
                onClick={handleLikeToggle}
              >
                <Heart className={`h-5 w-5 ${isLiked ? 'fill-russet' : ''}`} />
                <span className="sr-only">{isLiked ? 'Unlike' : 'Like'}</span>
              </Button>
              
              <Button
                variant="ghost"
                size="icon"
                className="p-2 text-navy/70 dark:text-cream/70"
                onClick={handleShare}
              >
                <Share2 className="h-5 w-5" />
                <span className="sr-only">Share</span>
              </Button>
            </div>
          </div>
        )}
        
        {/* Context sidebar (sticky on desktop, drawer on mobile) */}
        {!isMobile ? (
          <aside className="context-sidebar lg:w-64 p-4 lg:sticky lg:top-16 lg:self-start lg:h-[calc(100vh-4rem)] lg:overflow-y-auto">
            <div className="mb-6">
              <AuthorChip author={work.author} withLifeDates />
            </div>

            <div className="mb-4">
              <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">About this work</h4>
              <div className="space-y-2">
                <div>
                  {work.year && (
                    <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">Written in {work.year}</p>
                  )}
                  <p className="text-xs text-navy/70 dark:text-cream/70 font-sans capitalize">
                    {work.type} • {work.language} • {work.tags?.length || 0} tags
                  </p>
                </div>
                <div className="flex flex-wrap gap-1">
                  {work.tags?.map(tag => (
                    <Badge 
                      key={tag.id}
                      variant="outline"
                      className="inline-block px-2 py-0.5 bg-navy/10 dark:bg-navy/20 rounded text-navy/70 dark:text-cream/70 text-xs font-sans border-none"
                    >
                      {tag.name}
                    </Badge>
                  ))}
                </div>
              </div>
            </div>

            {selectedTranslation && (
              <div className="mb-4">
                <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Translation</h4>
                <div>
                  <p className="text-sm text-navy/90 dark:text-cream/90 font-sans font-medium">{selectedTranslation.language}</p>
                  <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">
                    Translated by User {selectedTranslation.translatorId} {selectedTranslation.year && `(${selectedTranslation.year})`}
                  </p>
                </div>
              </div>
            )}

            <div className="mb-4">
              <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Reading stats</h4>
              <div>
                <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">~{Math.ceil(contentToDisplay.length / 1000)} min read</p>
                <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">{work.likes || 0} favorites</p>
                <div className="bg-sage/10 rounded-full h-1.5 mt-2">
                  <div 
                    className="bg-russet h-full rounded-full" 
                    style={{ width: `${readingProgress}%` }}
                  ></div>
                </div>
                <p className="text-xs text-navy/70 dark:text-cream/70 font-sans mt-1">
                  {readingProgress}% completed
                </p>
              </div>
            </div>

            <div className="mb-4">
              <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Actions</h4>
              <div className="space-y-2">
                <Button
                  variant="outline"
                  size="sm"
                  className={`flex items-center gap-1 w-full justify-start py-1.5 px-3 rounded-lg ${
                    isLiked 
                      ? 'bg-russet/10 hover:bg-russet/20 text-russet' 
                      : 'bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90'
                  } font-sans text-xs transition-colors`}
                  onClick={handleLikeToggle}
                >
                  <Heart className={`h-4 w-4 ${isLiked ? 'fill-russet' : ''}`} />
                  <span>{isLiked ? 'Remove from favorites' : 'Add to favorites'}</span>
                </Button>
                
                <Button
                  variant="outline"
                  size="sm"
                  className={`flex items-center gap-1 w-full justify-start py-1.5 px-3 rounded-lg ${
                    isBookmarked 
                      ? 'bg-russet/10 hover:bg-russet/20 text-russet' 
                      : 'bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90'
                  } font-sans text-xs transition-colors`}
                  onClick={handleBookmarkToggle}
                >
                  <Bookmark className={`h-4 w-4 ${isBookmarked ? 'fill-russet' : ''}`} />
                  <span>{isBookmarked ? 'Remove bookmark' : 'Bookmark for later'}</span>
                </Button>
                
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 w-full justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                  onClick={handleShare}
                >
                  <Share2 className="h-4 w-4" />
                  <span>Share</span>
                </Button>
                
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 w-full justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                  onClick={() => navigate(`/works/${work.slug}/comments`)}
                >
                  <MessageCircle className="h-4 w-4" />
                  <span>View all comments</span>
                </Button>
                
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 w-full justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                  onClick={() => navigate(`/works/${work.slug}/cite`)}
                >
                  <FileText className="h-4 w-4" />
                  <span>Cite this work</span>
                </Button>
                
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 w-full justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                  onClick={() => navigate(`/collections/add/${work.slug}`)}
                >
                  <BookCopy className="h-4 w-4" />
                  <span>Add to collection</span>
                </Button>
              </div>
            </div>
          </aside>
        ) : (
          <Drawer open={isActionPanelOpen} onOpenChange={setIsActionPanelOpen}>
            <DrawerContent className="max-h-[90%]">
              <DrawerHeader>
                <DrawerTitle>About this work</DrawerTitle>
                <DrawerDescription>
                  <div className="mb-2">
                    <AuthorChip author={work.author} withLifeDates />
                  </div>
                  {work.year && (
                    <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">Written in {work.year}</p>
                  )}
                </DrawerDescription>
              </DrawerHeader>
              
              <div className="px-4">
                <div className="my-4">
                  <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Tags</h4>
                  <div className="flex flex-wrap gap-1">
                    {work.tags?.map(tag => (
                      <Badge 
                        key={tag.id}
                        variant="outline"
                        className="inline-block px-2 py-0.5 bg-navy/10 dark:bg-navy/20 rounded text-navy/70 dark:text-cream/70 text-xs font-sans border-none"
                      >
                        {tag.name}
                      </Badge>
                    ))}
                  </div>
                </div>
                
                {selectedTranslation && (
                  <div className="my-4">
                    <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Translation</h4>
                    <div>
                      <p className="text-sm text-navy/90 dark:text-cream/90 font-sans font-medium">{selectedTranslation.language}</p>
                      <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">
                        Translated by User {selectedTranslation.translatorId} {selectedTranslation.year && `(${selectedTranslation.year})`}
                      </p>
                    </div>
                  </div>
                )}
                
                <div className="my-4">
                  <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Reading stats</h4>
                  <div>
                    <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">~{Math.ceil(contentToDisplay.length / 1000)} min read</p>
                    <p className="text-xs text-navy/70 dark:text-cream/70 font-sans">{work.likes || 0} favorites</p>
                    <div className="bg-sage/10 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-russet h-full rounded-full" 
                        style={{ width: `${readingProgress}%` }}
                      ></div>
                    </div>
                    <p className="text-xs text-navy/70 dark:text-cream/70 font-sans mt-1">
                      {readingProgress}% completed
                    </p>
                  </div>
                </div>
                
                <div className="my-4">
                  <h4 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2">Actions</h4>
                  <div className="grid grid-cols-2 gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className={`flex items-center gap-1 justify-start py-1.5 px-3 rounded-lg ${
                        isBookmarked 
                          ? 'bg-russet/10 hover:bg-russet/20 text-russet' 
                          : 'bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90'
                      } font-sans text-xs transition-colors`}
                      onClick={handleBookmarkToggle}
                    >
                      <Bookmark className={`h-4 w-4 ${isBookmarked ? 'fill-russet' : ''}`} />
                      <span>{isBookmarked ? 'Remove' : 'Bookmark'}</span>
                    </Button>
                    
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex items-center gap-1 justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                      onClick={() => navigate(`/works/${work.slug}/comments`)}
                    >
                      <MessageCircle className="h-4 w-4" />
                      <span>Comments</span>
                    </Button>
                    
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex items-center gap-1 justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                      onClick={() => navigate(`/works/${work.slug}/cite`)}
                    >
                      <FileText className="h-4 w-4" />
                      <span>Cite</span>
                    </Button>
                    
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex items-center gap-1 justify-start py-1.5 px-3 rounded-lg bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans text-xs transition-colors"
                      onClick={() => navigate(`/collections/add/${work.slug}`)}
                    >
                      <BookCopy className="h-4 w-4" />
                      <span>Add to collection</span>
                    </Button>
                  </div>
                </div>
              </div>
              
              <DrawerFooter>
                <DrawerClose asChild>
                  <Button variant="outline">Close</Button>
                </DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
        )}

        {/* Main reading area */}
        <div ref={mainContentRef} className="flex-1 px-4 lg:px-8 py-4 lg:py-8">
          <div className="mb-6">
            {!isMobile && (
              <ReadingControls
                onZenModeToggle={toggleZenMode}
                onIncreaseFontSize={increaseFontSize}
                onDecreaseFontSize={decreaseFontSize}
                zenMode={settings.zenMode}
                workId={work.id}
                workSlug={work.slug}
                translationId={selectedTranslationId}
              />
            )}
            
            <div className="flex items-center gap-3 mt-2">
              <h2 className="text-xl md:text-2xl font-serif text-navy/80 dark:text-cream/80 font-medium">{work.title}</h2>
              <LanguageTag language={work.language} />
            </div>
            
            <TranslationSelector
              translations={translations}
              currentTranslationId={selectedTranslationId}
              workSlug={work.slug}
              workLanguage={work.language}
              onSelectTranslation={setSelectedTranslationId}
              onViewOriginal={handleViewOriginal}
              isOriginalSelected={isOriginalSelected}
            />
          </div>

          {/* Text content with enhanced annotation features */}
          <div className="reading-container max-w-[var(--reading-width)] mx-auto">
            <EnhancedLineNumberedText 
              content={contentToDisplay}
              fontSizeClass={settings.fontSize}
              onAnnotate={handleLineAnnotation}
              highlightedLine={selectedLineNumber || undefined}
              workId={work.id}
            />

            {selectedTranslation && selectedTranslation.notes && (
              <div className="mt-8 border-t border-sage/20 dark:border-sage/10 pt-4">
                <h3 className="text-lg font-medium font-serif text-navy dark:text-cream mb-3">Translation Notes</h3>
                <div className="text-sm text-navy/80 dark:text-cream/80">
                  <p>{selectedTranslation.notes}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Progress bar (fixed at bottom) - only visible when not in zen mode */}
      {!settings.zenMode && (
        <div className="progress-bar fixed bottom-0 left-0 right-0 h-1 bg-sage/20 dark:bg-sage/10">
          <div 
            className="progress-indicator h-full bg-russet dark:bg-russet/90" 
            style={{ width: `${readingProgress}%` }}
          ></div>
        </div>
      )}
      
      {/* Annotation panel for desktop */}
      {!isMobile && isAnnotationOpen && selectedLineNumber && (
        <AnnotationSystem 
          workId={work.id}
          selectedLineNumber={selectedLineNumber}
          onClose={handleCloseAnnotation}
          translationId={selectedTranslationId}
        />
      )}
      
      {/* Mobile annotation drawer */}
      {isMobile && (
        <Drawer open={isAnnotationOpen && !!selectedLineNumber} onOpenChange={(open) => {
          if (!open) handleCloseAnnotation();
        }}>
          <DrawerContent className="max-h-[80%]">
            <DrawerHeader className="border-b border-sage/20 dark:border-sage/10">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <MessageCircle className="h-5 w-5 text-russet" />
                  <DrawerTitle>Line {selectedLineNumber} Annotations</DrawerTitle>
                </div>
              </div>
            </DrawerHeader>
            
            <div className="p-4 overflow-auto">
              {selectedLineNumber && (
                <AnnotationSystem 
                  workId={work.id}
                  selectedLineNumber={selectedLineNumber}
                  onClose={handleCloseAnnotation}
                  translationId={selectedTranslationId}
                />
              )}
            </div>
          </DrawerContent>
        </Drawer>
      )}
      
      {/* Mobile reading controls */}
      {isMobile && (
        <div className="fixed bottom-1 right-4 flex space-x-1">
          <Button
            size="icon"
            className="rounded-full shadow-lg w-10 h-10 bg-russet text-white"
            onClick={() => {
              if (selectedLineNumber) {
                setIsAnnotationOpen(true);
              } else {
                toast({
                  description: "Tap on a line to add annotations",
                  duration: 3000,
                });
              }
            }}
          >
            <MessageCircle className="h-5 w-5" />
            <span className="sr-only">Annotations</span>
          </Button>
          
          <Button
            size="icon"
            className="rounded-full shadow-lg w-10 h-10 bg-navy dark:bg-navy/80 text-white"
            onClick={toggleZenMode}
          >
            {settings.zenMode ? <AlignLeft className="h-5 w-5" /> : <X className="h-5 w-5" />}
            <span className="sr-only">{settings.zenMode ? 'Exit zen mode' : 'Zen mode'}</span>
          </Button>
        </div>
      )}
    </section>
  );
}