"use client";

import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { apiFetch, getToken } from "../../lib/auth";
import { useAuth } from "@/lib/auth-context";
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useT } from '@/i18n';
import { toast } from 'sonner';

interface Post { id: number; title: string; content: string; tags?: string | null; viewCount: number; likeCount: number; commentCount: number; createdAt: string; user: { id: number; nickname: string; avatar: string | null }; comments?: Comment[] }
interface Comment { id: number; content: string; createdAt: string; user: { id: number; nickname: string; avatar: string | null } }

export default function CommunityPage() {
  const t = useT();
  const router = useRouter();
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [tags, setTags] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [activeTab, setActiveTab] = useState<'latest' | 'feed'>('latest');
  const [followedUsers, setFollowedUsers] = useState<Set<number>>(new Set());
  const { isLoggedIn } = useAuth();

  const loadPosts = useCallback(async () => {
    setLoading(true);
    try {
      const token = getToken();
      const url = activeTab === 'feed' && token ? '/community/feed' : '/community/posts';
      const res = await apiFetch(url);
      const data = await res.json();
      setPosts(data.items || []);
    } catch { toast.error("数据加载失败") }
    setLoading(false);
  }, [activeTab]);

  useEffect(() => { loadPosts(); }, [loadPosts]);
  useEffect(() => { loadFollowStatus(); }, [posts]);

  async function loadFollowStatus() {
    const token = localStorage.getItem('token');
    if (!token) return;
    const followed = new Set<number>();
    for (const post of posts) {
      if (post.user?.id) {
        try {
          const res = await apiFetch(`/community/users/${post.user.id}/follow`);
          if (res.ok) { const d = await res.json(); if (d.followed) followed.add(post.user.id); }
        } catch { /* ignore */ }
      }
    }
    setFollowedUsers(followed);
  }

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim() || !content.trim()) return;
    setSubmitting(true);
    try {
      await apiFetch("/community/posts", { method: "POST", body: JSON.stringify({ title, content, tags: tags || undefined }) });
      setTitle(""); setContent(""); setTags(""); setShowForm(false);
      loadPosts();
    } catch { toast.error("发帖失败") }
    setSubmitting(false);
  }

  async function handleLike(postId: number) {
    try { await apiFetch(`/community/posts/${postId}/like`, { method: "POST" }); loadPosts(); } catch { toast.error("操作失败") }
  }

  async function handleFollow(userId: number) {
    const token = localStorage.getItem('token'); if (!token) return;
    try {
      const isFollowed = followedUsers.has(userId);
      await apiFetch(`/community/users/${userId}/follow`, { method: isFollowed ? 'DELETE' : 'POST' });
      setFollowedUsers(prev => { const next = new Set(prev); isFollowed ? next.delete(userId) : next.add(userId); return next; });
    } catch { toast.error("操作失败") }
  }

  function PostCard({ post }: { post: Post }) {
    const [expanded, setExpanded] = useState(false);
    const [comment, setComment] = useState("");
    const [submittingComment, setSubmittingComment] = useState(false);

    async function handleComment(e: React.FormEvent) {
      e.preventDefault();
      if (!comment.trim()) return;
      setSubmittingComment(true);
      try {
        await apiFetch(`/community/posts/${post.id}/comments`, { method: "POST", body: JSON.stringify({ content: comment }) });
        setComment(""); loadPosts();
      } catch { toast.error("评论失败") }
      setSubmittingComment(false);
    }

    return (
      <div className="bg-card rounded-xl border border-border p-6 mb-6">
        <div className="flex items-center gap-3 mb-3">
          <Link href={`/users/${post.user.id}`} className="flex items-center gap-3 group">
            <Avatar className="w-8 h-8">
              <AvatarFallback className="bg-brand-100 dark:bg-brand-900/40 text-brand-600 dark:text-brand-400 text-xs font-bold">{post.user.nickname?.[0] || "U"}</AvatarFallback>
            </Avatar>
            <div>
              <div className="text-sm font-medium text-foreground group-hover:text-brand-600">{post.user.nickname}</div>
              <div className="text-xs text-muted-foreground">{new Date(post.createdAt).toLocaleDateString()}</div>
            </div>
          </Link>
          {isLoggedIn && (
            <button onClick={() => handleFollow(post.user.id)}
              className={`ml-auto text-xs px-2 py-1 rounded transition-colors ${followedUsers.has(post.user.id) ? 'bg-muted text-muted-foreground hover:bg-accent' : 'bg-brand-50 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 hover:bg-brand-100 dark:hover:bg-brand-900/50'}`}>
              {followedUsers.has(post.user.id) ? t.community.followed : t.community.follow}
            </button>
          )}
        </div>
        <Link href={`/community/${post.id}`}>
          <h3 className="text-lg font-semibold text-foreground mb-2 hover:text-brand-600">{post.title}</h3>
        </Link>
        <p className="text-muted-foreground leading-relaxed mb-4 whitespace-pre-wrap">{post.content}</p>
        {post.tags && (
          <div className="flex gap-2 mb-4">
            {post.tags.split(",").map((tag: string) => (
              <span key={tag} className="text-xs px-2 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 rounded">{tag.trim()}</span>
            ))}
          </div>
        )}
        <div className="flex items-center gap-6 text-sm text-muted-foreground">
          <button onClick={() => handleLike(post.id)} className="flex items-center gap-1 hover:text-brand-600 transition-colors">❤️ {post.likeCount}</button>
          <button onClick={() => setExpanded(!expanded)} className="hover:text-brand-600 transition-colors">💬 {post.commentCount}</button>
          <span>👁 {post.viewCount}</span>
        </div>
        {expanded && (
          <div className="mt-4 pt-4 border-t border-border">
            {post.comments?.map((c: Comment) => (
              <div key={c.id} className="flex gap-3 mb-3">
                <Avatar className="w-6 h-6"><AvatarFallback className="text-[10px]">{c.user.nickname?.[0] || "U"}</AvatarFallback></Avatar>
                <div className="flex-1">
                  <div className="text-xs text-muted-foreground mb-1">{c.user.nickname} · {new Date(c.createdAt).toLocaleDateString()}</div>
                  <p className="text-sm text-muted-foreground">{c.content}</p>
                </div>
              </div>
            ))}
            <form onSubmit={handleComment} className="mt-3 flex gap-2">
              <input value={comment} onChange={e => setComment(e.target.value)} placeholder={t.community.commentPlaceholder}
                className="flex-1 px-3 py-2 bg-background border border-input rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
              <button type="submit" disabled={submittingComment}
                className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700 disabled:opacity-50">
                {submittingComment ? t.community.sending : t.community.comment}
              </button>
            </form>
          </div>
        )}
      </div>
    );
  }

  if (loading) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Skeleton className="h-8 w-48 mb-6" /><Skeleton className="h-4 w-32 mb-8" />
      <Skeleton className="h-64 w-full mb-4" /><Skeleton className="h-4 w-full mb-2" /><Skeleton className="h-4 w-3/4" />
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-foreground">{t.community.title}</h1>
          <p className="mt-2 text-muted-foreground">{t.community.desc}</p>
        </div>
        <button onClick={() => setShowForm(!showForm)}
          className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 transition-colors">
          {showForm ? t.common.cancel : t.community.createPost}
        </button>
      </div>

      <div className="flex gap-1 mb-6 bg-muted rounded-lg p-1">
        <button onClick={() => setActiveTab('latest')}
          className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${activeTab === 'latest' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}>{t.community.latest}</button>
        <button onClick={() => setActiveTab('feed')}
          className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${activeTab === 'feed' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}>{t.community.following}</button>
      </div>

      {showForm && (
        <form onSubmit={handleCreate} className="bg-card rounded-xl border border-border p-6 mb-6">
          <h3 className="text-lg font-semibold text-foreground mb-4">{t.community.newPost}</h3>
          <input value={title} onChange={e => setTitle(e.target.value)} placeholder={t.community.postTitle}
            className="w-full px-3 py-2 bg-background border border-input rounded-lg text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-ring" />
          <textarea value={content} onChange={e => setContent(e.target.value)} placeholder={t.community.contentPlaceholder} rows={4}
            className="w-full px-3 py-2 bg-background border border-input rounded-lg text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-ring resize-none" />
          <input value={tags} onChange={e => setTags(e.target.value)} placeholder={t.community.tagsPlaceholder}
            className="w-full px-3 py-2 bg-background border border-input rounded-lg text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-ring" />
          <div className="flex justify-end">
            <button type="submit" disabled={submitting}
              className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 disabled:opacity-50">
              {submitting ? t.community.publishing : t.community.publish}
            </button>
          </div>
        </form>
      )}

      {posts.length === 0 ? (
        <div className="text-center py-20 text-muted-foreground">
          <p>{activeTab === 'feed' ? t.community.feedEmpty : t.community.postsEmpty}</p>
        </div>
      ) : (
        <div>{posts.map(post => <PostCard key={post.id} post={post} />)}</div>
      )}
    </div>
  );
}
