"use client"

import { useState, useTransition } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Star } from "lucide-react"
import { toast } from "sonner"
import { reviewBook } from "@/lib/actions/book"
import { useRouter } from "next/navigation"

type ReviewFormProps = {
  bookId: string
  existingReview: boolean
}

export default function ReviewForm({ bookId, existingReview }: ReviewFormProps) {
  const [rating, setRating] = useState(0)
  const [hovered, setHovered] = useState(0)
  const [comment, setComment] = useState("")
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

  if (existingReview) return null

  function handleSubmit() {
    if (rating === 0) {
      toast.error("Please select a rating")
      return
    }
    if (!comment.trim()) {
      toast.error("Please write a review")
      return
    }

    startTransition(async () => {
      const result = await reviewBook(bookId, rating, comment)

      if (result.status === "success") {
        toast.success("Review submitted")
        router.refresh()
      } else {
        toast.error(result.message ?? "Failed to submit review")
      }
    })
  }

  return (
    <div className="border border-border/40 rounded-xl p-6 space-y-4 flex flex-col gap-3">
      <h3 className="font-semibold text-sm">Write a Review</h3>

      {/* Star Rating */}
      <div className="flex gap-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <button
            key={star}
            type="button"
            onClick={() => setRating(star)}
            onMouseEnter={() => setHovered(star)}
            onMouseLeave={() => setHovered(0)}
          >
            <Star
              className={`w-6 h-6 transition-colors ${
                star <= (hovered || rating)
                  ? "fill-yellow-500 text-yellow-500"
                  : "text-muted-foreground"
              }`}
            />
          </button>
        ))}
      </div>

      <Textarea
        placeholder="Share your thoughts about this book..."
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        rows={4}
        className="resize-none"
      />

      <Button
        onClick={handleSubmit}
        disabled={isPending}
        className="w-full"
        type="button"
      >
        {isPending ? "Submitting..." : "Submit Review"}
      </Button>
    </div>
  )
}