import { useState, useEffect } from 'react';
import {
  Check, Award, Clock, History, MessageSquare, X, Pencil, Trash2,
  ThumbsUp, MoreHorizontal, Flag,
} from 'lucide-react';
import type { ReactNode } from 'react';
import type { Comment, ReportReason, User } from '../api/types';
import { api } from '../api/client';
import CommentContent from './CommentContent';
import CommentEditor from './CommentEditor';
import CommentRevisionDialog from './CommentRevisionDialog';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { notify } from '@/lib/notify';
import {
  commentNick,
  commentInitial,
  formatCommentDate,
  isGuestComment,
  buildCommentTree,
  type CommentNode,
} from '../utils/comment';
import { isTimeDiffSignificant } from '../utils/content';
import { REPORT_REASON_OPTIONS } from '../utils/report';
import { useForumLimits } from '../hooks/useForumLimits';
import { isHtmlEmpty } from '../utils/postContent';
import { Tooltip } from './ui/Tooltip';
import UserLink from './UserLink';
import { cn } from '@/lib/utils';
import { pinAwardedCommentTree } from '../utils/bounty';

function isCommentAuthor(c: Comment, user?: User | null): boolean {
  return !!user && c.user_id > 0 && c.user_id === user.id;
}

function canEditComment(c: Comment, user: User | null | undefined, windowMinutes: number): boolean {
  if (!user) return false;
  if (user.role === 'admin') return true;
  if (!isCommentAuthor(c, user)) return false;
  if (windowMinutes <= 0) return true;
  const created = new Date(c.created_at).getTime();
  if (Number.isNaN(created)) return false;
  return Date.now() - created <= windowMinutes * 60_000;
}

interface ItemProps {
  node: CommentNode;
  nested?: boolean;
  highlightFloor?: number | null;
  replyToId?: number | null;
  editingId?: number | null;
  currentUser?: User | null;
  onReply: (comment: Comment) => void;
  onCancelReply: () => void;
  onStartEdit: (comment: Comment) => void;
  onCancelEdit: () => void;
  onSaveEdit: (comment: Comment, content: string) => Promise<void>;
  onDelete: (comment: Comment) => Promise<void>;
  onApprove?: (comment: Comment) => Promise<void>;
  onRequireLogin?: (actionLabel: string) => void;
  onLikeUpdate?: (commentId: number, liked: boolean, likeCount: number) => void;
  renderReplyBox?: (comment: Comment) => ReactNode;
  bountyAward?: {
    open: boolean;
    awardedCommentId?: number;
    postAuthorId: number;
    canAward: boolean;
    onAward: (commentId: number) => void;
  };
}

