"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useParams } from "next/navigation";
import { AdminLayout } from "@/components/layout/admin-layout";
import { PageHeader } from "@/components/layout/page-header";
import { Card } from "@/components/ui/card";
import { ErrorBanner } from "@/components/ui/error-banner";
import { InputField } from "@/components/ui/input-field";
import { SelectField } from "@/components/ui/select-field";
import { PrimaryButton, SecondaryButton } from "@/components/ui/primary-button";
import { Skeleton } from "@/components/ui/skeleton";
import { useAuth } from "@/hooks/use-auth";
import {
  adminCreateBusinessCustomer,
  adminGetBusinessCustomerUsers,
  adminGetBusinessCustomers,
  adminGetMarkupConfigs,
  adminListTenantUsers,
  adminUpdateBusinessCustomer,
  adminUpdateMarkupConfig,
} from "@/lib/frontend/api-client";
import { formatDateTime, formatPercent, formatUSD } from "@/lib/frontend/format";
import type {
  BusinessCustomerRecord,
  BusinessCustomerUserRecord,
  DataPageStatus,
  MarkupConfig,
  MarkupType,
} from "@/lib/frontend/types";

function formatMarkupRule(
  row: Pick<
    MarkupConfig,
    "markup_type" | "markup_percent" | "markup_fixed_amount"
  >,
): string {
  if (row.markup_type === "fixed") {
    const amount = row.markup_fixed_amount ?? 0;
    return amount > 0 ? `固定 ${formatUSD(amount)}` : "未配置";
  }
  return row.markup_percent > 0 ? formatPercent(row.markup_percent) : "0%";
}

