"use client"

import { Heart } from "lucide-react"
import { useState } from "react"
import { generateId } from "@/lib/id"
import type { Comment } from "@/lib/types"
import { useRequireAuth } from "@/lib/use-require-auth"
import { useAuthStore } from "@/store/auth"
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
import { Button } from "./ui/button"
import { Textarea } from "./ui/textarea"

interface PostCommentsProps {
  initialComments: Comment[]
  postId: string
}

export function PostComments({ initialComments, postId }: PostCommentsProps) {
  const [comments, setComments] = useState(initialComments)
  const [content, setContent] = useState("")
  const { requireAuth } = useRequireAuth()
  const user = useAuthStore((s) => s.user)

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

      <form
        className="flex gap-3"
        onSubmit={(event) => {
          event.preventDefault()
          requireAuth(() => {
            const nextContent = content.trim()
            if (!nextContent) return
            if (!user) return
            const createdAt = new Date().toISOString()
            setComments((prev) => [
              ...prev,
              {
                id: generateId(`comment-${postId}`),
                postId,
                author: user,
                content: nextContent,
                likeCount: 0,
                liked: false,
                createdAt,
              },
            ])
            setContent("")
          })
        }}
      >
        <Textarea
          placeholder="写下你的评论..."
          className="flex-1"
          rows={2}
          value={content}
          onChange={(event) => setContent(event.target.value)}
        />
        <Button className="self-end" disabled={!content.trim()}>
          发送
        </Button>
      </form>

      {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"
                  onClick={() =>
                    requireAuth(() => {
                      setComments((prev) =>
                        prev.map((item) => {
                          if (item.id !== comment.id) return item
                          const nextLiked = !item.liked
                          return {
                            ...item,
                            liked: nextLiked,
                            likeCount: nextLiked
                              ? item.likeCount + 1
                              : Math.max(0, item.likeCount - 1),
                          }
                        }),
                      )
                    })
                  }
                >
                  <Heart
                    className={`h-3 w-3 ${comment.liked ? "fill-red-500 text-red-500" : ""}`}
                  />
                  {comment.likeCount}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}