"use client"

import { useEffect, useState } from "react"
import { PostCard } from "@/components/posts/post-card"
import { ThreadView } from "@/components/posts/thread-view"
import { InlineCreatePost } from "@/components/posts/inline-create-post"
import type { Post, Reply } from "@/types/post"
import { toggleLike } from "@/actions/post-actions"
import { toast } from "sonner"

interface FeedClientProps {
  initialPosts: Post[]
}

export function FeedClient({ initialPosts }: FeedClientProps) {
  const [posts, setPosts] = useState<Post[]>(initialPosts)
  const [selectedPost, setSelectedPost] = useState<Post | null>(null)
  const [isThreadViewOpen, setIsThreadViewOpen] = useState(false)

  const handleNewPost = (post: Post) => {
    setPosts([post, ...posts])
  }

  const handleLike = async (postId: string) => {
    // Optimistic update
    setPosts(
      posts.map((post) =>
        post.id === postId
          ? {
              ...post,
              isLiked: !post.isLiked,
              likesCount: post.isLiked ? (post.likesCount || 0) - 1 : (post.likesCount || 0) + 1,
            }
          : post,
      ),
    )

    // Server update
    const result = await toggleLike(postId)
    if (!result.success) {
      // Revert optimistic update on error
      setPosts(
        posts.map((post) =>
          post.id === postId
            ? {
                ...post,
                isLiked: !post.isLiked,
                likesCount: post.isLiked ? (post.likesCount || 0) + 1 : (post.likesCount || 0) - 1,
              }
            : post,
        ),
      )
      toast.error(result.error || "Failed to like post")
    }
  }

  const handleReply = (postId: string, reply: Reply) => {
    setPosts(
      posts.map((post) =>
        post.id === postId
          ? { ...post, replies: [...(post.replies || []), reply], repliesCount: (post.repliesCount || 0) + 1 }
          : post,
      ),
    )
  }

  const handleOpenThread = (post: Post) => {
    setSelectedPost(post)
    setIsThreadViewOpen(true)
  }

  return (
    <>
      <div className="space-y-3 sm:space-y-4">
        <InlineCreatePost onPost={handleNewPost} />

        <div className="space-y-2">
          <h2 className="text-base sm:text-lg font-semibold text-accent">Latest Posts</h2>
          {posts.length === 0 ? (
            <div className="bg-card rounded-xl border border-border p-6 sm:p-8 text-center">
              <p className="text-sm sm:text-base text-muted-foreground">No posts yet. Be the first to share something!</p>
            </div>
          ) : (
            posts.map((post) => (
              <PostCard key={post.id} post={post} onLike={handleLike} onClick={() => handleOpenThread(post)} />
            ))
          )}
        </div>
      </div>

      <ThreadView
        post={selectedPost}
        open={isThreadViewOpen}
        onOpenChange={setIsThreadViewOpen}
        onLike={handleLike}
        onReply={handleReply}
      />
    </>
  )
}