"use client"

import { useCallback, useEffect, useState } from "react"
import Link from "next/link"
import { OpsPanel } from "@/components/ops-panel"
import { FormField, FormToggle } from "@/components/form-kit"
import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
import { Badge } from "@/components/reui/badge"
import { Button, buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import {
  getCertificateRenewSettings,
  putCertificateRenewSettings,
} from "@/shared/api/certificates"
import { toast } from "sonner"

/**
 * Автообновление сертификатов через MM (ACME DNS-01).
 * Preview: https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3
 * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/alert · https://reui.io/docs/components/base/badge
 */
export function CertificateRenewSettingsPanel({
  backendUrl,
  liveReady,
}: {
  backendUrl: string
  liveReady: boolean
}) {
  const [enabled, setEnabled] = useState(true)
  const [intervalDraft, setIntervalDraft] = useState("21600")
  const [daysDraft, setDaysDraft] = useState("30")
  const [lastCollectedAt, setLastCollectedAt] = useState<string | null>(null)
  const [lastError, setLastError] = useState<string | null>(null)
  const [loaded, setLoaded] = useState(false)
  const [toggleBusy, setToggleBusy] = useState(false)
  const [saveBusy, setSaveBusy] = useState(false)

  const load = useCallback(async () => {
    if (!liveReady) return
    try {
      const s = await getCertificateRenewSettings(backendUrl)
      setEnabled(s.enabled)
      setIntervalDraft(String(s.intervalSec))
      setDaysDraft(String(s.renewBeforeDays))
      setLastCollectedAt(s.lastCollectedAt ?? null)
      setLastError(s.lastError ?? null)
      setLoaded(true)
    } catch (e) {
      setLoaded(true)
      toast.error(e instanceof Error ? e.message : "Не удалось загрузить настройки автообновления")
    }
  }, [backendUrl, liveReady])

  useEffect(() => {
    queueMicrotask(() => {
      void load()
    })
  }, [load])

  async function handleEnabledChange(next: boolean) {
    if (!liveReady || toggleBusy) return
    const prev = enabled
    setEnabled(next)
    setToggleBusy(true)
    try {
      const saved = await putCertificateRenewSettings(backendUrl, { enabled: next })
      setEnabled(saved.enabled)
      toast.success(next ? "Автообновление через MikrotikManager включено" : "Автообновление через MikrotikManager выключено")
    } catch (e) {
      setEnabled(prev)
      toast.error(e instanceof Error ? e.message : "Не удалось сохранить")
    } finally {
      setToggleBusy(false)
    }
  }

  async function handleSaveSchedule() {
    if (!liveReady || saveBusy) return
    const intervalSec = Math.max(300, Number.parseInt(intervalDraft, 10) || 21600)
    const renewBeforeDays = Math.max(1, Math.min(90, Number.parseInt(daysDraft, 10) || 30))
    setSaveBusy(true)
    try {
      const saved = await putCertificateRenewSettings(backendUrl, { intervalSec, renewBeforeDays })
      setIntervalDraft(String(saved.intervalSec))
      setDaysDraft(String(saved.renewBeforeDays))
      toast.success("Расписание автообновления сохранено")
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Не удалось сохранить расписание")
    } finally {
      setSaveBusy(false)
    }
  }

  const interactionsOff = !liveReady || toggleBusy || (liveReady && !loaded)

  return (
    <OpsPanel
      title="Автообновление через MikrotikManager"
      description="Фоновый выпуск Let's Encrypt (Cloudflare DNS-01) для сертификатов, выпущенных из этой панели. Ручной выпуск не зависит от переключателя."
      headerRight={
        <Badge
          size="sm"
          variant={!liveReady ? "warning-light" : enabled ? "success-light" : "secondary"}
        >
          {!liveReady ? "нет backend" : enabled ? "Включено" : "Выключено"}
        </Badge>
      }
      contentClassName="px-5 py-4 flex flex-col gap-4"
    >
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-sm font-medium">Обновлять сертификаты из MM</p>
          <p className="text-muted-foreground mt-0.5 text-xs">
            Если ACME уже крутит RouterOS — выключите, чтобы не было двойного перевыпуска.
          </p>
        </div>
        <FormToggle checked={enabled} onChange={handleEnabledChange} disabled={interactionsOff} />
      </div>

      {!liveReady ? (
        <Alert variant="warning">
          <AlertTitle>Нет подключения к API</AlertTitle>
          <AlertDescription>
            Переключатель станет активен, когда backend доступен. Планировщик читает тот же флаг, что и страница «Сбор данных».
          </AlertDescription>
        </Alert>
      ) : enabled ? (
        <Alert variant="warning">
          <AlertTitle>Не смешивайте с ACME RouterOS</AlertTitle>
          <AlertDescription>
            MM обновляет только сертификаты, выпущенные через эту страницу. Встроенный Let&apos;s Encrypt на
            устройстве для тех же имён лучше не включать одновременно.
          </AlertDescription>
        </Alert>
      ) : (
        <Alert variant="info">
          <AlertTitle>Обновление отдано RouterOS</AlertTitle>
          <AlertDescription>
            Планировщик MM больше не проверяет срок и не перевыпускает сертификаты. Ручной выпуск и импорт
            остаются доступны.
          </AlertDescription>
        </Alert>
      )}

      <div className={cn("flex flex-col gap-4", !enabled && "pointer-events-none opacity-40")}>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <FormField label="Интервал проверки" hint="Секунды, минимум 300">
            <Input
              inputMode="numeric"
              value={intervalDraft}
              onChange={(e) => setIntervalDraft(e.target.value)}
              disabled={!liveReady || saveBusy}
            />
          </FormField>
          <FormField label="Обновлять за" hint="Дней до истечения, 1–90">
            <Input
              inputMode="numeric"
              value={daysDraft}
              onChange={(e) => setDaysDraft(e.target.value)}
              disabled={!liveReady || saveBusy}
            />
          </FormField>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Button variant="outline" size="sm" disabled={!liveReady || saveBusy || !enabled} onClick={() => void handleSaveSchedule()}>
            Сохранить расписание
          </Button>
          <Link href="/data-collection" className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-8 text-xs")}>
            Журнал планировщика →
          </Link>
        </div>
      </div>

      {lastCollectedAt || lastError ? (
        <p className="text-muted-foreground text-xs">
          Последний прогон:{" "}
          {lastCollectedAt ? new Date(lastCollectedAt).toLocaleString("ru-RU") : "ещё не было"}
          {lastError ? ` · ошибка: ${lastError}` : ""}
        </p>
      ) : null}
    </OpsPanel>
  )
}