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) {
  return new Date(dateStr).toLocaleDateString("zh-CN");
}

/**
 * 首页精选主卡：取自非置顶帖中的最新一帖（置顶帖由 PinnedPosts 承载）
 */
export default function FeaturePost({ post }: { post: PostListItem }) {
  return (
    <article className="panel hover-lift group relative overflow-hidden">
      {/* 柔和装饰块，非发光 */}
      <span
        aria-hidden
        className="absolute -top-20 -right-16 w-56 h-56 rounded-full"
        style={{ background: "var(--accent-soft)" }}
      />
      <div className="relative p-6 sm:p-8">
        <div className="flex items-center gap-2 mb-4 flex-wrap">
          <span
            className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
            style={{ color: "var(--accent)" }}
          >
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--accent)" }} />
            今日精选
          </span>
          {post.recommended && <span className="badge-rec">推荐</span>}
          <Link href={`/board/${post.board.id}`} className="chip">
            {post.board.name}
          </Link>
        </div>

        <Link href={`/post/${post.id}`}>
          <h2
            className="font-extrabold text-2xl sm:text-[28px] leading-tight tracking-tight transition-colors group-hover:text-[var(--accent)]"
            style={{ color: "var(--ink)" }}
          >
            {post.title}
          </h2>
        </Link>
        {post.tags && (
          <div className="flex flex-wrap gap-2 mt-4">
            {[
              ...new Set(
                post.tags
                  .split(",")
                  .map((t) => t.trim())
                  .filter(Boolean)
              ),
            ]
              .slice(0, 4)
              .map((t, i) => (
                <span key={`${t}-${i}`} className="chip">
                  # {t}
                </span>
              ))}
          </div>
        )}

        <div className="flex items-center justify-between gap-4 mt-6 pt-5" style={{ borderTop: "1px solid var(--line)" }}>
          <div className="flex items-center gap-4 min-w-0">
            <Link href={`/u/${post.user.id}`} className="flex items-center gap-2.5 min-w-0 group/au">
              <Avatar name={post.user.nickname || post.user.username} size={38} />
              <span className="min-w-0">
                <span
                  className="block text-sm font-semibold truncate group-hover/au:text-[var(--accent)] transition-colors"
                  style={{ color: "var(--ink)" }}
                >
                  {post.user.nickname}
                </span>
                <span className="meta block text-[11.5px]">{formatTime(post.created_at)}</span>
              </span>
            </Link>
            <span className="hidden sm:inline-flex items-center gap-1.5 meta">
              <IconComment size={14} /> {post.comment_count}
            </span>
            <span className="hidden sm:inline-flex items-center gap-1.5 meta">
              <IconEye size={14} /> {post.view_count}
            </span>
          </div>
          <LikeButton
            postId={String(post.id)}
            liked={post.liked}
            likeCount={post.like_count}
          />
        </div>
      </div>
    </article>
  );
}