"use client";

import { use, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import {
  Button,
  Chip,
  Input,
  Label,
  ListBox,
  Modal,
  Pagination,
  Select,
  Spinner,
  Table,
  TextField,
  Tooltip,
} from "@heroui/react";
import { ArrowLeft, Pencil, ArrowRotateRight, Key, Copy, Check } from "@gravity-ui/icons";
import { api, type ChargePointPasswordReset } from "@/lib/api";
import { useSession } from "@/lib/auth-client";
import dayjs from "@/lib/dayjs";
import InfoSection from "@/components/info-section";
import { Plug } from "lucide-react";

// ── Status maps ────────────────────────────────────────────────────────────

const statusLabelMap: Record<string, string> = {
  Available: "空闲",
  Charging: "充电中",
  Preparing: "准备中",
  Finishing: "结束中",
  SuspendedEV: "EV 暂停",
  SuspendedEVSE: "EVSE 暂停",
  Reserved: "已预约",
  Faulted: "故障",
  Unavailable: "不可用",
  Occupied: "占用",
};

const statusDotClass: Record<string, string> = {
  Available: "bg-success",
  Charging: "bg-[var(--accent)] animate-pulse",
  Preparing: "bg-warning animate-pulse",
  Finishing: "bg-warning",
  SuspendedEV: "bg-warning",
  SuspendedEVSE: "bg-warning",
  Reserved: "bg-warning",
  Faulted: "bg-danger",
  Unavailable: "bg-danger",
  Occupied: "bg-warning",
};

const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
  Accepted: "success",
  Pending: "warning",
  Rejected: "danger",
};

const TX_LIMIT = 10;

// ── Helpers ────────────────────────────────────────────────────────────────

function formatDuration(start: string, stop: string | null): string {
  if (!stop) return "进行中";
  const min = dayjs(stop).diff(dayjs(start), "minute");
  if (min < 60) return `${min} 分钟`;
  const h = Math.floor(min / 60);
  const m = min % 60;
  return `${h}h ${m}m`;
}

function relativeTime(iso: string): string {
  return dayjs(iso).fromNow();
}

// ── Edit form type ─────────────────────────────────────────────────────────

type EditForm = {
  deviceName: string;
  chargePointVendor: string;
  chargePointModel: string;
  registrationStatus: "Accepted" | "Pending" | "Rejected";
  pricingMode: "fixed" | "tou";
  feePerKwh: string;
};

// ── Component ──────────────────────────────────────────────────────────────

