import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
import { AdminActionIconButton, AdminRowActions } from "@/shared/ui/AdminListLayout.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { SearchBox } from "@/shared/ui/SearchBox.jsx";
import { kindLabel } from "@/features/menus/constants.js";

export function MenuPermissionDetail({
  abilities,
  accessPermissionQuery,
  accessPermissions,
  boundPermission,
  menu,
  onAccessPermissionQueryChange,
  onBindPermission,
  onEdit,
  onRemove,
  onToggleVisible
}) {
  if (!menu) {
    return (
      <section className="menu-detail-panel">
        <div className="empty-state menu-detail-empty">
          <div className="empty-state__title">当前无数据</div>
        </div>
      </section>
    );
  }

  return (
    <section className="menu-detail-panel">
      <div className="menu-detail-header">
        <div className="menu-detail-title">
          <span className={["menu-tree-status", menu.visible !== false ? "is-visible" : "is-hidden"].join(" ")}>
            {menu.visible !== false ? "显示" : "隐藏"}
          </span>
          <h2>{menu.label}</h2>
          <span>{menu.code}</span>
        </div>
        <AdminRowActions>
          {abilities.canUpdateMenu ? (
            <AdminActionIconButton label="编辑菜单" onClick={() => onEdit(menu)}>
              <EditOutlined fontSize="inherit" />
            </AdminActionIconButton>
          ) : null}
          {abilities.canVisibleMenu ? (
            <AdminActionIconButton label={menu.visible !== false ? "隐藏菜单" : "显示菜单"} onClick={() => onToggleVisible(menu)}>
              {menu.visible !== false ? <VisibilityOffOutlined fontSize="inherit" /> : <VisibilityOutlined fontSize="inherit" />}
            </AdminActionIconButton>
          ) : null}
          {abilities.canDeleteMenu ? (
            <AdminActionIconButton label="删除菜单" tone="danger" onClick={() => onRemove(menu)}>
              <DeleteOutlineOutlined fontSize="inherit" />
            </AdminActionIconButton>
          ) : null}
        </AdminRowActions>
      </div>

      <div className="menu-detail-fields">
        <DetailField label="路由" value={menu.path || "-"} />
        <DetailField label="图标" value={menu.icon || "-"} />
        <DetailField label="父级 ID" value={menu.parentId || "-"} />
        <DetailField label="排序" value={menu.sort ?? "-"} />
      </div>

      <section className="menu-access-card">
        <div className="menu-access-card__header">
          <div className="menu-panel-title">
            <h3>访问权限</h3>
            <span>{menu.permissionCode || "未绑定"}</span>
          </div>
          {menu.permissionCode ? (
            <Button disabled={!abilities.canUpdateMenu} onClick={() => onBindPermission(menu, "")}>
              清除
            </Button>
          ) : null}
        </div>
        <div className="menu-bound-permission">
          <span>{boundPermission?.name || menu.permissionCode || "未绑定"}</span>
          <code>{menu.permissionCode || "-"}</code>
          <span>{boundPermission ? kindLabel(boundPermission.kind) : "-"}</span>
        </div>
      </section>

      {abilities.canLoadPermissions ? (
        <section className="menu-permission-picker">
          <div className="menu-permission-picker__header">
            <div className="menu-panel-title">
              <h3>可绑定权限</h3>
              <span>{accessPermissions.length} 项</span>
            </div>
            <SearchBox
              placeholder="搜索访问权限"
              value={accessPermissionQuery}
              onChange={onAccessPermissionQueryChange}
            />
          </div>
          <div className="menu-permission-list">
            {accessPermissions.length ? (
              accessPermissions.map((permission) => {
                const selected = permission.code === menu.permissionCode;
                return (
                  <button
                    className={["menu-permission-option", selected ? "menu-permission-option--active" : ""]
                      .filter(Boolean)
                      .join(" ")}
                    disabled={!abilities.canUpdateMenu || selected}
                    key={permission.id}
                    type="button"
                    onClick={() => onBindPermission(menu, permission.code)}
                  >
                    <span>
                      <strong>{permission.name}</strong>
                      <code>{permission.code}</code>
                    </span>
                    <em>{kindLabel(permission.kind)}</em>
                  </button>
                );
              })
            ) : (
              <div className="empty-state empty-state--compact">
                <div className="empty-state__title">当前无数据</div>
              </div>
            )}
          </div>
        </section>
      ) : null}
    </section>
  );
}

function DetailField({ label, value }) {
  return (
    <div className="menu-detail-field">
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}
