import type { FileRef, FileRoot } from "~/api/files.ts";
import { cn } from "~/lib/utils.ts";
import { DirTree } from "./dir-tree.tsx";

/**
 * 目录选择器(§14 DirPicker):基于 DirTree,只能选可写库根下的目录。
 * 移动/复制到…、回收站"还原到…"、整理向导"指定目录"共用。
 */
export function DirPicker({
  roots,
  value,
  onChange,
  className,
}: {
  roots: FileRoot[];
  value: FileRef | null;
  onChange: (ref: FileRef) => void;
  className?: string;
}) {
  const writable = roots.filter((r) => r.kind === "library" && r.writable && r.health !== "offline");
  return (
    <div className={cn("overflow-y-auto rounded-xl border border-border p-1.5", className)}>
      {writable.length ? (
        <DirTree
          roots={writable}
          current={value}
          pickOnly
          paginate
          defaultOpen={value ? [value.root] : writable.slice(0, 1).map((r) => r.id)}
          onSelect={onChange}
        />
      ) : (
        <p className="px-2 py-3 text-caption text-muted-foreground">没有可写入的媒体库目录。先在设置里添加。</p>
      )}
    </div>
  );
}