import { useEffect, useState } from 'react'
import {
  ApiError,
  createAlertRule,
  deleteAlertRule,
  fetchAlertRules,
  updateAlertRule,
  type AlertCondition,
  type AlertRule,
  type CompareOp,
} from '../lib/api'
import {
  CollapseToggle,
  handleSectionHeaderKeyDown,
  sectionHeaderInteractiveClassName,
  sectionHeaderLeftClassName,
  useSectionCollapsed,
} from './CollapsibleSection'
import { HelpIcon } from './HelpIcon'
import { RegexHelpIcon } from './RegexHelpIcon'
import { queryInputClassName } from './FilterBar'

type ConditionKind = AlertCondition['kind']

const OPS: { value: CompareOp; label: string }[] = [
  { value: 'lt', label: '<' },
  { value: 'le', label: '<=' },
  { value: 'gt', label: '>' },
  { value: 'ge', label: '>=' },
  { value: 'eq', label: '==' },
  { value: 'ne', label: '!=' },
]

/// Parses a plain millisecond number or a humantime-style duration (`30s`/`5m`/`1h`) to mirror the backend's `window_ms` without a full humantime parser here.
function parseWindowMs(input: string): number | null {
  const trimmed = input.trim()
  if (!trimmed) return null
  const bare = Number(trimmed)
  if (Number.isFinite(bare)) return bare
  const match = /^(\d+(?:\.\d+)?)(ms|s|m|h|d)$/.exec(trimmed)
  if (!match) return null
  const value = Number(match[1])
  const unitMs = { ms: 1, s: 1000, m: 60_000, h: 3_600_000, d: 86_400_000 }[match[2] as 's' | 'm' | 'h' | 'd' | 'ms']
  return value * unitMs
}

function conditionSummary(condition: AlertCondition): string {
  switch (condition.kind) {
    case 'immediate':
      return `Immediate: ${condition.query}`
    case 'threshold': {
      const op = OPS.find((o) => o.value === condition.op)?.label ?? condition.op
      return `Threshold: ${condition.query} ${op} ${condition.threshold} over ${condition.window_ms}ms`
    }
    case 'newvalue':
      return `NewValue: ${condition.field_regex} (${condition.capture_group})`
    case 'ratio': {
      const op = OPS.find((o) => o.value === condition.op)?.label ?? condition.op
      return `Ratio: ${condition.query_a} / ${condition.query_b} ${op} ${condition.ratio} over ${condition.window_ms}ms`
    }
  }
}

interface FormState {
  name: string
  enabled: boolean
  kind: ConditionKind
  query: string
  op: CompareOp
  threshold: string
  windowInput: string
  fieldRegex: string
  captureGroup: string
  queryA: string
  queryB: string
  ratio: string
}

const EMPTY_FORM: FormState = {
  name: '',
  enabled: true,
  kind: 'immediate',
  query: '',
  op: 'ge',
  threshold: '',
  windowInput: '',
  fieldRegex: '',
  captureGroup: '',
  queryA: '',
  queryB: '',
  ratio: '',
}

function formFromRule(rule: AlertRule): FormState {
  const base: FormState = { ...EMPTY_FORM, name: rule.name, enabled: rule.enabled, kind: rule.condition.kind }
  switch (rule.condition.kind) {
    case 'immediate':
      base.query = rule.condition.query
      break
    case 'threshold':
      base.query = rule.condition.query
      base.op = rule.condition.op
      base.threshold = String(rule.condition.threshold)
      base.windowInput = String(rule.condition.window_ms)
      break
    case 'newvalue':
      base.fieldRegex = rule.condition.field_regex
      base.captureGroup = rule.condition.capture_group
      break
    case 'ratio':
      base.queryA = rule.condition.query_a
      base.queryB = rule.condition.query_b
      base.op = rule.condition.op
      base.ratio = String(rule.condition.ratio)
      base.windowInput = String(rule.condition.window_ms)
      break
  }
  return base
}

