import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Users } from "lucide-react"
import Link from "next/link"
import { getApiUrl } from "@/lib/api-config"

async function getGroups() {
    try {
        const res = await fetch(`${getApiUrl()}/groups/`, { cache: 'no-store' })
        if (!res.ok) return []
        return res.json()
    } catch (e) {
        console.error(e)
        return []
    }
}

export default async function GroupsPage() {
    const groups = await getGroups()

    return (
        <div className="flex flex-col gap-6">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Communities</h1>
                    <p className="text-muted-foreground">Join a group to connect with other fans.</p>
                </div>
                <Link href="/groups/create">
                    <Button>
                        <Plus className="mr-2 h-4 w-4" />
                        Create Group
                    </Button>
                </Link>
            </div>

            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {groups.length > 0 ? (
                    groups.map((group: any) => (
                        <Link key={group.id} href={`/groups/${group.id}`}>
                            <Card className="h-full hover:bg-muted/50 transition-colors">
                                <CardHeader>
                                    <CardTitle className="flex items-center justify-between">
                                        {group.name}
                                        {group.privacy === 'private' && (
                                            <span className="text-xs bg-secondary px-2 py-1 rounded-full font-normal">Private</span>
                                        )}
                                    </CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <p className="text-sm text-muted-foreground line-clamp-2 mb-4">
                                        {group.description || "No description"}
                                    </p>
                                    <div className="flex items-center text-xs text-muted-foreground">
                                        <Users className="mr-1 h-3 w-3" />
                                        {group.member_count || 0} members
                                    </div>
                                </CardContent>
                            </Card>
                        </Link>
                    ))
                ) : (
                    <div className="col-span-full text-center py-12 text-muted-foreground">
                        No groups found. Be the first to create one!
                    </div>
                )}
            </div>
        </div>
    )
}