import { useState, useEffect, useRef } from "react";
import { useParams, useLocation } from "wouter";
import { useQuery } from "@tanstack/react-query";
import { WorkWithDetails, TranslationWithDetails } from "@/lib/types";
import { PageLayout } from "@/components/layout/PageLayout";

// UI Components
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Slider } from "@/components/ui/slider";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle, 
  CardDescription 
} from "@/components/ui/card";
import { 
  Dialog, 
  DialogContent, 
  DialogDescription, 
  DialogHeader, 
  DialogTitle,
  DialogTrigger 
} from "@/components/ui/dialog";
import { toast } from "@/hooks/use-toast";
import { AuthorChip } from "@/components/common/AuthorChip";
import { useMediaQuery } from "@/hooks/use-media-query";

// Icons
import { 
  BookOpen, 
  ArrowLeft, 
  ArrowRight, 
  Languages,
  Heart,
  Bookmark,
  Share2,
  Sun,
  Moon,
  MessageCircle,
  Copy,
  Link as LinkIcon,
  LineChart,
  Sparkles,
  BookMarked,
  Waves,
  BarChart4,
  Columns
} from "lucide-react";

// Define types for linguistic analysis
interface PartOfSpeech {
  term: string;
  tag: string;
  color: string;
  explanation: string;
}

interface Sentiment {
  score: number;  // -1 to 1 
  label: string;  // positive, negative, neutral
  intensity: string; // mild, moderate, strong
}

interface SyllableData {
  count: number;
  breakdown: string[];
}

interface RhymeInfo {
  word: string;
  lineNumber: number;
  rhymeGroup: string;
  lineText: string;
}

interface LinguisticAnalysis {
  partOfSpeech: Record<number, PartOfSpeech[]>; // Line number to POS tags
  entityRecognition: Record<number, string[]>; // Line number to entities (names, places)
  syllableCount: Record<string, SyllableData>; // Word to syllable count 
  sentiment: Record<number, Sentiment>; // Line number to sentiment
  rhymes: RhymeInfo[]; // Identified rhymes
  meter: Record<number, string[]>; // Line number to meter pattern
  themeLexicon: Record<string, string[]>; // Theme to related words found
  readabilityScore: number; // Overall text readability (0-100)
}