function buildCondition(form: FormState): { error: string | null; condition: AlertCondition | null } {
  switch (form.kind) {
    case 'immediate':
      if (!form.query.trim()) return { error: 'Immediate requires a query.', condition: null }
      return { error: null, condition: { kind: 'immediate', query: form.query } }
    case 'threshold': {
      if (!form.query.trim()) return { error: 'Threshold requires a query.', condition: null }
      const threshold = Number(form.threshold)
      if (!form.threshold.trim() || !Number.isFinite(threshold)) {
        return { error: 'Threshold requires a numeric threshold.', condition: null }
      }
      const windowMs = parseWindowMs(form.windowInput)
      if (windowMs === null) return { error: 'Threshold requires a valid window (e.g. 30s, 5m, or a plain ms number).', condition: null }
      return { error: null, condition: { kind: 'threshold', query: form.query, op: form.op, threshold, window_ms: windowMs } }
    }
    case 'newvalue':
      if (!form.fieldRegex.trim() || !form.captureGroup.trim()) {
        return { error: 'NewValue requires both a field regex and a capture group name.', condition: null }
      }
      return { error: null, condition: { kind: 'newvalue', field_regex: form.fieldRegex, capture_group: form.captureGroup } }
    case 'ratio': {
      if (!form.queryA.trim() || !form.queryB.trim()) return { error: 'Ratio requires two queries.', condition: null }
      const ratio = Number(form.ratio)
      if (!form.ratio.trim() || !Number.isFinite(ratio)) return { error: 'Ratio requires a numeric ratio.', condition: null }
      const windowMs = parseWindowMs(form.windowInput)
      if (windowMs === null) return { error: 'Ratio requires a valid window (e.g. 30s, 5m, or a plain ms number).', condition: null }
      return {
        error: null,
        condition: { kind: 'ratio', query_a: form.queryA, query_b: form.queryB, op: form.op, ratio, window_ms: windowMs },
      }
    }
  }
}

