import { X } from "lucide-react";
import { type Employee, type Workspace } from "../../services/api";
import { Button } from "~/components/ui/button";
import {
  formFieldClass,
  modalBackdropClass,
  modalCompactClass,
  modalEyebrowClass,
  modalFooterClass,
  modalFormClass,
  modalHeaderClass,
  modalTitleClass,
} from "../platform/modalUi";
import { UserMultiSelect } from "./UserMultiSelect";

const CLOSE_BUTTON_CLASS =
  "size-[34px] rounded-[7px] border border-[#dfe6ed] bg-white hover:bg-[#f7faff] hover:border-[#b9c9da]";
const SECONDARY_BUTTON_CLASS =
  "h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
const PRIMARY_BUTTON_CLASS =
  "h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";

export function ImportMemberDialog({
  open,
  selectedProject,
  availableUsers,
  selectedUserIds,
  existingMemberIds,
  saving,
  onNotify,
  onChangeSelectedUserIds,
  onSubmit,
  onClose,
}: {
  open: boolean;
  selectedProject: Workspace | null;
  availableUsers: Employee[];
  selectedUserIds: string[];
  existingMemberIds: string[];
  saving: boolean;
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onChangeSelectedUserIds: (ids: string[]) => void;
  onSubmit: () => Promise<void> | void;
  onClose: () => void;
}) {
  if (!open || !selectedProject) return null;

  return (
    <div className={modalBackdropClass} role="presentation">
      <section className={modalCompactClass} role="dialog" aria-modal="true">
        <div className={modalHeaderClass}>
          <div>
            <span className={modalEyebrowClass}>IMPORT MEMBER</span>
            <h2 className={modalTitleClass}>导入成员到 {selectedProject?.workspace_name ?? "项目"}</h2>
          </div>
          <Button
            variant="ghost"
            size="icon-sm"
            type="button"
            aria-label="关闭"
            onClick={() => onClose()}
            className={CLOSE_BUTTON_CLASS}
          >
            <X size={16} />
          </Button>
        </div>
        <form className={modalFormClass}>
          <label className={`${formFieldClass} pb-[120px]`}>
            <span>选择用户<span className="text-[#e74c3c]">*</span></span>
            <UserMultiSelect
              users={availableUsers}
              selectedUserIds={selectedUserIds}
              onChange={onChangeSelectedUserIds}
              existingMemberIds={existingMemberIds}
            />
          </label>
          <div className={modalFooterClass}>
            <Button
              variant="outline"
              size="sm"
              type="button"
              onClick={() => onClose()}
              className={SECONDARY_BUTTON_CLASS}
            >
              取消
            </Button>
            <Button
              variant="default"
              size="sm"
              type="button"
              disabled={saving || selectedUserIds.length === 0}
              onClick={() => void onSubmit()}
              className={PRIMARY_BUTTON_CLASS}
            >
              {saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
            </Button>
          </div>
        </form>
      </section>
    </div>
  );
}