export default function ChargePointDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);

  // transactions
  const [txPage, setTxPage] = useState(1);

  // edit modal
  const [editOpen, setEditOpen] = useState(false);
  const [editBusy, setEditBusy] = useState(false);
  const [editForm, setEditForm] = useState<EditForm>({
    deviceName: "",
    chargePointVendor: "",
    chargePointModel: "",
    registrationStatus: "Pending",
    pricingMode: "fixed",
    feePerKwh: "0",
  });

  // reset password
  const [resetBusy, setResetBusy] = useState(false);
  const [resetResult, setResetResult] = useState<ChargePointPasswordReset | null>(null);
  const [resetCopied, setResetCopied] = useState(false);

  const handleResetPassword = async () => {
    if (!cp) return;
    setResetBusy(true);
    try {
      const result = await api.chargePoints.resetPassword(cp.id);
      setResetResult(result);
    } finally {
      setResetBusy(false);
    }
  };

  const handleCopyResetPassword = (text: string) => {
    navigator.clipboard.writeText(text).then(() => {
      setResetCopied(true);
      setTimeout(() => setResetCopied(false), 2000);
    });
  };

  const { isFetching: refreshing, ...cpQuery } = useQuery({
    queryKey: ["chargePoint", id],
    queryFn: () => api.chargePoints.get(id),
    refetchInterval: 3_000,
    retry: false,
  });

  const txQuery = useQuery({
    queryKey: ["chargePointTransactions", id, txPage],
    queryFn: () => api.transactions.list({ page: txPage, limit: TX_LIMIT, chargePointId: id }),
    refetchInterval: 3_000,
  });

  const cp = cpQuery.data;
  const txData = txQuery.data;

  const openEdit = () => {
    if (!cp) return;
    setEditForm({
      deviceName: cp.deviceName ?? "",
      chargePointVendor: cp.chargePointVendor ?? "",
      chargePointModel: cp.chargePointModel ?? "",
      registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
      pricingMode: cp.pricingMode,
      feePerKwh: String(cp.feePerKwh),
    });
    setEditOpen(true);
  };

  const handleEditSubmit = async () => {
    if (!cp) return;
    setEditBusy(true);
    try {
      const fee = Math.max(0, Math.round(Number(editForm.feePerKwh) || 0));
      await api.chargePoints.update(cp.id, {
        chargePointVendor: editForm.chargePointVendor,
        chargePointModel: editForm.chargePointModel,
        registrationStatus: editForm.registrationStatus,
        pricingMode: editForm.pricingMode,
        feePerKwh: editForm.pricingMode === "fixed" ? fee : 0,
        deviceName: editForm.deviceName.trim() || null,
      });
      await cpQuery.refetch();
      setEditOpen(false);
    } finally {
      setEditBusy(false);
    }
  };

  // Online if last heartbeat within 3× interval
  const isOnline =
    cp?.lastHeartbeatAt != null &&
    dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < (cp.heartbeatInterval ?? 60) * 3;

  const { data: sessionData } = useSession();
  const isAdmin = sessionData?.user?.role === "admin";

  // ── Render: loading / not found ──────────────────────────────────────────

  if (cpQuery.isPending) {
    return (
      <div className="flex h-48 items-center justify-center">
        <Spinner />
      </div>
    );
  }

  if (!cp) {
    return (
      <div className="space-y-4">
        <Link
          href="/dashboard/charge-points"
          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
        >
          <ArrowLeft className="size-4" />
          充电桩管理
        </Link>
        <p className="text-sm text-danger">充电桩不存在或已被删除。</p>
      </div>
    );
  }

  const sortedConnectors = [...cp.connectors].sort((a, b) => a.connectorId - b.connectorId);

  // ── Render ───────────────────────────────────────────────────────────────

  return (
    <div className="space-y-6">
      {/* Breadcrumb back */}
      <Link
        href="/dashboard/charge-points"
        className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
      >
        <ArrowLeft className="size-4" />
        充电桩管理
      </Link>

      {/* Header */}
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-1.5">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="text-2xl font-semibold text-foreground">
              {cp.deviceName ?? <span className="font-mono">{cp.chargePointIdentifier}</span>}
            </h1>
            {isAdmin && cp.deviceName && (
              <span className="font-mono text-sm text-muted">{cp.chargePointIdentifier}</span>
            )}
            <Chip
              color={registrationColorMap[cp.registrationStatus] ?? "warning"}
              size="sm"
              variant="soft"
            >
              {cp.registrationStatus}
            </Chip>
            <div className="flex items-center gap-1.5">
              <span
                className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`}
              />
              <span className="text-xs text-muted">{isOnline ? "在线" : "离线"}</span>
            </div>
          </div>
          {(cp.chargePointVendor || cp.chargePointModel) && (
            <p className="text-sm text-muted">
              {[cp.chargePointVendor, cp.chargePointModel].filter(Boolean).join(" · ")}
            </p>
          )}
        </div>
        <div className="flex items-center gap-2">
          <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={() => cpQuery.refetch()} aria-label="刷新">
            <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
          </Button>
          {isAdmin && (
            <>
              <Tooltip>
                <Tooltip.Content>重置 OCPP 连接密码</Tooltip.Content>
                <Tooltip.Trigger>
                  <Button size="sm" variant="ghost" isDisabled={resetBusy} onPress={handleResetPassword}>
                    {resetBusy ? <Spinner size="sm" /> : <Key className="size-4" />}
                    重置密码
                  </Button>
                </Tooltip.Trigger>
              </Tooltip>
              <Button size="sm" variant="secondary" onPress={openEdit}>
                <Pencil className="size-4" />
                编辑
              </Button>
            </>
          )}
        </div>
      </div>

      {/* Info grid */}
      {cp.chargePointStatus && (
        <div
          className={`flex items-center gap-3 rounded-xl border px-4 py-3 ${
            cp.chargePointStatus === "Available"
              ? "border-success/30 bg-success/5"
              : cp.chargePointStatus === "Faulted" || cp.chargePointStatus === "Unavailable"
                ? "border-danger/30 bg-danger/5"
                : "border-warning/30 bg-warning/5"
          }`}
        >
          <span
            className={`size-2.5 shrink-0 rounded-full ${statusDotClass[cp.chargePointStatus] ?? "bg-warning"}`}
          />
          <span className="text-sm font-semibold text-foreground">
            {cp.chargePointStatus === "Available"
              ? "正常"
              : (statusLabelMap[cp.chargePointStatus] ?? cp.chargePointStatus)}
          </span>
          {cp.chargePointErrorCode && cp.chargePointErrorCode !== "NoError" && (
            <>
              <span className="text-muted">·</span>
              <span className="text-xs text-danger">{cp.chargePointErrorCode}</span>
            </>
          )}
          <span className="ml-auto text-xs text-muted">整桩状态</span>
        </div>
      )}

      {/* Info grid */}
      <div className="grid gap-4 md:grid-cols-2">
        {/* Device info — admin only */}
        {isAdmin && (
          <InfoSection title="设备信息">
            <dl className="divide-y divide-border">
              {[
                { label: "品牌", value: cp.chargePointVendor },
                { label: "型号", value: cp.chargePointModel },
                { label: "序列号", value: cp.chargePointSerialNumber },
                { label: "固件版本", value: cp.firmwareVersion },
                { label: "电表型号", value: cp.meterType },
                { label: "电表序列号", value: cp.meterSerialNumber },
                { label: "ICCID", value: cp.iccid },
                { label: "IMSI", value: cp.imsi },
              ].map(({ label, value }) => (
                <div key={label} className="flex items-center justify-between gap-4 py-2">
                  <dt className="shrink-0 text-sm text-muted">{label}</dt>
                  <dd className="truncate text-sm text-foreground">
                    {value ?? <span className="text-muted">—</span>}
                  </dd>
                </div>
              ))}
            </dl>
          </InfoSection>
        )}

        {/* Operation info — admin only */}
        {isAdmin && (
          <InfoSection title="运行配置">
            <dl className="divide-y divide-border">
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">注册状态</dt>
                <dd>
                  <Chip
                    color={registrationColorMap[cp.registrationStatus] ?? "warning"}
                    size="sm"
                    variant="soft"
                  >
                    {cp.registrationStatus}
                  </Chip>
                </dd>
              </div>
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">电价</dt>
                <dd className="text-sm text-foreground">
                  {cp.pricingMode === "tou" ? (
                    <span className="text-accent font-medium">峰谷电价</span>
                  ) : cp.feePerKwh > 0 ? (
                    <span>
                      {cp.feePerKwh} 分/kWh
                      <span className="ml-1 text-xs text-muted">
                        (¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
                      </span>
                    </span>
                  ) : (
                    "免费"
                  )}
                </dd>
              </div>
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">心跳间隔</dt>
                <dd className="text-sm text-foreground">
                  {cp.heartbeatInterval != null ? (
                    `${cp.heartbeatInterval} 秒`
                  ) : (
                    <span className="text-muted">—</span>
                  )}
                </dd>
              </div>
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">最后心跳</dt>
                <dd className="text-right text-sm text-foreground">
                  {cp.lastHeartbeatAt ? (
                    <span title={dayjs(cp.lastHeartbeatAt).format("YYYY/M/D HH:mm:ss")}>
                      {relativeTime(cp.lastHeartbeatAt)}
                    </span>
                  ) : (
                    <span className="text-muted">—</span>
                  )}
                </dd>
              </div>
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">最后启动通知</dt>
                <dd className="text-right text-sm text-foreground">
                  {cp.lastBootNotificationAt ? (
                    <span title={dayjs(cp.lastBootNotificationAt).format("YYYY/M/D HH:mm:ss")}>
                      {relativeTime(cp.lastBootNotificationAt)}
                    </span>
                  ) : (
                    <span className="text-muted">—</span>
                  )}
                </dd>
              </div>
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">注册时间</dt>
                <dd className="text-sm text-foreground">
                  {dayjs(cp.createdAt).format("YYYY/M/D")}
                </dd>
              </div>
            </dl>
          </InfoSection>
        )}

        {/* Fee info — user only */}
        {!isAdmin && (
          <InfoSection title="电价信息">
            <dl className="divide-y divide-border">
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">单位电价</dt>
                <dd className="text-sm text-foreground">
                  {cp.pricingMode === "tou" ? (
                    <span className="text-accent font-medium">峰谷电价</span>
                  ) : cp.feePerKwh > 0 ? (
                    <span>
                      <span className="font-semibold">¥{(cp.feePerKwh / 100).toFixed(2)}</span>
                      <span className="ml-1 text-xs text-muted">/kWh</span>
                    </span>
                  ) : (
                    <span className="text-success font-medium">免费</span>
                  )}
                </dd>
              </div>
              <div className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">充电桥状态</dt>
                <dd>
                  <div className="flex items-center gap-1.5">
                    <span
                      className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`}
                    />
                    <span className="text-sm text-foreground">{isOnline ? "在线" : "离线"}</span>
                  </div>
                </dd>
              </div>
            </dl>
          </InfoSection>
        )}
      </div>

      {/* Connectors */}
      {sortedConnectors.length > 0 && (
        <div className="space-y-3">
          <h2 className="text-sm font-semibold text-foreground">接口状态</h2>
          <div className="flex flex-wrap gap-3">
            {sortedConnectors.map((conn) => (
              <div
                key={conn.id}
                className="flex min-w-40 flex-col gap-2 rounded-xl border border-border bg-surface p-3"
              >
                <div className="flex items-center gap-2">
                  <Plug className="size-4 shrink-0 text-muted" />
                  <span className="text-sm font-medium text-foreground">
                    接口 #{conn.connectorId}
                  </span>
                  <span className="ml-auto flex items-center gap-1">
                    <span
                      className={`size-2 shrink-0 rounded-full ${statusDotClass[conn.status] ?? "bg-warning"}`}
                    />
                    <span className="text-xs text-muted">
                      {statusLabelMap[conn.status] ?? conn.status}
                    </span>
                  </span>
                </div>
                {conn.errorCode && conn.errorCode !== "NoError" && (
                  <p className="text-xs text-danger">错误: {conn.errorCode}</p>
                )}
                {/* {conn.info && <p className="text-xs text-muted">{conn.info}</p>} */}
                <p className="text-xs text-muted">
                  更新于{" "}
                  {dayjs(conn.lastStatusAt).format("MM/DD HH:mm")}
                </p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Transactions */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-semibold text-foreground">充电记录</h2>
          {txData && <span className="text-xs text-muted">共 {txData.total} 条</span>}
        </div>

        <Table>
          <Table.ScrollContainer>
            <Table.Content aria-label="充电记录">
              <Table.Header>
                <Table.Column isRowHeader>ID</Table.Column>
                <Table.Column>接口</Table.Column>
                <Table.Column>充电卡</Table.Column>
                <Table.Column>开始时间</Table.Column>
                <Table.Column>时长</Table.Column>
                <Table.Column>用电量</Table.Column>
                <Table.Column>费用</Table.Column>
                <Table.Column>停止原因</Table.Column>
              </Table.Header>
              <Table.Body
                renderEmptyState={() => (
                  <div className="py-8 text-center text-sm text-muted">
                    {txQuery.isPending ? "加载中…" : "暂无充电记录"}
                  </div>
                )}
              >
                {(txData?.data ?? []).map((tx) => (
                  <Table.Row key={tx.id} id={tx.id}>
                    <Table.Cell className="font-mono text-sm text-muted">#{tx.id}</Table.Cell>
                    <Table.Cell>
                      {tx.connectorNumber != null ? (
                        `#${tx.connectorNumber}`
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </Table.Cell>
                    <Table.Cell className="font-mono">{tx.idTag}</Table.Cell>
                    <Table.Cell className="tabular-nums text-sm">
                      {dayjs(tx.startTimestamp).format("MM/DD HH:mm")}
                    </Table.Cell>
                    <Table.Cell>{formatDuration(tx.startTimestamp, tx.stopTimestamp)}</Table.Cell>
                    <Table.Cell className="tabular-nums">
                      {tx.energyWh != null ? (
                        `${(tx.energyWh / 1000).toFixed(2)} kWh`
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </Table.Cell>
                    <Table.Cell className="tabular-nums">
                      {tx.chargeAmount != null ? (
                        `¥${(tx.chargeAmount / 100).toFixed(2)}`
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </Table.Cell>
                    <Table.Cell>
                      {tx.stopReason ?? <span className="text-muted">—</span>}
                    </Table.Cell>
                  </Table.Row>
                ))}
              </Table.Body>
            </Table.Content>
          </Table.ScrollContainer>
        </Table>

        {txData && txData.totalPages > 1 && (
          <div className="flex justify-center">
            <Pagination size="sm">
              <Pagination.Content>
                <Pagination.Item>
                  <Pagination.Previous
                    isDisabled={txPage === 1}
                    onPress={() => setTxPage((p) => Math.max(1, p - 1))}
                  >
                    <Pagination.PreviousIcon />
                    上一页
                  </Pagination.Previous>
                </Pagination.Item>
                {Array.from({ length: txData.totalPages }, (_, i) => i + 1).map((p) => (
                  <Pagination.Item key={p}>
                    <Pagination.Link isActive={p === txPage} onPress={() => setTxPage(p)}>
                      {p}
                    </Pagination.Link>
                  </Pagination.Item>
                ))}
                <Pagination.Item>
                  <Pagination.Next
                    isDisabled={txPage === txData.totalPages}
                    onPress={() => setTxPage((p) => Math.min(txData.totalPages, p + 1))}
                  >
                    下一页
                    <Pagination.NextIcon />
                  </Pagination.Next>
                </Pagination.Item>
              </Pagination.Content>
            </Pagination>
          </div>
        )}
      </div>

      {/* Reset password result modal */}
      {isAdmin && (
        <Modal
          isOpen={resetResult !== null}
          onOpenChange={(open) => {
            if (!open) { setResetResult(null); setResetCopied(false); }
          }}
        >
          <Modal.Backdrop>
            <Modal.Container scroll="outside">
              <Modal.Dialog className="sm:max-w-md">
                <Modal.Header>
                  <Modal.Heading>密码已重置 — 请保存新密码</Modal.Heading>
                </Modal.Header>
                <Modal.Body className="space-y-4">
                  <p className="text-sm text-warning font-medium">
                    ⚠️ 此密码仅显示一次，关闭后无法再次查看。旧密码已立即失效，请更新固件配置。
                  </p>
                  <div className="space-y-1.5">
                    <p className="text-xs text-muted font-medium">新 OCPP Basic Auth 密码</p>
                    <div className="flex items-center gap-2">
                      <code className="flex-1 rounded-md bg-surface-secondary px-3 py-2 text-sm font-mono text-foreground select-all">
                        {resetResult?.plainPassword}
                      </code>
                      <Tooltip>
                        <Tooltip.Content>{resetCopied ? "已复制" : "复制密码"}</Tooltip.Content>
                        <Tooltip.Trigger>
                          <Button
                            isIconOnly
                            size="sm"
                            variant="ghost"
                            onPress={() => resetResult && handleCopyResetPassword(resetResult.plainPassword)}
                          >
                            {resetCopied ? <Check className="size-4 text-success" /> : <Copy className="size-4" />}
                          </Button>
                        </Tooltip.Trigger>
                      </Tooltip>
                    </div>
                  </div>
                </Modal.Body>
                <Modal.Footer className="flex justify-end">
                  <Button onPress={() => { setResetResult(null); setResetCopied(false); }}>
                    我已保存密码
                  </Button>
                </Modal.Footer>
              </Modal.Dialog>
            </Modal.Container>
          </Modal.Backdrop>
        </Modal>
      )}

      {/* Edit modal */}
      {isAdmin && (
        <Modal
          isOpen={editOpen}
          onOpenChange={(open) => {
            if (!editBusy) setEditOpen(open);
          }}
        >
          <Modal.Backdrop>
            <Modal.Container scroll="outside">
              <Modal.Dialog className="sm:max-w-md">
                <Modal.CloseTrigger />
                <Modal.Header>
                  <Modal.Heading>编辑充电桩</Modal.Heading>
                </Modal.Header>
                <Modal.Body className="space-y-3">
                  <TextField fullWidth>
                    <Label className="text-sm font-medium">设备名称</Label>
                    <Input
                      placeholder="1号楼A区01号桩"
                      value={editForm.deviceName}
                      onChange={(e) =>
                        setEditForm((f) => ({ ...f, deviceName: e.target.value }))
                      }
                    />
                  </TextField>
                  <div className="grid grid-cols-2 gap-3">
                    <TextField fullWidth>
                      <Label className="text-sm font-medium">品牌</Label>
                      <Input
                        placeholder="Unknown"
                        value={editForm.chargePointVendor}
                        onChange={(e) =>
                          setEditForm((f) => ({ ...f, chargePointVendor: e.target.value }))
                        }
                      />
                    </TextField>
                    <TextField fullWidth>
                      <Label className="text-sm font-medium">型号</Label>
                      <Input
                        placeholder="Unknown"
                        value={editForm.chargePointModel}
                        onChange={(e) =>
                          setEditForm((f) => ({ ...f, chargePointModel: e.target.value }))
                        }
                      />
                    </TextField>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium">注册状态</Label>
                    <Select
                      fullWidth
                      selectedKey={editForm.registrationStatus}
                      onSelectionChange={(key) =>
                        setEditForm((f) => ({
                          ...f,
                          registrationStatus: String(key) as EditForm["registrationStatus"],
                        }))
                      }
                    >
                      <Select.Trigger>
                        <Select.Value />
                        <Select.Indicator />
                      </Select.Trigger>
                      <Select.Popover>
                        <ListBox>
                          <ListBox.Item id="Accepted">Accepted</ListBox.Item>
                          <ListBox.Item id="Pending">Pending</ListBox.Item>
                          <ListBox.Item id="Rejected">Rejected</ListBox.Item>
                        </ListBox>
                      </Select.Popover>
                    </Select>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium">计费模式</Label>
                    <Select
                      fullWidth
                      selectedKey={editForm.pricingMode}
                      onSelectionChange={(key) =>
                        setEditForm((f) => ({
                          ...f,
                          pricingMode: String(key) as EditForm["pricingMode"],
                        }))
                      }
                    >
                      <Select.Trigger>
                        <Select.Value />
                        <Select.Indicator />
                      </Select.Trigger>
                      <Select.Popover>
                        <ListBox>
                          <ListBox.Item id="fixed">固定电价</ListBox.Item>
                          <ListBox.Item id="tou">峰谷电价</ListBox.Item>
                        </ListBox>
                      </Select.Popover>
                    </Select>
                  </div>
                  {editForm.pricingMode === "fixed" && (
                  <TextField fullWidth>
                    <Label className="text-sm font-medium">固定电价（分/kWh）</Label>
                    <Input
                      type="number"
                      min="0"
                      step="1"
                      placeholder="0"
                      value={editForm.feePerKwh}
                      onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
                    />
                  </TextField>
                  )}
                </Modal.Body>
                <Modal.Footer className="flex justify-end gap-2">
                  <Button variant="ghost" onPress={() => setEditOpen(false)}>
                    取消
                  </Button>
                  <Button isDisabled={editBusy} onPress={handleEditSubmit}>
                    {editBusy ? <Spinner size="sm" /> : "保存"}
                  </Button>
                </Modal.Footer>
              </Modal.Dialog>
            </Modal.Container>
          </Modal.Backdrop>
        </Modal>
      )}
    </div>
  );
}