"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  MessageSquare,
  Loader2,
  MessageCircle,
  BookOpen,
  Lightbulb,
  Megaphone,
  ChevronRight,
  Clock,
  User,
} from "lucide-react";

import { forumAPI } from "@/lib/api";
import type { ForumCategory, ForumPostSummary } from "@/types";

const CATEGORY_ICONS: Record<string, React.ReactNode> = {
  default: <MessageSquare className="w-5 h-5" />,
};

const CATEGORY_ORDER = ["公告", "通知", "学习", "讨论", "课程", "反馈", "使用"];

function getCategoryIcon(name: string) {
  if (name.includes("公告") || name.includes("通知"))
    return <Megaphone className="w-4 h-4" />;
  if (name.includes("学习") || name.includes("讨论") || name.includes("课程"))
    return <BookOpen className="w-4 h-4" />;
  if (name.includes("反馈") || name.includes("使用"))
    return <Lightbulb className="w-4 h-4" />;
  return CATEGORY_ICONS.default;
}

function getCategoryGradient(name: string) {
  if (name.includes("公告") || name.includes("通知"))
    return "from-rose-500/10 to-rose-50";
  if (name.includes("学习") || name.includes("讨论") || name.includes("课程"))
    return "from-blue-500/10 to-blue-50";
  if (name.includes("反馈") || name.includes("使用"))
    return "from-amber-500/10 to-amber-50";
  return "from-slate-500/10 to-slate-50";
}

function getCategoryAccent(name: string) {
  if (name.includes("公告") || name.includes("通知")) return "text-rose-600";
  if (name.includes("学习") || name.includes("讨论") || name.includes("课程")) return "text-blue-600";
  if (name.includes("反馈") || name.includes("使用")) return "text-amber-600";
  return "text-slate-600";
}

function formatRelativeTime(dateStr: string) {
  const date = new Date(
    new Date(dateStr).getTime() + 8 * 60 * 60 * 1000
  );
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMinutes = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  if (diffMinutes < 1) return "刚刚";
  if (diffMinutes < 60) return `${diffMinutes} 分钟前`;
  if (diffHours < 24) return `${diffHours} 小时前`;
  if (diffDays < 7) return `${diffDays} 天前`;
  return date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
}

export default function ForumHomePage() {
  const [categories, setCategories] = useState<ForumCategory[]>([]);
  const [categoryPosts, setCategoryPosts] = useState<
    Record<number, ForumPostSummary[]>
  >({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadCategories = async () => {
      try {
        setIsLoading(true);
        const data = await forumAPI.getCategories();
        setCategories(data);
        const postsEntries = await Promise.all(
          data.map(async (category) => {
            try {
              const posts = await forumAPI.getPosts(category.id, 3);
              return [category.id, posts] as const;
            } catch {
              return [category.id, []] as const;
            }
          })
        );
        setCategoryPosts(Object.fromEntries(postsEntries));
        setError(null);
      } catch (err) {
        const message =
          err instanceof Error ? err.message : "加载论坛数据失败";
        setError(message);
      } finally {
        setIsLoading(false);
      }
    };

    loadCategories();
  }, []);

  return (
    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-5">
      {isLoading ? (
        <div className="flex items-center justify-center gap-2 text-muted-foreground py-20">
          <Loader2 className="h-4 w-4 animate-spin" />
          正在加载社区...
        </div>
      ) : error ? (
        <div className="text-center py-16">
          <p className="text-muted-foreground">{error}</p>
        </div>
      ) : (
        <div className="space-y-3">
          {[...categories]
            .sort((a, b) => {
              const getOrder = (name: string) => {
                for (let i = 0; i < CATEGORY_ORDER.length; i++) {
                  if (name.includes(CATEGORY_ORDER[i])) return i;
                }
                return CATEGORY_ORDER.length;
              };
              return getOrder(a.name) - getOrder(b.name);
            })
            .map((category) => {
            const posts = categoryPosts[category.id] || [];
            return (
              <div
                key={category.id}
                className={`bg-gradient-to-r ${getCategoryGradient(
                  category.name
                )} rounded-xl border border-border/40 overflow-hidden`}
              >
                {/* Category header */}
                <div className="px-4 py-3 flex items-center justify-between border-b border-border/20">
                  <div className="flex items-center gap-2.5">
                    <span className={getCategoryAccent(category.name)}>
                      {getCategoryIcon(category.name)}
                    </span>
                    <div>
                      <h2 className="text-sm font-semibold text-foreground">
                        {category.name}
                      </h2>
                      {category.description && (
                        <p className="text-[11px] text-muted-foreground mt-0">
                          {category.description}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2.5">
                    <span className="text-[11px] text-muted-foreground tabular-nums">
                      {category.post_count} 条讨论
                    </span>
                    <Link
                      href={`/forum/${category.id}`}
                      className="text-[11px] font-medium text-primary hover:underline flex items-center gap-0.5"
                    >
                      查看全部
                      <ChevronRight className="w-3 h-3" />
                    </Link>
                  </div>
                </div>

                {/* Posts list */}
                <div className="divide-y divide-border/20">
                  {posts.length > 0 ? (
                    posts.map((post) => (
                      <Link
                        key={post.id}
                        href={`/forum/post/${post.id}`}
                        className="flex items-start gap-2.5 px-4 py-2.5 hover:bg-white/40 transition-colors group"
                      >
                        <div className="mt-0.5 w-6 h-6 rounded-full bg-muted/60 flex items-center justify-center flex-shrink-0">
                          <User className="w-3 h-3 text-muted-foreground" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-[13px] font-medium text-foreground group-hover:text-primary transition-colors line-clamp-1">
                            {post.title}
                          </p>
                          <div className="flex items-center gap-2 mt-0.5 text-[11px] text-muted-foreground">
                            <span>{post.author_name}</span>
                            <span className="inline-flex items-center gap-0.5">
                              <Clock className="w-2.5 h-2.5" />
                              {formatRelativeTime(post.created_at)}
                            </span>
                            <span className="inline-flex items-center gap-0.5">
                              <MessageCircle className="w-2.5 h-2.5" />
                              {post.reply_count}
                            </span>
                          </div>
                        </div>
                        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors mt-1 flex-shrink-0" />
                      </Link>
                    ))
                  ) : (
                    <div className="px-4 py-5 text-center text-xs text-muted-foreground">
                      暂无讨论，成为第一个发帖的人
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}