export default function SimpleWorkReading() {
  const { slug } = useParams();
  const [, navigate] = useLocation();
  const isMobile = useMediaQuery("(max-width: 768px)");
  
  // Main content states
  const [activePage, setActivePage] = useState(1);
  const [selectedTranslationId, setSelectedTranslationId] = useState<number | undefined>(undefined);
  const [secondaryTranslationId, setSecondaryTranslationId] = useState<number | undefined>(undefined);
  const [isBookmarked, setIsBookmarked] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [fontSize, setFontSize] = useState(16);
  const [activeTab, setActiveTab] = useState("text");
  const [viewMode, setViewMode] = useState<"traditional" | "enhanced" | "parallel">("traditional");
  const [selectedLineNumber, setSelectedLineNumber] = useState<number | null>(null);
  const [highlightMode, setHighlightMode] = useState<
    "none" | "partOfSpeech" | "sentiment" | "meter" | "themes"
  >("none");
  const [linguisticAnalysis, setLinguisticAnalysis] = useState<LinguisticAnalysis | null>(null);
  const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
  const contentRef = useRef<HTMLDivElement>(null);
  
  // Queries
  const { data: work, isLoading: workLoading, error: workError } = useQuery<WorkWithDetails>({
    queryKey: [`/api/works/${slug}`],
  });
  
  const { data: translations, isLoading: translationsLoading } = useQuery<TranslationWithDetails[]>({
    queryKey: [`/api/works/${slug}/translations`],
    enabled: !!work,
  });

  // Page validation effect
  useEffect(() => {
    if (work) {
      const content = getSelectedContent();
      const lines = contentToLines(content);
      const totalPages = Math.ceil(lines.length / 20);
      const safePage = Math.min(Math.max(1, activePage), Math.max(1, totalPages));
      
      if (safePage !== activePage) {
        setActivePage(safePage);
      }
    }
  }, [work, activePage, selectedTranslationId]);
  
  // Effect to generate linguistic analysis when needed
  useEffect(() => {
    if (work && activeTab === "analysis" && !linguisticAnalysis) {
      setIsAnalysisLoading(true);
      // In a real implementation, this would be an API call to Claude 3 or another LLM
      setTimeout(() => {
        generateLinguisticAnalysis(getSelectedContent());
        setIsAnalysisLoading(false);
      }, 1000);
    }
  }, [work, activeTab, linguisticAnalysis]);
  
  // Get the secondary translation content (for parallel view)
  const getSecondaryContent = () => {
    if (!work || !secondaryTranslationId) return "";
    
    const translation = translations?.find(t => t.id === secondaryTranslationId);
    return translation?.content || "";
  };
  
  // Generate demo linguistic analysis for the content
  const generateLinguisticAnalysis = (content: string) => {
    const lines = content.split('\n');
    
    // Part of speech examples for lines
    const partOfSpeech: Record<number, PartOfSpeech[]> = {};
    const entityRecognition: Record<number, string[]> = {};
    const sentiment: Record<number, Sentiment> = {};
    const meter: Record<number, string[]> = {};

    // Generate sample data for part of speech, entities, sentiment and meter
    lines.forEach((line, index) => {
      if (line.trim().length === 0) return;
      
      const lineNumber = index + 1;
      
      // Create sample POS data
      const words = line.split(' ').filter(w => w.trim().length > 0);
      partOfSpeech[lineNumber] = words.map(word => {
        const tags = ['NOUN', 'VERB', 'ADJ', 'ADV', 'PRON', 'DET', 'ADP', 'CONJ', 'PRT'];
        const colors = ['#8884d8', '#83a6ed', '#8dd1e1', '#82ca9d', '#a4de6c', '#d0ed57', '#ffc658', '#ff8042', '#ff6361'];
        const explanations = ['Noun', 'Verb', 'Adjective', 'Adverb', 'Pronoun', 'Determiner', 'Adposition', 'Conjunction', 'Particle'];
        
        const randomIndex = Math.floor(Math.random() * tags.length);
        
        return {
          term: word.replace(/[.,;!?]/g, ''),
          tag: tags[randomIndex],
          color: colors[randomIndex],
          explanation: explanations[randomIndex]
        };
      });
      
      // Create sample entity recognition
      if (Math.random() > 0.7) {
        const entities = ["PERSON", "LOCATION", "ORGANIZATION", "TIME", "DATE"];
        entityRecognition[lineNumber] = [words[Math.floor(Math.random() * words.length)]];
      }
      
      // Create sample sentiment analysis
      const sentimentScore = Math.random() * 2 - 1;  // -1 to 1
      sentiment[lineNumber] = {
        score: sentimentScore,
        label: sentimentScore > 0.3 ? 'positive' : sentimentScore < -0.3 ? 'negative' : 'neutral',
        intensity: Math.abs(sentimentScore) > 0.7 ? 'strong' : Math.abs(sentimentScore) > 0.4 ? 'moderate' : 'mild'
      };
      
      // Create sample meter pattern
      meter[lineNumber] = Array(words.length).fill('').map(() => 
        Math.random() > 0.5 ? '/' : '\\'
      );
    });
    
    // Create syllable count data
    const syllableCount: Record<string, SyllableData> = {};
    const uniqueWords = new Set<string>();
    lines.forEach(line => {
      line.split(' ').forEach(word => {
        const cleanWord = word.replace(/[.,;!?]/g, '').toLowerCase();
        if (cleanWord.length > 0) uniqueWords.add(cleanWord);
      });
    });
    
    Array.from(uniqueWords).forEach(word => {
      const count = Math.ceil(word.length / 3);
      const breakdown = [];
      for (let i = 0; i < word.length; i += 3) {
        breakdown.push(word.substring(i, Math.min(i + 3, word.length)));
      }
      syllableCount[word] = { count, breakdown };
    });
    
    // Create sample rhyme data
    const rhymeGroups = ['A', 'B', 'C', 'D', 'E'];
    const rhymes: RhymeInfo[] = [];
    
    lines.forEach((line, index) => {
      if (line.trim().length === 0 || Math.random() > 0.3) return;
      
      const words = line.split(' ');
      if (words.length === 0) return;
      
      const lastWord = words[words.length - 1].replace(/[.,;!?]/g, '');
      if (lastWord.length === 0) return;
      
      rhymes.push({
        word: lastWord,
        lineNumber: index + 1,
        rhymeGroup: rhymeGroups[Math.floor(Math.random() * rhymeGroups.length)],
        lineText: line
      });
    });
    
    // Create theme lexicon data
    const themes = ['love', 'nature', 'time', 'death', 'art'];
    const themeLexicon: Record<string, string[]> = {};
    
    const allWords = lines.join(' ').split(' ')
      .map(w => w.replace(/[.,;!?]/g, '').toLowerCase())
      .filter(w => w.length > 0);
    
    themes.forEach(theme => {
      themeLexicon[theme] = allWords.filter(() => Math.random() > 0.95).slice(0, 10);
    });
    
    // Set the linguistic analysis data
    setLinguisticAnalysis({
      partOfSpeech,
      entityRecognition,
      syllableCount,
      sentiment,
      rhymes,
      meter,
      themeLexicon,
      readabilityScore: Math.floor(Math.random() * 40) + 60 // 60-100
    });
  };

  // Get the selected translation content
  const getSelectedContent = () => {
    if (!work) return "";
    if (!selectedTranslationId) return work.content;
    
    const translation = translations?.find(t => t.id === selectedTranslationId);
    return translation?.content || work.content;
  };

  // Split content into lines and pages for display
  const contentToLines = (content: string) => {
    return content.split('\n').filter(line => line.length > 0);
  };

  const getPagedContent = (content: string, linesPerPage = 20) => {
    const lines = contentToLines(content);
    const totalPages = Math.ceil(lines.length / linesPerPage);
    
    // Make sure active page is in bounds
    const safePage = Math.min(Math.max(1, activePage), Math.max(1, totalPages));
    
    const startIdx = (safePage - 1) * linesPerPage;
    const endIdx = startIdx + linesPerPage;
    
    return {
      lines: lines.slice(startIdx, endIdx),
      page: safePage,
      totalPages,
      startLineNumber: startIdx + 1
    };
  };

  // Toggle bookmark status
  const handleBookmarkToggle = () => {
    setIsBookmarked(!isBookmarked);
    toast({
      description: isBookmarked 
        ? "Removed from your bookmarks" 
        : "Added to your bookmarks",
      duration: 3000,
    });
  };

  // Toggle like status
  const handleLikeToggle = () => {
    setIsLiked(!isLiked);
    toast({
      description: isLiked 
        ? "Removed from your favorites" 
        : "Added to your favorites",
      duration: 3000,
    });
  };

  // Share the work
  const handleShare = async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: work?.title || "Literary Work",
          text: `Reading ${work?.title || "a work"} on Tercul`,
          url: window.location.href
        });
      } else {
        navigator.clipboard.writeText(window.location.href);
        toast({
          description: "Link copied to clipboard",
          duration: 3000,
        });
      }
    } catch (error) {
      console.error('Error sharing:', error);
    }
  };

  // Handle navigation between pages
  const handleNextPage = () => {
    if (!work) return;
    const { totalPages } = getPagedContent(getSelectedContent());
    if (activePage < totalPages) {
      setActivePage(activePage + 1);
      // Scroll to top of content area
      if (contentRef.current) {
        contentRef.current.scrollIntoView({ behavior: 'smooth' });
      }
    }
  };

  const handlePreviousPage = () => {
    if (activePage > 1) {
      setActivePage(activePage - 1);
      // Scroll to top of content area
      if (contentRef.current) {
        contentRef.current.scrollIntoView({ behavior: 'smooth' });
      }
    }
  };

  // Loading state
  if (workLoading) {
    return (
      <PageLayout>
        <div className="max-w-full mx-auto px-4 py-8">
          <div className="flex items-center space-x-4 mb-6">
            <Skeleton className="h-12 w-12 rounded-full" />
            <div className="space-y-2">
              <Skeleton className="h-5 w-48" />
              <Skeleton className="h-4 w-32" />
            </div>
          </div>
          
          <div className="flex flex-col lg:flex-row gap-8">
            <div className="lg:w-64 flex-shrink-0">
              <Skeleton className="h-64 w-full rounded-lg" />
            </div>
            
            <div className="flex-1">
              <Skeleton className="h-8 w-3/4 mb-4" />
              <div className="space-y-3">
                {Array.from({ length: 15 }).map((_, i) => (
                  <Skeleton key={i} className="h-6 w-full" />
                ))}
              </div>
            </div>
          </div>
        </div>
      </PageLayout>
    );
  }

  // Error state
  if (workError || !work) {
    return (
      <PageLayout>
        <div className="max-w-[var(--content-width)] mx-auto px-4 py-16 text-center">
          <h1 className="text-2xl font-bold mb-4 text-primary">Work not found</h1>
          <p className="mb-6 text-muted-foreground">The literary work you're looking for could not be found.</p>
          <div className="flex flex-col items-center gap-4">
            <BookOpen className="h-16 w-16 text-primary/30" />
            <Button onClick={() => navigate("/explore")} className="bg-primary hover:bg-primary/90 text-primary-foreground">
              Explore Works
            </Button>
          </div>
        </div>
      </PageLayout>
    );
  }

  // Get content for current view and page
  const mainContent = getPagedContent(getSelectedContent());

  // Get the selected translation details
  const selectedTranslation = translations?.find(t => t.id === selectedTranslationId);

  // Calculate reading time estimation
  const wordCount = getSelectedContent().split(/\s+/).length;
  const readingTimeMinutes = Math.ceil(wordCount / 200); // Average reading speed

  return (
    <PageLayout>
      <div className="max-w-[var(--content-width)] mx-auto pt-4 px-4">
        {/* Work header */}
        <div className="mb-8">
          <h1 className="text-3xl font-serif font-bold text-primary mb-2">{work.title}</h1>
          <div className="flex items-center gap-4 flex-wrap mb-4">
            <AuthorChip author={work.author} withLifeDates />
            {work.year && <span className="text-muted-foreground">Published: {work.year}</span>}
            <span className="text-muted-foreground">Reading time: ~{readingTimeMinutes} min</span>
          </div>
          
          <div className="flex flex-wrap gap-2 mb-4">
            {work.tags?.map(tag => (
              <Badge 
                key={tag.id}
                variant="outline"
                className="bg-primary/5 hover:bg-primary/10 text-primary/80"
              >
                {tag.name}
              </Badge>
            ))}
          </div>
          
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              className={`flex items-center gap-1 ${isLiked ? 'text-accent border-accent' : ''}`}
              onClick={handleLikeToggle}
            >
              <Heart className={`h-4 w-4 ${isLiked ? 'fill-accent' : ''}`} />
              {isLiked ? 'Unlike' : 'Like'}
            </Button>
            
            <Button
              variant="outline"
              size="sm"
              className={`flex items-center gap-1 ${isBookmarked ? 'text-accent border-accent' : ''}`}
              onClick={handleBookmarkToggle}
            >
              <Bookmark className={`h-4 w-4 ${isBookmarked ? 'fill-accent' : ''}`} />
              Bookmark
            </Button>
            
            <Button
              variant="outline"
              size="sm"
              className="flex items-center gap-1"
              onClick={handleShare}
            >
              <Share2 className="h-4 w-4" />
              Share
            </Button>
          </div>
        </div>
        
        {/* Translation selector */}
        {translations && translations.length > 0 && (
          <div className="mb-6">
            <h3 className="text-md font-medium mb-2">Translations</h3>
            <div className="flex flex-wrap gap-2">
              <Button
                variant={!selectedTranslationId ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedTranslationId(undefined)}
              >
                <Languages className="mr-2 h-4 w-4" />
                Original ({work.language})
              </Button>
              
              {translations.map(translation => (
                <Button
                  key={translation.id}
                  variant={selectedTranslationId === translation.id ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedTranslationId(translation.id)}
                >
                  <Languages className="mr-2 h-4 w-4" />
                  {translation.language}
                </Button>
              ))}
            </div>
          </div>
        )}
        
        {/* Reading content */}
        <div 
          className="reading-content mb-8 prose dark:prose-invert max-w-none" 
          ref={contentRef}
        >
          {/* Reading settings */}
          <div className="mb-6 flex flex-wrap justify-between items-center gap-4">
            <div className="space-y-2">
              <h3 className="text-sm font-medium">Reading Settings</h3>
              <div className="flex flex-wrap items-center gap-4">
                <div className="flex items-center gap-2">
                  <span className="text-sm">Font Size:</span>
                  <div className="w-32">
                    <Slider
                      value={[fontSize]}
                      min={12}
                      max={24}
                      step={1}
                      onValueChange={(values) => setFontSize(values[0])}
                    />
                  </div>
                  <span className="text-sm">{fontSize}px</span>
                </div>
                
                <div className="flex items-center gap-2">
                  <span className="text-sm">Dark Mode:</span>
                  <Switch
                    checked={isDarkMode}
                    onCheckedChange={setIsDarkMode}
                  />
                  {isDarkMode ? (
                    <Moon className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <Sun className="h-4 w-4 text-muted-foreground" />
                  )}
                </div>
                
                <div className="flex items-center gap-2">
                  <span className="text-sm">View Mode:</span>
                  <div className="flex border rounded-md">
                    <Button
                      variant={viewMode === "traditional" ? "default" : "ghost"}
                      size="sm"
                      onClick={() => setViewMode("traditional")}
                      className="rounded-r-none"
                    >
                      Traditional
                    </Button>
                    <Button
                      variant={viewMode === "enhanced" ? "default" : "ghost"}
                      size="sm"
                      onClick={() => setViewMode("enhanced")}
                      className="rounded-none border-x"
                    >
                      Enhanced
                    </Button>
                    <Button
                      variant={viewMode === "parallel" ? "default" : "ghost"}
                      size="sm"
                      onClick={() => setViewMode("parallel")}
                      className="rounded-l-none"
                    >
                      Parallel
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          {/* Main tabs */}
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="mb-6">
              <TabsTrigger value="text">Text</TabsTrigger>
              <TabsTrigger value="annotations">Annotations</TabsTrigger>
              <TabsTrigger value="analysis">Analysis</TabsTrigger>
              {translations && translations.length > 0 && (
                <TabsTrigger value="compare">Compare</TabsTrigger>
              )}
            </TabsList>
            
            {/* Text tab content */}
            <TabsContent value="text">
              <Card className="p-6">
                {viewMode === "traditional" && (
                  <div style={{ fontSize: `${fontSize}px` }}>
                    {mainContent.lines.map((line, i) => (
                      <div key={i} className="mb-3">
                        {line}
                      </div>
                    ))}
                  </div>
                )}
                
                {viewMode === "enhanced" && (
                  <div style={{ fontSize: `${fontSize}px` }}>
                    {mainContent.lines.map((line, i) => {
                      const lineNumber = mainContent.startLineNumber + i;
                      return (
                        <div 
                          key={i} 
                          className="flex group hover:bg-muted/20 rounded transition-colors mb-2 py-1"
                          onClick={() => setSelectedLineNumber(lineNumber)}
                        >
                          <div className="text-muted-foreground w-10 flex-shrink-0 text-right pr-3 select-none">
                            {lineNumber}
                          </div>
                          <div className="flex-1 relative">
                            {line}
                            
                            {/* Line actions - visible on hover */}
                            <div className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-card/80 backdrop-blur-sm rounded flex items-center">
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button variant="ghost" size="icon" className="h-8 w-8">
                                      <Copy className="h-4 w-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Copy line</p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                              
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button variant="ghost" size="icon" className="h-8 w-8">
                                      <LinkIcon className="h-4 w-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Copy link to line</p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                              
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button variant="ghost" size="icon" className="h-8 w-8">
                                      <MessageCircle className="h-4 w-4" />
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p>Add annotation</p>
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
                
                {viewMode === "parallel" && secondaryTranslationId === undefined && (
                  <div className="text-center py-6">
                    <h3 className="text-lg font-medium mb-4">Parallel View</h3>
                    <p className="text-muted-foreground mb-6">Select a second translation to enable parallel view</p>
                    
                    {translations && translations.length > 0 && (
                      <div className="flex flex-wrap justify-center gap-2 max-w-md mx-auto">
                        {translations
                          .filter(t => t.id !== selectedTranslationId)
                          .map(translation => (
                            <Button
                              key={translation.id}
                              variant="outline"
                              size="sm"
                              onClick={() => setSecondaryTranslationId(translation.id)}
                            >
                              <Languages className="mr-2 h-4 w-4" />
                              {translation.language}
                            </Button>
                          ))
                        }
                      </div>
                    )}
                  </div>
                )}
                
                {viewMode === "parallel" && secondaryTranslationId !== undefined && (
                  <div style={{ fontSize: `${fontSize}px` }}>
                    <div className="flex justify-between items-center mb-4">
                      <div className="flex-1">
                        <h3 className="text-lg font-medium">
                          {selectedTranslationId 
                            ? `${selectedTranslation?.language} Translation` 
                            : `Original (${work.language})`}
                        </h3>
                      </div>
                      
                      <div className="w-8"></div>
                      
                      <div className="flex-1">
                        <div className="flex justify-between items-center">
                          <h3 className="text-lg font-medium">
                            {translations?.find(t => t.id === secondaryTranslationId)?.language || "Translation"}
                          </h3>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setSecondaryTranslationId(undefined)}
                          >
                            Clear
                          </Button>
                        </div>
                      </div>
                    </div>
                    
                    <div className="grid grid-cols-2 gap-6">
                      {/* First column */}
                      <div>
                        {mainContent.lines.map((line, i) => (
                          <div 
                            key={i} 
                            className="mb-3 py-1 px-2 hover:bg-muted/20 rounded transition-colors"
                          >
                            {line}
                          </div>
                        ))}
                      </div>
                      
                      {/* Second column */}
                      <div>
                        {getPagedContent(getSecondaryContent()).lines.map((line, i) => (
                          <div 
                            key={i} 
                            className="mb-3 py-1 px-2 hover:bg-muted/20 rounded transition-colors"
                          >
                            {line}
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
              </Card>
            </TabsContent>
            
            {/* Annotations tab content */}
            <TabsContent value="annotations">
              <Card className="p-6">
                {selectedLineNumber ? (
                  <div>
                    <div className="bg-muted/30 p-3 rounded mb-4">
                      <h3 className="text-sm font-medium mb-2">Line {selectedLineNumber}</h3>
                      <p className="italic">
                        {getSelectedContent().split('\n')[selectedLineNumber - 1] || ""}
                      </p>
                    </div>
                    
                    <h3 className="text-lg font-medium mb-4">Annotations</h3>
                    <p className="text-center text-muted-foreground py-4">No annotations for this line yet.</p>
                    
                    <div className="mt-6">
                      <h4 className="text-sm font-medium mb-2">Add your annotation</h4>
                      <textarea 
                        className="w-full min-h-[100px] p-3 border rounded-md" 
                        placeholder="Share your thoughts or insights about this line..."
                      />
                      <div className="flex justify-end mt-2">
                        <Button>Add Annotation</Button>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <MessageCircle className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
                    <h3 className="text-lg font-medium mb-2">Line Annotations</h3>
                    <p className="text-muted-foreground">
                      Select a line from the text to view or add annotations.
                    </p>
                  </div>
                )}
              </Card>
            </TabsContent>
            
            {/* Analysis tab content */}
            <TabsContent value="analysis">
              {isAnalysisLoading ? (
                <Card className="p-6">
                  <div className="text-center py-12">
                    <div className="inline-block h-12 w-12 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4"></div>
                    <p className="text-muted-foreground">Analyzing text patterns...</p>
                  </div>
                </Card>
              ) : linguisticAnalysis ? (
                <div className="space-y-6">
                  {/* Analysis tools */}
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-lg">Analysis Tools</CardTitle>
                      <CardDescription>
                        Select different views to explore the linguistic patterns
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                        <Button
                          variant={highlightMode === "partOfSpeech" ? "default" : "outline"}
                          size="sm"
                          onClick={() => setHighlightMode(
                            highlightMode === "partOfSpeech" ? "none" : "partOfSpeech"
                          )}
                        >
                          <BookMarked className="mr-2 h-4 w-4" />
                          Parts of Speech
                        </Button>
                        
                        <Button
                          variant={highlightMode === "sentiment" ? "default" : "outline"}
                          size="sm"
                          onClick={() => setHighlightMode(
                            highlightMode === "sentiment" ? "none" : "sentiment"
                          )}
                        >
                          <LineChart className="mr-2 h-4 w-4" />
                          Sentiment
                        </Button>
                        
                        <Button
                          variant={highlightMode === "meter" ? "default" : "outline"}
                          size="sm"
                          onClick={() => setHighlightMode(
                            highlightMode === "meter" ? "none" : "meter"
                          )}
                        >
                          <Waves className="mr-2 h-4 w-4" />
                          Meter
                        </Button>
                        
                        <Button
                          variant={highlightMode === "themes" ? "default" : "outline"}
                          size="sm"
                          onClick={() => setHighlightMode(
                            highlightMode === "themes" ? "none" : "themes"
                          )}
                        >
                          <Sparkles className="mr-2 h-4 w-4" />
                          Themes
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                  
                  {/* Analysis summary */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-lg">Readability</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-2">
                          <div>
                            <div className="flex justify-between text-sm">
                              <span>Score</span>
                              <span className="font-medium">{linguisticAnalysis.readabilityScore}/100</span>
                            </div>
                            <div className="h-2 bg-muted rounded-full mt-1">
                              <div 
                                className="h-full bg-primary rounded-full" 
                                style={{ width: `${linguisticAnalysis.readabilityScore}%` }}
                              />
                            </div>
                          </div>
                          
                          <p className="text-sm text-muted-foreground">
                            {linguisticAnalysis.readabilityScore > 80 
                              ? "Very accessible text with simple language and structure" 
                              : linguisticAnalysis.readabilityScore > 60
                                ? "Moderately complex text suitable for general readers"
                                : "Complex text with sophisticated vocabulary and structure"}
                          </p>
                        </div>
                      </CardContent>
                    </Card>
                    
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-lg">Structure</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <p className="text-sm text-muted-foreground">Lines</p>
                            <p className="text-2xl font-medium">{contentToLines(getSelectedContent()).length}</p>
                          </div>
                          <div>
                            <p className="text-sm text-muted-foreground">Words</p>
                            <p className="text-2xl font-medium">{wordCount}</p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                    
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-lg">Themes</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="flex flex-wrap gap-1">
                          {Object.keys(linguisticAnalysis.themeLexicon).map(theme => (
                            <Badge key={theme} variant="outline" className="capitalize">
                              {theme}
                            </Badge>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                  
                  {/* Text with analysis overlay */}
                  <Card className="p-6">
                    <div style={{ fontSize: `${fontSize}px` }}>
                      {mainContent.lines.map((line, i) => {
                        const lineNumber = mainContent.startLineNumber + i;
                        let highlightInfo = null;
                        
                        // Handle different highlight modes
                        if (highlightMode === "partOfSpeech" && linguisticAnalysis.partOfSpeech[lineNumber]) {
                          highlightInfo = (
                            <div className="text-xs text-muted-foreground mt-1 flex gap-1 flex-wrap">
                              {linguisticAnalysis.partOfSpeech[lineNumber].map((pos, j) => (
                                <Badge 
                                  key={j} 
                                  variant="outline" 
                                  className="border-[0.5px]"
                                  style={{ borderColor: pos.color }}
                                >
                                  {pos.term}: {pos.tag}
                                </Badge>
                              ))}
                            </div>
                          );
                        } else if (highlightMode === "sentiment" && linguisticAnalysis.sentiment[lineNumber]) {
                          const sentiment = linguisticAnalysis.sentiment[lineNumber];
                          const sentimentColor = sentiment.label === 'positive' 
                            ? 'border-green-500' 
                            : sentiment.label === 'negative'
                              ? 'border-red-500'
                              : 'border-gray-400';
                          
                          highlightInfo = (
                            <div className="text-xs text-muted-foreground mt-1">
                              <Badge variant="outline" className={sentimentColor}>
                                {sentiment.label.charAt(0).toUpperCase() + sentiment.label.slice(1)} 
                                ({sentiment.intensity})
                              </Badge>
                            </div>
                          );
                        } else if (highlightMode === "meter" && linguisticAnalysis.meter[lineNumber]) {
                          highlightInfo = (
                            <div className="text-xs font-mono mt-1">
                              {linguisticAnalysis.meter[lineNumber].join(' ')}
                            </div>
                          );
                        }
                        
                        return (
                          <div 
                            key={i}
                            className="mb-4 p-2 rounded hover:bg-muted/30 transition-colors"
                          >
                            <div className="flex">
                              <div className="w-10 text-right pr-3 text-muted-foreground select-none">
                                {lineNumber}
                              </div>
                              <div className="flex-1">
                                <div>{line}</div>
                                {highlightInfo}
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </Card>
                </div>
              ) : (
                <Card className="p-6">
                  <div className="text-center py-8">
                    <p>Click to analyze the text</p>
                    <Button 
                      className="mt-4"
                      onClick={() => generateLinguisticAnalysis(getSelectedContent())}
                    >
                      Analyze Text
                    </Button>
                  </div>
                </Card>
              )}
            </TabsContent>
            
            {/* Compare tab content */}
            {translations && translations.length > 0 && (
              <TabsContent value="compare">
                <Card className="p-6">
                  <h3 className="text-lg font-medium mb-4">Compare Translations</h3>
                  
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {/* Original version card */}
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle>Original</CardTitle>
                        <CardDescription>{work.language} • {work.year || 'Unknown year'}</CardDescription>
                      </CardHeader>
                      <CardContent className="h-48 overflow-y-auto">
                        <div className="space-y-1 text-sm">
                          {contentToLines(work.content).slice(0, 10).map((line, i) => (
                            <div key={i} className="text-muted-foreground hover:text-foreground transition-colors">
                              {line}
                            </div>
                          ))}
                          {contentToLines(work.content).length > 10 && (
                            <div className="italic text-muted-foreground">
                              ... {contentToLines(work.content).length - 10} more lines
                            </div>
                          )}
                        </div>
                      </CardContent>
                      <CardFooter>
                        <Button
                          variant="outline"
                          size="sm"
                          className="w-full"
                          onClick={() => {
                            setSelectedTranslationId(undefined);
                            setActiveTab("text");
                          }}
                        >
                          Read Original
                        </Button>
                      </CardFooter>
                    </Card>
                    
                    {/* Translation cards */}
                    {translations.map(translation => (
                      <Card key={translation.id}>
                        <CardHeader className="pb-2">
                          <CardTitle>{translation.language} Translation</CardTitle>
                          <CardDescription>
                            {translation.translator?.displayName || `Translator #${translation.translatorId}`}
                            {translation.year && ` • ${translation.year}`}
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="h-48 overflow-y-auto">
                          <div className="space-y-1 text-sm">
                            {contentToLines(translation.content).slice(0, 10).map((line, i) => (
                              <div key={i} className="text-muted-foreground hover:text-foreground transition-colors">
                                {line}
                              </div>
                            ))}
                            {contentToLines(translation.content).length > 10 && (
                              <div className="italic text-muted-foreground">
                                ... {contentToLines(translation.content).length - 10} more lines
                              </div>
                            )}
                          </div>
                        </CardContent>
                        <CardFooter className="flex flex-col gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            className="w-full"
                            onClick={() => {
                              setSelectedTranslationId(translation.id);
                              setActiveTab("text");
                            }}
                          >
                            Read Translation
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="w-full"
                            onClick={() => {
                              if (viewMode !== "parallel") setViewMode("parallel");
                              setSelectedTranslationId(undefined);
                              setSecondaryTranslationId(translation.id);
                              setActiveTab("text");
                            }}
                          >
                            Compare with Original
                          </Button>
                        </CardFooter>
                      </Card>
                    ))}
                  </div>
                </Card>
              </TabsContent>
            )}
          </Tabs>
        </div>
        
        {/* Pagination controls */}
        {mainContent.totalPages > 1 && (
          <div className="flex items-center justify-between mt-8 border-t pt-4 mb-10">
            <Button
              variant="outline"
              onClick={handlePreviousPage}
              disabled={activePage === 1}
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Previous
            </Button>
            
            <div className="text-sm text-muted-foreground">
              Page {activePage} of {mainContent.totalPages}
            </div>
            
            <Button
              variant="outline"
              onClick={handleNextPage}
              disabled={activePage === mainContent.totalPages}
            >
              Next
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        )}
      </div>
    </PageLayout>
  );
}