import { useParams, Link as RouterLink } from 'react-router-dom'
import { usePost, Comment } from '../../../hooks/useApi'
import { Card, Avatar, Separator, Skeleton } from '@heroui/react'
import { buttonVariants } from '@heroui/styles'

export default function PostDetailPage() {
  const { id } = useParams<{ id: string }>()
  const { post, isLoading, isError } = usePost(id || '')

  if (isLoading) {
    return (
      <div className="pb-20">
        <main className="container mx-auto px-4 py-8">
          <Card className="mx-auto max-w-4xl space-y-4 p-6">
            <Skeleton className="h-8 w-3/4 rounded-lg" />
            <Skeleton className="h-4 w-1/4 rounded-lg" />
            <Skeleton className="h-40 w-full rounded-lg" />
          </Card>
        </main>
      </div>
    )
  }

  if (isError || !post) {
    return (
      <div className="pb-20">
        <main className="container mx-auto px-4 py-8 text-center">
          <h1 className="mb-4 text-2xl font-bold">帖子未找到</h1>
          <RouterLink
            to="/posts"
            className={buttonVariants({ variant: 'secondary' })}
          >
            返回帖子列表
          </RouterLink>
        </main>
      </div>
    )
  }

  return (
    <div className="pb-20">
      <main className="container mx-auto px-4 py-8">
        <div className="mx-auto max-w-4xl">
          <div className="mb-4">
            <RouterLink
              to="/posts"
              className="text-default-500 hover:text-foreground"
            >
              &larr; 返回帖子列表
            </RouterLink>
          </div>

          <Card className="mb-8 p-6">
            <Card.Header className="flex flex-col items-start gap-2">
              <h1 className="text-3xl font-bold">{post.title}</h1>
              <div className="text-small text-default-500 flex items-center gap-2">
                <Avatar className="h-6 w-6">
                  <Avatar.Fallback>
                    {(post.user?.name || 'U').slice(0, 2).toUpperCase()}
                  </Avatar.Fallback>
                </Avatar>
                <span>{post.user?.name || '匿名用户'}</span>
                <span>•</span>
                <span>{new Date(post.createdAt).toLocaleString()}</span>
              </div>
            </Card.Header>
            <Separator className="my-4" />
            <Card.Content>
              <div className="text-lg leading-relaxed whitespace-pre-wrap">
                {post.content}
              </div>
            </Card.Content>
          </Card>

          {post.comments && post.comments.length > 0 && (
            <div className="space-y-4">
              <h3 className="text-xl font-bold">
                评论 ({post.comments.length})
              </h3>
              {post.comments.map((comment: Comment) => (
                <Card key={comment.id} className="p-4">
                  <div className="flex flex-col gap-2">
                    <div className="text-small text-default-500 flex items-center gap-2">
                      <span className="text-foreground font-semibold">
                        {comment.user?.name || '匿名用户'}
                      </span>
                      <span>
                        {new Date(comment.createdAt).toLocaleString()}
                      </span>
                    </div>
                    <p>{comment.content}</p>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </div>
      </main>
    </div>
  )
}
