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

"use client"

import { useEffect, useMemo, useState } from "react"
import type { IpsecPeerDto } from "@mmapp/contracts/ipsec"
import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
import { Button } from "@/components/ui/button"
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
  certificate: string
  profile: string
  disabled: boolean
}

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

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

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

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

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

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent 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">
          <div className="flex flex-col gap-4">
            <SectionTitle>Основные</SectionTitle>
            <FormField label="Имя" required>
              <Input 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" 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]"
                value={form.exchangeMode}
                onChange={(e) => set("exchangeMode", e.target.value)}
              >
                {EXCHANGE_MODES.map((m) => (
                  <option key={m} value={m}>{m}</option>
                ))}
              </select>
            </FormField>
            <FormField label="Сертификат" hint="Серверный сертификат роутера">
              <Input
                className="font-mono"
                list="ipsec-peer-certs"
                placeholder="ipsec-server"
                value={form.certificate}
                onChange={(e) => set("certificate", e.target.value)}
              />
              <datalist id="ipsec-peer-certs">
                {certificates.map((c) => <option key={c} value={c} />)}
              </datalist>
            </FormField>
            <FormField label="Profile" hint="Пусто — не менять">
              <Input className="font-mono" 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>
              <FormToggle checked={form.passive} onChange={(v) => set("passive", v)} />
            </div>
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium">Отключён</p>
              <FormToggle checked={form.disabled} onChange={(v) => set("disabled", v)} />
            </div>
          </div>
        </div>

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

export { IpsecPeerSheet }