import { PostCommentCount } from "@/components/post-comment-count"
import { PostComments } from "@/components/post-comments"
import { PostLikeButton } from "@/components/post-like-button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { getPostById } from "@/lib/api"
import { roleLabels } from "@/lib/constants"
import { ArrowLeft, Pin, Star } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { notFound } from "next/navigation"

export default async function PostDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const post = await getPostById(id)
  if (!post) notFound()

  return (
    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
      <Link
        href="/community"
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
      >
        <ArrowLeft className="h-4 w-4" />
        返回社区
      </Link>

      <Card className="hover:shadow-card-hover">
        <CardHeader className="pb-3">
          <div className="flex items-center gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src={post.author.avatar} />
              <AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="font-medium">{post.author.nickname}</span>
                <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                  {roleLabels[post.authorRole]}
                </Badge>
                {post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
              </div>
              <span className="text-xs text-muted-foreground">
                {new Date(post.createdAt).toLocaleString("zh-CN")}
              </span>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <h1 className="text-xl font-bold tracking-tighter leading-tight">{post.title}</h1>
          <p className="text-sm leading-relaxed whitespace-pre-wrap">{post.content}</p>

          {post.images.length > 0 && (
            <div className="flex gap-2 flex-wrap">
              {post.images.map((img) => (
                <div key={img} className="relative h-40 w-40 rounded-lg overflow-hidden bg-muted">
                  <Image src={img} alt="帖子图片" fill className="object-cover" />
                </div>
              ))}
            </div>
          )}

          {post.linkedOrderId && (
            <Link href={`/order/${post.linkedOrderId}`}>
              <div className="rounded-lg border bg-muted/30 p-3 text-sm hover:bg-muted/50 transition-colors">
                <div className="flex items-center gap-2 mb-1">
                  <Star className="h-3.5 w-3.5 text-yellow-500" />
                  <span className="font-medium">关联订单</span>
                </div>
                <p className="text-muted-foreground text-xs">点击查看订单详情</p>
              </div>
            </Link>
          )}

          {post.tags.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {post.tags.map((tag) => (
                <Badge key={tag} variant="secondary" className="text-xs">
                  {tag}
                </Badge>
              ))}
            </div>
          )}

          <div className="flex items-center gap-4 text-sm text-muted-foreground pt-2">
            <PostLikeButton
              postId={post.id}
              initialLiked={post.liked}
              initialLikeCount={post.likeCount}
            />
            <PostCommentCount count={post.commentCount} />
          </div>
        </CardContent>
      </Card>

      <Separator className="my-6" />

      <PostComments postId={id} />
    </div>
  )
}