import { ChevronRight } from "lucide-react";
import Link from "next/link";
import { memo } from "react";
import type { PlaylistState } from "../hooks/usePlaylist";
import type { User } from "../types.ts";
import { WorksGrid } from "./WorksGrid";

interface AuthorWorksTabProps {
  /** 侧栏打开且停在「TA的作品」标签页 */
  active: boolean;
  author: User;
  works: PlaylistState;
  currentId: string;
  /** 跳转时原样带上的播放上下文查询串 */
  contextQuery: string;
  onSelect: () => void;
}

// 侧栏「TA的作品」：作者在库里的全部作品。点作品就地切换；点作者名字才去独立的作者页。
export const AuthorWorksTab = memo(function AuthorWorksTab({
  active,
  author,
  works,
  currentId,
  contextQuery,
  onSelect,
}: AuthorWorksTabProps) {
  const header = author.sec_uid ? (
    <Link
      href={`/author/${author.sec_uid}`}
      className="group flex min-w-0 flex-1 items-center gap-2.5"
      title="打开作者主页"
    >
      {/* biome-ignore lint/performance/noImgElement: 头像来自对象存储，不走 next/image */}
      <img
        src={author.avatar_url ?? ""}
        alt=""
        className="h-9 w-9 shrink-0 rounded-full bg-white/10 object-cover"
      />
      <span className="truncate font-semibold text-white group-hover:underline">
        @{author.nickname}
      </span>
      <ChevronRight size={16} className="shrink-0 text-white/60" />
      <span className="ml-auto shrink-0 text-xs text-white/40">作者主页</span>
    </Link>
  ) : (
    <span className="truncate font-semibold text-white">
      @{author.nickname}
    </span>
  );

  return (
    <WorksGrid
      active={active}
      list={works}
      currentId={currentId}
      hrefQuery={contextQuery}
      onSelect={onSelect}
      singleHint="库里只存了这位作者的这一个作品"
      header={header}
    />
  );
});