"use client"

import { useState, useMemo } from "react"
import { PageHeader } from "@/components/page-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter,
} from "@/components/ui/sheet"
import {
  BellIcon, BellOffIcon, RefreshCwIcon, PlusIcon,
  CableIcon, NetworkIcon, RouteIcon, UserIcon, ServerIcon,
  TimerIcon, WifiOffIcon, TrendingDownIcon,
  EyeIcon, EyeOffIcon, CopyIcon, SendIcon, CheckIcon, XIcon,
  Trash2Icon,
} from "lucide-react"
import { cn } from "@/lib/utils"

// ─── types ────────────────────────────────────────────────────────────────────

type AlertType     = "gre-tunnel" | "bgp-peer" | "bgp-prefix" | "gre-client" | "server" | "rtt" | "loss" | "traffic"
type AlertSeverity = "critical" | "warning" | "info"
type AlertCooldown = "1м" | "5м" | "15м" | "1ч" | "4ч" | "24ч"

interface AlertRule {
  id: string
  name: string
  type: AlertType
  target: string       // display label
  condition: string    // display label
  severity: AlertSeverity
  enabled: boolean
  cooldown: AlertCooldown
  lastFired: string | null   // relative time string
  chatId: string             // override; empty = use global
}

interface HistoryEntry {
  id: string
  ruleName: string
  severity: AlertSeverity
  message: string
  time: string
  sent: boolean
}

interface TelegramConfig {
  token: string
  chatId: string
  connected: boolean
}

// ─── static config ────────────────────────────────────────────────────────────

const TYPE_META: Record<AlertType, {
  Icon: React.FC<{ className?: string }>
  label: string
  iconClass: string
  bg: string
}> = {
  "gre-tunnel": { Icon: CableIcon,        label: "GRE-туннель",    iconClass: "text-violet-500",  bg: "bg-violet-500/10"  },
  "bgp-peer":   { Icon: NetworkIcon,      label: "BGP-сосед",      iconClass: "text-blue-500",    bg: "bg-blue-500/10"    },
  "bgp-prefix": { Icon: RouteIcon,        label: "BGP-префикс",    iconClass: "text-sky-500",     bg: "bg-sky-500/10"     },
  "gre-client": { Icon: UserIcon,         label: "GRE-клиент",     iconClass: "text-purple-500",  bg: "bg-purple-500/10"  },
  "server":     { Icon: ServerIcon,       label: "Сервер",         iconClass: "text-slate-500",   bg: "bg-slate-500/10"   },
  "rtt":        { Icon: TimerIcon,        label: "Задержка (RTT)", iconClass: "text-amber-500",   bg: "bg-amber-500/10"   },
  "loss":       { Icon: WifiOffIcon,      label: "Потери пакетов", iconClass: "text-orange-500",  bg: "bg-orange-500/10"  },
  "traffic":    { Icon: TrendingDownIcon, label: "Низкий трафик",  iconClass: "text-rose-500",    bg: "bg-rose-500/10"    },
}

const SEVERITY_META: Record<AlertSeverity, { label: string; dot: string; badge: string; chip: string }> = {
  critical: {
    label: "Критическое",
    dot:   "bg-red-500",
    badge: "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400",
    chip:  "border-red-400 bg-red-500/10 text-red-600 dark:text-red-400",
  },
  warning: {
    label: "Предупреждение",
    dot:   "bg-amber-400",
    badge: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400",
    chip:  "border-amber-400 bg-amber-500/10 text-amber-600 dark:text-amber-400",
  },
  info: {
    label: "Информационное",
    dot:   "bg-blue-500",
    badge: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-400",
    chip:  "border-blue-400 bg-blue-500/10 text-blue-600 dark:text-blue-400",
  },
}

