OpenFlare/frontend/app/(main)/nodes/components/node-editor-dialog.tsx

'use client';

import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import type {
  NodeItem,
  NodeMutationPayload,
  NodeType,
} from '@/lib/services/openflare';

const nodeSchema = z
  .object({
    node_type: z.enum(['edge_node', 'tunnel_relay', 'tunnel_client']),
    name: z.string().trim().min(1, '请输入节点名称').max(255),
    ip: z.string(),
    ip_manual_override: z.boolean(),
    auto_update_enabled: z.boolean(),
    geo_manual_override: z.boolean(),
    geo_name: z.string(),
    geo_latitude: z.string(),
    geo_longitude: z.string(),
    relay_bind_port: z.string(),
    relay_vhost_http_port: z.string(),
  })
  .superRefine((value, context) => {
    if (value.ip_manual_override && !value.ip.trim()) {
      context.addIssue({
        code: z.ZodIssueCode.custom,
        path: ['ip'],
        message: '锁定 IP 时必须填写节点 IP',
      });
    }
    if (value.node_type === 'tunnel_relay') {
      const bindPort = Number(value.relay_bind_port);
      const vhostPort = Number(value.relay_vhost_http_port);
      if (!Number.isFinite(bindPort) || bindPort <= 0) {
        context.addIssue({
          code: z.ZodIssueCode.custom,
          path: ['relay_bind_port'],
          message: '请输入有效的绑定端口',
        });
      }
      if (!Number.isFinite(vhostPort) || vhostPort <= 0) {
        context.addIssue({
          code: z.ZodIssueCode.custom,
          path: ['relay_vhost_http_port'],
          message: '请输入有效的 VHost 端口',
        });
      }
    }
  });

type NodeFormValues = z.infer<typeof nodeSchema>;

const defaultForm: NodeFormValues = {
  node_type: 'edge_node',
  name: '',
  ip: '',
  ip_manual_override: false,
  auto_update_enabled: false,
  geo_manual_override: false,
  geo_name: '',
  geo_latitude: '',
  geo_longitude: '',
  relay_bind_port: '7000',
  relay_vhost_http_port: '8080',
};

function buildFormValues(node?: NodeItem | null): NodeFormValues {
  if (!node) return defaultForm;

  return {
    node_type: node.node_type,
    name: node.name,
    ip: node.ip,
    ip_manual_override: node.ip_manual_override,
    auto_update_enabled: node.auto_update_enabled,
    geo_manual_override: node.geo_manual_override,
    geo_name: node.geo_name,
    geo_latitude:
      node.geo_latitude === undefined || node.geo_latitude === null
        ? ''
        : String(node.geo_latitude),
    geo_longitude:
      node.geo_longitude === undefined || node.geo_longitude === null
        ? ''
        : String(node.geo_longitude),
    relay_bind_port: String(node.relay_bind_port || 7000),
    relay_vhost_http_port: String(node.relay_vhost_http_port || 8080),
  };
}

function toPayload(form: NodeFormValues): NodeMutationPayload {
  const base: NodeMutationPayload = {
    node_type: form.node_type,
    name: form.name.trim(),
    ip: form.ip.trim(),
    ip_manual_override: form.ip_manual_override,
    auto_update_enabled: form.auto_update_enabled,
    geo_manual_override: form.geo_manual_override,
    geo_name: form.geo_manual_override ? form.geo_name.trim() : '',
    geo_latitude:
      form.geo_manual_override && form.geo_latitude
        ? Number(form.geo_latitude)
        : null,
    geo_longitude:
      form.geo_manual_override && form.geo_longitude
        ? Number(form.geo_longitude)
        : null,
  };

  if (form.node_type === 'tunnel_relay') {
    return {
      ...base,
      relay_bind_port: Number(form.relay_bind_port),
      relay_vhost_http_port: Number(form.relay_vhost_http_port),
      relay_web_server_enabled: true,
    };
  }

  return base;
}

