{(showAll || step === 1) && (

Основные setIssueCertName(e.target.value)} placeholder="router-le" />

)} {(showAll || step === 2) && (

Домены setIssueCommonName(e.target.value)} placeholder="vpn.example.com" />

setIssueSans(e.target.value)}
            placeholder="www.example.com"
          />
        </FormField>
        <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 text-xs text-muted-foreground">
          <p className="font-medium text-foreground mb-1">Let's Encrypt · DNS-01 (Cloudflare)</p>
          <p>TXT-запись создаётся в Cloudflare, сертификат импортируется на выбранный RouterOS.</p>
        </div>
      </div>
      )}

{(showAll || step === 3) && (
      <div className="flex flex-col gap-4">
        <SectionTitle>Импорт на RouterOS</SectionTitle>
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium">Trust store · www</p>
            <p className="text-xs text-muted-foreground">Веб-интерфейс и HTTPS-сервисы</p>
          </div>
          <FormToggle checked={issueTrustWww} onChange={setIssueTrustWww} />
        </div>
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium">Trust store · api</p>
            <p className="text-xs text-muted-foreground">REST API и управление</p>
          </div>
          <FormToggle checked={issueTrustApi} onChange={setIssueTrustApi} />
        </div>
      </div>
      )}

{(showAll || step === 4) && (
        <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 text-sm">
          <p className="font-medium mb-2">Проверьте параметры</p>
          <ul className="text-xs text-muted-foreground space-y-1">
            <li>Сервер: {serverList.find((s) => s.id === issueServerId)?.name ?? "—"}</li>
            <li>Имя: {issueCertName || "—"}</li>
            <li>CN: {issueCommonName || "—"}</li>
            <li>Trust www: {issueTrustWww ? "да" : "нет"} · api: {issueTrustApi ? "да" : "нет"}</li>
          </ul>
        </div>
      )}
    </div>
  )
}

