import { Hash, Search } from "lucide-react";
import Link from "next/link";
import { memo } from "react";
import type { PlaylistState } from "../hooks/usePlaylist";
import type { PlaybackContextInfo } from "../types.ts";
import { WorksGrid } from "./WorksGrid";

interface ContextListTabProps {
  active: boolean;
  context: PlaybackContextInfo;
  list: PlaylistState;
  currentId: string;
  contextQuery: string;
  /** 对应的搜索结果页链接（搜索上下文才有） */
  searchPageHref: string | null;
  onSelect: () => void;
}

// 侧栏的「搜索结果 / #hashtag / 标签」列表：和上下切换的顺序完全一致
export const ContextListTab = memo(function ContextListTab({
  active,
  context,
  list,
  currentId,
  contextQuery,
  searchPageHref,
  onSelect,
}: ContextListTabProps) {
  const Icon = context.kind === "hashtag" ? Hash : Search;
  const header = (
    <>
      <Icon size={18} className="shrink-0 text-rose-300" />
      <div className="min-w-0 flex-1">
        <div className="truncate font-semibold text-white">{context.label}</div>
        <div className="text-xs text-white/50">
          第 {context.position} 个 · 共 {context.total} 个
        </div>
      </div>
      {searchPageHref && (
        <Link
          href={searchPageHref}
          className="shrink-0 text-xs text-white/50 hover:text-white hover:underline"
        >
          在搜索页查看
        </Link>
      )}
    </>
  );

  return (
    <WorksGrid
      active={active}
      list={list}
      currentId={currentId}
      hrefQuery={contextQuery}
      onSelect={onSelect}
      header={header}
    />
  );
});