const TYPE_TARGETS: Record<AlertType, string[]> = {
  "gre-tunnel": ["gre-ivanov-01 / core-01", "gre-ivanov-01 / lab-01", "gre-ivanov-02 / core-01", "gre-ivanov-03 / lab-01", "gre-petrov-01 / core-01", "gre-petrov-01 / lab-01", "gre-kozlov-01 / core-01"],
  "bgp-peer":   ["mt-msk-core-01", "mt-spb-edge-01", "mt-fra-edge-01", "mt-ams-edge-01", "mt-sgp-edge-01", "mt-ams-test-01", "mt-msk-lab-01"],
  "bgp-prefix": ["любой префикс", "185.13.0.0/22", "77.88.8.0/24", "8.8.8.0/24", "1.1.1.0/24"],
  "gre-client": ["gre-ivanov-01", "gre-ivanov-02", "gre-ivanov-03", "gre-petrov-01", "gre-kozlov-01"],
  "server":     ["mt-msk-core-01", "mt-spb-edge-01", "mt-fra-edge-01", "mt-ams-edge-01", "mt-sgp-edge-01", "mt-ams-test-01", "mt-msk-lab-01"],
  "rtt":        ["mt-msk-core-01 → 8.8.8.8", "mt-spb-edge-01 → 8.8.8.8", "mt-fra-edge-01 → 8.8.8.8", "mt-ams-edge-01 → 1.1.1.1", "mt-sgp-edge-01 → 1.1.1.1"],
  "loss":       ["mt-msk-core-01 → 8.8.8.8", "mt-spb-edge-01 → 8.8.8.8", "mt-fra-edge-01 → 8.8.8.8", "mt-ams-edge-01 → 1.1.1.1", "mt-sgp-edge-01 → 1.1.1.1"],
  "traffic":    ["mt-msk-core-01", "mt-spb-edge-01", "mt-fra-edge-01", "mt-ams-edge-01", "mt-sgp-edge-01", "mt-ams-test-01", "mt-msk-lab-01"],
}

const TYPE_CONDITIONS: Record<AlertType, string[]> = {
  "gre-tunnel": ["перешёл в offline", "восстановился"],
  "bgp-peer":   ["разорвал сессию", "восстановил сессию"],
  "bgp-prefix": ["был отозван", "был получен"],
  "gre-client": ["отключился", "подключился"],
  "server":     ["перешёл в offline", "перешёл в degraded", "восстановился"],
  "rtt":        ["> порога", "< порога"],
  "loss":       ["> порога"],
  "traffic":    ["RX < порога", "TX < порога"],
}

const THRESHOLD_UNIT: Partial<Record<AlertType, string>> = {
  rtt:     "мс",
  loss:    "%",
  traffic: "Мбит/с",
}

const COOLDOWNS: AlertCooldown[] = ["1м", "5м", "15м", "1ч", "4ч", "24ч"]

// ─── mock data ────────────────────────────────────────────────────────────────

const INIT_RULES: AlertRule[] = [
  { id: "r1", name: "GRE-туннель Иванов offline",   type: "gre-tunnel", target: "gre-ivanov-01 / core-01",      condition: "перешёл в offline",    severity: "critical", enabled: true,  cooldown: "5м",  lastFired: "3ч назад",   chatId: "" },
  { id: "r2", name: "BGP-сосед core-01 down",       type: "bgp-peer",   target: "mt-msk-core-01",               condition: "разорвал сессию",       severity: "critical", enabled: true,  cooldown: "15м", lastFired: "1д назад",   chatId: "" },
  { id: "r3", name: "Высокая задержка FRA",          type: "rtt",        target: "mt-fra-edge-01 → 8.8.8.8",    condition: "> 120 мс",              severity: "warning",  enabled: true,  cooldown: "15м", lastFired: "45м назад",  chatId: "" },
  { id: "r4", name: "Потери пакетов AMS",            type: "loss",       target: "mt-ams-edge-01 → 1.1.1.1",    condition: "> 5%",                  severity: "warning",  enabled: true,  cooldown: "5м",  lastFired: null,         chatId: "" },
  { id: "r5", name: "Сервер SGP offline",            type: "server",     target: "mt-sgp-edge-01",               condition: "перешёл в offline",    severity: "critical", enabled: true,  cooldown: "1ч",  lastFired: "2д назад",   chatId: "" },
  { id: "r6", name: "BGP-префикс отозван core-01",  type: "bgp-prefix", target: "любой префикс",                condition: "был отозван",           severity: "info",     enabled: true,  cooldown: "5м",  lastFired: "6ч назад",   chatId: "-1009876543210" },
  { id: "r7", name: "GRE-клиент Козлов offline",    type: "gre-client", target: "gre-kozlov-01",                condition: "отключился",            severity: "warning",  enabled: false, cooldown: "1ч",  lastFired: null,         chatId: "" },
  { id: "r8", name: "Низкий трафик AMS-edge",       type: "traffic",    target: "mt-ams-edge-01",               condition: "RX < 10 Мбит/с",       severity: "info",     enabled: false, cooldown: "4ч",  lastFired: null,         chatId: "" },
]