export function Alerts() {
  const [rules, setRules] = useState<AlertRule[]>([])
  const [editingId, setEditingId] = useState<string | null>(null)
  const [form, setForm] = useState<FormState>(EMPTY_FORM)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const [collapsed, setCollapsed] = useSectionCollapsed('alerts')

  async function loadRules() {
    try {
      setRules(await fetchAlertRules())
    } catch {
      // engine not reachable yet; leave the previous list in place
    }
  }

  useEffect(() => {
    loadRules()
  }, [])

  function patch(fields: Partial<FormState>) {
    setForm((prev) => ({ ...prev, ...fields }))
  }

  function startCreate() {
    setEditingId(null)
    setForm(EMPTY_FORM)
    setSubmitError(null)
  }

  function startEdit(rule: AlertRule) {
    setEditingId(rule.id)
    setForm(formFromRule(rule))
    setSubmitError(null)
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitError(null)
    if (!form.name.trim()) {
      setSubmitError('Name is required.')
      return
    }
    const { error, condition } = buildCondition(form)
    if (error || !condition) {
      setSubmitError(error ?? 'Invalid condition.')
      return
    }
    setSubmitting(true)
    try {
      const rule = { name: form.name, enabled: form.enabled, condition }
      if (editingId) {
        await updateAlertRule(editingId, rule)
      } else {
        await createAlertRule(rule)
      }
      await loadRules()
      startCreate()
    } catch (err) {
      setSubmitError(err instanceof ApiError ? err.message : 'Failed to save alert rule')
    } finally {
      setSubmitting(false)
    }
  }

  async function handleDelete(id: string) {
    try {
      await deleteAlertRule(id)
      if (editingId === id) startCreate()
      await loadRules()
    } catch {
      // best-effort; list refresh will show the rule is still there on failure
    }
  }

  async function handleToggleEnabled(rule: AlertRule) {
    try {
      await updateAlertRule(rule.id, { name: rule.name, enabled: !rule.enabled, condition: rule.condition })
      await loadRules()
    } catch {
      // best-effort; list refresh will show the previous state on failure
    }
  }

  return (
    <div className="border-b border-border text-sm">
      <div
        className={sectionHeaderInteractiveClassName}
        role="button"
        tabIndex={0}
        aria-expanded={!collapsed}
        onClick={() => setCollapsed(!collapsed)}
        onKeyDown={handleSectionHeaderKeyDown(() => setCollapsed(!collapsed))}
      >
        <div className={sectionHeaderLeftClassName}>
          Alerts
          <HelpIcon sectionId="alerts" label="Help: Alerts" />
        </div>
        <div className="flex items-center gap-1.5">
          <CollapseToggle collapsed={collapsed} />
        </div>
      </div>
      <div hidden={collapsed}>
        <p className="px-3 pt-3 text-xs text-text-faint">
          Every rule delivers to the ntfy sink configured in Settings.
        </p>
        <div className="flex gap-4 p-3">
        <form onSubmit={handleSubmit} className="w-96 shrink-0 space-y-2">
          <div>
            <label className="mb-1 block text-xs text-text-subtle">Name</label>
            <input
              className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 text-sm text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
              value={form.name}
              onChange={(e) => patch({ name: e.target.value })}
              placeholder="error spike"
              required
            />
          </div>

          <div>
            <div className="mb-1 flex items-center gap-1.5 text-xs text-text-subtle">
              <span>Condition</span>
              <HelpIcon sectionId="alerts" label="Help: Alert conditions" />
            </div>
            <select
              className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 text-sm text-text focus:border-border-strong focus:outline-none"
              value={form.kind}
              onChange={(e) => patch({ kind: e.target.value as ConditionKind })}
            >
              <option value="immediate">Immediate</option>
              <option value="threshold">Threshold</option>
              <option value="newvalue">NewValue</option>
              <option value="ratio">Ratio</option>
            </select>
          </div>

          {form.kind === 'immediate' && (
            <div>
              <label className="mb-1 block text-xs text-text-subtle">Query</label>
              <input
                className={queryInputClassName}
                value={form.query}
                onChange={(e) => patch({ query: e.target.value })}
                placeholder='regex("error")'
              />
            </div>
          )}

          {form.kind === 'threshold' && (
            <div className="space-y-1">
              <div>
                <label className="mb-1 block text-xs text-text-subtle">Query</label>
                <input
                  className={queryInputClassName}
                  value={form.query}
                  onChange={(e) => patch({ query: e.target.value })}
                  placeholder='regex("error")'
                />
              </div>
              <div className="flex gap-1">
                <select
                  className="rounded border border-border-soft bg-surface-1 px-1 py-1 text-xs text-text focus:border-border-strong focus:outline-none"
                  value={form.op}
                  onChange={(e) => patch({ op: e.target.value as CompareOp })}
                >
                  {OPS.map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </select>
                <input
                  className="w-24 min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-1.5 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                  value={form.threshold}
                  onChange={(e) => patch({ threshold: e.target.value })}
                  placeholder="threshold (e.g. 10)"
                />
                <input
                  className="w-24 min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-1.5 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                  value={form.windowInput}
                  onChange={(e) => patch({ windowInput: e.target.value })}
                  placeholder="window (e.g. 30s, 5m)"
                />
              </div>
            </div>
          )}

          {form.kind === 'newvalue' && (
            <div className="space-y-1">
              <div>
                <label className="mb-1 flex items-center gap-1 text-xs text-text-subtle">
                  Field regex
                  <RegexHelpIcon label="Help: Field regex syntax" />
                </label>
                <input
                  className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 font-mono text-sm text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                  value={form.fieldRegex}
                  onChange={(e) => patch({ fieldRegex: e.target.value })}
                  placeholder={String.raw`agent=(?P<agent>\S+)`}
                />
              </div>
              <div>
                <label className="mb-1 block text-xs text-text-subtle">Capture group</label>
                <input
                  className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 text-sm text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                  value={form.captureGroup}
                  onChange={(e) => patch({ captureGroup: e.target.value })}
                  placeholder="agent"
                />
              </div>
            </div>
          )}

          {form.kind === 'ratio' && (
            <div className="space-y-1">
              <div>
                <label className="mb-1 block text-xs text-text-subtle">Query A</label>
                <input
                  className={queryInputClassName}
                  value={form.queryA}
                  onChange={(e) => patch({ queryA: e.target.value })}
                  placeholder='regex("error")'
                />
              </div>
              <div>
                <label className="mb-1 block text-xs text-text-subtle">Query B</label>
                <input
                  className={queryInputClassName}
                  value={form.queryB}
                  onChange={(e) => patch({ queryB: e.target.value })}
                  placeholder='regex("request")'
                />
              </div>
              <div className="flex gap-1">
                <select
                  className="rounded border border-border-soft bg-surface-1 px-1 py-1 text-xs text-text focus:border-border-strong focus:outline-none"
                  value={form.op}
                  onChange={(e) => patch({ op: e.target.value as CompareOp })}
                >
                  {OPS.map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </select>
                <input
                  className="w-24 min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-1.5 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                  value={form.ratio}
                  onChange={(e) => patch({ ratio: e.target.value })}
                  placeholder="ratio (e.g. 0.5)"
                />
                <input
                  className="w-24 min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-1.5 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                  value={form.windowInput}
                  onChange={(e) => patch({ windowInput: e.target.value })}
                  placeholder="window (e.g. 30s, 5m)"
                />
              </div>
            </div>
          )}

          <label className="flex items-center gap-1.5 text-xs text-text-secondary">
            <input type="checkbox" checked={form.enabled} onChange={(e) => patch({ enabled: e.target.checked })} />
            Enabled
          </label>

          {submitError && <div className="rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{submitError}</div>}

          <div className="flex gap-2">
            <button
              type="submit"
              disabled={submitting}
              className="rounded border border-border-soft px-3 py-1 text-sm text-text-secondary hover:bg-surface-2 disabled:opacity-50"
            >
              {submitting ? 'Saving…' : editingId ? 'Save rule' : 'Create rule'}
            </button>
            {editingId && (
              <button type="button" onClick={startCreate} className="rounded border border-border-soft px-3 py-1 text-sm text-text-secondary hover:bg-surface-2">
                Cancel
              </button>
            )}
          </div>
        </form>

        <div className="min-w-0 flex-1">
          <div className="mb-1 text-xs text-text-subtle">Alert rules</div>
          {rules.length === 0 ? (
            <div className="text-xs text-text-faint">No alert rules yet.</div>
          ) : (
            <div className="space-y-1">
              {rules.map((rule) => (
                <div
                  key={rule.id}
                  className={`flex items-center gap-2 rounded border px-2 py-1 text-xs ${
                    editingId === rule.id ? 'border-accent bg-accent/10' : 'border-border-soft'
                  }`}
                >
                  <input type="checkbox" checked={rule.enabled} onChange={() => handleToggleEnabled(rule)} title="Enabled" />
                  <div className="min-w-0 flex-1">
                    <div className="truncate font-semibold text-text">{rule.name}</div>
                    <div className="truncate text-text-secondary">{conditionSummary(rule.condition)}</div>
                  </div>
                  <button type="button" onClick={() => startEdit(rule)} className="rounded border border-border-soft px-1.5 py-0.5 text-text-secondary hover:bg-surface-2">
                    Edit
                  </button>
                  <button type="button" onClick={() => handleDelete(rule.id)} className="rounded border border-border-soft px-1.5 py-0.5 text-text-muted hover:bg-surface-2">
                    Delete
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
        </div>
      </div>
    </div>
  )
}