"use client"

import { useState, useEffect } from "react"
import { ReviewCard } from "@/components/reviews/review-card"
import { ReviewForm } from "@/components/reviews/review-form"
import { getApiUrl } from "@/lib/api-config"

interface Review {
    id: number
    user_id: number
    blurb: string
    content: string
    score: number
    created_at: string
}

export type EntityType = "show" | "venue" | "song" | "performance" | "tour" | "year"

interface EntityReviewsProps {
    entityType: EntityType
    entityId: number
    initialReviews?: Review[]
}

export function EntityReviews({ entityType, entityId, initialReviews = [] }: EntityReviewsProps) {
    const [reviews, setReviews] = useState<Review[]>(initialReviews)

    // Fetch reviews on mount if not provided (or to refresh)
    useEffect(() => {
        if (initialReviews.length === 0) {
            fetchReviews()
        }
    }, [entityType, entityId])

    const fetchReviews = async () => {
        try {
            const param = `${entityType}_id`
            // Special case for 'year' which might just be 'year' param if we followed standard, but our API uses 'year'
            const queryParam = entityType === 'year' ? 'year' : `${entityType}_id`

            const res = await fetch(`${getApiUrl()}/reviews/?${queryParam}=${entityId}`)
            if (res.ok) {
                const data = await res.json()
                setReviews(data)
            }
        } catch (err) {
            console.error("Failed to fetch reviews", err)
        }
    }

    const handleSubmit = async (data: { blurb: string; content: string; score: number }) => {
        const token = localStorage.getItem("token")
        if (!token) {
            alert("Please log in to leave a review.")
            return
        }

        try {
            const body: any = { ...data }
            if (entityType === 'year') {
                body.year = entityId
            } else {
                body[`${entityType}_id`] = entityId
            }

            const res = await fetch(`${getApiUrl()}/reviews/`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`
                },
                body: JSON.stringify(body)
            })

            if (!res.ok) throw new Error("Failed to post review")

            const newReview = await res.json()
            setReviews(prev => [newReview, ...prev])
            alert("Review posted!")
        } catch (err) {
            console.error(err)
            alert("Error posting review")
        }
    }

    return (
        <div className="space-y-6 pt-6 border-t">
            <h2 className="text-2xl font-bold">Reviews</h2>

            <ReviewForm onSubmit={handleSubmit} />

            <div className="space-y-4">
                {reviews.length === 0 ? (
                    <p className="text-muted-foreground">No reviews yet. Be the first!</p>
                ) : (
                    reviews.map(review => (
                        <ReviewCard
                            key={review.id}
                            review={review}
                        />
                    ))
                )}
            </div>
        </div>
    )
}