const INIT_HISTORY: HistoryEntry[] = [
  { id: "h1", ruleName: "Высокая задержка FRA",         severity: "warning",  message: "RTT mt-fra-edge-01 → 8.8.8.8: 137 мс (порог 120 мс)",  time: "45м назад",  sent: true  },
  { id: "h2", ruleName: "GRE-туннель Иванов offline",   severity: "critical", message: "gre-ivanov-01 / core-01 перешёл в offline",              time: "3ч назад",   sent: true  },
  { id: "h3", ruleName: "BGP-префикс отозван core-01",  severity: "info",     message: "Префикс 185.13.0.0/22 отозван на mt-msk-core-01",        time: "6ч назад",   sent: true  },
  { id: "h4", ruleName: "BGP-сосед core-01 down",       severity: "critical", message: "BGP-сессия с mt-msk-core-01 разорвана",                  time: "1д назад",   sent: true  },
  { id: "h5", ruleName: "Сервер SGP offline",            severity: "critical", message: "mt-sgp-edge-01 недоступен, ping timeout",                time: "2д назад",   sent: false },
]

const INIT_TG: TelegramConfig = {
  token: "7412358964:AAFkL9xZqBb2pC8nYrVtHmwKjXeOdSuN1A",
  chatId: "-1001234567890",
  connected: true,
}

// ─── small helpers ────────────────────────────────────────────────────────────

function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
  return (
    <button role="switch" aria-checked={checked} onClick={() => onChange(!checked)}
      className={cn(
        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
        checked ? "bg-primary" : "bg-muted-foreground/30",
      )}>
      <span className={cn(
        "inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform",
        checked ? "translate-x-4" : "translate-x-0.5",
      )} />
    </button>
  )
}

function FieldLabel({ children }: { children: React.ReactNode }) {
  return <p className="text-sm font-medium mb-1.5 leading-none">{children}</p>
}

function FieldHint({ children }: { children: React.ReactNode }) {
  return <p className="text-xs text-muted-foreground mt-1.5">{children}</p>
}

function NativeSelect({ value, onChange, children, className }: {
  value: string; onChange: (v: string) => void; children: React.ReactNode; className?: string
}) {
  return (
    <select
      value={value}
      onChange={e => onChange(e.target.value)}
      className={cn(
        "h-8 w-full min-w-0 rounded-lg border border-input bg-background px-2.5 py-1",
        "text-sm text-foreground transition-colors outline-none",
        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
        className,
      )}
    >
      {children}
    </select>
  )
}

function SeverityDot({ severity }: { severity: AlertSeverity }) {
  return <span className={cn("inline-block size-2 rounded-full shrink-0", SEVERITY_META[severity].dot)} />
}

function SeverityBadge({ severity }: { severity: AlertSeverity }) {
  return (
    <span className={cn("text-[10px] px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap", SEVERITY_META[severity].badge)}>
      {severity === "critical" ? "Критич." : severity === "warning" ? "Предупр." : "Инфо"}
    </span>
  )
}

// ─── alert rule row ───────────────────────────────────────────────────────────

