import type { Workspace } from "../../services/api";
import { Checkbox } from "~/components/ui/checkbox";
import { formFieldClass } from "../platform/modalUi";

const CHECKBOX_CLASS =
  "size-[16px] shrink-0 rounded-[3px] border-[#cdd9e4] bg-white data-checked:border-[#1277d3] data-checked:bg-[#1277d3] data-checked:text-white";

/** 新建用户时可选加入的项目列表（多选，非必填）。 */
export function CreateUserProjectField({
  projects,
  loading,
  selectedIds,
  onToggle,
}: {
  projects: Workspace[];
  loading: boolean;
  selectedIds: string[];
  onToggle: (workspaceId: string) => void;
}) {
  return (
    <div className={formFieldClass}>
      <span>
        加入项目
        <span className="ml-1 font-normal text-[#8a9aab]">（可选）</span>
      </span>
      <div className="max-h-[140px] overflow-auto rounded-md border border-[#d6e0e9] bg-white px-2.5 py-2">
        {loading ? (
          <p className="m-0 py-2 text-center text-[12px] text-[#8a9aab]">加载项目中…</p>
        ) : projects.length === 0 ? (
          <p className="m-0 py-2 text-center text-[12px] text-[#8a9aab]">暂无可用项目</p>
        ) : (
          <div className="flex flex-col gap-1.5">
            {projects.map((project) => {
              const checked = selectedIds.includes(project.workspace_id);
              return (
                <label
                  key={project.workspace_id}
                  className="flex cursor-pointer items-center gap-2 rounded px-1 py-1 hover:bg-[#f5f8fb]"
                >
                  <Checkbox
                    checked={checked}
                    onCheckedChange={() => onToggle(project.workspace_id)}
                    className={CHECKBOX_CLASS}
                  />
                  <span className="min-w-0 truncate text-[12px] text-[#283a4e]">
                    {project.workspace_name}
                    <span className="ml-1.5 text-[11px] text-[#8a9aab]">
                      {project.workspace_code}
                    </span>
                  </span>
                </label>
              );
            })}
          </div>
        )}
      </div>
      <p className="m-0 text-[11px] leading-snug text-[#8a9aab]">
        未加入任何项目时，该用户将无法登录。
      </p>
    </div>
  );
}