MikrotikManager/components/ipsec/ipsec-peer-sheet.tsx

"use client"

import { useEffect, useMemo, useRef, useState } from "react"
import type { IpsecPeerDto } from "@mmapp/contracts/ipsec"
import { FormField, SectionTitle } from "@/components/form-kit"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Input } from "@/components/ui/input"
import {
  Sheet, SheetContent, SheetHeader, SheetTitle,
  SheetDescription, SheetFooter, SheetClose,
} from "@/components/ui/sheet"

export type IpsecPeerFormState = {
  name: string
  address: string
  exchangeMode: string
  passive: boolean
  profile: string
  disabled: boolean
}

export const defaultIpsecPeerForm = (): IpsecPeerFormState => ({
  name: "",
  address: "0.0.0.0/0",
  exchangeMode: "ike2",
  passive: true,
  profile: "",
  disabled: false,
})

const EXCHANGE_MODES = ["ike2", "main", "aggressive", "base"]

/** Редактирование существующего peer (сервера) RouterOS. */
function IpsecPeerSheet({
  open,
  onOpenChange,
  busy,
  editing,
  onSubmit,
}: {
  open: boolean
  onOpenChange: (v: boolean) => void
  busy?: boolean
  editing: IpsecPeerDto | null
  onSubmit: (form: IpsecPeerFormState) => void | Promise<void>
}) {
  const [form, setForm] = useState<IpsecPeerFormState>(defaultIpsecPeerForm)
  const lock = useRef(false)
  const opened = useRef(false)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const pending = busy || submitting
  const set = <K extends keyof IpsecPeerFormState>(k: K, v: IpsecPeerFormState[K]) =>
    setForm((f) => ({ ...f, [k]: v }))

  useEffect(() => {
    if (!open) { opened.current = false; return }
    if (!editing || opened.current) return
    opened.current = true
    queueMicrotask(() => setError(null))
    queueMicrotask(() => setForm({
      name: editing.name,
      address: editing.address ?? "",
      exchangeMode: editing.exchangeMode ?? "ike2",
      passive: editing.passive ?? false,
      profile: editing.profile ?? "",
      disabled: editing.disabled,
    }))
  }, [open, editing])

  const canSubmit = useMemo(() => form.name.trim().length > 0, [form.name])

  const submit = async () => {
    if (!canSubmit || busy || lock.current) return
    lock.current = true
    setSubmitting(true)
    setError(null)
    try { await onSubmit(form) }
    catch (error) { setError(error instanceof Error ? error.message : "Не удалось сохранить peer") }
    finally { lock.current = false; setSubmitting(false) }
  }

  return (
    <Sheet open={open} onOpenChange={value => { if (!lock.current && !busy) onOpenChange(value) }}>
      <SheetContent showCloseButton={!pending} side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
        <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
          <SheetTitle>{editing ? `Peer «${editing.name}»` : "Peer"}</SheetTitle>
          <SheetDescription>
            {editing?.managed
              ? "Managed peer: изменения применяются напрямую на роутере"
              : "Существующий peer RouterOS: изменения применяются напрямую"}
          </SheetDescription>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
          <fieldset disabled={pending} className="flex flex-col gap-5">
          <div className="flex flex-col gap-4">
            <SectionTitle>Основные</SectionTitle>
            <FormField label="Имя" required>
              <Input aria-label="Имя" value={form.name} onChange={(e) => set("name", e.target.value)} />
            </FormField>
            <FormField label="Адрес" hint="Обычно 0.0.0.0/0 для road-warrior">
              <Input className="font-mono" aria-label="Адрес" value={form.address} onChange={(e) => set("address", e.target.value)} />
            </FormField>
            <FormField label="Exchange mode">
              <select
                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
                aria-label="Exchange mode" value={form.exchangeMode}
                onChange={(e) => set("exchangeMode", e.target.value)}
              >
                {EXCHANGE_MODES.map((m) => (
                  <option key={m} value={m}>{m}</option>
                ))}
              </select>
            </FormField>
            <p className="text-xs text-muted-foreground">Сертификат аутентификации задаётся в identity. Эта форма изменяет только peer.</p>
            <FormField label="Profile" hint="Пусто — не менять">
              <Input className="font-mono" aria-label="Profile" value={form.profile} onChange={(e) => set("profile", e.target.value)} />
            </FormField>
          </div>

          <div className="flex flex-col gap-4">
            <SectionTitle>Состояние</SectionTitle>
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium">Passive</p>
              <Switch aria-label="Passive" disabled={pending} checked={form.passive} onCheckedChange={(v) => set("passive", v)} />
            </div>
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium">Отключён</p>
              <Switch aria-label="Отключён" disabled={pending} checked={form.disabled} onCheckedChange={(v) => set("disabled", v)} />
            </div>
          </div>
          </fieldset>
          {pending && <p role="status" className="text-sm text-muted-foreground">Ожидание результата сохранения…</p>}
          {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
        </div>

        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
          <SheetClose render={<Button variant="outline" className="flex-1" disabled={pending} />}>
            Отмена
          </SheetClose>
          <Button
            className="flex-1"
            disabled={!canSubmit || pending}
            onClick={() => void submit()}
          >
            {pending ? "Сохранение…" : "Сохранить"}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

export { IpsecPeerSheet }