function AlertRuleRow({ rule, onToggle, onDelete }: {
  rule: AlertRule
  onToggle: (id: string, enabled: boolean) => void
  onDelete: (id: string) => void
}) {
  const { Icon, iconClass, bg } = TYPE_META[rule.type]

  return (
    <div className={cn(
      "flex items-center gap-3 px-4 py-3 hover:bg-muted/20 transition-colors group",
      !rule.enabled && "opacity-55",
    )}>
      {/* toggle */}
      <Toggle checked={rule.enabled} onChange={v => onToggle(rule.id, v)} />

      {/* severity dot */}
      <SeverityDot severity={rule.severity} />

      {/* type icon */}
      <div className={cn("size-7 rounded-md flex items-center justify-center shrink-0", bg)}>
        <Icon className={cn("size-3.5", iconClass)} />
      </div>

      {/* name + target */}
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{rule.name}</p>
        <p className="text-[11px] text-muted-foreground truncate">
          {TYPE_META[rule.type].label} · <span className="font-mono">{rule.target}</span>
          {" · "}{rule.condition}
        </p>
      </div>

      {/* cooldown */}
      <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">
        {rule.cooldown}
      </span>

      {/* chat override badge */}
      {rule.chatId && (
        <span className="text-[10px] font-mono px-1.5 py-0.5 rounded border border-border text-muted-foreground hidden xl:inline shrink-0">
          #{rule.chatId.slice(-6)}
        </span>
      )}

      {/* last fired */}
      <span className={cn(
        "text-[11px] shrink-0 w-[80px] text-right",
        rule.lastFired ? "text-muted-foreground" : "text-muted-foreground/40",
      )}>
        {rule.lastFired ?? "—"}
      </span>

      {/* severity badge */}
      <div className="hidden lg:block shrink-0">
        <SeverityBadge severity={rule.severity} />
      </div>

      {/* actions (visible on hover) */}
      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
        <button
          onClick={() => onDelete(rule.id)}
          className="size-7 rounded flex items-center justify-center text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors">
          <Trash2Icon className="size-3.5" />
        </button>
      </div>
    </div>
  )
}

// ─── telegram config card ─────────────────────────────────────────────────────

function TelegramCard({ cfg, onChange }: {
  cfg: TelegramConfig
  onChange: (c: TelegramConfig) => void
}) {
  const [showToken, setShowToken] = useState(false)
  const [testing, setTesting]     = useState(false)
  const [testResult, setTestResult] = useState<"ok" | "fail" | null>(null)

  const handleTest = () => {
    setTesting(true)
    setTestResult(null)
    setTimeout(() => {
      setTesting(false)
      setTestResult(cfg.connected ? "ok" : "fail")
      setTimeout(() => setTestResult(null), 3000)
    }, 1400)
  }

  const _maskedToken = cfg.token.replace(/:.+/, ":••••••••••••••••••••••••")

  return (
    <Card>
      <CardHeader className="pb-3 pt-4 px-4">
        <CardTitle className="text-sm flex items-center justify-between">
          <span className="flex items-center gap-2">
            <span className="text-base">✈️</span> Telegram
          </span>
          <span className={cn(
            "flex items-center gap-1.5 text-[11px] font-normal px-2 py-0.5 rounded-full",
            cfg.connected
              ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
              : "bg-muted text-muted-foreground",
          )}>
            <span className={cn("size-1.5 rounded-full", cfg.connected ? "bg-emerald-500" : "bg-muted-foreground")} />
            {cfg.connected ? "Подключён" : "Не настроен"}
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent className="px-4 pb-4 space-y-3">

        {/* bot token */}
        <div>
          <FieldLabel>Bot Token</FieldLabel>
          <div className="flex gap-1.5">
            <Input
              type={showToken ? "text" : "password"}
              value={cfg.token}
              onChange={e => onChange({ ...cfg, token: e.target.value })}
              className="text-xs font-mono h-8"
              placeholder="1234567890:AAF..."
            />
            <button
              onClick={() => setShowToken(v => !v)}
              className="size-8 rounded-md border border-input flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
              {showToken ? <EyeOffIcon className="size-3.5" /> : <EyeIcon className="size-3.5" />}
            </button>
            <button
              onClick={() => navigator.clipboard.writeText(cfg.token)}
              className="size-8 rounded-md border border-input flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
              <CopyIcon className="size-3.5" />
            </button>
          </div>
        </div>

        {/* default chat id */}
        <div>
          <FieldLabel>Chat ID по умолчанию</FieldLabel>
          <Input
            value={cfg.chatId}
            onChange={e => onChange({ ...cfg, chatId: e.target.value })}
            className="text-xs font-mono h-8"
            placeholder="-100xxxxxxxxxx"
          />
          <p className="text-[10px] text-muted-foreground mt-1">
            Для групп используйте отрицательный ID. Каждое правило может переопределить.
          </p>
        </div>

        {/* test button */}
        <Button
          size="sm" variant="outline" className="w-full h-8 text-xs gap-2"
          onClick={handleTest} disabled={testing}>
          {testing ? (
            <RefreshCwIcon className="size-3.5 animate-spin" />
          ) : testResult === "ok" ? (
            <CheckIcon className="size-3.5 text-emerald-500" />
          ) : testResult === "fail" ? (
            <XIcon className="size-3.5 text-destructive" />
          ) : (
            <SendIcon className="size-3.5" />
          )}
          {testing ? "Отправка…"
            : testResult === "ok" ? "Сообщение отправлено"
            : testResult === "fail" ? "Ошибка отправки"
            : "Отправить тестовое сообщение"}
        </Button>
      </CardContent>
    </Card>
  )
}

