"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useRef } from "react";

export type FeedSort = "latest" | "hot" | "recommended";

const TAB_KEYS: FeedSort[] = ["latest", "hot", "recommended"];
const TAB_LABELS: Record<FeedSort, string> = {
  latest: "最新",
  hot: "热门",
  recommended: "精华",
};

// 在指定板块内切换排序时保留 ?board=
function tabHref(key: FeedSort, boardId: number) {
  const params = new URLSearchParams();
  if (boardId > 0) params.set("board", String(boardId));
  if (key !== "latest") params.set("sort", key);
  const qs = params.toString();
  return qs ? `/?${qs}` : "/";
}

// 中栏排序分段控件：URL query 驱动、SSR 直出，键盘 ←/→ 可切换
export default function FeedTabs({ current, boardId = 0 }: { current: FeedSort; boardId?: number }) {
  const router = useRouter();
  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);

  const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    const next = (i + (e.key === "ArrowRight" ? 1 : TAB_KEYS.length - 1)) % TAB_KEYS.length;
    tabRefs.current[next]?.focus();
    router.push(tabHref(TAB_KEYS[next], boardId));
  };

  return (
    <div className="j13-seg" role="tablist" aria-label="帖子排序">
      {TAB_KEYS.map((key, i) => (
        <Link
          key={key}
          ref={(el) => {
            tabRefs.current[i] = el;
          }}
          href={tabHref(key, boardId)}
          role="tab"
          aria-selected={current === key}
          tabIndex={current === key ? 0 : -1}
          onKeyDown={(e) => handleKeyDown(e, i)}
        >
          {TAB_LABELS[key]}
        </Link>
      ))}
    </div>
  );
}