export default function CertificatesPage() {
  const { mode, backendUrl, prefsHydrated, backendStatus } = useDataSource()
  const isLive = prefsHydrated && mode === "live"
  const liveReady = isLive && backendStatus === true

const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState<CertStatus | "all">("all")
  const [certificates, setCertificates] = useState<CertificateDto[]>([])
  const [loadState, setLoadState] = useState<"idle" | "loading" | "error">("idle")
  const [loadError, setLoadError] = useState<string | null>(null)
  const [serverList, setServerList] = useState<Server[]>([])

const [issueOpen, setIssueOpen] = useState(false)
  const [issueStep, setIssueStep] = useState(1)
  const [importOpen, setImportOpen] = useState(false)
  const [issueBusy, setIssueBusy] = useState(false)
  const [issueServerId, setIssueServerId] = useState("")
  const [issueCertName, setIssueCertName] = useState("")
  const [issueCommonName, setIssueCommonName] = useState("")
  const [issueSans, setIssueSans] = useState("")
  const [issueTrustWww, setIssueTrustWww] = useState(true)
  const [issueTrustApi, setIssueTrustApi] = useState(true)

const [acmeDirectoryUrl, setAcmeDirectoryUrl] = useState(
    "https://acme-v02.api.letsencrypt.org/directory",
  )
  const [acmeZoneId, setAcmeZoneId] = useState("")
  const [acmeTokenDraft, setAcmeTokenDraft] = useState("")
  const [acmeTokenConfigured, setAcmeTokenConfigured] = useState(false)
  const [acmeSaveBusy, setAcmeSaveBusy] = useState(false)

const displayCerts = useMemo(() => {
    if (!prefsHydrated) return []
    if (isLive) return certificates
    return routerCertificates.map(mockToDto)
  }, [prefsHydrated, isLive, certificates])

const serverById = useMemo(() => {
    const map = new Map<string, Server>()
    for (const s of isLive ? serverList : mockServers) map.set(s.id, s)
    return map
  }, [isLive, serverList])

const loadLive = useCallback(
    async (silent = false) => {
      if (!isLive) return
      if (!silent) setLoadState("loading")
      setLoadError(null)
      try {
        const [certRes, serversRes] = await Promise.all([
          listCertificates(backendUrl),
          listServers(backendUrl),
        ])
        setCertificates(certRes.certificates)
        setServerList(serversRes.map(toFrontendServer))
        if (certRes.failures.length > 0 && certRes.certificates.length === 0) {
          setLoadError(
            certRes.failures.map((f) => `${f.serverName ?? f.serverId}: ${f.error}`).join("; "),
          )
        } else if (certRes.failures.length > 0) {
          toast.warning(`Часть серверов недоступна: ${certRes.failures.length}`)
        }
        setLoadState("idle")
      } catch (e) {
        setCertificates([])
        setLoadError(e instanceof Error ? e.message : "Не удалось загрузить сертификаты")
        setLoadState("error")
      }
    },
    [backendUrl, isLive],
  )

const loadAcmeSettings = useCallback(async () => {
    if (!liveReady) return
    try {
      const s = await getAcmeSettings(backendUrl)
      setAcmeDirectoryUrl(s.directoryUrl)
      setAcmeZoneId(s.defaultZoneId ?? "")
      setAcmeTokenConfigured(s.tokenConfigured)
    } catch {
      /* ignore */
    }
  }, [backendUrl, liveReady])

useEffect(() => {
    if (!isLive) {
      queueMicrotask(() => {
        setCertificates([])
        setServerList([])
        setLoadState("idle")
        setLoadError(null)
      })
      return
    }
    queueMicrotask(() => {
      void loadLive()
      void loadAcmeSettings()
    })
  }, [isLive, loadLive, loadAcmeSettings])

const expiring = useMemo(
    () => displayCerts.filter((c) => c.status === "valid" && c.daysLeft >= 0 && c.daysLeft <= 30),
    [displayCerts],
  )
  const expired = useMemo(() => displayCerts.filter((c) => c.status === "expired"), [displayCerts])

const filtered = useMemo(() => {
    return displayCerts.filter((c) => {
      if (statusFilter !== "all" && c.status !== statusFilter) return false
      if (!search) return true
      const q = search.toLowerCase()
      return (
        c.name.toLowerCase().includes(q) ||
        c.commonName.toLowerCase().includes(q) ||
        c.issuedBy.toLowerCase().includes(q) ||
        c.sans.some((s) => s.includes(q))
      )
    })
  }, [displayCerts, search, statusFilter])

async function handleRefresh() {
    if (!liveReady) return
    try {
      const res = await refreshCertificates(backendUrl)
      setCertificates(res.certificates)
      toast.success("Список сертификатов обновлён")
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Ошибка обновления")
    }
  }

async function pollIssueJob(jobId: string) {
    for (let i = 0; i < 120; i++) {
      await new Promise((r) => setTimeout(r, 2000))
      const job = await getCertificateIssueJob(backendUrl, jobId)
      if (job.status === "done") {
        toast.success("Сертификат выпущен и импортирован на роутер")
        setIssueOpen(false)
        await loadLive(true)
        return
      }
      if (job.status === "failed") {
        throw new Error(job.error ?? "Выпуск не удался")
      }
    }
    throw new Error("Таймаут ожидания выпуска сертификата")
  }

async function handleIssue() {
    if (!liveReady) return
    const domains = [
      issueCommonName.trim(),
      ...issueSans.split(/[\n,;]+/).map((s) => s.trim()),
    ].filter(Boolean)
    if (!issueServerId || !issueCertName.trim() || domains.length === 0) {
      toast.error("Укажите сервер, имя сертификата и домены")
      return
    }
    setIssueBusy(true)
    try {
      const trustStore: Array<"www" | "api"> = []
      if (issueTrustWww) trustStore.push("www")
      if (issueTrustApi) trustStore.push("api")
      const { jobId } = await createCertificateIssueJob(backendUrl, {
        serverId: issueServerId,
        certName: issueCertName.trim(),
        domainNames: domains,
        trustStore,
      })
      toast.message("Выпуск сертификата запущен…")
      await pollIssueJob(jobId)
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Ошибка выпуска")
    } finally {
      setIssueBusy(false)
    }
  }

async function handleSaveAcmeSettings() {
    if (!liveReady) return
    setAcmeSaveBusy(true)
    try {
      const saved = await putAcmeSettings(backendUrl, {
        directoryUrl: acmeDirectoryUrl.trim(),
        defaultZoneId: acmeZoneId.trim() || null,
        cloudflareApiToken: acmeTokenDraft.trim() ? acmeTokenDraft.trim() : undefined,
      })
      setAcmeTokenConfigured(saved.tokenConfigured)
      setAcmeTokenDraft("")
      toast.success("Настройки ACME сохранены")
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Не удалось сохранить настройки")
    } finally {
      setAcmeSaveBusy(false)
    }
  }

async function handleTestAcme() {
    if (!liveReady) return
    try {
      const res = await testAcmeSettings(backendUrl, {
        cloudflareApiToken: acmeTokenDraft.trim() || undefined,
      })
      if (res.ok) toast.success(res.message ?? "Cloudflare API доступен")
      else toast.error(res.message ?? "Проверка не прошла")
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Проверка Cloudflare не удалась")
    }
  }

return (
    <div className="flex flex-col h-full">
      <PageHeader
        crumbs={[{ label: "Управление" }, { label: "Сертификаты" }]}
        actions={
          <>
            <Button
              variant="outline"
              size="sm"
              disabled={!liveReady || loadState === "loading"}
              onClick={() => {
                void handleRefresh()
              }}
            >
              <RefreshCwIcon className={cn("size-4", loadState === "loading" && "animate-spin")} />
              Обновить
            </Button>
            <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
              <UploadIcon className="size-4" />
              Импорт
            </Button>
            <Button size="sm" disabled={!liveReady || issueBusy} onClick={() => { setIssueStep(1); setIssueOpen(true) }}>
              <PlusIcon className="size-4" />
              Выпустить сертификат
            </Button>
          </>
        }
      />

<div className="flex-1 overflow-y-auto p-6">
        <div className="flex flex-col gap-5">
          {isLive && backendStatus === false && (
            <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
              Backend недоступен — live-операции отключены.
            </div>
          )}
          {loadError && isLive && (
            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
              {loadError}
            </div>
          )}

{(expiring.length > 0 || expired.length > 0) && (
            <div className="flex flex-col gap-2">
              {expired.length > 0 && <CertPartAlertExpired expired={expired} />}
              {expiring.length > 0 && <CertPartAlertExpiring expiring={expiring} />}
            </div>
          )}

{liveReady && (
            <CertPartAcmeSettings
              acmeDirectoryUrl={acmeDirectoryUrl}
              setAcmeDirectoryUrl={setAcmeDirectoryUrl}
              acmeZoneId={acmeZoneId}
              setAcmeZoneId={setAcmeZoneId}
              acmeTokenDraft={acmeTokenDraft}
              setAcmeTokenDraft={setAcmeTokenDraft}
              acmeTokenConfigured={acmeTokenConfigured}
              acmeSaveBusy={acmeSaveBusy}
              onTest={() => {
                void handleTestAcme()
              }}
              onSave={() => {
                void handleSaveAcmeSettings()
              }}
            />
          )}

<Sheet open={issueOpen} onOpenChange={(v) => { setIssueOpen(v); if (!v) setIssueStep(1) }}>
        <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
          <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
            <SheetTitle>Выпуск сертификата</SheetTitle>
            <SheetDescription>
              Let's Encrypt через DNS-01 (Cloudflare) и импорт на выбранный RouterOS.
            </SheetDescription>
          </SheetHeader>

<Stepper value={issueStep} onValueChange={setIssueStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
            <StepperNav className="mb-5">
              {[
                { step: 1, title: "Основные" },
                { step: 2, title: "Домены" },
                { step: 3, title: "Импорт" },
                { step: 4, title: "Проверка" },
              ].map(({ step, title }, i, arr) => (
                <StepperItem key={step} step={step}>
                  <StepperTrigger>
                    <StepperIndicator>{step}</StepperIndicator>
                    <StepperTitle className="sr-only">{title}</StepperTitle>
                  </StepperTrigger>
                  {i < arr.length - 1 && <StepperSeparator />}
                </StepperItem>
              ))}
            </StepperNav>
            <StepperPanel className="flex-1 overflow-y-auto">
              {[1, 2, 3, 4].map((s) => (
                <StepperContent key={s} value={s}>
                  <CertPartIssueForm
                    step={s as 1 | 2 | 3 | 4}
                    serverList={serverList}
                    issueServerId={issueServerId}
                    setIssueServerId={setIssueServerId}
                    issueCertName={issueCertName}
                    setIssueCertName={setIssueCertName}
                    issueCommonName={issueCommonName}
                    setIssueCommonName={setIssueCommonName}
                    issueSans={issueSans}
                    setIssueSans={setIssueSans}
                    issueTrustWww={issueTrustWww}
                    setIssueTrustWww={setIssueTrustWww}
                    issueTrustApi={issueTrustApi}
                    setIssueTrustApi={setIssueTrustApi}
                  />
                </StepperContent>
              ))}
            </StepperPanel>
          </Stepper>

<SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
            <SheetClose render={<Button variant="outline" className="flex-1" disabled={issueBusy} />}>
              Отмена
            </SheetClose>
            {issueStep > 1 && (
              <Button variant="outline" className="flex-1" disabled={issueBusy} onClick={() => setIssueStep((s) => s - 1)}>
                Назад
              </Button>
            )}
            {issueStep < 4 ? (
              <Button
                className="flex-1"
                disabled={issueStep === 1 && (!issueServerId || !issueCertName)}
                onClick={() => setIssueStep((s) => s + 1)}
              >
                Далее
              </Button>
            ) : (
              <Button
                className="flex-1"
                disabled={!liveReady || issueBusy}
                onClick={() => { void handleIssue() }}
              >
                {issueBusy ? "Выпуск…" : "Выпустить"}
              </Button>
            )}
          </SheetFooter>
        </SheetContent>
      </Sheet>

<FileImportDialog
        open={importOpen}
        onOpenChange={setImportOpen}
        title="Импорт сертификата"
        description="Загрузите PEM, CRT или PKCS#12 для импорта на RouterOS"
        accept=".pem,.crt,.cer,.p12,.pfx"
        onImport={async (files) => {
          toast.success(`Файл ${files[0]?.name} готов к импорту на роутер`)
        }}
      />
    </div>
  )
}