aiops/frontend/src/components/kubernetes/deployment-edit/ContainerEditor.tsx

// ContainerEditor.tsx — 单容器完整编辑（基本/命令/环境变量/端口/资源/探针/生命周期/安全/卷挂载）
// 作者: Logan <admin@attacker.club>
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import {
  Plus,
  Trash2,
  Cpu,
  Heart,
  FolderOpen,
  Terminal,
  Shield,
  Zap,
  Network,
} from 'lucide-react';

import { arrToText, textToArr } from './container-utils';
import type {
import { useTranslation } from 'react-i18next';
  ContainerEditorProps, ProbeEditorProps, LifecycleHandlerEditorProps,
  BoolToggleProps, ProbeDef, LifecycleHandler,
} from './types';

export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
  const { t } = useTranslation();
  const c = container;
  const sectionBtn = "flex items-center gap-1.5 text-xs font-semibold text-[var(--dg-text-secondary)] mb-2";

  return (
    <>
      {/* ---- 基本设置 ---- */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div>
          <Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.sa51cd0')}</Label>
          <Input value={c.name} onChange={e => onUpdate({ name: e.target.value })}
            placeholder="my-app"
            className="mt-1 dg-input font-mono text-xs h-8" />
        </div>
        <div>
          <Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s332ca5')}</Label>
          <Input value={c.image} onChange={e => onUpdate({ image: e.target.value })}
            placeholder="nginx:1.25"
            className="mt-1 dg-input font-mono text-xs h-8" />
        </div>
        <div>
          <Label className="dg-text-secondary text-xs">{t('kubernetes.deployment.imagePullPolicy')}</Label>
          <Select value={c.imagePullPolicy || '__none'} onValueChange={v => onUpdate({ imagePullPolicy: v === '__none' ? '' : v })}>
            <SelectTrigger className="mt-1 dg-input text-xs h-8">
              <SelectValue />
            </SelectTrigger>
            <SelectContent className="dg-input">
              <SelectItem value="__none" className="dg-text-secondary">{t('kubernetes.containereditor.sd2f3ee')}</SelectItem>
              <SelectItem value="Always" className="text-[var(--dg-text-primary)]">Always</SelectItem>
              <SelectItem value="IfNotPresent" className="text-[var(--dg-text-primary)]">IfNotPresent</SelectItem>
              <SelectItem value="Never" className="text-[var(--dg-text-primary)]">Never</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s4867b9')}</Label>
          <Input value={c.workingDir || ''} onChange={e => onUpdate({ workingDir: e.target.value })}
            placeholder="/app"
            className="mt-1 dg-input font-mono text-xs h-8" />
        </div>
      </div>

      {/* ---- 命令与参数 ---- */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div>
          <Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s34ab0f')}</Label>
          <Textarea value={arrToText(c.command)} placeholder={"/bin/sh\n-c"}
            onChange={e => onUpdate({ command: textToArr(e.target.value) })}
            className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
        </div>
        <div>
          <Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s6dd286')}</Label>
          <Textarea value={arrToText(c.args)} placeholder={"--config=/etc/app.yaml\n--debug"}
            onChange={e => onUpdate({ args: textToArr(e.target.value) })}
            className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
        </div>
      </div>

      {/* ---- 环境变量 ---- */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <div className={sectionBtn}><Terminal className="h-3.5 w-3.5 dg-text-cyan" /> {t('pipeline.envVar')}</div>
          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
            onClick={() => onUpdate({ env: [...c.env, { name: '', value: '' }] })}>
            <Plus className="h-3 w-3 mr-1" />新增
          </Button>
        </div>
        <div className="space-y-1.5">
          {c.env.map((env, ei) => (
            <div key={ei} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
              <Input value={env.name} placeholder="KEY"
                onChange={e => { const n = [...c.env]; n[ei] = { ...env, name: e.target.value }; onUpdate({ env: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <Input value={env.value || ''} placeholder="value"
                onChange={e => { const n = [...c.env]; n[ei] = { ...env, value: e.target.value }; onUpdate({ env: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
                onClick={() => onUpdate({ env: c.env.filter((_, j) => j !== ei) })}>
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          ))}
          {c.env.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s9f809d')}</p>}
        </div>
      </div>

      {/* ---- 端口 ---- */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <div className={sectionBtn}><Network className="h-3.5 w-3.5 text-indigo-400" /> {t('server.csv.port')}</div>
          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
            onClick={() => onUpdate({ ports: [...c.ports, { name: '', containerPort: '', protocol: 'TCP' }] })}>
            <Plus className="h-3 w-3 mr-1" />新增
          </Button>
        </div>
        <div className="space-y-1.5">
          {c.ports.map((p, pi) => (
            <div key={pi} className="grid grid-cols-[1fr_1fr_100px_auto] gap-2">
              <Input value={p.name || ''} placeholder="http"
                onChange={e => { const n = [...c.ports]; n[pi] = { ...p, name: e.target.value }; onUpdate({ ports: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <Input type="number" value={p.containerPort} placeholder="8080"
                onChange={e => { const n = [...c.ports]; n[pi] = { ...p, containerPort: e.target.value }; onUpdate({ ports: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <Select value={p.protocol || 'TCP'} onValueChange={v => { const n = [...c.ports]; n[pi] = { ...p, protocol: v }; onUpdate({ ports: n }); }}>
                <SelectTrigger className="dg-input text-xs h-8">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="dg-input">
                  <SelectItem value="TCP" className="text-[var(--dg-text-primary)]">TCP</SelectItem>
                  <SelectItem value="UDP" className="text-[var(--dg-text-primary)]">UDP</SelectItem>
                  <SelectItem value="SCTP" className="text-[var(--dg-text-primary)]">SCTP</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
                onClick={() => onUpdate({ ports: c.ports.filter((_, j) => j !== pi) })}>
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          ))}
          {c.ports.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.sbc8b87')}</p>}
        </div>
      </div>

      {/* ---- 资源 requests/limits ---- */}
      <div>
        <div className={sectionBtn}><Cpu className="h-3.5 w-3.5 dg-text-yellow" /> {t('kubernetes.containereditor.s0b1499')}</div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          <div>
            <Label className="text-[11px] dg-text-muted">{t('kubernetes.node.cpuRequests')}</Label>
            <Input value={c.resources.requests?.cpu || ''} placeholder="100m"
              onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, cpu: e.target.value } } })}
              className="dg-input font-mono text-xs h-8" />
          </div>
          <div>
            <Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s96ac88')}</Label>
            <Input value={c.resources.limits?.cpu || ''} placeholder="500m"
              onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, cpu: e.target.value } } })}
              className="dg-input font-mono text-xs h-8" />
          </div>
          <div>
            <Label className="text-[11px] dg-text-muted">{t('kubernetes.node.memoryRequests')}</Label>
            <Input value={c.resources.requests?.memory || ''} placeholder="128Mi"
              onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, memory: e.target.value } } })}
              className="dg-input font-mono text-xs h-8" />
          </div>
          <div>
            <Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.sa0a98f')}</Label>
            <Input value={c.resources.limits?.memory || ''} placeholder="512Mi"
              onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, memory: e.target.value } } })}
              className="dg-input font-mono text-xs h-8" />
          </div>
        </div>
      </div>

      {/* ---- 健康检查 ---- */}
      <div>
        <div className={sectionBtn}><Heart className="h-3.5 w-3.5 text-rose-400" /> {t('kubernetes.containereditor.s6779ab')}</div>
        <div className="space-y-2">
          {(['livenessProbe', 'readinessProbe', 'startupProbe'] as const).map(pt => (
            <ProbeEditor key={pt}
              label={{ livenessProbe: t('kubernetes.containereditor.sff49b1'), readinessProbe: t('kubernetes.containereditor.s176e68'), startupProbe: t('kubernetes.containereditor.sc5a531') }[pt]}
              probe={c[pt]}
              onChange={(p) => onUpdate({ [pt]: p } as Record<string, unknown>)}
            />
          ))}
        </div>
      </div>

      {/* ---- 生命周期 ---- */}
      <div>
        <div className={sectionBtn}><Zap className="h-3.5 w-3.5 dg-text-yellow" /> {t('kubernetes.containereditor.s12d037')}</div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <LifecycleHandlerEditor label=t('kubernetes.containereditor.s650280') handler={c.lifecycle?.postStart}
            onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, postStart: h } })} />
          <LifecycleHandlerEditor label=t('kubernetes.containereditor.s5b7228') handler={c.lifecycle?.preStop}
            onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, preStop: h } })} />
        </div>
        {!c.lifecycle && (
          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px] mt-1"
            onClick={() => onUpdate({ lifecycle: { postStart: { type: 'none' }, preStop: { type: 'none' } } })}>
            <Plus className="h-3 w-3 mr-1" />启用生命周期回调
          </Button>
        )}
      </div>

      {/* ---- 安全上下文 ---- */}
      <div>
        <div className={sectionBtn}><Shield className="h-3.5 w-3.5 dg-text-green" /> {t('kubernetes.containereditor.s195d42')}</div>
        {c.securityContext ? (
          <div className="space-y-2 border border-[var(--dg-border)] rounded-md p-3 bg-[var(--dg-bg-primary)]/30">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
              <div>
                <Label className="text-[11px] dg-text-muted">runAsUser</Label>
                <Input type="number" value={c.securityContext.runAsUser ?? ''} placeholder="1000"
                  onChange={e => onUpdate({ securityContext: { ...c.securityContext!, runAsUser: e.target.value === '' ? undefined : Number(e.target.value) } })}
                  className="dg-input font-mono text-xs h-8" />
              </div>
              <div>
                <Label className="text-[11px] dg-text-muted">runAsGroup</Label>
                <Input type="number" value={c.securityContext.runAsGroup ?? ''} placeholder="1000"
                  onChange={e => onUpdate({ securityContext: { ...c.securityContext!, runAsGroup: e.target.value === '' ? undefined : Number(e.target.value) } })}
                  className="dg-input font-mono text-xs h-8" />
              </div>
              <div>
                <Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s3142a7')}</Label>
                <Input value={(c.securityContext.capabilitiesAdd || []).join(',')} placeholder="NET_ADMIN"
                  onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesAdd: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
                  className="dg-input font-mono text-xs h-8" />
              </div>
              <div>
                <Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.sd705f3')}</Label>
                <Input value={(c.securityContext.capabilitiesDrop || []).join(',')} placeholder="ALL"
                  onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesDrop: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
                  className="dg-input font-mono text-xs h-8" />
              </div>
            </div>
            <div className="flex items-center gap-4 flex-wrap">
              <BoolToggle label="runAsNonRoot" value={!!c.securityContext.runAsNonRoot}
                onChange={v => onUpdate({ securityContext: { ...c.securityContext!, runAsNonRoot: v } })} />
              <BoolToggle label="privileged" value={!!c.securityContext.privileged}
                onChange={v => onUpdate({ securityContext: { ...c.securityContext!, privileged: v } })} />
              <BoolToggle label="readOnlyRootFilesystem" value={!!c.securityContext.readOnlyRootFilesystem}
                onChange={v => onUpdate({ securityContext: { ...c.securityContext!, readOnlyRootFilesystem: v } })} />
              <BoolToggle label="allowPrivilegeEscalation" value={c.securityContext.allowPrivilegeEscalation ?? false}
                onChange={v => onUpdate({ securityContext: { ...c.securityContext!, allowPrivilegeEscalation: v } })} />
            </div>
            <Button size="sm" variant="ghost" className="h-6 dg-text-red text-[11px]"
              onClick={() => onUpdate({ securityContext: null })}>
              <Trash2 className="h-3 w-3 mr-1" />移除安全上下文
            </Button>
          </div>
        ) : (
          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
            onClick={() => onUpdate({ securityContext: { runAsNonRoot: false, privileged: false } })}>
            <Plus className="h-3 w-3 mr-1" />启用安全上下文
          </Button>
        )}
      </div>

      {/* ---- 卷挂载 ---- */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <div className={sectionBtn}><FolderOpen className="h-3.5 w-3.5 text-teal-400" /> {t('kubernetes.containereditor.s778eec')}</div>
          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
            onClick={() => onUpdate({ volumeMounts: [...c.volumeMounts, { name: '', mountPath: '', subPath: '', readOnly: false }] })}>
            <Plus className="h-3 w-3 mr-1" />新增
          </Button>
        </div>
        <div className="space-y-1.5">
          {c.volumeMounts.map((m, mi) => (
            <div key={mi} className="grid grid-cols-[1fr_1fr_1fr_60px_auto] gap-2 items-center">
              <Input value={m.name} placeholder=t('kubernetes.containereditor.sb19f3d')
                onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, name: e.target.value }; onUpdate({ volumeMounts: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <Input value={m.mountPath} placeholder="/data"
                onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, mountPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <Input value={m.subPath || ''} placeholder=t('kubernetes.containereditor.s4f4937')
                onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, subPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
                className="dg-input font-mono text-xs h-8" />
              <label className="flex items-center gap-1 text-[10px] dg-text-muted cursor-pointer">
                <Switch checked={!!m.readOnly}
                  onCheckedChange={v => { const n = [...c.volumeMounts]; n[mi] = { ...m, readOnly: v }; onUpdate({ volumeMounts: n }); }} />
                RO
              </label>
              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
                onClick={() => onUpdate({ volumeMounts: c.volumeMounts.filter((_, j) => j !== mi) })}>
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          ))}
          {c.volumeMounts.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s9b6826')}</p>}
        </div>
      </div>
    </>
  );
}

function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
  const { t } = useTranslation();
  const enabled = !!probe;
  const p = probe || { type: 'httpGet' as const };

  const setField = (patch: Partial<ProbeDef>) => onChange({ ...p, ...patch });

  return (
    <div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs text-[var(--dg-text-secondary)] font-medium">{label}</span>
        <Switch checked={enabled}
          onCheckedChange={v => onChange(v ? { type: 'httpGet', httpPath: '/', httpPort: 8080, initialDelaySeconds: 10, periodSeconds: 10 } : null)} />
      </div>
      {enabled && (
        <>
          <div className="flex items-center gap-2 mb-2">
            <span className="text-[10px] dg-text-muted w-8">{t('common.type')}</span>
            <Select value={p.type || 'httpGet'} onValueChange={v => setField({ type: v as ProbeDef['type'] })}>
              <SelectTrigger className="dg-input text-xs h-7 flex-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="dg-input">
                <SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
                <SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
                <SelectItem value="exec" className="text-[var(--dg-text-primary)]">{t('kubernetes.containereditor.s16d93f')}</SelectItem>
              </SelectContent>
            </Select>
          </div>
          {p.type === 'httpGet' && (
            <div className="grid grid-cols-3 gap-2 mb-2">
              <Input value={p.httpPath || ''} placeholder="/healthz"
                onChange={e => setField({ httpPath: e.target.value })}
                className="dg-input font-mono text-xs h-7" />
              <Input type="number" value={p.httpPort ?? ''} placeholder="8080"
                onChange={e => setField({ httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
              <Input value={p.httpHost || ''} placeholder=t('kubernetes.containereditor.s3cf87c')
                onChange={e => setField({ httpHost: e.target.value })}
                className="dg-input font-mono text-xs h-7" />
            </div>
          )}
          {p.type === 'tcpSocket' && (
            <div className="mb-2">
              <Input type="number" value={p.tcpPort ?? ''} placeholder=t('server.csv.port')
                onChange={e => setField({ tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
            </div>
          )}
          {p.type === 'exec' && (
            <div className="mb-2">
              <Textarea value={p.execCommand || ''} placeholder=t('kubernetes.containereditor.s743f00')
                onChange={e => setField({ execCommand: e.target.value })}
                className="dg-input font-mono text-xs min-h-[50px]" />
            </div>
          )}
          <div className="grid grid-cols-5 gap-2">
            <div>
              <Label className="text-[10px] dg-text-muted">{t('kubernetes.containereditor.s39b4e6')}</Label>
              <Input type="number" value={p.initialDelaySeconds ?? ''} placeholder="10"
                onChange={e => setField({ initialDelaySeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
            </div>
            <div>
              <Label className="text-[10px] dg-text-muted">{t('kubernetes.containereditor.sbbf419')}</Label>
              <Input type="number" value={p.periodSeconds ?? ''} placeholder="10"
                onChange={e => setField({ periodSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
            </div>
            <div>
              <Label className="text-[10px] dg-text-muted">{t('kubernetes.containereditor.sde332f')}</Label>
              <Input type="number" value={p.timeoutSeconds ?? ''} placeholder="1"
                onChange={e => setField({ timeoutSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
            </div>
            <div>
              <Label className="text-[10px] dg-text-muted">{t('common.success')}</Label>
              <Input type="number" value={p.successThreshold ?? ''} placeholder="1"
                onChange={e => setField({ successThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
            </div>
            <div>
              <Label className="text-[10px] dg-text-muted">{t('common.failed')}</Label>
              <Input type="number" value={p.failureThreshold ?? ''} placeholder="3"
                onChange={e => setField({ failureThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
                className="dg-input font-mono text-xs h-7" />
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function LifecycleHandlerEditor({ label, handler, onChange }: LifecycleHandlerEditorProps) {
  const { t } = useTranslation();
  const h = handler || { type: 'none' as const };
  const selVal = (!h.type || h.type === 'none') ? '__none' : h.type;

  return (
    <div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
      <span className="text-xs text-[var(--dg-text-secondary)] font-medium block mb-2">{label}</span>
      <div className="flex items-center gap-2 mb-2">
        <span className="text-[10px] dg-text-muted w-8">{t('common.type')}</span>
        <Select value={selVal} onValueChange={v => onChange({ ...h, type: (v === '__none' ? 'none' : v) as LifecycleHandler['type'] })}>
          <SelectTrigger className="dg-input text-xs h-7 flex-1">
            <SelectValue />
          </SelectTrigger>
          <SelectContent className="dg-input">
            <SelectItem value="__none" className="dg-text-secondary">{t('kubernetes.containereditor.s2e3432')}</SelectItem>
            <SelectItem value="exec" className="text-[var(--dg-text-primary)]">{t('kubernetes.containereditor.s16d93f')}</SelectItem>
            <SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
            <SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
          </SelectContent>
        </Select>
      </div>
      {h.type === 'exec' && (
        <Textarea value={h.execCommand || ''} placeholder=t('kubernetes.containereditor.s7970e5')
          onChange={e => onChange({ ...h, execCommand: e.target.value })}
          className="dg-input font-mono text-xs min-h-[50px]" />
      )}
      {h.type === 'httpGet' && (
        <div className="grid grid-cols-2 gap-2">
          <Input value={h.httpPath || ''} placeholder="/shutdown"
            onChange={e => onChange({ ...h, httpPath: e.target.value })}
            className="dg-input font-mono text-xs h-7" />
          <Input type="number" value={h.httpPort ?? ''} placeholder="8080"
            onChange={e => onChange({ ...h, httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
            className="dg-input font-mono text-xs h-7" />
        </div>
      )}
      {h.type === 'tcpSocket' && (
        <Input type="number" value={h.tcpPort ?? ''} placeholder=i18n.t('server.csv.port')
          onChange={e => onChange({ ...h, tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
          className="dg-input font-mono text-xs h-7" />
      )}
    </div>
  );
}

function BoolToggle({ label, value, onChange }: BoolToggleProps) {
  const { t } = useTranslation();
  return (
    <label className="flex items-center gap-1.5 cursor-pointer">
      <Switch checked={value} onCheckedChange={onChange} />
      <span className="text-[11px] dg-text-secondary font-mono">{label}</span>
    </label>
  );
}