"use client"

import { useEffect, useState } from "react"
import { getApiUrl } from "@/lib/api-config"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar, MessageSquare, Star, Users } from "lucide-react"
import Link from "next/link"
import { WikiText } from "@/components/ui/wiki-text"

interface FeedItem {
    type: string
    timestamp: string
    data: any
    user: {
        id: number
        username: string
        avatar?: string
    }
}

export function ActivityFeed() {
    const [feed, setFeed] = useState<FeedItem[]>([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const fetchFeed = async () => {
            try {
                const res = await fetch(`${getApiUrl()}/feed/`)
                if (!res.ok) {
                    const text = await res.text()
                    console.error('Feed API error:', res.status, text)
                    setFeed([]) // Fallback to empty
                    return
                }
                const data = await res.json()
                setFeed(data)
            } catch (error) {
                console.error('Failed to fetch feed:', error)
                setFeed([])
            } finally {
                setLoading(false)
            }
        }
        fetchFeed()
    }, [])

    if (loading) return <div>Loading activity...</div>

    return (
        <div className="space-y-4">
            {feed.map((item, idx) => (
                <Card key={idx}>
                    <CardContent className="pt-6">
                        <div className="flex items-start gap-4">
                            {item.type === "review" && <Star className="h-5 w-5 text-yellow-500 mt-0.5" />}
                            {item.type === "attendance" && <Calendar className="h-5 w-5 text-blue-500 mt-0.5" />}
                            {item.type === "post" && <MessageSquare className="h-5 w-5 text-green-500 mt-0.5" />}

                            <div className="flex-1 space-y-1">
                                <p className="text-sm">
                                    <span className="font-medium">{item.user.username || "Anonymous"}</span>
                                    {item.type === "review" && " reviewed a show"}
                                    {item.type === "attendance" && " attended a show"}
                                    {item.type === "post" && " posted in a group"}
                                </p>
                                {item.type === "review" && (
                                    <div className="text-sm text-muted-foreground italic">
                                        "<WikiText text={item.data.blurb} />"
                                    </div>
                                )}
                                {item.type === "post" && (
                                    <p className="text-sm text-muted-foreground line-clamp-2">{item.data.content}</p>
                                )}
                                <p className="text-xs text-muted-foreground">
                                    {new Date(item.timestamp).toLocaleDateString()}
                                </p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            ))}
            {feed.length === 0 && (
                <p className="text-center text-muted-foreground">No recent activity.</p>
            )}
        </div>
    )
}