import { PageLayout } from "@/components/layout/PageLayout";
import { useParams } from "wouter";
import { useQuery } from "@tanstack/react-query";
import { WorkWithDetails, TranslationWithDetails } from "@/lib/types";
import { EnhancedReadingView } from "@/components/reading/EnhancedReadingView";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { BookOpen } from "lucide-react";

export default function WorkReading() {
  const { slug } = useParams();
  
  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,
  });
  
  if (workLoading) {
    return (
      <PageLayout>
        <div className="max-w-[var(--content-width)] mx-auto px-4 py-8">
          <div className="flex flex-col lg:flex-row gap-8">
            {/* Sidebar skeleton */}
            <div className="lg:w-64">
              <Skeleton className="h-16 w-full mb-4" />
              <Skeleton className="h-32 w-full mb-4" />
              <Skeleton className="h-24 w-full mb-4" />
              <Skeleton className="h-16 w-full" />
            </div>
            
            {/* Main content skeleton */}
            <div className="flex-1">
              <Skeleton className="h-12 w-3/4 mb-4" />
              <Skeleton className="h-8 w-1/2 mb-6" />
              
              <div className="space-y-3 max-w-2xl mx-auto">
                {Array.from({ length: 8 }).map((_, i) => (
                  <Skeleton key={i} className="h-6" />
                ))}
              </div>
            </div>
          </div>
        </div>
      </PageLayout>
    );
  }
  
  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">Work not found</h1>
          <p className="mb-6">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-russet/30" />
            <Link href="/explore">
              <Button className="bg-russet hover:bg-russet/90">Explore Works</Button>
            </Link>
          </div>
        </div>
      </PageLayout>
    );
  }
  
  return (
    <PageLayout>
      <EnhancedReadingView 
        work={work} 
        translations={translations || []} 
      />
    </PageLayout>
  );
}