export default function TenantBusinessCustomersPage() {
  const params = useParams<{ customer_id: string }>();
  const tenantId = decodeURIComponent(params.customer_id);
  const { token } = useAuth();
  const [status, setStatus] = useState<DataPageStatus>("loading");
  const [rows, setRows] = useState<BusinessCustomerRecord[]>([]);
  const [error, setError] = useState<string | null>(null);
  /** 业务客户 → 当前加价摘要（打开/保存后刷新） */
  const [markupByBcId, setMarkupByBcId] = useState<Record<string, string>>({});

  const [createOpen, setCreateOpen] = useState(false);
  const [creating, setCreating] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);
  const [createForm, setCreateForm] = useState({
    business_customer_id: "",
    name: "",
    external_code: "",
    remark: "",
  });

  const [editing, setEditing] = useState<BusinessCustomerRecord | null>(null);
  const [savingEdit, setSavingEdit] = useState(false);
  const [editError, setEditError] = useState<string | null>(null);
  const [editForm, setEditForm] = useState({
    name: "",
    external_code: "",
    remark: "",
    status: "active" as "active" | "disabled",
  });

  const [markupTarget, setMarkupTarget] = useState<BusinessCustomerRecord | null>(
    null,
  );
  const [markupType, setMarkupType] = useState<MarkupType>("percent");
  const [markupPercent, setMarkupPercent] = useState("");
  const [markupFixedAmount, setMarkupFixedAmount] = useState("");
  const [markupRemark, setMarkupRemark] = useState("");
  const [savingMarkup, setSavingMarkup] = useState(false);
  const [loadingMarkup, setLoadingMarkup] = useState(false);
  const [markupError, setMarkupError] = useState<string | null>(null);
  const [markupSuccess, setMarkupSuccess] = useState<string | null>(null);

  const [usersTarget, setUsersTarget] = useState<BusinessCustomerRecord | null>(
    null,
  );
  const [usersStatus, setUsersStatus] = useState<DataPageStatus>("empty");
  const [users, setUsers] = useState<BusinessCustomerUserRecord[]>([]);
  const [usersError, setUsersError] = useState<string | null>(null);
  const [onlyWithUsers, setOnlyWithUsers] = useState(true);
  const [allUsersOpen, setAllUsersOpen] = useState(false);
  const [allUsersKeyword, setAllUsersKeyword] = useState("");
  const [allUsersStatus, setAllUsersStatus] = useState<DataPageStatus>("empty");
  const [allUsers, setAllUsers] = useState<BusinessCustomerUserRecord[]>([]);
  const [allUsersError, setAllUsersError] = useState<string | null>(null);

  const load = useCallback(async () => {
    if (!token) return;
    setStatus("loading");
    setError(null);
    const res = await adminGetBusinessCustomers("", token, tenantId);
    if (res.code !== 0) {
      setStatus("error");
      setError(res.message);
      return;
    }
    setRows(res.data.list);
    setStatus(res.data.list.length ? "success" : "empty");
  }, [tenantId, token]);

  useEffect(() => {
    void load();
  }, [load]);

  const sortedRows = useMemo(() => {
    const filtered = onlyWithUsers
      ? rows.filter((r) => (r.user_count ?? 0) > 0)
      : rows;
    return [...filtered].sort((a, b) => {
      const uc = (b.user_count ?? 0) - (a.user_count ?? 0);
      if (uc !== 0) return uc;
      const ac = (
        a.external_code ||
        a.name ||
        a.business_customer_id
      ).toLowerCase();
      const bc = (
        b.external_code ||
        b.name ||
        b.business_customer_id
      ).toLowerCase();
      return ac.localeCompare(bc);
    });
  }, [rows, onlyWithUsers]);

  const loadAllUsers = useCallback(
    async (keyword?: string) => {
      if (!token) return;
      setAllUsersStatus("loading");
      setAllUsersError(null);
      const res = await adminListTenantUsers("", token, tenantId, keyword);
      if (res.code !== 0) {
        setAllUsersStatus("error");
        setAllUsersError(res.message);
        return;
      }
      setAllUsers(res.data.list);
      setAllUsersStatus(res.data.list.length ? "success" : "empty");
    },
    [tenantId, token],
  );

  const openEdit = (row: BusinessCustomerRecord) => {
    setEditing(row);
    setEditError(null);
    setEditForm({
      name: row.name,
      external_code: row.external_code ?? "",
      remark: row.remark ?? "",
      status: row.status,
    });
  };

  const handleCreate = async () => {
    if (!token) return;
    setCreating(true);
    setCreateError(null);
    const res = await adminCreateBusinessCustomer("", token, tenantId, createForm);
    setCreating(false);
    if (res.code !== 0) {
      setCreateError(res.message);
      return;
    }
    setCreateOpen(false);
    setCreateForm({
      business_customer_id: "",
      name: "",
      external_code: "",
      remark: "",
    });
    await load();
  };

  const handleSaveEdit = async () => {
    if (!token || !editing) return;
    setSavingEdit(true);
    setEditError(null);
    const res = await adminUpdateBusinessCustomer(
      "",
      token,
      tenantId,
      editing.business_customer_id,
      editForm,
    );
    setSavingEdit(false);
    if (res.code !== 0) {
      setEditError(res.message);
      return;
    }
    setRows((list) =>
      list.map((item) =>
        item.business_customer_id === res.data.business_customer_id
          ? res.data
          : item,
      ),
    );
    setEditing(null);
  };

  const openMarkup = async (row: BusinessCustomerRecord) => {
    setMarkupTarget(row);
    setMarkupType("percent");
    setMarkupPercent("");
    setMarkupFixedAmount("");
    setMarkupRemark("");
    setMarkupError(null);
    setMarkupSuccess(null);
    if (!token) {
      setMarkupError("未登录或登录已失效，请重新登录后再保存");
      return;
    }
    setLoadingMarkup(true);
    const kw =
      row.external_code?.trim() ||
      row.business_customer_id ||
      row.name ||
      "";
    const res = await adminGetMarkupConfigs("", token, 1, 50, kw);
    setLoadingMarkup(false);
    if (res.code !== 0) {
      setMarkupError(`读取已有加价失败：${res.message}`);
      return;
    }
    const found = res.data.list.find(
      (c) =>
        c.customer_id === tenantId &&
        (c.business_customer_id ?? "") === row.business_customer_id,
    );
    if (!found) return;
    setMarkupType(found.markup_type);
    setMarkupPercent(String(found.markup_percent ?? ""));
    setMarkupFixedAmount(
      found.markup_fixed_amount !== null && found.markup_fixed_amount !== undefined
        ? String(found.markup_fixed_amount)
        : "",
    );
    setMarkupRemark(found.remark ?? "");
    setMarkupByBcId((m) => ({
      ...m,
      [row.business_customer_id]: formatMarkupRule(found),
    }));
  };

  const handleSaveMarkup = async () => {
    if (!markupTarget) return;
    if (!token) {
      setMarkupError("未登录或登录已失效，请重新登录后再保存");
      return;
    }
    setMarkupError(null);
    setMarkupSuccess(null);

    let percentValue = 0;
    let fixedValue: number | undefined;
    if (markupType === "percent") {
      const raw = markupPercent.trim();
      if (!raw) {
        setMarkupError("请填写加价比例（0~30），空值不会保存");
        return;
      }
      const n = Number(raw);
      if (Number.isNaN(n) || n < 0 || n > 30) {
        setMarkupError("加价比例须在 0~30% 之间");
        return;
      }
      percentValue = n;
    } else {
      const raw = markupFixedAmount.trim();
      if (!raw) {
        setMarkupError("请填写固定加价金额（USD），空值不会保存");
        return;
      }
      const n = Number(raw);
      if (Number.isNaN(n) || n < 0) {
        setMarkupError("固定加价金额须 ≥ 0");
        return;
      }
      fixedValue = n;
    }

    setSavingMarkup(true);
    const res = await adminUpdateMarkupConfig("", token, tenantId, {
      business_customer_id: markupTarget.business_customer_id,
      markup_type: markupType,
      markup_percent: markupType === "percent" ? percentValue : 0,
      markup_fixed_amount: markupType === "fixed" ? fixedValue : undefined,
      remark: markupRemark,
    });
    setSavingMarkup(false);
    if (res.code !== 0) {
      setMarkupError(res.message || "保存失败，请稍后重试");
      return;
    }
    const summary = formatMarkupRule(res.data);
    setMarkupByBcId((m) => ({
      ...m,
      [markupTarget.business_customer_id]: summary,
    }));
    setMarkupSuccess(`已保存：${summary}`);
  };

  return (
    <AdminLayout>
      <PageHeader
        title="业务客户"
        subtitle={`租户 ${tenantId} · 客户组织与登录账号（加价按客户代码，识别靠账号）`}
        action={
          <div className="flex flex-wrap gap-2">
            <SecondaryButton
              onClick={() => {
                setAllUsersOpen(true);
                void loadAllUsers(allUsersKeyword);
              }}
            >
              全部登录账号
            </SecondaryButton>
            <PrimaryButton onClick={() => setCreateOpen(true)}>
              新增业务客户
            </PrimaryButton>
          </div>
        }
      />

      {status === "loading" && (
        <div className="space-y-2">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-14 w-full" />
          ))}
        </div>
      )}

      {status === "error" && (
        <ErrorBanner action={<SecondaryButton onClick={() => void load()}>重试</SecondaryButton>}>
          {error ?? "加载业务客户失败"}
        </ErrorBanner>
      )}

      {status === "empty" && (
        <Card className="p-8 text-center text-text-secondary">
          当前租户还没有业务客户
        </Card>
      )}

      {status === "success" && (
        <Card className="overflow-x-auto p-0">
          <div className="flex flex-wrap items-center gap-3 border-b border-border px-4 py-3 text-sm">
            <label className="inline-flex items-center gap-2 text-text-secondary">
              <input
                type="checkbox"
                checked={onlyWithUsers}
                onChange={(e) => setOnlyWithUsers(e.target.checked)}
              />
              仅显示有登录账号的客户（{rows.filter((r) => (r.user_count ?? 0) > 0).length}/
              {rows.length}）
            </label>
          </div>
          <table className="min-w-full text-sm">
            <thead className="bg-bg text-left text-text-secondary">
              <tr>
                <th className="px-4 py-3 font-medium">客户代码</th>
                <th className="px-4 py-3 font-medium">客户名称</th>
                <th className="px-4 py-3 font-medium">加价规则</th>
                <th className="px-4 py-3 font-medium">登录账号数</th>
                <th className="px-4 py-3 font-medium">状态</th>
                <th className="px-4 py-3 font-medium">备注</th>
                <th className="px-4 py-3 font-medium">更新时间</th>
                <th className="px-4 py-3 font-medium">操作</th>
              </tr>
            </thead>
            <tbody>
              {sortedRows.map((row) => (
                <tr key={row.business_customer_id} className="border-t border-border">
                  <td className="px-4 py-3 font-mono">
                    {row.external_code || "—"}
                  </td>
                  <td className="px-4 py-3">{row.name}</td>
                  <td className="px-4 py-3 font-mono text-primary">
                    {markupByBcId[row.business_customer_id] ?? "—"}
                  </td>
                  <td className="px-4 py-3 font-mono">{row.user_count ?? 0}</td>
                  <td className="px-4 py-3">{row.status === "active" ? "启用" : "停用"}</td>
                  <td className="px-4 py-3 text-text-secondary">{row.remark || "—"}</td>
                  <td className="px-4 py-3 text-text-secondary">
                    {formatDateTime(row.updated_at)}
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex flex-wrap gap-2">
                      <SecondaryButton onClick={() => openEdit(row)}>
                        编辑
                      </SecondaryButton>
                      <SecondaryButton
                        onClick={() => void openMarkup(row)}
                      >
                        客户加价
                      </SecondaryButton>
                      <SecondaryButton
                        onClick={async () => {
                          setUsersTarget(row);
                          setUsersError(null);
                          setUsers([]);
                          setUsersStatus("loading");
                          if (!token) return;
                          const res = await adminGetBusinessCustomerUsers(
                            "",
                            token,
                            tenantId,
                            row.business_customer_id,
                          );
                          if (res.code !== 0) {
                            setUsersStatus("error");
                            setUsersError(res.message);
                            return;
                          }
                          setUsers(res.data.list);
                          setUsersStatus(
                            res.data.list.length ? "success" : "empty",
                          );
                        }}
                      >
                        登录账号
                      </SecondaryButton>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}

      {createOpen && (
        <div
          className="fixed inset-0 z-50 flex justify-end bg-black/30"
          onClick={() => !creating && setCreateOpen(false)}
        >
          <div
            className="h-full w-full max-w-md bg-surface p-6 shadow-lg"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold">新增业务客户</h3>
            <div className="mt-6 space-y-4">
              <InputField
                label="客户 ID"
                value={createForm.business_customer_id}
                onChange={(e) =>
                  setCreateForm((prev) => ({
                    ...prev,
                    business_customer_id: e.target.value,
                  }))
                }
              />
              <InputField
                label="名称"
                value={createForm.name}
                onChange={(e) =>
                  setCreateForm((prev) => ({ ...prev, name: e.target.value }))
                }
              />
              <InputField
                label="外部编码"
                value={createForm.external_code}
                onChange={(e) =>
                  setCreateForm((prev) => ({
                    ...prev,
                    external_code: e.target.value,
                  }))
                }
              />
              <InputField
                label="备注"
                value={createForm.remark}
                onChange={(e) =>
                  setCreateForm((prev) => ({ ...prev, remark: e.target.value }))
                }
              />
              {createError ? <ErrorBanner>{createError}</ErrorBanner> : null}
              <div className="flex justify-end gap-2">
                <SecondaryButton onClick={() => setCreateOpen(false)}>取消</SecondaryButton>
                <PrimaryButton loading={creating} onClick={() => void handleCreate()}>
                  保存
                </PrimaryButton>
              </div>
            </div>
          </div>
        </div>
      )}

      {editing && (
        <div
          className="fixed inset-0 z-50 flex justify-end bg-black/30"
          onClick={() => !savingEdit && setEditing(null)}
        >
          <div
            className="h-full w-full max-w-md bg-surface p-6 shadow-lg"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold">编辑业务客户</h3>
            <div className="mt-6 space-y-4">
              <InputField
                label="名称"
                value={editForm.name}
                onChange={(e) =>
                  setEditForm((prev) => ({ ...prev, name: e.target.value }))
                }
              />
              <InputField
                label="外部编码"
                value={editForm.external_code}
                onChange={(e) =>
                  setEditForm((prev) => ({
                    ...prev,
                    external_code: e.target.value,
                  }))
                }
              />
              <SelectField
                label="状态"
                value={editForm.status}
                options={[
                  { value: "active", label: "启用" },
                  { value: "disabled", label: "停用" },
                ]}
                onChange={(e) =>
                  setEditForm((prev) => ({
                    ...prev,
                    status: e.target.value as "active" | "disabled",
                  }))
                }
              />
              <InputField
                label="备注"
                value={editForm.remark}
                onChange={(e) =>
                  setEditForm((prev) => ({ ...prev, remark: e.target.value }))
                }
              />
              {editError ? <ErrorBanner>{editError}</ErrorBanner> : null}
              <div className="flex justify-end gap-2">
                <SecondaryButton onClick={() => setEditing(null)}>取消</SecondaryButton>
                <PrimaryButton loading={savingEdit} onClick={() => void handleSaveEdit()}>
                  保存
                </PrimaryButton>
              </div>
            </div>
          </div>
        </div>
      )}

      {markupTarget && (
        <div
          className="fixed inset-0 z-50 flex justify-end bg-black/30"
          onClick={() => !savingMarkup && setMarkupTarget(null)}
        >
          <div
            className="h-full w-full max-w-md bg-surface p-6 shadow-lg"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold">
              客户加价 ·{" "}
              {[markupTarget.external_code, markupTarget.name]
                .filter(Boolean)
                .join(" · ") || markupTarget.business_customer_id}
            </h3>
            <p className="mt-1 text-sm text-text-secondary">
              仅对本业务客户生效；未配置时询价按 0% 处理。
            </p>
            <div className="mt-6 space-y-4">
              {loadingMarkup ? (
                <Skeleton className="h-10 w-full" />
              ) : null}
              <SelectField
                label="加价方式"
                value={markupType}
                disabled={savingMarkup || loadingMarkup}
                options={[
                  { value: "percent", label: "按运费百分比" },
                  { value: "fixed", label: "固定金额（USD）" },
                ]}
                onChange={(e) => {
                  setMarkupType(e.target.value as MarkupType);
                  setMarkupError(null);
                  setMarkupSuccess(null);
                }}
              />
              {markupType === "percent" ? (
                <InputField
                  label="加价比例（%）"
                  type="number"
                  step="0.01"
                  min={0}
                  max={30}
                  value={markupPercent}
                  disabled={savingMarkup || loadingMarkup}
                  onChange={(e) => {
                    setMarkupPercent(e.target.value);
                    setMarkupError(null);
                    setMarkupSuccess(null);
                  }}
                />
              ) : (
                <InputField
                  label="固定金额（USD）"
                  type="number"
                  step="0.01"
                  min={0}
                  value={markupFixedAmount}
                  disabled={savingMarkup || loadingMarkup}
                  onChange={(e) => {
                    setMarkupFixedAmount(e.target.value);
                    setMarkupError(null);
                    setMarkupSuccess(null);
                  }}
                />
              )}
              <InputField
                label="备注"
                value={markupRemark}
                disabled={savingMarkup || loadingMarkup}
                onChange={(e) => setMarkupRemark(e.target.value)}
              />
              <Card className="bg-bg text-sm text-text-secondary">
                保存后按客户组织 ID 匹配加价。百分比上限 30%；固定金额为每档报价叠加。空值不会保存，也不会覆盖已有规则。
              </Card>
              {markupError ? <ErrorBanner>{markupError}</ErrorBanner> : null}
              {markupSuccess ? (
                <Card className="border border-emerald-200 bg-emerald-50 text-sm text-emerald-900">
                  {markupSuccess}
                </Card>
              ) : null}
              <div className="flex justify-end gap-2">
                <SecondaryButton
                  type="button"
                  disabled={savingMarkup}
                  onClick={() => setMarkupTarget(null)}
                >
                  {markupSuccess ? "关闭" : "取消"}
                </SecondaryButton>
                <PrimaryButton
                  type="button"
                  loading={savingMarkup}
                  disabled={loadingMarkup}
                  onClick={() => void handleSaveMarkup()}
                >
                  保存
                </PrimaryButton>
              </div>
            </div>
          </div>
        </div>
      )}

      {usersTarget && (
        <div
          className="fixed inset-0 z-50 flex justify-end bg-black/30"
          onClick={() => setUsersTarget(null)}
        >
          <div
            className="flex h-full w-full max-w-lg flex-col bg-surface p-6 shadow-lg"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold">
              登录账号 ·{" "}
              {[usersTarget.external_code, usersTarget.name]
                .filter(Boolean)
                .join(" · ") || usersTarget.business_customer_id}
            </h3>
            <p className="mt-1 text-sm text-text-secondary">
              来自 ccnew PC/Web 登录账号（LR_Base_User），用于询价识别加价客户。
            </p>
            <div className="mt-4 flex-1 overflow-auto">
              {usersStatus === "loading" ? <Skeleton className="h-24 w-full" /> : null}
              {usersError ? <ErrorBanner>{usersError}</ErrorBanner> : null}
              {usersStatus === "empty" ? (
                <p className="text-sm text-text-secondary">暂无同步账号</p>
              ) : null}
              {usersStatus === "success" ? (
                <table className="min-w-full text-sm">
                  <thead className="bg-bg text-left text-text-secondary">
                    <tr>
                      <th className="px-3 py-2 font-medium">账号</th>
                      <th className="px-3 py-2 font-medium">姓名</th>
                      <th className="px-3 py-2 font-medium">状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    {users.map((u) => (
                      <tr
                        key={u.external_user_id}
                        className="border-t border-border"
                      >
                        <td className="px-3 py-2 font-mono">{u.account}</td>
                        <td className="px-3 py-2">{u.display_name || "—"}</td>
                        <td className="px-3 py-2">
                          {u.status === "active" ? "启用" : "停用"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : null}
            </div>
            <div className="mt-4 flex justify-end">
              <SecondaryButton onClick={() => setUsersTarget(null)}>关闭</SecondaryButton>
            </div>
          </div>
        </div>
      )}

      {allUsersOpen && (
        <div
          className="fixed inset-0 z-50 flex justify-end bg-black/30"
          onClick={() => setAllUsersOpen(false)}
        >
          <div
            className="flex h-full w-full max-w-2xl flex-col bg-surface p-6 shadow-lg"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold">全部登录账号</h3>
            <p className="mt-1 text-sm text-text-secondary">
              对应 ccnew「用户管理」中的客户账号；询价靠账号识别所属客户代码再套加价。
            </p>
            <div className="mt-4 flex gap-2">
              <InputField
                label="搜索账号 / 客户代码 / 名称"
                value={allUsersKeyword}
                onChange={(e) => setAllUsersKeyword(e.target.value)}
              />
              <div className="flex items-end">
                <SecondaryButton onClick={() => void loadAllUsers(allUsersKeyword)}>
                  查询
                </SecondaryButton>
              </div>
            </div>
            <div className="mt-4 flex-1 overflow-auto">
              {allUsersStatus === "loading" ? (
                <Skeleton className="h-24 w-full" />
              ) : null}
              {allUsersError ? <ErrorBanner>{allUsersError}</ErrorBanner> : null}
              {allUsersStatus === "empty" ? (
                <p className="text-sm text-text-secondary">暂无账号</p>
              ) : null}
              {allUsersStatus === "success" ? (
                <table className="min-w-full text-sm">
                  <thead className="bg-bg text-left text-text-secondary">
                    <tr>
                      <th className="px-3 py-2 font-medium">账号</th>
                      <th className="px-3 py-2 font-medium">姓名</th>
                      <th className="px-3 py-2 font-medium">客户代码</th>
                      <th className="px-3 py-2 font-medium">客户名称</th>
                      <th className="px-3 py-2 font-medium">状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    {allUsers.map((u) => (
                      <tr
                        key={u.external_user_id}
                        className="border-t border-border"
                      >
                        <td className="px-3 py-2 font-mono">{u.account}</td>
                        <td className="px-3 py-2">{u.display_name || "—"}</td>
                        <td className="px-3 py-2 font-mono">
                          {u.business_customer_code || "—"}
                        </td>
                        <td className="px-3 py-2">
                          {u.business_customer_name || "—"}
                        </td>
                        <td className="px-3 py-2">
                          {u.status === "active" ? "启用" : "停用"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : null}
            </div>
            <div className="mt-4 flex justify-end">
              <SecondaryButton onClick={() => setAllUsersOpen(false)}>关闭</SecondaryButton>
            </div>
          </div>
        </div>
      )}
    </AdminLayout>
  );
}