/** 单条评论（支持嵌套子回复 + 内联回复框 + 编辑/删除） */
function CommentItem({
  node,
  nested,
  highlightFloor,
  replyToId,
  editingId,
  currentUser,
  onReply,
  onCancelReply,
  onStartEdit,
  onCancelEdit,
  onSaveEdit,
  onDelete,
  onApprove,
  onRequireLogin,
  onLikeUpdate,
  renderReplyBox,
  bountyAward,
}: ItemProps) {
  const { limits } = useForumLimits();
  const c = node.comment;
  const nick = commentNick(c);
  const guest = isGuestComment(c);
  const isHighlighted = highlightFloor === c.floor;
  const isBountyAwarded = bountyAward?.awardedCommentId === c.id;
  const hidden = !!c.content_hidden;
  const isReplying = replyToId === c.id;
  const isEditing = editingId === c.id;
  const isAdmin = currentUser?.role === 'admin';
  const editWindowMinutes = limits.comment_edit_window_minutes ?? 3;
  // 到期后强制重渲染，使「编辑」按钮自动消失
  const [, setEditExpireTick] = useState(0);
  useEffect(() => {
    if (!currentUser || currentUser.role === 'admin') return;
    if (!isCommentAuthor(c, currentUser)) return;
    if (editWindowMinutes <= 0) return;
    const created = new Date(c.created_at).getTime();
    if (Number.isNaN(created)) return;
    const remaining = created + editWindowMinutes * 60_000 - Date.now();
    if (remaining <= 0) return;
    const timer = window.setTimeout(() => setEditExpireTick(n => n + 1), remaining + 30);
    return () => window.clearTimeout(timer);
  }, [c.created_at, c.id, c.user_id, currentUser, editWindowMinutes]);
  const canEdit = canEditComment(c, currentUser, editWindowMinutes);
  const canDelete = isAdmin;
  const canApprove = isAdmin
    && (c.status === 'pending' || c.status === 'rejected')
    && !!onApprove;
  const showEdited = !hidden && !!c.updated_at && isTimeDiffSignificant(c.created_at, c.updated_at);
  const canReport = !hidden && !isEditing && !isCommentAuthor(c, currentUser);
  const [editText, setEditText] = useState(c.content);
  const [saving, setSaving] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [approving, setApproving] = useState(false);
  const [liking, setLiking] = useState(false);
  const [liked, setLiked] = useState(!!c.liked);
  const [likeCount, setLikeCount] = useState(c.like_count ?? 0);
  const [revOpen, setRevOpen] = useState(false);
  const [reportOpen, setReportOpen] = useState(false);
  const [reportReason, setReportReason] = useState<ReportReason>('spam');
  const [reportDetail, setReportDetail] = useState('');
  const [reporting, setReporting] = useState(false);

  useEffect(() => {
    if (isEditing) setEditText(c.content);
  }, [isEditing, c.content, c.id]);

  useEffect(() => {
    setLiked(!!c.liked);
    setLikeCount(c.like_count ?? 0);
  }, [c.id, c.liked, c.like_count]);

  const handleSave = async () => {
    const next = editText.trim();
    if (!next) return;
    setSaving(true);
    try {
      await onSaveEdit(c, next);
    } finally {
      setSaving(false);
    }
  };

  const handleLike = async () => {
    if (!currentUser) {
      onRequireLogin?.('点赞');
      return;
    }
    if (liking) return;
    setLiking(true);
    try {
      const r = await api.likeComment(c.id);
      setLiked(r.liked);
      setLikeCount(r.like_count);
      onLikeUpdate?.(c.id, r.liked, r.like_count);
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '点赞失败');
    } finally {
      setLiking(false);
    }
  };

  const openReport = () => {
    if (!currentUser) {
      onRequireLogin?.('举报');
      return;
    }
    setReportReason('spam');
    setReportDetail('');
    setReportOpen(true);
  };

  const handleReport = async () => {
    setReporting(true);
    try {
      const r = await api.reportComment(c.id, {
        reason: reportReason,
        detail: reportDetail.trim() || undefined,
      });
      notify.success(r.message);
      setReportOpen(false);
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '举报失败');
    } finally {
      setReporting(false);
    }
  };

  return (
    <div
      id={`floor-${c.floor}`}
      className={cn(
        'waline-comment',
        nested && 'nested',
        isHighlighted && 'highlight',
        isBountyAwarded && 'waline-comment--bounty-awarded',
      )}
    >
      {!guest && c.user_id ? (
        <UserLink
          user={c.user ?? { id: c.user_id, nickname: nick }}
          showAvatar={false}
          showName={false}
          className={`waline-comment-avatar user-link--avatar-only${!c.user?.avatar ? ' guest' : ''}`}
        >
          {c.user?.avatar ? (
            <img src={c.user.avatar} alt="" loading="lazy" decoding="async" />
          ) : (
            commentInitial(c)
          )}
        </UserLink>
      ) : (
        <div className={`waline-comment-avatar ${!c.user?.avatar ? 'guest' : ''}`}>
          {c.user?.avatar ? (
            <img src={c.user.avatar} alt="" loading="lazy" decoding="async" />
          ) : (
            commentInitial(c)
          )}
        </div>
      )}

      <div className="waline-comment-main">
        <div className="waline-comment-head">
          {guest && c.guest_url ? (
            <a href={c.guest_url} target="_blank" rel="noopener noreferrer" className="waline-comment-author">
              {nick}
            </a>
          ) : !guest && c.user_id ? (
            <UserLink
              user={c.user ?? { id: c.user_id, nickname: nick }}
              className="waline-comment-author"
              showBadges
            />
          ) : (
            <span className="waline-comment-author">{nick}</span>
          )}
          {isBountyAwarded && (
            <span className="waline-comment-bounty-badge" title="悬赏已采纳">
              <Check size={12} aria-hidden />
              已采纳
            </span>
          )}
          {!hidden && (
            <button
              type="button"
              className={cn('waline-comment-like', liked && 'is-liked')}
              disabled={liking}
              aria-label={liked ? '取消点赞' : '点赞'}
              aria-pressed={liked}
              onClick={handleLike}
            >
              <ThumbsUp size={14} strokeWidth={2} />
              <span>{likeCount}</span>
            </button>
          )}
        </div>

        {hidden ? (
          <div className="waline-comment-private-mask">
            该评论为私密评论，仅文章作者与评论发起者可见！
          </div>
        ) : isEditing ? (
          <div className="waline-comment-edit">
            <CommentEditor
              value={editText}
              onChange={setEditText}
              placeholder="编辑评论…"
            />
            <div className="waline-comment-edit-actions">
              <button type="button" className="waline-comment-reply-btn cancel" onClick={onCancelEdit} disabled={saving}>
                取消
              </button>
              <button
                type="button"
                className="waline-comment-reply-btn"
                onClick={handleSave}
                disabled={saving || isHtmlEmpty(editText)}
              >
                {saving ? '保存中…' : '保存'}
              </button>
            </div>
          </div>
        ) : (
          <div className="waline-comment-bubble">
            <CommentContent content={c.content} />
          </div>
        )}

        <div className="waline-comment-meta">
          <span className="waline-comment-date">
            <Clock size={14} />
            {formatCommentDate(c.created_at)}
            {isAdmin && showEdited && <span className="waline-comment-edited"> · 已编辑</span>}
            {c.status === 'pending' && <span className="waline-comment-status waline-comment-status--pending"> · 审核中</span>}
            {c.status === 'rejected' && <span className="waline-comment-status waline-comment-status--rejected"> · 未通过</span>}
          </span>
          {c.reply_target && (
            <span className="waline-reply-at">@{commentNick(c.reply_target)}</span>
          )}
          {!hidden && !isEditing && canApprove && (
            <button
              type="button"
              className="waline-comment-reply-btn waline-comment-approve-btn"
              disabled={approving}
              onClick={async () => {
                setApproving(true);
                try {
                  await onApprove?.(c);
                } finally {
                  setApproving(false);
                }
              }}
            >
              <Check size={14} />
              {approving ? '通过中…' : '通过'}
            </button>
          )}
          {!hidden && !isEditing && !!renderReplyBox && (
            isReplying ? (
              <button type="button" className="waline-comment-reply-btn cancel" onClick={onCancelReply}>
                <X size={14} />
                取消
              </button>
            ) : (
              <Tooltip content={`回复给 ${nick}`} side="top">
                <button type="button" className="waline-comment-reply-btn" onClick={() => onReply(c)}>
                  <MessageSquare size={14} />
                  回复
                </button>
              </Tooltip>
            )
          )}
          {!hidden && !isEditing && canEdit && (
            <button type="button" className="waline-comment-reply-btn" onClick={() => onStartEdit(c)}>
              <Pencil size={14} />
              编辑
            </button>
          )}
          {bountyAward?.open && bountyAward.canAward && c.user_id !== bountyAward.postAuthorId
            && c.status === 'published' && !hidden && (
            <button
              type="button"
              className="bounty-award-btn"
              onClick={() => bountyAward.onAward(c.id)}
            >
              <Award size={14} aria-hidden />
              采纳
            </button>
          )}
          {!hidden && !isEditing && isAdmin && showEdited && (
            <button type="button" className="waline-comment-reply-btn" onClick={() => setRevOpen(true)}>
              <History size={14} />
              编辑记录
            </button>
          )}
          {!hidden && !isEditing && canDelete && (
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <button type="button" className="waline-comment-reply-btn cancel" disabled={deleting}>
                  <Trash2 size={14} />
                  删除
                </button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>确定删除该评论？</AlertDialogTitle>
                  <AlertDialogDescription>
                    将同时移入回收站其下所有回复，可在后台恢复或永久删除。
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>取消</AlertDialogCancel>
                  <AlertDialogAction
                    onClick={async () => {
                      setDeleting(true);
                      try {
                        await onDelete(c);
                      } finally {
                        setDeleting(false);
                      }
                    }}
                  >
                    删除
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          )}
          {canReport && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  type="button"
                  className="waline-comment-reply-btn waline-comment-more"
                  aria-label="更多操作"
                >
                  <MoreHorizontal size={14} />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="center" className="report-more-menu">
                <DropdownMenuItem
                  className="report-more-menu__item"
                  onSelect={openReport}
                >
                  <Flag size={14} />
                  举报
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
        </div>

        {isAdmin && (
          <CommentRevisionDialog open={revOpen} onOpenChange={setRevOpen} comment={c} />
        )}

        <Dialog open={reportOpen} onOpenChange={setReportOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>举报评论</DialogTitle>
              <DialogDescription>请选择原因，管理员将尽快处理。</DialogDescription>
            </DialogHeader>
            <div className="pm-compose-fields">
              <label className="pm-field">
                <span>举报原因</span>
                <select
                  value={reportReason}
                  onChange={(e) => setReportReason(e.target.value as ReportReason)}
                >
                  {REPORT_REASON_OPTIONS.map((o) => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                  ))}
                </select>
              </label>
              <label className="pm-field">
                <span>补充说明（可选）</span>
                <textarea
                  value={reportDetail}
                  onChange={(e) => setReportDetail(e.target.value)}
                  rows={4}
                  maxLength={500}
                  placeholder="补充更多细节…"
                />
              </label>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setReportOpen(false)}>取消</Button>
              <Button loading={reporting} onClick={handleReport}>提交举报</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {isReplying && renderReplyBox && (
          <div id={`reply-box-${c.id}`} className="comment-box-wrap inline">
            {renderReplyBox(c)}
          </div>
        )}

        {node.children.length > 0 && (
          <div className="waline-replies">
            {node.children.map((child) => (
              <CommentItem
                key={child.comment.id}
                node={child}
                nested
                highlightFloor={highlightFloor}
                replyToId={replyToId}
                editingId={editingId}
                currentUser={currentUser}
                onReply={onReply}
                onCancelReply={onCancelReply}
                onStartEdit={onStartEdit}
                onCancelEdit={onCancelEdit}
                onSaveEdit={onSaveEdit}
                onDelete={onDelete}
                onApprove={onApprove}
                onRequireLogin={onRequireLogin}
                onLikeUpdate={onLikeUpdate}
                renderReplyBox={renderReplyBox}
                bountyAward={bountyAward}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

interface Props {
  comments: Comment[];
  highlightFloor?: number | null;
  replyToId?: number | null;
  editingId?: number | null;
  currentUser?: User | null;
  onReply: (comment: Comment) => void;
  onCancelReply: () => void;
  onStartEdit: (comment: Comment) => void;
  onCancelEdit: () => void;
  onSaveEdit: (comment: Comment, content: string) => Promise<void>;
  onDelete: (comment: Comment) => Promise<void>;
  onApprove?: (comment: Comment) => Promise<void>;
  onRequireLogin?: (actionLabel: string) => void;
  onLikeUpdate?: (commentId: number, liked: boolean, likeCount: number) => void;
  renderReplyBox?: (comment: Comment) => ReactNode;
  bountyAward?: ItemProps['bountyAward'];
}

/** Waline 嵌套楼层评论列表 */
export default function CommentThreadList({
  comments,
  highlightFloor,
  replyToId,
  editingId,
  currentUser,
  onReply,
  onCancelReply,
  onStartEdit,
  onCancelEdit,
  onSaveEdit,
  onDelete,
  onApprove,
  onRequireLogin,
  onLikeUpdate,
  renderReplyBox,
  bountyAward,
}: Props) {
  const tree = pinAwardedCommentTree(
    buildCommentTree(comments),
    bountyAward?.awardedCommentId,
  );

  return (
    <div className="comment-thread-list">
      {tree.map((node) => (
        <CommentItem
          key={node.comment.id}
          node={node}
          highlightFloor={highlightFloor}
          replyToId={replyToId}
          editingId={editingId}
          currentUser={currentUser}
          onReply={onReply}
          onCancelReply={onCancelReply}
          onStartEdit={onStartEdit}
          onCancelEdit={onCancelEdit}
          onSaveEdit={onSaveEdit}
          onDelete={onDelete}
          onApprove={onApprove}
          onRequireLogin={onRequireLogin}
          onLikeUpdate={onLikeUpdate}
          renderReplyBox={renderReplyBox}
          bountyAward={bountyAward}
        />
      ))}
    </div>
  );
}