import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { getUserById, listPostsByAuthor } from "@/lib/api"
import { MessageSquare, ThumbsUp } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"

export default async function UserProfilePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const user = await getUserById(id)

  if (!user) {
    notFound()
  }

  const userPosts = await listPostsByAuthor(id)
  const favoriteCountText = "—"

  return (
    <div className="container mx-auto max-w-4xl px-4 py-8 space-y-6">
      <div className="flex items-center gap-6 mb-8">
        <Avatar className="w-24 h-24 border-4 border-background shadow-card">
          <AvatarImage src={user.avatar} alt={user.nickname} />
          <AvatarFallback>{user.nickname[0]}</AvatarFallback>
        </Avatar>
        <div className="space-y-2">
          <h1 className="text-2xl font-bold tracking-tighter leading-tight">{user.nickname}</h1>
          <p className="text-sm text-muted-foreground">{user.bio || "这个人很懒，什么都没写~"}</p>
          <div className="flex gap-4 text-sm text-muted-foreground">
            <span>{userPosts.length} 帖子</span>
            <span>{favoriteCountText} 收藏</span>
          </div>
        </div>
      </div>

      <Tabs defaultValue="posts">
        <TabsList>
          <TabsTrigger value="posts">帖子</TabsTrigger>
          <TabsTrigger value="favorites">收藏</TabsTrigger>
        </TabsList>

        <TabsContent value="posts" className="mt-4 space-y-4">
          {userPosts.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">暂无帖子</div>
          ) : (
            userPosts.map((post) => (
              <Link key={post.id} href={`/post/${post.id}`}>
                <Card>
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-base">{post.title}</CardTitle>
                      {post.pinned && <Badge variant="secondary">置顶</Badge>}
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
                      {post.content}
                    </p>
                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <ThumbsUp className="h-3 w-3" />
                        {post.likeCount}
                      </span>
                      <span className="flex items-center gap-1">
                        <MessageSquare className="h-3 w-3" />
                        {post.commentCount}
                      </span>
                      <span>{new Date(post.createdAt).toLocaleDateString("zh-CN")}</span>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))
          )}
        </TabsContent>

        <TabsContent value="favorites" className="mt-4 space-y-6">
          <div className="text-center py-12 text-muted-foreground">暂不支持查看用户收藏</div>
        </TabsContent>
      </Tabs>
    </div>
  )
}