import { useParams, Link as RouterLink } from 'react-router-dom';
import { SiteNavbar } from '../../../components/SiteNavbar';
import { usePost } from '../../../hooks/useApi';
import { Card, Button, Avatar, Divider, Skeleton } from '@heroui/react';
import { Link } from '@heroui/react';

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

  if (isLoading) {
    return (
      <div className="min-h-screen bg-background text-foreground">
        <SiteNavbar />
        <main className="container mx-auto px-4 py-8">
            <Card className="p-6 max-w-4xl mx-auto space-y-4">
                <Skeleton className="rounded-lg">
                    <div className="h-8 w-3/4 rounded-lg bg-default-300"></div>
                </Skeleton>
                <Skeleton className="rounded-lg">
                    <div className="h-4 w-1/4 rounded-lg bg-default-300"></div>
                </Skeleton>
                <Skeleton className="rounded-lg">
                    <div className="h-40 w-full rounded-lg bg-default-300"></div>
                </Skeleton>
            </Card>
        </main>
      </div>
    );
  }

  if (isError || !post) {
    return (
      <div className="min-h-screen bg-background text-foreground">
        <SiteNavbar />
        <main className="container mx-auto px-4 py-8 text-center">
          <h1 className="text-2xl font-bold mb-4">帖子未找到</h1>
          <Button as={RouterLink} to="/posts" color="primary">
            返回帖子列表
          </Button>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background text-foreground">
      <SiteNavbar />
      <main className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="mb-4">
            <Link as={RouterLink} to="/posts" className="text-default-500 hover:text-foreground">
              &larr; 返回帖子列表
            </Link>
          </div>
          
          <Card className="p-6 mb-8">
            <Card.Header className="flex flex-col items-start gap-2">
              <h1 className="text-3xl font-bold">{post.title}</h1>
              <div className="flex items-center gap-2 text-small text-default-500">
                <Avatar 
                    className="w-6 h-6" 
                    name={post.user?.name || ''} 
                    src={undefined} // Add user image if available in API
                />
                <span>{post.user?.name || '匿名用户'}</span>
                <span>•</span>
                <span>{new Date(post.createdAt).toLocaleString()}</span>
              </div>
            </Card.Header>
            <Divider className="my-4" />
            <Card.Content>
              <div className="whitespace-pre-wrap text-lg leading-relaxed">
                {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) => (
                <Card key={comment.id} className="p-4">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center gap-2 text-small text-default-500">
                      <span className="font-semibold text-foreground">{comment.user?.name || '匿名用户'}</span>
                      <span>{new Date(comment.createdAt).toLocaleString()}</span>
                    </div>
                    <p>{comment.content}</p>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}
