import Link from "next/link";
import type { PostListItem } from "@/lib/api";
import LikeButton from "./LikeButton";
import Avatar from "./Avatar";
import { IconComment, IconEye } from "./Icons";

function formatTime(dateStr: string) {
  const d = new Date(dateStr);
  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
    d.getDate()
  ).padStart(2, "0")}`;
}

/**
 * 帖子列表行：头像 + 标题 + 作者元信息 + 统计 + 点赞
 * 用于首页/板块页，以细线串联，悬浮浅色反馈
 */
export default function PostRow({
  post,
  boardHref,
  index = 0,
  compact = false,
  showViews = true,
  showLike = true,
}: {
  post: PostListItem;
  index?: number;
  boardHref?: boolean;
  compact?: boolean;
  showViews?: boolean;
  showLike?: boolean;
}) {
  return (
    <div
      className="group relative flex items-center gap-3 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
      style={{
        borderColor: "var(--line)",
        paddingTop: compact ? 13 : 16,
        paddingBottom: compact ? 13 : 16,
        animationDelay: `${Math.min(index, 9) * 35}ms`,
      }}
    >
      <Link
        href={`/u/${post.user.id}`}
        className="shrink-0 above-link"
        aria-label={post.user.nickname}
        tabIndex={-1}
      >
        <Avatar name={post.user.nickname || post.user.username} size={compact ? 38 : 42} />
      </Link>

      <div className="flex-1 min-w-0">
        {(post.pinned > 0 || post.recommended) && (
          <div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
            {post.pinned > 0 && <span className="badge-pin">置顶</span>}
            {post.recommended && <span className="badge-rec">推荐</span>}
          </div>
        )}
        <Link href={`/post/${post.id}`} className="stretch-link" aria-label={post.title}>
          <h3
            className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
            style={{ color: "var(--ink)" }}
          >
            {post.title}
          </h3>
        </Link>
        <div className="meta relative z-[2] flex items-center gap-2.5 mt-1.5 flex-wrap">
          <Link
            href={`/u/${post.user.id}`}
            className="hover:text-[var(--accent)] transition-colors"
          >
            {post.user.nickname}
          </Link>
          {boardHref && (
            <>
              <span aria-hidden>·</span>
              <Link
                href={`/board/${post.board.id}`}
                className="hover:text-[var(--accent)] transition-colors"
              >
                {post.board.name}
              </Link>
            </>
          )}
          <span aria-hidden>·</span>
          <span>{formatTime(post.created_at)}</span>
        </div>
      </div>

      <div className="above-link flex items-center gap-2.5 sm:gap-3.5 shrink-0">
        <span
          className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta`}
          aria-label={`${post.comment_count} 条评论`}
        >
          <IconComment size={15} />
          {post.comment_count}
        </span>
        {showViews && (
          <span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
            <IconEye size={15} />
            {post.view_count}
          </span>
        )}
        {showLike && (
          <LikeButton
            postId={String(post.id)}
            liked={post.liked}
            likeCount={post.like_count}
            variant="compact"
          />
        )}
      </div>
    </div>
  );
}