import { Button } from "@/components/ui/button";
import { 
  Maximize2, 
  Minimize2,
  Plus,
  Minus,
  Heart,
  Share2,
  MessageSquare,
  BookOpen
} from "lucide-react";
import { useState } from "react";
import { Link } from "wouter";
import { useToast } from "@/hooks/use-toast";

interface ReadingControlsProps {
  onZenModeToggle: () => void;
  onIncreaseFontSize: () => void;
  onDecreaseFontSize: () => void;
  zenMode: boolean;
  workId: number;
  workSlug: string;
  translationId?: number;
}

export function ReadingControls({
  onZenModeToggle,
  onIncreaseFontSize,
  onDecreaseFontSize,
  zenMode,
  workId,
  workSlug,
  translationId
}: ReadingControlsProps) {
  const [isLiked, setIsLiked] = useState(false);
  const { toast } = useToast();
  
  const handleLikeToggle = async () => {
    try {
      // In a real app, this would be an API call to like/unlike the work
      setIsLiked(!isLiked);
      
      toast({
        description: isLiked ? "Removed from favorites" : "Added to favorites",
        duration: 2000,
      });
    } catch (error) {
      toast({
        title: "Error",
        description: "Could not update favorite status",
        variant: "destructive",
      });
    }
  };
  
  const handleShare = async () => {
    try {
      await navigator.share({
        title: "Tercul - Literary Work",
        url: window.location.href
      });
    } catch (error) {
      // Fallback for browsers that don't support the Web Share API
      navigator.clipboard.writeText(window.location.href);
      
      toast({
        description: "Link copied to clipboard",
        duration: 2000,
      });
    }
  };

  return (
    <div className="flex items-center justify-between">
      <h1 className="text-2xl md:text-3xl font-bold font-serif text-navy dark:text-cream">
        {/* Work title would go here */}
      </h1>
      
      <div className="flex gap-2">
        <Button
          variant="ghost"
          size="icon"
          className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
          onClick={onZenModeToggle}
        >
          {zenMode ? (
            <Minimize2 className="h-5 w-5" />
          ) : (
            <Maximize2 className="h-5 w-5" />
          )}
          <span className="sr-only">{zenMode ? 'Exit zen mode' : 'Zen mode'}</span>
        </Button>
        
        <Button
          variant="ghost"
          size="icon"
          className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
          onClick={onIncreaseFontSize}
        >
          <Plus className="h-5 w-5" />
          <span className="sr-only">Increase font</span>
        </Button>
        
        <Button
          variant="ghost"
          size="icon"
          className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
          onClick={onDecreaseFontSize}
        >
          <Minus className="h-5 w-5" />
          <span className="sr-only">Decrease font</span>
        </Button>
        
        <div className="h-6 w-px bg-sage/20 dark:bg-sage/10 mx-1"></div>
        
        {/* Action buttons */}
        <Button
          variant="ghost"
          size="icon"
          className={`btn-feedback p-2 rounded-full ${
            isLiked 
              ? 'text-russet' 
              : 'text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10'
          }`}
          onClick={handleLikeToggle}
        >
          <Heart className={`h-5 w-5 ${isLiked ? 'fill-russet' : ''}`} />
          <span className="sr-only">{isLiked ? 'Remove from favorites' : 'Add to favorites'}</span>
        </Button>
        
        <Button
          variant="ghost"
          size="icon"
          className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
          onClick={handleShare}
        >
          <Share2 className="h-5 w-5" />
          <span className="sr-only">Share</span>
        </Button>
        
        <Link href={`/works/${workSlug}/comments${translationId ? `?translation=${translationId}` : ''}`}>
          <Button
            variant="ghost"
            size="icon"
            className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
          >
            <MessageSquare className="h-5 w-5" />
            <span className="sr-only">Comments</span>
          </Button>
        </Link>
        
        <Link href={`/works/${workSlug}/citation${translationId ? `?translation=${translationId}` : ''}`}>
          <Button
            variant="ghost"
            size="icon"
            className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
          >
            <BookOpen className="h-5 w-5" />
            <span className="sr-only">Cite</span>
          </Button>
        </Link>
      </div>
    </div>
  );
}