// ─── history card ─────────────────────────────────────────────────────────────

function HistoryCard({ entries }: { entries: HistoryEntry[] }) {
  return (
    <Card>
      <CardHeader className="pb-2 pt-4 px-4">
        <CardTitle className="text-sm">Журнал срабатываний</CardTitle>
      </CardHeader>
      <CardContent className="px-4 pb-4">
        {entries.length === 0 ? (
          <p className="text-xs text-muted-foreground py-2">Нет срабатываний</p>
        ) : (
          <div className="flex flex-col gap-2.5">
            {entries.map(e => (
              <div key={e.id} className="flex gap-2.5 items-start">
                <SeverityDot severity={e.severity} />
                <div className="flex-1 min-w-0">
                  <p className="text-[11px] font-medium leading-tight truncate">{e.ruleName}</p>
                  <p className="text-[10px] text-muted-foreground leading-snug mt-0.5 line-clamp-2">{e.message}</p>
                </div>
                <div className="text-right shrink-0">
                  <p className="text-[10px] text-muted-foreground whitespace-nowrap">{e.time}</p>
                  <span className={cn(
                    "text-[9px] font-medium px-1 py-0.5 rounded mt-0.5 inline-block",
                    e.sent
                      ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
                      : "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400",
                  )}>
                    {e.sent ? "✓ отправлено" : "✗ ошибка"}
                  </span>
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

// ─── add rule sheet ───────────────────────────────────────────────────────────

const BLANK_FORM = {
  name:      "",
  type:      "gre-tunnel" as AlertType,
  target:    "",
  condition: "",
  threshold: "",
  severity:  "warning" as AlertSeverity,
  cooldown:  "5м" as AlertCooldown,
  chatId:    "",
}

function AddRuleSheet({ open, onClose, onSave }: {
  open: boolean
  onClose: () => void
  onSave: (rule: Omit<AlertRule, "id" | "lastFired" | "enabled">) => void
}) {
  const [form, setForm] = useState({ ...BLANK_FORM })

  // reset when open
  const handleOpen = (o: boolean) => { if (o) setForm({ ...BLANK_FORM }) }

  const targets    = TYPE_TARGETS[form.type]
  const conditions = TYPE_CONDITIONS[form.type]
  const unit       = THRESHOLD_UNIT[form.type]

  const conditionDisplay = unit && form.threshold
    ? `${form.condition.replace("порога", form.threshold + " " + unit)}`
    : form.condition

  const canSave = form.name.trim() && form.target && form.condition && (!unit || form.threshold)

  const handleSave = () => {
    if (!canSave) return
    onSave({
      name:      form.name.trim(),
      type:      form.type,
      target:    form.target,
      condition: conditionDisplay || form.condition,
      severity:  form.severity,
      cooldown:  form.cooldown,
      chatId:    form.chatId.trim(),
    })
    onClose()
  }

  return (
    <Sheet open={open} onOpenChange={o => { if (!o) onClose(); handleOpen(o) }}>
      {/* p-0 + gap-0: we control all spacing internally */}
      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-md">

        {/* ── fixed header ── */}
        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
          <SheetTitle className="flex items-center gap-2 text-base">
            <BellIcon className="size-4" />
            Новое правило оповещения
          </SheetTitle>
        </SheetHeader>

        {/* ── scrollable body ── */}
        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">

          {/* name */}
          <div className="flex flex-col gap-1.5">
            <FieldLabel>Название правила</FieldLabel>
            <Input
              placeholder="Например: GRE-туннель Иванов offline"
              value={form.name}
              onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
            />
          </div>

          {/* type */}
          <div className="flex flex-col gap-1.5">
            <FieldLabel>Тип события</FieldLabel>
            <NativeSelect
              value={form.type}
              onChange={v => setForm(f => ({ ...f, type: v as AlertType, target: "", condition: "", threshold: "" }))}
            >
              {(Object.entries(TYPE_META) as [AlertType, typeof TYPE_META[AlertType]][]).map(([t, m]) => (
                <option key={t} value={t}>{m.label}</option>
              ))}
            </NativeSelect>
          </div>

          {/* target + condition on same row when both are simple selects */}
          <div className="grid grid-cols-2 gap-3">
            <div className="flex flex-col gap-1.5">
              <FieldLabel>Объект</FieldLabel>
              <NativeSelect value={form.target} onChange={v => setForm(f => ({ ...f, target: v }))}>
                <option value="" disabled>— выбрать —</option>
                {targets.map(t => <option key={t} value={t}>{t}</option>)}
              </NativeSelect>
            </div>
            <div className="flex flex-col gap-1.5">
              <FieldLabel>Условие</FieldLabel>
              <NativeSelect value={form.condition} onChange={v => setForm(f => ({ ...f, condition: v }))}>
                <option value="" disabled>— выбрать —</option>
                {conditions.map(c => <option key={c} value={c}>{c}</option>)}
              </NativeSelect>
            </div>
          </div>

          {/* threshold — only for RTT / loss / traffic */}
          {unit && (
            <div className="flex flex-col gap-1.5">
              <FieldLabel>Пороговое значение</FieldLabel>
              <div className="flex items-center gap-0">
                <Input
                  type="number" min="0"
                  value={form.threshold}
                  onChange={e => setForm(f => ({ ...f, threshold: e.target.value }))}
                  className="rounded-r-none"
                  placeholder="0"
                />
                <span className="h-8 px-3 flex items-center rounded-r-lg border border-l-0 border-input
                  bg-muted text-sm text-muted-foreground shrink-0">
                  {unit}
                </span>
              </div>
            </div>
          )}

          {/* severity — vertical radio cards */}
          <div className="flex flex-col gap-1.5">
            <FieldLabel>Серьёзность</FieldLabel>
            <div className="flex flex-col gap-1.5">
              {(["critical", "warning", "info"] as AlertSeverity[]).map(s => {
                const active = form.severity === s
                return (
                  <button key={s} onClick={() => setForm(f => ({ ...f, severity: s }))}
                    className={cn(
                      "flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors w-full",
                      active ? SEVERITY_META[s].chip : "border-input hover:bg-muted/50 text-foreground",
                    )}>
                    <span className={cn("size-2.5 rounded-full shrink-0", SEVERITY_META[s].dot)} />
                    <div className="min-w-0">
                      <p className="text-sm font-medium leading-none">{SEVERITY_META[s].label}</p>
                      <p className="text-xs text-muted-foreground mt-0.5 leading-none">
                        {s === "critical" ? "Немедленное уведомление, звуковой сигнал"
                          : s === "warning" ? "Важное событие, тихое уведомление"
                          : "Информационное, без уведомления"}
                      </p>
                    </div>
                    {active && <CheckIcon className="size-4 ml-auto shrink-0 opacity-70" />}
                  </button>
                )
              })}
            </div>
          </div>

          {/* cooldown */}
          <div className="flex flex-col gap-1.5">
            <FieldLabel>Повторять не чаще чем</FieldLabel>
            <div className="flex gap-1.5 flex-wrap">
              {COOLDOWNS.map(c => (
                <button key={c} onClick={() => setForm(f => ({ ...f, cooldown: c }))}
                  className={cn(
                    "px-3 py-1.5 rounded-lg border text-sm font-mono transition-colors",
                    form.cooldown === c
                      ? "border-primary bg-primary/10 text-primary font-semibold"
                      : "border-input text-muted-foreground hover:bg-muted/50 hover:text-foreground",
                  )}>
                  {c}
                </button>
              ))}
            </div>
          </div>

          {/* chat id override */}
          <div className="flex flex-col gap-1.5">
            <FieldLabel>Chat ID — переопределить</FieldLabel>
            <Input
              value={form.chatId}
              onChange={e => setForm(f => ({ ...f, chatId: e.target.value }))}
              className="font-mono text-sm"
              placeholder="-100xxxxxxxxxx"
            />
            <FieldHint>Пусто → используется глобальный Chat ID из настроек Telegram</FieldHint>
          </div>

          {/* Telegram message preview */}
          {form.name && form.target && form.condition && (
            <div className="rounded-xl border border-border bg-muted/40 overflow-hidden">
              <div className="px-3 py-2 border-b border-border/60 flex items-center gap-1.5">
                <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
                  Предпросмотр сообщения
                </span>
              </div>
              <div className="px-3 py-2.5 font-mono text-xs leading-relaxed space-y-0.5">
                <p>
                  {form.severity === "critical" ? "🔴" : form.severity === "warning" ? "🟡" : "🔵"}
                  {" "}<span className="font-semibold">{form.name}</span>
                </p>
                <p className="text-muted-foreground">Объект: {form.target}</p>
                <p className="text-muted-foreground">
                  Событие: {conditionDisplay || form.condition}
                </p>
                <p className="text-muted-foreground">Cooldown: {form.cooldown}</p>
                <p className="text-muted-foreground">
                  Chat: {form.chatId || "(глобальный)"}
                </p>
              </div>
            </div>
          )}
        </div>

        {/* ── fixed footer ── */}
        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
          <Button variant="outline" className="flex-1" onClick={onClose}>Отмена</Button>
          <Button className="flex-1" onClick={handleSave} disabled={!canSave}>
            Сохранить правило
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

// ─── page ─────────────────────────────────────────────────────────────────────

type SeverityFilter = AlertSeverity | "all"

export default function AlertsPage() {
  const [rules,   setRules]   = useState<AlertRule[]>(INIT_RULES)
  const [history]             = useState<HistoryEntry[]>(INIT_HISTORY)
  const [tg,      setTg]      = useState<TelegramConfig>(INIT_TG)
  const [sheetOpen, setSheetOpen] = useState(false)
  const [sevFilter, setSevFilter] = useState<SeverityFilter>("all")
  const [onlyActive, setOnlyActive] = useState(false)
  const [search, setSearch]   = useState("")

  const total    = rules.length
  const active   = rules.filter(r => r.enabled).length
  const critical = rules.filter(r => r.severity === "critical").length
  const warning  = rules.filter(r => r.severity === "warning").length
  const info     = rules.filter(r => r.severity === "info").length

  const filteredRules = useMemo(() => rules.filter(r => {
    if (sevFilter !== "all" && r.severity !== sevFilter) return false
    if (onlyActive && !r.enabled) return false
    if (search && !r.name.toLowerCase().includes(search.toLowerCase()) &&
      !r.target.toLowerCase().includes(search.toLowerCase())) return false
    return true
  }), [rules, sevFilter, onlyActive, search])

  const handleToggle = (id: string, enabled: boolean) =>
    setRules(rs => rs.map(r => r.id === id ? { ...r, enabled } : r))

  const handleDelete = (id: string) =>
    setRules(rs => rs.filter(r => r.id !== id))

  const handleAdd = (rule: Omit<AlertRule, "id" | "lastFired" | "enabled">) => {
    setRules(rs => [...rs, {
      ...rule,
      id: `r${Date.now()}`,
      enabled: true,
      lastFired: null,
    }])
  }

  // Summary chip click handler
  const handleChip = (sev: SeverityFilter) =>
    setSevFilter(f => f === sev ? "all" : sev)

  const chipActive = (sev: SeverityFilter) => sevFilter === sev

  return (
    <div className="flex flex-col h-full">
      <PageHeader
        crumbs={[{ label: "Система" }, { label: "Оповещения" }]}
        actions={
          <>
            <Button variant="outline" size="sm">
              <RefreshCwIcon className="size-4" />Обновить
            </Button>
            <Button size="sm" onClick={() => setSheetOpen(true)}>
              <PlusIcon className="size-4" />Добавить правило
            </Button>
          </>
        }
      />

      <div className="flex-1 overflow-y-auto p-6">
        <div className="flex flex-col gap-5">

          {/* ── summary chip bar ── */}
          <div className="flex items-center gap-2 flex-wrap">

            {/* stat chips */}
            {([
              { key: "all",      label: `Всего: ${total}`,          cls: "border-border bg-muted/50 text-foreground" },
              { key: "critical", label: `Критических: ${critical}`, cls: SEVERITY_META.critical.chip },
              { key: "warning",  label: `Предупреждений: ${warning}`, cls: SEVERITY_META.warning.chip },
              { key: "info",     label: `Информационных: ${info}`,  cls: SEVERITY_META.info.chip },
            ] as { key: SeverityFilter; label: string; cls: string }[]).map(({ key, label, cls }) => (
              <button key={key} onClick={() => handleChip(key)}
                className={cn(
                  "text-xs px-3 py-1.5 rounded-full border font-medium transition-colors",
                  chipActive(key)
                    ? cls
                    : "border-border bg-muted/40 text-muted-foreground hover:bg-muted",
                )}>
                {label}
              </button>
            ))}

            <div className="w-px h-4 bg-border mx-1" />

            {/* active count chip */}
            <button onClick={() => setOnlyActive(v => !v)}
              className={cn(
                "text-xs px-3 py-1.5 rounded-full border font-medium transition-colors",
                onlyActive
                  ? "border-emerald-400 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                  : "border-border bg-muted/40 text-muted-foreground hover:bg-muted",
              )}>
              Активных: {active}
            </button>

            {/* telegram status */}
            <span className={cn(
              "ml-auto text-xs px-3 py-1.5 rounded-full border flex items-center gap-1.5 font-medium",
              tg.connected
                ? "border-emerald-400 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                : "border-red-400 bg-red-500/10 text-red-600 dark:text-red-400",
            )}>
              <span className={cn("size-1.5 rounded-full", tg.connected ? "bg-emerald-500" : "bg-red-500")} />
              {tg.connected ? "Telegram: Подключён" : "Telegram: Не настроен"}
            </span>
          </div>

          {/* ── main layout ── */}
          <div className="grid grid-cols-1 xl:grid-cols-[1fr_300px] gap-5 items-start">

            {/* ── rules card ── */}
            <Card>
              <CardHeader className="pb-0 pt-4 px-4">
                <div className="flex items-center justify-between gap-3">
                  <CardTitle className="text-sm">Правила оповещения</CardTitle>
                  <Input
                    placeholder="Поиск…"
                    value={search}
                    onChange={e => setSearch(e.target.value)}
                    className="h-7 text-xs max-w-[200px]"
                  />
                </div>
              </CardHeader>

              <CardContent className="px-0 pb-0 pt-2">
                {filteredRules.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-12 text-muted-foreground/40">
                    <BellOffIcon className="size-8 mb-2 opacity-40" />
                    <p className="text-sm">Правила не найдены</p>
                  </div>
                ) : (
                  <div className="divide-y divide-border/60">
                    {filteredRules.map(r => (
                      <AlertRuleRow
                        key={r.id}
                        rule={r}
                        onToggle={handleToggle}
                        onDelete={handleDelete}
                      />
                    ))}
                  </div>
                )}

                {/* footer */}
                <div className="px-4 py-2.5 border-t flex items-center justify-between text-[11px] text-muted-foreground">
                  <span>
                    {filteredRules.length} из {total} правил
                    {onlyActive && " · только активные"}
                    {sevFilter !== "all" && ` · ${SEVERITY_META[sevFilter].label.toLowerCase()}`}
                  </span>
                  <button
                    onClick={() => setSheetOpen(true)}
                    className="flex items-center gap-1 hover:text-foreground transition-colors">
                    <PlusIcon className="size-3" />Добавить правило
                  </button>
                </div>
              </CardContent>
            </Card>

            {/* ── right sidebar ── */}
            <div className="flex flex-col gap-5">
              <TelegramCard cfg={tg} onChange={setTg} />
              <HistoryCard entries={history} />
            </div>
          </div>
        </div>
      </div>

      <AddRuleSheet
        open={sheetOpen}
        onClose={() => setSheetOpen(false)}
        onSave={handleAdd}
      />
    </div>
  )
}