import Link from "next/link";
import { CheckCircle2 } from "lucide-react";
import type { AcceptedAnswer } from "@/lib/api";
import Avatar from "@/components/Avatar";
import MarkdownBody from "@/components/MarkdownBody";
import AcceptedAnswerReopen from "@/components/AcceptedAnswerReopen";

/** 正文下方的已采纳答案卡：头像 + 昵称 + 全文；问答已解决时并入状态与「重新打开」 */
export default async function AcceptedAnswerCard({
  answer,
  variant = "question",
  postId,
  canReopen = false,
}: {
  answer: AcceptedAnswer;
  /** 问答用「最佳答案」，悬赏用「已采纳」 */
  variant?: "question" | "bounty";
  postId?: number;
  canReopen?: boolean;
}) {
  const name = answer.user.nickname || answer.user.username || "用户";
  const label = variant === "bounty" ? "已采纳" : "最佳答案";
  const showReopen = variant === "question" && canReopen && !!postId;

  return (
    <section className="j13-accepted-answer" aria-label={variant === "question" ? "问答 · 已解决" : label}>
      <header className="j13-accepted-answer__head">
        <div className="j13-accepted-answer__meta min-w-0">
          {variant === "question" && (
            <p className="j13-accepted-answer__status">问答 · 已解决</p>
          )}
          <div className="j13-accepted-answer__author min-w-0">
            <span className="badge-accepted shrink-0">
              <CheckCircle2 size={13} aria-hidden />
              {label}
            </span>
            <Link
              href={`/u/${answer.user.id}`}
              className="shrink-0"
              aria-label={name}
            >
              <Avatar name={name} src={answer.user.avatar || undefined} size={36} />
            </Link>
            <div className="min-w-0 flex flex-col gap-0.5">
              <Link
                href={`/u/${answer.user.id}`}
                className="truncate text-[14px] font-semibold hover:text-[var(--accent)] transition-colors"
                style={{ color: "var(--ink)" }}
              >
                {name}
              </Link>
              <p className="meta text-[12px] flex items-center gap-1.5 flex-wrap">
                <time dateTime={answer.created_at}>
                  {new Date(answer.created_at).toLocaleString("zh-CN")}
                </time>
                {answer.floor > 0 && (
                  <>
                    <span aria-hidden>·</span>
                    <a
                      href={`#comment-${answer.id}`}
                      className="hover:underline"
                      style={{ color: "var(--accent)" }}
                    >
                      #{answer.floor}
                    </a>
                  </>
                )}
              </p>
            </div>
          </div>
        </div>
        {showReopen && <AcceptedAnswerReopen postId={postId!} />}
      </header>

      <div className="j13-accepted-answer__body">
        {answer.deleted ? (
          <p className="meta text-[14px]" style={{ color: "var(--ink-3)" }}>
            该答案已被删除
          </p>
        ) : (
          <MarkdownBody content={answer.content} className="prose-content prose-comment" />
        )}
      </div>
    </section>
  );
}