import { ArrowLeft, Heart, MessageCircle, Pin, Star } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { mockComments, mockOrders, mockPosts } from "@/lib/mock-data"

const roleLabels: Record<string, string> = {
  consumer: "玩家",
  player: "打手",
  owner: "店主",
}

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

  const comments = mockComments.filter((c) => c.postId === id)
  const linkedOrder = post.linkedOrderId
    ? mockOrders.find((o) => o.id === post.linkedOrderId)
    : null

  return (
    <div className="container mx-auto py-8 px-4 max-w-2xl">
      <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>
        <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">{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="h-40 w-40 rounded-md bg-muted flex items-center justify-center text-xs text-muted-foreground"
                >
                  图片
                </div>
              ))}
            </div>
          )}

          {linkedOrder && (
            <Link href={`/order/${linkedOrder.id}`}>
              <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">
                  {linkedOrder.service.title} · {linkedOrder.playerName} · ¥{linkedOrder.totalPrice}
                </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">
            <button
              type="button"
              className="flex items-center gap-1 hover:text-foreground transition-colors"
            >
              <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
              {post.likeCount}
            </button>
            <span className="flex items-center gap-1">
              <MessageCircle className="h-4 w-4" />
              {post.commentCount}
            </span>
          </div>
        </CardContent>
      </Card>

      <Separator className="my-6" />

      <div className="space-y-4">
        <h2 className="font-semibold">评论 ({comments.length})</h2>

        <div className="flex gap-3">
          <Textarea placeholder="写下你的评论..." className="flex-1" rows={2} />
          <Button className="self-end">发送</Button>
        </div>

        {comments.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-8">暂无评论，来抢沙发吧</p>
        ) : (
          <div className="space-y-4">
            {comments.map((comment) => (
              <div key={comment.id} className="flex gap-3">
                <Avatar className="h-8 w-8">
                  <AvatarImage src={comment.author.avatar} />
                  <AvatarFallback>{comment.author.nickname[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-0.5">
                    <span className="text-sm font-medium">{comment.author.nickname}</span>
                    <span className="text-xs text-muted-foreground">
                      {new Date(comment.createdAt).toLocaleString("zh-CN")}
                    </span>
                  </div>
                  <p className="text-sm">{comment.content}</p>
                  <button
                    type="button"
                    className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mt-1 transition-colors"
                  >
                    <Heart
                      className={`h-3 w-3 ${comment.liked ? "fill-red-500 text-red-500" : ""}`}
                    />
                    {comment.likeCount}
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}