helios-evcs/apps/web/app/dashboard/settings/parameters/page.tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Alert, Button, Input, Label, Spinner, TextField, toast } from "@heroui/react";
import { Gear, Lock } from "@gravity-ui/icons";
import { useSession } from "@/lib/auth-client";
import { api, type SystemSettings } from "@/lib/api";

const MIN_HEARTBEAT = 10;
const MAX_HEARTBEAT = 86400;
const DEFAULT_HEARTBEAT = 60;

export default function ParametersSettingsPage() {
  const { data: session } = useSession();
  const isAdmin = session?.user?.role === "admin";
  const queryClient = useQueryClient();

  const { data: settings, isLoading } = useQuery({
    queryKey: ["system-settings"],
    queryFn: () => api.settings.get(),
    enabled: isAdmin,
  });

  const [heartbeatInterval, setHeartbeatInterval] = useState(String(DEFAULT_HEARTBEAT));
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!settings) return;
    setHeartbeatInterval(String(settings.ocpp16j.heartbeatInterval));
  }, [settings]);

  const parsedHeartbeat = useMemo(() => {
    const n = Number(heartbeatInterval);
    if (!Number.isFinite(n)) return null;
    return Math.round(n);
  }, [heartbeatInterval]);

  const heartbeatError =
    parsedHeartbeat === null
      ? "请输入有效数字"
      : parsedHeartbeat < MIN_HEARTBEAT || parsedHeartbeat > MAX_HEARTBEAT
        ? `范围应为 ${MIN_HEARTBEAT} - ${MAX_HEARTBEAT} 秒`
        : "";

  const isDirty = settings
    ? Number(heartbeatInterval) !== settings.ocpp16j.heartbeatInterval
    : false;

  const handleSave = async () => {
    if (parsedHeartbeat === null) {
      toast.warning("请输入有效的心跳间隔");
      return;
    }

    if (parsedHeartbeat < MIN_HEARTBEAT || parsedHeartbeat > MAX_HEARTBEAT) {
      toast.warning(`心跳间隔范围应为 ${MIN_HEARTBEAT}-${MAX_HEARTBEAT} 秒`);
      return;
    }

    const payload: SystemSettings = {
      ocpp16j: { heartbeatInterval: parsedHeartbeat },
    };

    setSaving(true);
    try {
      await api.settings.put(payload);
      toast.success("参数配置已保存");
      queryClient.invalidateQueries({ queryKey: ["system-settings"] });
    } catch {
      toast.warning("保存失败，请稍后重试");
    } finally {
      setSaving(false);
    }
  };

  if (!isAdmin) {
    return (
      <div className="flex flex-col items-center justify-center py-24 text-center">
        <div className="mb-4 flex size-12 items-center justify-center rounded-full bg-warning/10">
          <Lock className="size-6 text-warning" />
        </div>
        <p className="text-sm font-semibold text-foreground">需要管理员权限</p>
        <p className="mt-1 text-sm text-muted">参数配置仅对管理员开放</p>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-24">
        <Spinner size="lg" />
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-3xl space-y-6">
      <div>
        <div className="flex items-center gap-2">
          <Gear className="size-5 text-foreground" />
          <h1 className="text-xl font-semibold text-foreground">参数配置</h1>
        </div>
        <p className="mt-0.5 text-sm text-muted">
          按功能模块管理系统参数，变更将影响后续设备交互行为
        </p>
      </div>

      <div className="rounded-xl border border-border bg-surface-secondary">
        <div className="flex items-center gap-3 border-b border-border px-5 py-4">
          <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
            <Gear className="size-5 text-accent" />
          </div>
          <div>
            <p className="text-sm font-semibold text-foreground">OCPP 1.6J</p>
            <p className="text-xs text-muted">协议层行为参数</p>
          </div>
        </div>

        <div className="space-y-4 px-5 py-4">
          <TextField fullWidth>
            <Label className="text-sm font-medium">心跳间隔</Label>
            <Input
              type="number"
              min={String(MIN_HEARTBEAT)}
              max={String(MAX_HEARTBEAT)}
              step="1"
              value={heartbeatInterval}
              onChange={(e) => setHeartbeatInterval(e.target.value)}
              placeholder="60"
            />
          </TextField>

          <p className="text-xs text-muted">
            单位：秒。该值会用于 BootNotification.conf 的 interval
            字段，并下发给充电桩默认心跳参数。
          </p>

          {!!heartbeatError && (
            <Alert status="warning">
              <Alert.Indicator />
              <Alert.Content>
                <Alert.Description>{heartbeatError}</Alert.Description>
              </Alert.Content>
            </Alert>
          )}

          <div className="flex justify-end">
            <Button
              size="sm"
              isDisabled={saving || !isDirty || !!heartbeatError}
              onPress={handleSave}
            >
              {saving ? <Spinner size="sm" color="current" /> : "保存"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}