export function NodeEditorDialog({
  open,
  node,
  submitting,
  onClose,
  onSubmit,
}: {
  open: boolean;
  node: NodeItem | null;
  submitting: boolean;
  onClose: () => void;
  onSubmit: (payload: NodeMutationPayload) => Promise<void>;
}) {
  const form = useForm<NodeFormValues>({
    resolver: zodResolver(nodeSchema),
    defaultValues: defaultForm,
  });

  useEffect(() => {
    if (open) {
      form.reset(buildFormValues(node));
    }
  }, [form, open, node]);

  const nodeType = form.watch('node_type');
  const ipManualOverride = form.watch('ip_manual_override');
  const geoManualOverride = form.watch('geo_manual_override');

  const handleSubmit = form.handleSubmit(async (values) => {
    await onSubmit(toPayload(values));
  });

  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
      <DialogContent className='sm:max-w-lg'>
        <DialogHeader>
          <DialogTitle>{node ? '编辑节点' : '新增节点'}</DialogTitle>
          <DialogDescription>
            预创建节点后可在详情页查看专属 Token 与部署命令。
          </DialogDescription>
        </DialogHeader>

        <form
          onSubmit={(event) => void handleSubmit(event)}
          className='space-y-4'
        >
          <div className='space-y-2'>
            <Label>节点类型</Label>
            <Select
              value={nodeType}
              disabled={Boolean(node)}
              onValueChange={(value) =>
                form.setValue('node_type', value as NodeType)
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value='edge_node'>Edge 节点</SelectItem>
                <SelectItem value='tunnel_relay'>Relay 节点</SelectItem>
                <SelectItem value='tunnel_client'>Tunnel 节点</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className='space-y-2'>
            <Label htmlFor='node-name'>节点名称</Label>
            <Input
              id='node-name'
              placeholder='例如 edge-hk-01'
              {...form.register('name')}
            />
            {form.formState.errors.name ? (
              <p className='text-xs text-destructive'>
                {form.formState.errors.name.message}
              </p>
            ) : null}
          </div>

          <div className='space-y-2'>
            <Label htmlFor='node-ip'>节点 IP</Label>
            <Input
              id='node-ip'
              placeholder='可选，接入后自动上报'
              {...form.register('ip')}
            />
            {form.formState.errors.ip ? (
              <p className='text-xs text-destructive'>
                {form.formState.errors.ip.message}
              </p>
            ) : null}
          </div>

          <div className='flex items-center justify-between rounded-lg border px-3 py-2'>
            <div>
              <p className='text-sm font-medium'>锁定 IP</p>
              <p className='text-xs text-muted-foreground'>
                启用后管理端不再自动覆盖 IP
              </p>
            </div>
            <Switch
              checked={ipManualOverride}
              onCheckedChange={(checked) =>
                form.setValue('ip_manual_override', checked)
              }
            />
          </div>

          <div className='flex items-center justify-between rounded-lg border px-3 py-2'>
            <div>
              <p className='text-sm font-medium'>自动更新 Agent</p>
              <p className='text-xs text-muted-foreground'>
                启用后节点将自动拉取正式版更新
              </p>
            </div>
            <Switch
              checked={form.watch('auto_update_enabled')}
              onCheckedChange={(checked) =>
                form.setValue('auto_update_enabled', checked)
              }
            />
          </div>

          {nodeType === 'tunnel_relay' ? (
            <div className='grid gap-3 sm:grid-cols-2'>
              <div className='space-y-2'>
                <Label htmlFor='relay-bind-port'>绑定端口</Label>
                <Input
                  id='relay-bind-port'
                  {...form.register('relay_bind_port')}
                />
                {form.formState.errors.relay_bind_port ? (
                  <p className='text-xs text-destructive'>
                    {form.formState.errors.relay_bind_port.message}
                  </p>
                ) : null}
              </div>
              <div className='space-y-2'>
                <Label htmlFor='relay-vhost-port'>VHost 端口</Label>
                <Input
                  id='relay-vhost-port'
                  {...form.register('relay_vhost_http_port')}
                />
                {form.formState.errors.relay_vhost_http_port ? (
                  <p className='text-xs text-destructive'>
                    {form.formState.errors.relay_vhost_http_port.message}
                  </p>
                ) : null}
              </div>
            </div>
          ) : null}

          <div className='flex items-center justify-between rounded-lg border px-3 py-2'>
            <div>
              <p className='text-sm font-medium'>手动地图点位</p>
              <p className='text-xs text-muted-foreground'>用于总览地图展示</p>
            </div>
            <Switch
              checked={geoManualOverride}
              onCheckedChange={(checked) =>
                form.setValue('geo_manual_override', checked)
              }
            />
          </div>

          {geoManualOverride ? (
            <div className='grid gap-3 sm:grid-cols-3'>
              <div className='space-y-2 sm:col-span-3'>
                <Label htmlFor='geo-name'>位置名称</Label>
                <Input id='geo-name' {...form.register('geo_name')} />
              </div>
              <div className='space-y-2'>
                <Label htmlFor='geo-lat'>纬度</Label>
                <Input id='geo-lat' {...form.register('geo_latitude')} />
              </div>
              <div className='space-y-2 sm:col-span-2'>
                <Label htmlFor='geo-lng'>经度</Label>
                <Input id='geo-lng' {...form.register('geo_longitude')} />
              </div>
            </div>
          ) : null}

          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={onClose}
              disabled={submitting}
            >
              取消
            </Button>
            <Button type='submit' disabled={submitting}>
              {submitting ? '保存中...' : node ? '保存修改' : '新增节点'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}