import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Users, Lock, Globe } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"
import { GroupFeed } from "@/components/groups/group-feed"
import { JoinGroupButton } from "@/components/groups/join-group-button"

async function getGroup(id: string) {
    try {
        const res = await fetch(`${getApiUrl()}/groups/${id}`, { cache: 'no-store' })
        if (!res.ok) return null
        return res.json()
    } catch (e) {
        return null
    }
}

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

export default async function GroupDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params
    const group = await getGroup(id)
    const posts = await getGroupPosts(id)

    if (!group) {
        notFound()
    }

    return (
        <div className="flex flex-col gap-6">
            <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                    <Link href="/groups">
                        <Button variant="ghost" size="icon">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    </Link>
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
                            {group.name}
                            {group.privacy === 'private' ? <Lock className="h-4 w-4" /> : <Globe className="h-4 w-4" />}
                        </h1>
                        <p className="text-muted-foreground">{group.description}</p>
                    </div>
                </div>
                <JoinGroupButton groupId={group.id} />
            </div>

            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                <div className="flex flex-col gap-6">
                    <GroupFeed groupId={group.id} initialPosts={posts} />
                </div>

                <div className="flex flex-col gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>About</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="flex items-center text-sm">
                                <Users className="mr-2 h-4 w-4 text-muted-foreground" />
                                {group.member_count || 0} members
                            </div>
                            <div className="text-xs text-muted-foreground">
                                Created {new Date(group.created_at).toLocaleDateString()}
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}