import { useMemo, useState } from 'react'
import {
  Alert, Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tabs, Tag, Tooltip, Typography, message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import {
  BellOutlined, ExperimentOutlined, PlusOutlined,
} from '@ant-design/icons'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'

import apiClient, { isEnvelope } from '../../api/client'
import PageHeader from '../../components/PageHeader'
import EmptyState from '../../components/EmptyState'
import { useAuthStore } from '../../stores/auth'

const { Text } = Typography

interface Channel {
  id: number
  name: string
  kind: 'webhook' | 'email'
  target: string
  settings: Record<string, unknown>
  active: boolean
}

interface SendResult {
  channel_id: number
  channel_name: string
  ok: boolean
  error?: string
}

interface AlertEvent {
  id: number
  kind: string
  severity: 'info' | 'warning' | 'error' | 'critical'
  subject: string
  message: string
  sent_to: SendResult[]
  fired_at: string
  acknowledged_at?: string | null
}

interface ChannelFormValues {
  name: string
  kind: 'webhook' | 'email'
  target: string
  active: boolean
  // Email-fields (settings.*):
  smtp_host?: string
  smtp_port?: number
  username?: string
  password?: string
  from?: string
  use_tls?: boolean
}

function sevTag(s: AlertEvent['severity']) {
  const map: Record<string, string> = {
    info: 'blue', warning: 'orange', error: 'red', critical: 'magenta',
  }
  return <Tag color={map[s]}>{s.toUpperCase()}</Tag>
}

export default function AlertsPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()
  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  // Tab über ?tab= steuerbar, damit der Dashboard-Deeplink
  // (/alerts?tab=events) direkt auf der Event-History landet statt auf
  // dem Channels-Tab. Default bleibt 'channels' für den Direktaufruf.
  const [searchParams, setSearchParams] = useSearchParams()
  const activeTab = searchParams.get('tab') === 'events' ? 'events' : 'channels'
  const setActiveTab = (key: string) =>
    setSearchParams(key === 'events' ? { tab: 'events' } : {}, { replace: true })

  const channels = useQuery({
    queryKey: ['alerts', 'channels'],
    queryFn: async () => {
      const r = await apiClient.get('/alerts/channels')
      return isEnvelope(r.data) ? (r.data.data as { channels: Channel[] }).channels : []
    },
  })
  const events = useQuery({
    queryKey: ['alerts', 'events'],
    queryFn: async () => {
      const r = await apiClient.get('/alerts/events?limit=200')
      return isEnvelope(r.data) ? (r.data.data as { events: AlertEvent[] }).events : []
    },
    refetchInterval: 15_000,
  })

  const [edit, setEdit] = useState<Channel | null>(null)
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<ChannelFormValues>()
  const [filterSev, setFilterSev] = useState<string | undefined>()
  const [filterKind, setFilterKind] = useState<string | undefined>()
  const [selectedIds, setSelectedIds] = useState<number[]>([])

  // Nach Quittieren/Löschen sowohl die Event-Liste als auch die Dashboard-
  // Karte (queryKey ['alerts','events','recent']) invalidieren — Prefix-Match.
  const refreshEvents = () => {
    setSelectedIds([])
    void qc.invalidateQueries({ queryKey: ['alerts', 'events'] })
  }
  const ackMut = useMutation({
    mutationFn: (ids: number[]) => apiClient.post('/alerts/events/acknowledge', { ids }),
    onSuccess: () => { message.success(t('alerts.acknowledged')); refreshEvents() },
    onError: (e: Error) => message.error(e.message),
  })
  const ackAllMut = useMutation({
    mutationFn: () => apiClient.post('/alerts/events/acknowledge-all'),
    onSuccess: () => { message.success(t('alerts.acknowledged')); refreshEvents() },
    onError: (e: Error) => message.error(e.message),
  })
  const delEventsMut = useMutation({
    mutationFn: (ids: number[]) => apiClient.post('/alerts/events/delete', { ids }),
    onSuccess: (_d, ids) => {
      // Anzahl mitsagen: die Kopf-Checkbox markiert nur die AKTUELLE Seite,
      // und bei einem groesseren Backlog ruecken sofort optisch identische
      // Eintraege nach. Ohne diese Rueckmeldung sieht es aus, als sei nichts
      // passiert (Befund 2026-09-11).
      message.success(t('alerts.eventsDeleted', { n: ids.length }))
      setSelectedIds([])
      refreshEvents()
    },
    onError: (e: Error) => message.error(e.message),
  })
  const delAckedMut = useMutation({
    mutationFn: () => apiClient.post('/alerts/events/delete-acknowledged'),
    onSuccess: (r) => {
      const n = (r?.data as { data?: { deleted?: number } })?.data?.deleted ?? 0
      message.success(t('alerts.eventsDeleted', { n }))
      setSelectedIds([])
      refreshEvents()
    },
    onError: (e: Error) => message.error(e.message),
  })

  // Anzahl quittierter Events ueber den GESAMTEN Datensatz, nicht nur die
  // sichtbare Seite — der Button soll zeigen, was er wirklich raeumt.
  const ackedCount = useMemo(
    () => (events.data ?? []).filter(e => e.acknowledged_at).length,
    [events.data],
  )

  const kindOptions = useMemo(() => {
    const kinds = [...new Set((events.data ?? []).map(e => e.kind))].sort()
    return kinds.map(k => ({ value: k, label: k }))
  }, [events.data])

  const filteredEvents = useMemo(() =>
    (events.data ?? []).filter(e =>
      (!filterSev  || e.severity === filterSev) &&
      (!filterKind || e.kind === filterKind)
    ),
  [events.data, filterSev, filterKind])

  function buildPayload(v: ChannelFormValues): Channel {
    const settings: Record<string, unknown> = {}
    if (v.kind === 'email') {
      settings.smtp_host = v.smtp_host
      settings.smtp_port = v.smtp_port
      settings.from      = v.from
      settings.use_tls   = !!v.use_tls
      if (v.username) settings.username = v.username
      if (v.password) settings.password = v.password
    }
    return {
      id: 0,
      name: v.name,
      kind: v.kind,
      target: v.target,
      settings,
      active: v.active,
    }
  }

  const create = useMutation({
    mutationFn: async (v: ChannelFormValues) => {
      await apiClient.post('/alerts/channels', buildPayload(v))
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setCreating(false); form.resetFields()
      qc.invalidateQueries({ queryKey: ['alerts', 'channels'] })
    },
    onError: (e: Error) => message.error(e.message),
  })
  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: ChannelFormValues }) => {
      await apiClient.put(`/alerts/channels/${id}`, buildPayload(v))
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setEdit(null); form.resetFields()
      qc.invalidateQueries({ queryKey: ['alerts', 'channels'] })
    },
    onError: (e: Error) => message.error(e.message),
  })
  const quickToggle = useMutation({
    mutationFn: async ({ id, row, checked }: { id: number; row: Channel; checked: boolean }) => {
      await apiClient.put(`/alerts/channels/${id}`, { ...row, active: checked })
    },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['alerts', 'channels'] }) },
    onError: (e: Error) => message.error(e.message),
  })
  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/alerts/channels/${id}`) },
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['alerts', 'channels'] }) },
    onError: (e: Error) => message.error(e.message),
  })
  const testFire = useMutation({
    mutationFn: async () => {
      const r = await apiClient.post('/alerts/test')
      return isEnvelope(r.data) ? (r.data.data as AlertEvent) : null
    },
    onSuccess: (e: AlertEvent | null) => {
      const total = e?.sent_to.length ?? 0
      const ok = e?.sent_to.filter((r) => r.ok).length ?? 0
      message.success(t('alerts.testDone', { ok, total }))
      qc.invalidateQueries({ queryKey: ['alerts', 'events'] })
    },
    onError: (e: Error) => message.error(e.message),
  })

  const chanColumns: ColumnsType<Channel> = [
    { title: t('alerts.col.name'), dataIndex: 'name' },
    {
      title: t('alerts.col.kind'), dataIndex: 'kind', width: 110,
      render: (v: string) =>
        <Tag color={v === 'webhook' ? 'blue' : 'purple'}>{v}</Tag>,
    },
    {
      title: t('alerts.col.target'), dataIndex: 'target',
      render: (v: string) => <Text style={{ fontFamily: 'monospace', fontSize: 12 }}>{v}</Text>,
    },
    {
      title: t('alerts.col.active'), dataIndex: 'active', width: 80,
      render: (v: boolean, r: Channel) => (
        <Switch
          size="small"
          checked={v}
          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === r.id}
          onChange={(checked) => quickToggle.mutate({ id: r.id, row: r, checked })}
        />
      ),
    },
    {
      title: t('common.actions'), key: 'a', width: 180,
      render: (_, r) => (
        <Space size={4}>
          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
            <Button size="small" disabled={isViewer} onClick={() => {
              if (isViewer) return
              setEdit(r)
              const settings = (r.settings ?? {}) as Record<string, unknown>
              form.setFieldsValue({
                name: r.name, kind: r.kind, target: r.target, active: r.active,
                smtp_host: settings.smtp_host as string,
                smtp_port: settings.smtp_port as number,
                username:  settings.username as string,
                password:  settings.password as string,
                from:      settings.from as string,
                use_tls:   settings.use_tls as boolean,
              })
            }}>{t('common.edit')}</Button>
          </Tooltip>
          {isViewer
            ? <Tooltip title={t('auth.viewerBadge')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
            : <Popconfirm title={t('alerts.confirmDelete', { name: r.name })}
                onConfirm={() => del.mutate(r.id)}>
                <Button size="small" danger>{t('common.delete')}</Button>
              </Popconfirm>
          }
        </Space>
      ),
    },
  ]

  const evColumns: ColumnsType<AlertEvent> = [
    {
      title: t('alerts.col.time'), dataIndex: 'fired_at', width: 160,
      render: (v: string) =>
        <Text style={{ fontFamily: 'monospace', fontSize: 11 }}>
          {dayjs(v).format('YYYY-MM-DD HH:mm:ss')}
        </Text>,
    },
    {
      title: t('alerts.col.severity'), dataIndex: 'severity', width: 110,
      render: sevTag,
    },
    { title: t('alerts.col.kind'), dataIndex: 'kind', width: 180,
      render: (v: string) => <Tag>{v}</Tag> },
    {
      title: t('alerts.col.subject'), dataIndex: 'subject',
      render: (s: string, r) => (
        <div>
          <div><Text strong>{s}</Text></div>
          <Text type="secondary" style={{ fontSize: 12, whiteSpace: 'pre-wrap' }}>
            {r.message}
          </Text>
        </div>
      ),
    },
    {
      title: t('alerts.col.delivered'), dataIndex: 'sent_to', width: 200,
      render: (rs: SendResult[]) => {
        if (!rs || rs.length === 0)
          return <Text type="secondary">{t('alerts.noChannels')}</Text>
        return (
          <Space size={4} wrap>
            {rs.map((r) => (
              <Tooltip key={r.channel_id} title={r.error || 'OK'}>
                <Tag color={r.ok ? 'green' : 'red'}>{r.channel_name}</Tag>
              </Tooltip>
            ))}
          </Space>
        )
      },
    },
    {
      title: t('alerts.col.status'), key: 'ack', width: 110,
      render: (_, r: AlertEvent) => r.acknowledged_at
        ? <Tooltip title={dayjs(r.acknowledged_at).format('YYYY-MM-DD HH:mm')}>
            <Tag color="green">{t('alerts.acked')}</Tag>
          </Tooltip>
        : <Tag color="gold">{t('alerts.open')}</Tag>,
    },
  ]

  const kind = Form.useWatch('kind', form)

  const openChannelCreate = () => {
    setCreating(true); form.resetFields()
    form.setFieldsValue({ kind: 'webhook', active: true, smtp_port: 587, use_tls: true })
  }

  return (
    <div>
      <PageHeader
        icon={<BellOutlined />}
        title={t('alerts.title')}
        subtitle={t('alerts.intro')}
        extra={
          <Space>
            <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
              <Button icon={<ExperimentOutlined />}
                onClick={() => testFire.mutate()}
                loading={testFire.isPending}
                disabled={isViewer}>
                {t('alerts.test')}
              </Button>
            </Tooltip>
          </Space>
        }
      />

      <Alert
        type="info"
        showIcon
        className="mb-16"
        message={t('alerts.scopeTitle')}
        description={t('alerts.scopeDesc')}
      />

      <Tabs activeKey={activeTab} onChange={setActiveTab} items={[
        {
          key: 'channels',
          label: t('alerts.tabs.channels'),
          children: (
            <Card size="small" extra={
              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                <Button type="primary" size="small" icon={<PlusOutlined />}
                  onClick={openChannelCreate} disabled={isViewer}>
                  {t('alerts.add')}
                </Button>
              </Tooltip>
            }>
              <Table size="small" rowKey="id" loading={channels.isFetching}
                dataSource={channels.data ?? []} columns={chanColumns}
                pagination={false}
                locale={{ emptyText: (
                  <EmptyState
                    icon={<BellOutlined />}
                    title={t('alerts.emptyChannelsTitle')}
                    description={t('alerts.emptyChannelsDesc')}
                    action={
                      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                        <Button type="primary" icon={<PlusOutlined />} onClick={openChannelCreate} disabled={isViewer}>
                          {t('alerts.add')}
                        </Button>
                      </Tooltip>
                    }
                  />
                ) }} />
            </Card>
          ),
        },
        {
          key: 'events',
          label: t('alerts.tabs.events'),
          children: (
            <Card size="small">
              <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }} className="mb-8">
                <Space>
                  <Select
                    allowClear
                    placeholder={t('alerts.col.severity')}
                    style={{ width: 150 }}
                    value={filterSev}
                    onChange={setFilterSev}
                    options={[
                      { value: 'info',     label: <Tag color="blue">INFO</Tag> },
                      { value: 'warning',  label: <Tag color="orange">WARNING</Tag> },
                      { value: 'error',    label: <Tag color="red">ERROR</Tag> },
                      { value: 'critical', label: <Tag color="magenta">CRITICAL</Tag> },
                    ]}
                  />
                  <Select
                    allowClear
                    showSearch
                    placeholder={t('alerts.col.kind')}
                    style={{ width: 220 }}
                    value={filterKind}
                    onChange={setFilterKind}
                    options={kindOptions}
                  />
                </Space>
                <Space>
                  <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                    <Button size="small" disabled={isViewer || selectedIds.length === 0}
                      loading={ackMut.isPending} onClick={() => ackMut.mutate(selectedIds)}>
                      {t('alerts.acknowledge')}{selectedIds.length > 0 ? ` (${selectedIds.length})` : ''}
                    </Button>
                  </Tooltip>
                  <Popconfirm title={t('alerts.confirmDeleteEvents', { n: selectedIds.length })}
                    onConfirm={() => delEventsMut.mutate(selectedIds)}
                    disabled={isViewer || selectedIds.length === 0}>
                    <Button size="small" danger disabled={isViewer || selectedIds.length === 0}
                      loading={delEventsMut.isPending}>
                      {t('common.delete')}{selectedIds.length > 0 ? ` (${selectedIds.length})` : ''}
                    </Button>
                  </Popconfirm>
                  <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                    <Button size="small" type="primary" ghost disabled={isViewer}
                      loading={ackAllMut.isPending} onClick={() => ackAllMut.mutate()}>
                      {t('alerts.acknowledgeAll')}
                    </Button>
                  </Tooltip>
                  {/* Gegenstueck zu "Alle quittieren": ohne das kommt man an
                      einen groesseren Backlog nur seitenweise heran, weil die
                      Kopf-Checkbox der Tabelle nur die aktuelle Seite markiert. */}
                  <Popconfirm title={t('alerts.confirmDeleteAcked', { n: ackedCount })}
                    onConfirm={() => delAckedMut.mutate()}
                    disabled={isViewer || ackedCount === 0}>
                    <Button size="small" danger ghost
                      disabled={isViewer || ackedCount === 0}
                      loading={delAckedMut.isPending}>
                      {t('alerts.deleteAcknowledged')}{ackedCount > 0 ? ` (${ackedCount})` : ''}
                    </Button>
                  </Popconfirm>
                </Space>
              </div>
              <Table size="small" rowKey="id" loading={events.isFetching}
                dataSource={filteredEvents} columns={evColumns}
                rowSelection={{
                  selectedRowKeys: selectedIds,
                  onChange: (keys) => setSelectedIds(keys as number[]),
                }}
                rowClassName={(r) => (r.acknowledged_at ? 'eg-row-muted' : '')}
                pagination={{ defaultPageSize: 25 }}
                locale={{ emptyText: (
                  <EmptyState
                    icon={<BellOutlined />}
                    title={t('alerts.emptyEventsTitle')}
                    description={t('alerts.emptyEventsDesc')}
                  />
                ) }} />
            </Card>
          ),
        },
      ]} />

      <Modal
        title={edit ? t('alerts.editTitle') : t('alerts.addTitle')}
        open={edit !== null || creating}
        onCancel={() => { setEdit(null); setCreating(false); form.resetFields() }}
        onOk={() => form.submit()}
        width={560}
        confirmLoading={create.isPending || update.isPending}
      >
        <Form form={form} layout="vertical"
          onFinish={(v) => edit ? update.mutate({ id: edit.id, v }) : create.mutate(v)}>
          <Form.Item label={t('alerts.col.name')} name="name" rules={[{ required: true }]}>
            <Input placeholder="Ops-Slack / Oncall-Email" />
          </Form.Item>
          <Form.Item label={t('alerts.col.kind')} name="kind" rules={[{ required: true }]}>
            <Select options={[
              { value: 'webhook', label: t('alerts.kindWebhook') },
              { value: 'email',   label: t('alerts.kindEmail') },
            ]} />
          </Form.Item>
          <Form.Item label={kind === 'email' ? t('alerts.col.targetEmail') : t('alerts.col.targetWebhook')}
            name="target" rules={[{ required: true }]}>
            <Input placeholder={kind === 'email' ? 'oncall@example.com' : 'https://hooks.slack.com/services/...'} />
          </Form.Item>

          {kind === 'email' && (
            <>
              <Form.Item label={t('alerts.smtp.host')} name="smtp_host" rules={[{ required: true }]}>
                <Input placeholder="smtp.gmail.com" />
              </Form.Item>
              <Form.Item label={t('alerts.smtp.port')} name="smtp_port" rules={[{ required: true }]}>
                <InputNumber min={1} max={65535} style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item label={t('alerts.smtp.from')} name="from" rules={[{ required: true }]}>
                <Input placeholder="edgeguard@your-domain.tld" />
              </Form.Item>
              <Form.Item label={t('alerts.smtp.username')} name="username">
                <Input />
              </Form.Item>
              <Form.Item label={t('alerts.smtp.password')} name="password">
                <Input.Password />
              </Form.Item>
              <Form.Item label={t('alerts.smtp.starttls')} name="use_tls" valuePropName="checked">
                <Switch />
              </Form.Item>
            </>
          )}

          <Form.Item label={t('alerts.col.active')} name="active" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}