import { useEffect, useState } from "react";

import { X } from "lucide-react";
import type {
  PlatformPermission,
  Role,
  RoleCreatePayload,
  RoleUpdatePayload,
} from "../../services/api";
import { Button } from "~/components/ui/button";
import {
  formFieldClass,
  formInputClass,
  formTextareaClass,
  modalBackdropClass,
  modalCompactClass,
  modalEyebrowClass,
  modalFooterClass,
  modalFormClass,
  modalHeaderClass,
  modalTitleClass,
} from "../platform/modalUi";
import { PermissionCheckboxList } from "./PermissionCheckboxList";

const RESERVED_ROLE_CODES = new Set(["admin", "developer"]);
const ROLE_CODE_PATTERN = /^[a-z][a-z0-9_-]{1,63}$/;

type RoleFormState = {
  role_code: string;
  role_name: string;
  description: string;
  permission_codes: string[];
};

const EMPTY_FORM: RoleFormState = {
  role_code: "",
  role_name: "",
  description: "",
  permission_codes: [],
};

/** 实时校验 role_code：空值不报错，提交时由必填拦截兜底。 */
function validateRoleCode(value: string): string {
  const code = value.trim();
  if (!code) return "";
  if (RESERVED_ROLE_CODES.has(code)) {
    return `role_code "${code}" 是预留字,不可使用`;
  }
  if (!/^[a-z]/.test(code)) return "role_code 必须以小写字母开头";
  if (!/^[a-z][a-z0-9_-]*$/.test(code)) {
    return "role_code 仅含小写字母/数字/下划线/连字符";
  }
  if (code.length < 2) return "role_code 至少 2 个字符";
  if (code.length > 64) return "role_code 最多 64 个字符";
  if (!ROLE_CODE_PATTERN.test(code)) {
    return "role_code 必须以小写字母开头,仅含字母/数字/下划线/连字符";
  }
  return "";
}

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 RoleEditDialog({
  open,
  editing,
  permissions,
  saving,
  onNotify,
  onSubmit,
  onClose,
}: {
  open: boolean;
  editing: Role | null;
  permissions: PlatformPermission[];
  saving: boolean;
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onSubmit: (payload: RoleCreatePayload | RoleUpdatePayload) => void;
  onClose: () => void;
}) {
  const [form, setForm] = useState<RoleFormState>(() =>
    editing
      ? {
          role_code: editing.role_code,
          role_name: editing.role_name,
          description: editing.description ?? "",
          permission_codes: [...editing.permission_codes],
        }
      : EMPTY_FORM,
  );
  const [roleCodeError, setRoleCodeError] = useState("");

  useEffect(() => {
    setForm(
      editing
        ? {
            role_code: editing.role_code,
            role_name: editing.role_name,
            description: editing.description ?? "",
            permission_codes: [...editing.permission_codes],
          }
        : EMPTY_FORM,
    );
    setRoleCodeError("");
  }, [open, editing]);

  const handleRoleCodeChange = (
    event: React.ChangeEvent<HTMLInputElement>,
  ): void => {
    const value = event.target.value;
    setForm((current) => ({ ...current, role_code: value }));
    setRoleCodeError(validateRoleCode(value));
  };

  const toggleCreatePermission = (code: string): void => {
    // 新建角色为非 admin，system:* 由后端守卫禁止；此处防御性拦截
    if (code.startsWith("system:")) return;
    setForm((current) => ({
      ...current,
      permission_codes: current.permission_codes.includes(code)
        ? current.permission_codes.filter((item) => item !== code)
        : [...current.permission_codes, code],
    }));
  };

  const handleSubmit = (event: React.FormEvent): void => {
    event.preventDefault();
    if (!form.role_name.trim()) {
      onNotify({ tone: "error", message: "请输入角色名称" });
      return;
    }
    if (!editing) {
      const codeError = validateRoleCode(form.role_code);
      if (codeError) {
        setRoleCodeError(codeError);
        onNotify({ tone: "error", message: codeError });
        return;
      }
    }
    const payload: RoleCreatePayload | RoleUpdatePayload = editing
      ? {
          // 内置角色 role_name 锁定；description 可改
          ...(editing.is_builtin ? {} : { role_name: form.role_name.trim() }),
          description: form.description.trim() || null,
        }
      : {
          role_code: form.role_code.trim(),
          role_name: form.role_name.trim(),
          description: form.description.trim() || undefined,
          permission_codes: form.permission_codes,
        };
    onSubmit(payload);
  };

  if (!open) return null;

  return (
    <div className={modalBackdropClass} role="presentation">
      <section className={modalCompactClass} role="dialog" aria-modal="true">
        <div className={modalHeaderClass}>
          <div>
            <span className={modalEyebrowClass}>ROLE</span>
            <h2 className={modalTitleClass}>{editing ? "编辑角色" : "新建角色"}</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} role-create-form`} onSubmit={(event) => void handleSubmit(event)}>
          {editing ? (
            <label className={formFieldClass}>
              <span>角色编码</span>
              <input
                className={formInputClass}
                disabled
                value={form.role_code}
              />
            </label>
          ) : (
            <label className={formFieldClass}>
              <span>角色编码<span className="text-[#e74c3c]">*</span></span>
              <input
                className={formInputClass}
                autoFocus
                value={form.role_code}
                onChange={handleRoleCodeChange}
                placeholder="例如：qa_engineer"
              />
              <span className="form-hint">
                以小写字母开头，仅含小写字母/数字/下划线/连字符（2~64 字符）
              </span>
              {roleCodeError && <span className="role-error">{roleCodeError}</span>}
            </label>
          )}
          <label className={formFieldClass}>
            <span>角色名称<span className="text-[#e74c3c]">*</span></span>
            <input
              className={formInputClass}
              value={form.role_name}
              disabled={editing !== null && editing.is_builtin}
              onChange={(event) => setForm({ ...form, role_name: event.target.value })}
              placeholder="请输入角色名称"
            />
            {editing !== null && editing.is_builtin && (
              <span className="form-hint">内置角色名称不可修改，描述可编辑</span>
            )}
          </label>
          <label className={formFieldClass}>
            <span>描述</span>
            <textarea
              className={formTextareaClass}
              value={form.description}
              onChange={(event) => setForm({ ...form, description: event.target.value })}
              placeholder="请输入角色描述（可选）"
            />
          </label>
          {!editing && (
            <div className="permission-groups">
              <div className="permission-group__title">初始权限</div>
              <PermissionCheckboxList
                permissions={permissions}
                selected={form.permission_codes}
                targetRoleCode=""
                onToggle={toggleCreatePermission}
              />
            </div>
          )}
          <div className={modalFooterClass}>
            <Button
              variant="outline"
              size="sm"
              type="button"
              onClick={onClose}
              className={SECONDARY_BUTTON_CLASS}
            >
              取消
            </Button>
            <Button
              variant="default"
              size="sm"
              type="submit"
              disabled={saving}
              className={PRIMARY_BUTTON_CLASS}
            >
              {saving ? "保存中…" : "保存"}
            </Button>
          </div>
        </form>
      </section>
    </div>
  );
}