"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import {
  MessageSquare, Eye, EyeOff, Trash2, Loader2, LogOut, Key,
  CornerDownRight, Send, Edit, X, Check
} from "lucide-react";

interface ArtalkPage {
  id: number; key: string; title: string; url: string;
  comment_count?: number; date: string;
}
interface ArtalkComment {
  id: number; content: string; nick: string; email: string;
  page_key: string; page_title: string; is_collapsed: boolean;
  is_pending: boolean; rid: number; date: string; ua: string;
}
interface UserInfo { name: string; email: string; }

const CACHE_KEY = "artalk_admin_cred";
const TOKEN_KEY = "artalk_admin_token";
const USER_KEY = "artalk_admin_user";

function lsGet(k: string) { try { return localStorage.getItem(k); } catch { return null; } }
function lsSet(k: string, v: string) { try { localStorage.setItem(k, v); } catch {} }
function lsDel(k: string) { try { localStorage.removeItem(k); } catch {} }

export default function CommentsPage() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [loginForm, setLoginForm] = useState({ email: "", password: "" });
  const [loginError, setLoginError] = useState("");
  const [loggingIn, setLoggingIn] = useState(false);
  const [remember, setRemember] = useState(true);

  const [pages, setPages] = useState<ArtalkPage[]>([]);
  const [selectedPage, setSelectedPage] = useState<ArtalkPage | null>(null);
  const [comments, setComments] = useState<ArtalkComment[]>([]);
  const [loadingPages, setLoadingPages] = useState(false);
  const [loadingComments, setLoadingComments] = useState(false);
  const [pagesTotal, setPagesTotal] = useState(0);
  const [error, setError] = useState<string | null>(null);
  const [editingTitle, setEditingTitle] = useState(false);
  const [editTitleText, setEditTitleText] = useState("");
  const [savingTitle, setSavingTitle] = useState(false);
  const [cleaning, setCleaning] = useState(false);
  const [viewMode, setViewMode] = useState<"comments" | "stats">("comments");
  const [stats, setStats] = useState<{
    topArticles: { title: string; comment_count: number }[];
    topUsers: { nick: string; count: number }[];
    totalArticles: number;
    totalComments: number;
    uniqueUsers: number;
  } | null>(null);
  const [loadingStats, setLoadingStats] = useState(false);
  const [token, setToken] = useState<string | null>(() => lsGet(TOKEN_KEY));
  const [user, setUser] = useState<UserInfo | null>(() => {
    const raw = lsGet(USER_KEY);
    return raw ? JSON.parse(raw) : null;
  });

  // Reply state
  const [replyingTo, setReplyingTo] = useState<number | null>(null);
  const [replyContent, setReplyContent] = useState("");
  const [sendingReply, setSendingReply] = useState(false);
  const replyRef = useRef<HTMLTextAreaElement>(null);

  // Auto-login
  useEffect(() => {
    const cachedToken = lsGet(TOKEN_KEY);
    const cachedUser = lsGet(USER_KEY);
    if (cachedToken && cachedUser) {
      setToken(cachedToken);
      setUser(JSON.parse(cachedUser));
      setLoggedIn(true);
      return;
    }
    const cachedCred = lsGet(CACHE_KEY);
    if (cachedCred) {
      try {
        const cred = JSON.parse(cachedCred);
        setLoginForm(cred);
        doLogin(cred);
      } catch {}
    }
  }, []);

  const doLogin = async (cred: { email: string; password: string }, showError = true) => {
    setLoggingIn(true);
    setLoginError("");
    try {
      const res = await fetch("/api/comments/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(cred),
      });
      if (!res.ok) { const d = await res.json(); throw new Error(d.error || "登录失败"); }
      const d = await res.json();
      const t = d.token;
      const u = d.user;
      if (remember) {
        lsSet(CACHE_KEY, JSON.stringify(cred));
        lsSet(TOKEN_KEY, t);
        lsSet(USER_KEY, JSON.stringify({ name: u.name, email: u.email }));
      }
      setToken(t);
      setUser({ name: u.name, email: u.email });
      setLoggedIn(true);
    } catch (err: unknown) {
      if (showError) setLoginError(err instanceof Error ? err.message : "登录失败");
      else { lsDel(CACHE_KEY); lsDel(TOKEN_KEY); lsDel(USER_KEY); }
    } finally { setLoggingIn(false); }
  };

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (!loginForm.email || !loginForm.password) { setLoginError("请填写邮箱和密码"); return; }
    doLogin(loginForm);
  };

  const handleLogout = () => {
    lsDel(CACHE_KEY); lsDel(TOKEN_KEY); lsDel(USER_KEY);
    setToken(null); setUser(null); setLoggedIn(false);
    setPages([]); setComments([]); setSelectedPage(null);
    setLoginForm({ email: "", password: "" });
  };

  // Fetch pages + sort by latest comment activity
  const fetchPages = useCallback(async () => {
    setLoadingPages(true);
    setError(null);
    try {
      // Fetch both Artalk pages and Hugo posts in parallel
      const p = new URLSearchParams({ limit: "300" });
      if (token) p.set("token", token);
      const [artalkRes, postsRes] = await Promise.all([
        fetch(`/api/comments?${p}`),
        fetch("/api/posts?perPage=9999"),
      ]);

      if (!artalkRes.ok) {
        if (artalkRes.status === 401) { setLoggedIn(false); lsDel(CACHE_KEY); lsDel(TOKEN_KEY); lsDel(USER_KEY); return; }
        throw new Error("加载失败");
      }

      const artalkData = await artalkRes.json();
      let allPages: ArtalkPage[] = artalkData.pages || [];
      setPagesTotal(artalkData.total || 0);

      // Match with Hugo posts to get MD file dates for sorting
      if (postsRes.ok) {
        const postsData = await postsRes.json();
        const posts: { title: string; date: string }[] = postsData.posts || [];
        // Build a map: title -> post date
        const dateMap = new Map<string, number>();
        for (const post of posts) {
          const t = post.title.trim();
          dateMap.set(t, new Date(post.date).getTime());
        }

        // Sort Artalk pages by matched MD date (newest first)
        allPages.sort((a, b) => {
          const da = dateMap.get((a.title || "").trim());
          const db = dateMap.get((b.title || "").trim());
          if (da && db) return db - da;
          if (da) return -1;
          if (db) return 1;
          return 0;
        });
      }

      setPages(allPages);
      if (!selectedPage && allPages.length > 0) {
        setSelectedPage(allPages[0]);
      }
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "加载失败");
    } finally { setLoadingPages(false); }
  }, [token]);

  useEffect(() => { if (loggedIn && token) fetchPages(); }, [fetchPages, loggedIn, token]);

  // Load comments when page selected
  useEffect(() => {
    if (!selectedPage) return;
    setLoadingComments(true);
    setError(null);
    (async () => {
      try {
        const p = new URLSearchParams({ page_key: selectedPage.key, limit: "200" });
        if (token) p.set("token", token);
        const res = await fetch(`/api/comments?${p}`);
        if (!res.ok) throw new Error("加载失败");
        const data = await res.json();
        const seen = new Set<number>();
        const unique: ArtalkComment[] = [];
        for (const c of data.comments || []) {
          if (!seen.has(c.id)) { seen.add(c.id); unique.push(c); }
        }
        // Sort newest first
        unique.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
        setComments(unique);
        // Update comment count for this page
        setPages((prev) => prev.map((p) => p.key === selectedPage.key ? { ...p, comment_count: unique.length } : p));

        // Auto-sync title from blog post
        try {
          const slug = selectedPage.key.replace(/^\//, "").replace(/\.html$/, "");
          if (slug) {
            const postRes = await fetch(`/api/posts/${slug}`);
            if (postRes.ok) {
              const post = await postRes.json();
              const realTitle = post.frontMatter?.title || "";
              if (realTitle && realTitle.trim() !== (selectedPage.title || "").trim()) {
                // Title differs — auto-update Artalk page
                await fetch(`/api/comments/pages/${selectedPage.id}`, {
                  method: "PUT",
                  headers: { "Content-Type": "application/json" },
                  body: JSON.stringify({ key: selectedPage.key, title: realTitle, admin_only: false }),
                });
                // Update local state
                setSelectedPage((prev) => prev ? { ...prev, title: realTitle } : prev);
                setPages((prev) => prev.map((p) => p.id === selectedPage.id ? { ...p, title: realTitle } : p));
              }
            }
          }
        } catch { /* silent */ }
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : "加载失败");
      } finally { setLoadingComments(false); }
    })();
  }, [selectedPage, token]);

  const handleToggleVisibility = async (c: ArtalkComment) => {
    try {
      const body: Record<string, unknown> = { is_collapsed: !c.is_collapsed };
      if (token) body.token = token;
      await fetch(`/api/comments/${c.id}`, {
        method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
      });
      setComments((prev) => prev.map((x) => x.id === c.id ? { ...x, is_collapsed: !x.is_collapsed } : x));
    } catch { setError("操作失败"); }
  };

  const handleDelete = async (c: ArtalkComment) => {
    if (!confirm(`确定删除「${c.nick}」的评论？`)) return;
    try {
      const body: Record<string, unknown> = {};
      if (token) body.token = token;
      await fetch(`/api/comments/${c.id}`, {
        method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
      });
      setComments((prev) => prev.filter((x) => x.id !== c.id));
      if (selectedPage) {
        setPages((prev) => prev.map((p) => p.key === selectedPage.key ? { ...p, comment_count: Math.max(0, (p.comment_count ?? 0) - 1) } : p));
      }
    } catch { setError("删除失败"); }
  };

  const handleReply = async () => {
    if (!replyContent.trim() || !selectedPage || !user) return;
    setSendingReply(true);
    try {
      const body: Record<string, unknown> = {
        page_key: selectedPage.key,
        content: replyContent,
        name: user.name,
        email: user.email,
      };
      if (replyingTo) body.rid = replyingTo;
      if (token) body.token = token;

      const res = await fetch("/api/comments", {
        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error("回复失败");
      const newComment = await res.json();

      // Add new comment to list
      setComments((prev) => [newComment, ...prev]);
      if (selectedPage) {
        setPages((prev) => prev.map((p) => p.key === selectedPage.key ? { ...p, comment_count: (p.comment_count ?? 0) + 1 } : p));
      }
      setReplyContent("");
      setReplyingTo(null);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "回复失败");
    } finally { setSendingReply(false); }
  };

  const startReply = (commentId: number) => {
    setReplyingTo(commentId);
    setReplyContent("");
    setTimeout(() => replyRef.current?.focus(), 50);
  };

  const handleSaveTitle = async () => {
    if (!selectedPage || !editTitleText.trim()) return;
    setSavingTitle(true);
    try {
      const res = await fetch(`/api/comments/pages/${selectedPage.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: selectedPage.key,
          title: editTitleText.trim(),
          admin_only: false,
        }),
      });
      if (!res.ok) throw new Error("更新失败");
      setSelectedPage({ ...selectedPage, title: editTitleText.trim() });
      setPages((prev) =>
        prev.map((p) => (p.id === selectedPage.id ? { ...p, title: editTitleText.trim() } : p))
      );
      setEditingTitle(false);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "更新标题失败");
    } finally { setSavingTitle(false); }
  };

  const startEditTitle = () => {
    if (!selectedPage) return;
    setEditTitleText(selectedPage.title || "");
    setEditingTitle(true);
  };

  const handleCleanup = async () => {
    if (!confirm("将删除重复且评论数为0的页面，确定继续？")) return;
    if (!token) return;
    setCleaning(true);
    setError(null);
    try {
      const res = await fetch("/api/comments/cleanup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "清理失败");
      setError(null);
      alert(`清理完成：共 ${data.total} 个页面，${data.duplicateGroups} 组重复，删除了 ${data.deleted} 个。`);
      fetchPages();
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "清理失败");
    } finally { setCleaning(false); }
  };

  const handleDeletePage = async (page: ArtalkPage) => {
    if (!confirm(`确定删除页面「${page.title || "(无标题)"}」吗？\n此操作不可撤销，该页面的所有评论也将被删除。`)) return;
    if (!token) return;
    try {
      const res = await fetch(`/api/comments/pages/${page.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key: page.key, title: page.title, admin_only: false }),
      });
      // Delete via Artalk directly
      const delRes = await fetch(`https://artalk.usj.cc/api/v2/pages/${page.id}`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ site_name: "优世界" }),
      });
      if (!delRes.ok) throw new Error("删除失败");
      setPages((prev) => prev.filter((p) => p.id !== page.id));
      if (selectedPage?.id === page.id) {
        setSelectedPage(null);
        setComments([]);
      }
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "删除页面失败");
    }
  };

  const fetchStats = async () => {
    if (!token) return;
    setLoadingStats(true);
    setViewMode("stats");
    try {
      const res = await fetch(`/api/comments/stats?token=${encodeURIComponent(token)}`);
      if (!res.ok) throw new Error("加载失败");
      setStats(await res.json());
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "加载统计失败");
    } finally { setLoadingStats(false); }
  };

  const fmtDate = (d: string) => d ? new Date(d).toLocaleString("zh-CN") : "-";
  const stripHtml = (h: string) => h.replace(/<[^>]*>/g, "").slice(0, 300);

  // --- Login ---
  if (!loggedIn) {
    return (
      <div className="min-h-full flex items-center justify-center px-4 md:px-8">
        <div className="w-full max-w-[340px] mx-auto bg-card border border-line rounded-lg p-6 md:p-8">
          <div className="text-center mb-6">
            <div className="w-10 h-10 bg-accent/8 rounded-full flex items-center justify-center mx-auto mb-3">
              <Key size={18} className="text-accent" />
            </div>
            <h2 className="text-[15px] font-bold text-text">评论管理</h2>
            <p className="text-[12px] text-muted mt-1">Artalk 管理员登录</p>
          </div>
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-[12px] font-medium text-text/70 mb-1.5">邮箱</label>
              <input type="email" value={loginForm.email}
                onChange={(e) => setLoginForm({ ...loginForm, email: e.target.value })}
                className="w-full bg-bg border border-line rounded-md px-3 py-2.5 text-[13px] text-text focus:outline-none focus:border-accent/30"
                placeholder="管理员邮箱" autoComplete="email" />
            </div>
            <div>
              <label className="block text-[12px] font-medium text-text/70 mb-1.5">密码</label>
              <input type="password" value={loginForm.password}
                onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })}
                className="w-full bg-bg border border-line rounded-md px-3 py-2.5 text-[13px] text-text focus:outline-none focus:border-accent/30"
                placeholder="管理员密码" autoComplete="current-password" />
            </div>
            <label className="flex items-center gap-2 text-[12px] text-muted cursor-pointer">
              <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} className="rounded accent-accent" />
              记住登录
            </label>
            {loginError && <div className="p-3 rounded-md bg-[#fee2e2] text-[#991b1b] border border-[#fecaca] text-[12px]">{loginError}</div>}
            <button type="submit" disabled={loggingIn}
              className="w-full py-2.5 text-[13px] font-medium rounded-md bg-accent text-white hover:bg-accent-hover disabled:opacity-50 transition-colors flex items-center justify-center gap-2">
              {loggingIn ? <><Loader2 size={14} className="animate-spin" /> 登录中...</> : "登录"}
            </button>
          </form>
        </div>
      </div>
    );
  }

  // --- Main ---
  return (
    <div className="h-full flex flex-col px-4 py-4 md:px-8 md:py-6">
      {/* Top bar */}
      <div className="flex items-center justify-between mb-5 shrink-0 gap-3 flex-wrap">
        <h2 className="text-lg font-bold text-text">评论管理</h2>
        <div className="flex items-center gap-2">
          <button type="button" onClick={() => setViewMode("comments")}
            className={`px-3 py-1.5 text-[12px] rounded-md border transition-colors ${
              viewMode === "comments" ? "bg-accent text-white border-accent" : "border-line text-muted hover:text-accent"
            }`}>管理</button>
          <button type="button" onClick={fetchStats}
            className={`px-3 py-1.5 text-[12px] rounded-md border transition-colors ${
              viewMode === "stats" ? "bg-accent text-white border-accent" : "border-line text-muted hover:text-accent"
            }`}>统计</button>
        </div>
        <div className="flex items-center gap-3">
          {user && <span className="text-[12px] text-muted">{user.name}</span>}
          <button type="button" onClick={handleCleanup} disabled={cleaning}
            className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md border border-line text-muted hover:text-accent hover:border-accent/20 transition-colors disabled:opacity-50">
            {cleaning ? "清理中..." : "去重清理"}
          </button>
          <button type="button" onClick={handleLogout}
            className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md border border-line text-muted hover:text-danger hover:border-danger/20 transition-colors">
            <LogOut size={13} /> 退出
          </button>
        </div>
      </div>

      {error && (
        <div className="mb-4 px-4 py-2.5 rounded-md bg-[#fee2e2] text-[#991b1b] border border-[#fecaca] text-[12px] flex items-center justify-between shrink-0">
          <span>{error}</span>
          <button type="button" onClick={() => setError(null)} className="underline">关闭</button>
        </div>
      )}

      {/* Stats view */}
      {viewMode === "stats" && (
        <div className="flex-1 min-h-0 overflow-y-auto">
          {loadingStats ? (
            <div className="flex items-center gap-2 text-[13px] text-muted py-20 justify-center">
              <Loader2 size={14} className="animate-spin" /> 加载统计数据...
            </div>
          ) : stats ? (
            <div className="space-y-6">
              {/* Summary cards */}
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                {[
                  { label: "文章总数", value: stats.totalArticles },
                  { label: "评论总数", value: stats.totalComments },
                  { label: "评论用户", value: stats.uniqueUsers },
                ].map((s) => (
                  <div key={s.label} className="bg-card border border-line rounded-lg p-4 text-center">
                    <div className="text-[11px] text-muted mb-1">{s.label}</div>
                    <div className="text-[22px] font-bold text-accent">{s.value}</div>
                  </div>
                ))}
              </div>

              {/* Top articles & top users side by side */}
              <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 min-h-0">
                {/* Top articles */}
                <div className="flex-1 bg-card border border-line rounded-lg p-5">
                  <h3 className="text-[13px] font-bold text-text mb-4">评论最多的文章 Top 20</h3>
                  <div className="space-y-1">
                    {stats.topArticles.map((a, i) => (
                      <div key={i} className="flex items-center gap-3 py-1.5 text-[13px]">
                        <span className={`w-6 text-center font-bold text-[11px] rounded-full ${
                          i < 3 ? "bg-accent text-white" : "text-muted"
                        }`}>{i + 1}</span>
                        <span className="flex-1 text-text truncate">{a.title}</span>
                        <span className="text-muted font-medium shrink-0">{a.comment_count} 条</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Top commenters */}
                <div className="flex-1 bg-card border border-line rounded-lg p-5">
                  <h3 className="text-[13px] font-bold text-text mb-4">最活跃的用户 Top 30</h3>
                  <div className="space-y-1">
                    {stats.topUsers.map((u, i) => (
                      <div key={i} className="flex items-center gap-3 py-1.5 text-[13px]">
                        <span className={`w-6 text-center font-bold text-[11px] rounded-full ${
                          i < 3 ? "bg-accent text-white" : "text-muted"
                        }`}>{i + 1}</span>
                        <span className="flex-1 text-text truncate">{u.nick}</span>
                        <span className="text-muted font-medium shrink-0">{u.count} 条</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ) : null}
        </div>
      )}

      {/* Two columns — only in comments mode */}
      {viewMode === "comments" && (
      <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 flex-1 min-h-0">
        {/* Left: Articles */}
        <div className="w-full sm:w-[240px] shrink-0 flex flex-col min-h-0 sm:max-h-full">
          <div className="text-[11px] font-medium text-muted uppercase tracking-wider mb-2.5 shrink-0">
            文章列表 {pagesTotal > 0 && <span className="font-normal normal-case">· {pagesTotal}</span>}
          </div>

          {loadingPages ? (
            <div className="flex items-center gap-2 text-[12px] text-muted py-12 justify-center">
              <Loader2 size={13} className="animate-spin" /> 加载中
            </div>
          ) : (
            <div className="flex-1 overflow-y-auto bg-card border border-line rounded-md">
              {pages.map((p) => (
                <div key={p.id}
                  className={`flex items-center border-b border-line/50 text-[13px] transition-colors hover:bg-surface ${
                    selectedPage?.key === p.key ? "bg-accent/5 border-l-[3px] border-l-accent" : ""
                  }`}>
                  <button type="button" onClick={() => setSelectedPage(p)}
                    className="flex-1 text-left px-3.5 py-2.5 min-w-0">
                    <div className="text-text truncate font-medium">{p.title || "(无标题)"}</div>
                    <div className="text-[11px] text-muted mt-0.5">
                      {p.comment_count != null ? `${p.comment_count} 条评论` : "..."}
                    </div>
                  </button>
                  <button
                    type="button"
                    onClick={(e) => { e.stopPropagation(); handleDeletePage(p); }}
                    className="shrink-0 px-2 py-1 mr-1 text-[11px] text-muted/30 hover:text-danger rounded transition-colors"
                    title="删除此页面"
                  >
                    ✕
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Right: Comments */}
        <div className="flex-1 flex flex-col min-h-0 min-w-0">
          {selectedPage ? (
            <>
              <div className="flex items-center gap-2 mb-2.5 shrink-0">
                {editingTitle ? (
                  <div className="flex items-center gap-1.5 flex-1 min-w-0">
                    <input
                      type="text"
                      value={editTitleText}
                      onChange={(e) => setEditTitleText(e.target.value)}
                      className="flex-1 bg-card border border-line rounded-md px-2 py-1 text-[13px] text-text focus:outline-none focus:border-accent/30"
                      onKeyDown={(e) => { if (e.key === "Enter") handleSaveTitle(); if (e.key === "Escape") setEditingTitle(false); }}
                      autoFocus
                    />
                    <button type="button" onClick={handleSaveTitle} disabled={savingTitle}
                      className="p-1 rounded text-success hover:bg-success/10" title="保存">
                      {savingTitle ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />}
                    </button>
                    <button type="button" onClick={() => setEditingTitle(false)}
                      className="p-1 rounded text-muted hover:text-text" title="取消">
                      <X size={13} />
                    </button>
                  </div>
                ) : (
                  <>
                    <span className="text-[11px] font-medium text-muted uppercase tracking-wider">{selectedPage.title}</span>
                    <button type="button" onClick={startEditTitle}
                      className="p-0.5 rounded text-muted/40 hover:text-accent transition-colors" title="编辑标题">
                      <Edit size={11} />
                    </button>
                  </>
                )}
                <span className="text-[11px] text-muted/50 font-normal normal-case ml-auto">{comments.length} 条</span>
              </div>

              {loadingComments ? (
                <div className="flex items-center gap-2 text-[12px] text-muted py-12 justify-center">
                  <Loader2 size={13} className="animate-spin" /> 加载评论
                </div>
              ) : (
                <div className="flex-1 overflow-y-auto space-y-1.5">
                  {comments.length === 0 && (
                    <div className="flex items-center justify-center h-32 bg-card border border-line rounded-md text-[13px] text-muted">
                      暂无评论
                    </div>
                  )}
                  {comments.map((c) => (
                    <div key={c.id} className={`px-4 py-3 rounded-md border ${
                      c.is_collapsed ? "bg-surface border-line/40 opacity-55" : "bg-card border-line"
                    }`}>
                      <div className="flex items-start justify-between gap-3">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-medium text-[13px] text-text">{c.nick}</span>
                            {c.rid > 0 && <span className="text-[10px] text-accent bg-accent/8 px-1.5 py-px rounded">回复</span>}
                            {c.is_collapsed && <span className="text-[10px] text-[#92400e] bg-[#fef3c7] px-1.5 py-px rounded">已隐藏</span>}
                          </div>
                          {/* Parent comment preview */}
                          {c.rid > 0 && (() => {
                            const parent = comments.find((x) => x.id === c.rid);
                            return parent ? (
                              <div className="mb-2 pl-2.5 border-l-2 border-accent/15 text-[12px] text-muted">
                                <span className="font-medium">{parent.nick}</span>
                                <span className="mx-1">:</span>
                                {stripHtml(parent.content).slice(0, 60)}
                                {(parent.content || "").replace(/<[^>]*>/g, "").length > 60 ? "..." : ""}
                              </div>
                            ) : null;
                          })()}
                          <p className="text-[13px] text-text/75 leading-relaxed break-words">{stripHtml(c.content)}</p>
                          <div className="flex items-center gap-3 mt-2 text-[11px] text-muted/70">
                            <span>{fmtDate(c.date)}</span>
                            <span>{c.ua?.includes("Mobile") ? "📱" : "💻"}</span>
                            <button type="button" onClick={() => startReply(c.id)}
                              className="text-accent/60 hover:text-accent transition-colors flex items-center gap-0.5">
                              <CornerDownRight size={11} /> 回复
                            </button>
                          </div>

                          {/* Inline reply form */}
                          {replyingTo === c.id && (
                            <div className="mt-3 pt-3 border-t border-line/50">
                              <textarea
                                ref={replyRef}
                                value={replyContent}
                                onChange={(e) => setReplyContent(e.target.value)}
                                rows={3}
                                className="w-full bg-bg border border-line rounded-md px-3 py-2 text-[13px] text-text focus:outline-none focus:border-accent/30 resize-none"
                                placeholder={`回复 ${c.nick}...`}
                              />
                              <div className="flex items-center justify-between mt-2">
                                <span className="text-[11px] text-muted">
                                  以 {user?.name} 身份回复
                                </span>
                                <div className="flex items-center gap-2">
                                  <button type="button" onClick={() => { setReplyingTo(null); setReplyContent(""); }}
                                    className="px-3 py-1 text-[12px] rounded border border-line text-muted hover:bg-surface transition-colors">
                                    取消
                                  </button>
                                  <button type="button" onClick={handleReply} disabled={sendingReply || !replyContent.trim()}
                                    className="flex items-center gap-1 px-3 py-1 text-[12px] font-medium rounded bg-accent text-white hover:bg-accent-hover disabled:opacity-50 transition-colors">
                                    {sendingReply ? <Loader2 size={12} className="animate-spin" /> : <Send size={12} />}
                                    {sendingReply ? "发送中" : "回复"}
                                  </button>
                                </div>
                              </div>
                            </div>
                          )}
                        </div>
                        <div className="flex items-center gap-0.5 shrink-0">
                          <button type="button" onClick={() => handleToggleVisibility(c)}
                            className="p-1 rounded hover:bg-surface text-muted/50 hover:text-text transition-colors"
                            title={c.is_collapsed ? "显示" : "隐藏"}>
                            {c.is_collapsed ? <Eye size={13} /> : <EyeOff size={13} />}
                          </button>
                          <button type="button" onClick={() => handleDelete(c)}
                            className="p-1 rounded hover:bg-danger/8 text-muted/50 hover:text-danger transition-colors" title="删除">
                            <Trash2 size={13} />
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </>
          ) : (
            <div className="flex-1 flex items-center justify-center bg-card border border-line rounded-md text-[13px] text-muted">
              <MessageSquare size={18} className="mr-2 text-muted/30" />
              选择左侧文章查看评论
            </div>
          )}
        </div>
      </div>
      )}
    </div>
  );
}