"use client";

/**
 * term-switcher（sidebar / side）
 *
 * 通过 useTerms 查询 apollo-router → core-edu 子图的 terms 数据。
 * 切换学期时写入 URL Search Params（termId），其他插件自动响应。
 * 默认选中 isActive=true 的学期。
 *
 * 关联：portal-shell spec §5.2.1 URL 驱动、M8 验收
 */
import { useRouter, useSearchParams } from "next/navigation";
import { useTerms } from "@/lib/api/sidebar";
import { PluginSkeleton } from "@/shell/PluginLoader";
import type { PluginProps } from "@/lib/types";

export default function TermSwitcher(_props: PluginProps): React.ReactElement {
  const router = useRouter();
  const searchParams = useSearchParams();
  const currentTermId = searchParams.get("termId") ?? "";

  const { data, loading } = useTerms();

  const handleSelect = (termId: string): void => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("termId", termId);
    router.push(`?${params.toString()}`);
  };

  if (loading && !data) {
    return <PluginSkeleton variant="list" />;
  }

  const terms = data ?? [];
  const activeTerm = terms.find((t) => t.isActive);
  // URL 未指定 termId 时默认选中当前激活学期
  const selectedTermId = currentTermId || activeTerm?.id || "";

  return (
    <div>
      <p className="text-sm text-muted-foreground">学期</p>
      <select
        value={selectedTermId}
        onChange={(e) => handleSelect(e.target.value)}
        className="mt-1 w-full rounded-md border bg-card px-2 py-1 text-sm text-foreground"
        aria-label="选择学期"
      >
        <option value="">请选择学期</option>
        {terms.map((t) => (
          <option key={t.id} value={t.id}>
            {t.name}
          </option>
        ))}
      </select>
    </div>
  );
}