import { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import {
  Button, Card, Col, Form, Input, InputNumber, Modal,
  Row, Select, Switch, Table, Tag, Tooltip, Typography, message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { ArrowLeftOutlined, DatabaseOutlined, PlusOutlined } from '@ant-design/icons'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'

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

const { Text } = Typography

interface Backend {
  id: number; name: string; scheme: string
  health_check_path?: string | null
  lb_algorithm: 'roundrobin' | 'leastconn' | 'source'
  websocket: boolean; force_http1: boolean; active: boolean
}
interface BackendFormValues {
  name: string; scheme: 'http' | 'https'
  health_check_path?: string
  lb_algorithm: 'roundrobin' | 'leastconn' | 'source'
  websocket: boolean; force_http1: boolean; active: boolean
  domain_ids?: number[]
}
interface BackendServer {
  id: number; backend_id: number; name: string
  address: string; port: number
  weight: number; backup: boolean; active: boolean
}
interface ServerFormValues {
  name: string; address: string; port: number
  weight: number; backup: boolean; active: boolean
}
interface DomainFull {
  id: number; name: string; active: boolean
  primary_backend_id?: number | null
  http_to_https: boolean; hsts_enabled: boolean
  hsts_max_age: number; hsts_subdomains: boolean; hsts_preload: boolean
  maintenance_mode: boolean; maintenance_message?: string | null
  www_redirect: string; rate_limit_rps: number
  max_body_kb: number; disable_h3: boolean; notes?: string | null
}

async function getBackend(id: number): Promise<Backend | null> {
  const r = await apiClient.get(`/backends/${id}`)
  if (!isEnvelope(r.data)) return null
  return r.data.data as Backend
}
async function listServers(backendID: number): Promise<BackendServer[]> {
  const r = await apiClient.get(`/backends/${backendID}/servers`)
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { servers?: BackendServer[] }).servers ?? []
}
async function listDomains(): Promise<DomainFull[]> {
  const r = await apiClient.get('/domains')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { domains?: DomainFull[] }).domains ?? []
}

interface HAProxyStat {
  backend: string; server: string; status: string
  sessions: number; bytes_in: number; bytes_out: number
  req_tot: number; req_rate: number
  last_change_sec: number; health: string
}
async function listHAProxyStats(): Promise<HAProxyStat[]> {
  try {
    const r = await apiClient.get('/haproxy/stats')
    if (!isEnvelope(r.data)) return []
    return (r.data.data as { backends?: HAProxyStat[] }).backends ?? []
  } catch { return [] }
}

function fmtBytes(n: number): string {
  if (n >= 1_073_741_824) return (n / 1_073_741_824).toFixed(1) + ' GB'
  if (n >= 1_048_576)     return (n / 1_048_576).toFixed(1) + ' MB'
  if (n >= 1_024)         return (n / 1_024).toFixed(0) + ' KB'
  return n + ' B'
}

// Mirror of haproxy.go safeID: replaces any char outside [a-zA-Z0-9_-] with '_'.
// HAProxy uses this to generate server tokens; we need it to match stat rows.
function safeID(s: string): string {
  const out = s.replace(/[^a-zA-Z0-9_-]/g, '_')
  return out || 'unnamed'
}

export default function BackendDetailPage() {
  const { t } = useTranslation()
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const qc = useQueryClient()
  const backendID = Number(id)
  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: backend, isLoading } = useQuery({
    queryKey: ['backend', backendID],
    queryFn: () => getBackend(backendID),
    enabled: !isNaN(backendID),
  })
  const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })
  const { data: haproxyStats } = useQuery({
    queryKey: ['haproxy', 'stats'],
    queryFn: listHAProxyStats,
    refetchInterval: 10_000,
  })
  const [form] = Form.useForm<BackendFormValues>()

  async function syncDomainAttachments(selected: number[]) {
    const all = domains ?? []
    const wasAttached = new Set(all.filter(d => d.primary_backend_id === backendID).map(d => d.id))
    const want = new Set(selected)
    const puts: Promise<unknown>[] = []
    for (const id of [...want].filter(id => !wasAttached.has(id))) {
      const d = all.find(x => x.id === id)
      if (d) puts.push(apiClient.put(`/domains/${id}`, { ...d, primary_backend_id: backendID }))
    }
    for (const id of [...wasAttached].filter(id => !want.has(id))) {
      const d = all.find(x => x.id === id)
      if (d) puts.push(apiClient.put(`/domains/${id}`, { ...d, primary_backend_id: null }))
    }
    if (puts.length) await Promise.all(puts)
  }

  const update = useMutation({
    mutationFn: async (v: BackendFormValues) => {
      const { domain_ids, ...body } = v
      await apiClient.put(`/backends/${backendID}`, body)
      await syncDomainAttachments(domain_ids ?? [])
    },
    onSuccess: () => {
      message.success(t('common.save'))
      void qc.invalidateQueries({ queryKey: ['backends'] })
      void qc.invalidateQueries({ queryKey: ['backend', backendID] })
      void qc.invalidateQueries({ queryKey: ['domains'] })
    },
    onError: (e: Error) => message.error(e.message),
  })

  if (isLoading || !backend) return null

  const attached = (domains ?? []).filter(d => d.primary_backend_id === backendID)

  return (
    <div>
      <PageHeader
        icon={<DatabaseOutlined />}
        title={backend.name}
        subtitle={`${backend.scheme.toUpperCase()} · ${backend.lb_algorithm}`}
        extra={
          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/backends')}>
            {t('backends.backToList')}
          </Button>
        }
      />

      <Row gutter={24}>
        <Col xs={24} lg={10}>
          <Card size="small" title={t('backends.settingsCard')} className="mb-16">
            <Form
              form={form}
              layout="vertical"
              initialValues={{
                name: backend.name,
                scheme: backend.scheme,
                health_check_path: backend.health_check_path ?? undefined,
                lb_algorithm: backend.lb_algorithm,
                websocket: backend.websocket,
                force_http1: backend.force_http1,
                active: backend.active,
                domain_ids: attached.map(d => d.id),
              }}
              onFinish={(v) => update.mutate(v)}
            >
              <Form.Item label={t('backends.name')} name="name" rules={[{ required: true }]}>
                <Input />
              </Form.Item>
              <Form.Item label={t('backends.scheme')} name="scheme" rules={[{ required: true }]}>
                <Select options={[{ value: 'http', label: 'http' }, { value: 'https', label: 'https' }]} />
              </Form.Item>
              <Form.Item label={t('backends.lbAlgo')} name="lb_algorithm" rules={[{ required: true }]}
                extra={t('backends.lbAlgoHint')}>
                <Select options={[
                  { value: 'roundrobin', label: 'roundrobin' },
                  { value: 'leastconn',  label: 'leastconn' },
                  { value: 'source',     label: 'source' },
                ]} />
              </Form.Item>
              <Form.Item label={t('backends.healthCheck')} name="health_check_path"
                extra={t('backends.healthCheckHint')}>
                <Input placeholder="/health" allowClear />
              </Form.Item>
              <Form.Item label={t('backends.websocket')} name="websocket" valuePropName="checked"
                extra={t('backends.websocketHint')}>
                <Switch />
              </Form.Item>
              <Form.Item label={t('backends.forceHttp1')} name="force_http1" valuePropName="checked"
                extra={t('backends.forceHttp1Hint')}>
                <Switch />
              </Form.Item>
              <Form.Item label={t('backends.active')} name="active" valuePropName="checked">
                <Switch />
              </Form.Item>
              <Form.Item label={t('backends.attachedDomains')} name="domain_ids"
                extra={t('backends.attachedDomainsHint')}>
                <Select
                  mode="multiple" allowClear showSearch optionFilterProp="label"
                  placeholder={t('backends.selectDomains')}
                  options={(domains ?? []).map(d => ({
                    value: d.id,
                    label: d.primary_backend_id && d.primary_backend_id !== backendID
                      ? `${d.name} (${t('backends.attachedToOther', { id: d.primary_backend_id })})`
                      : d.name,
                  }))}
                />
              </Form.Item>
              <Form.Item>
                <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                  <Button type="primary" htmlType="submit" loading={update.isPending} disabled={isViewer}>
                    {t('common.save')}
                  </Button>
                </Tooltip>
              </Form.Item>
            </Form>
          </Card>
        </Col>

        <Col xs={24} lg={14}>
          <Card size="small" title={t('backends.serversIn', { name: backend.name })}>
            <ServerPanel backendID={backendID} haproxyStats={haproxyStats ?? []} isViewer={isViewer} />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

function ServerPanel({ backendID, haproxyStats, isViewer }: { backendID: number; haproxyStats: HAProxyStat[]; isViewer: boolean }) {
  const { t } = useTranslation()
  const qc = useQueryClient()
  const [open, setOpen] = useState(false)
  const [editing, setEditing] = useState<BackendServer | null>(null)
  const [form] = Form.useForm<ServerFormValues>()

  const { data: servers, isLoading } = useQuery({
    queryKey: ['backend-servers', backendID],
    queryFn: () => listServers(backendID),
  })

  const create = useMutation({
    mutationFn: async (v: ServerFormValues) => {
      await apiClient.post(`/backends/${backendID}/servers`, v)
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setOpen(false); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] })
      void qc.invalidateQueries({ queryKey: ['backend-server-counts'] })
    },
    onError: (e: Error) => message.error(e.message),
  })
  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: ServerFormValues }) => {
      await apiClient.put(`/backend-servers/${id}`, { ...v, backend_id: backendID })
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setEditing(null); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] })
    },
    onError: (e: Error) => message.error(e.message),
  })
  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/backend-servers/${id}`) },
    onSuccess: () => {
      void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] })
      void qc.invalidateQueries({ queryKey: ['backend-server-counts'] })
    },
    onError: (e: Error) => message.error(e.message),
  })
  const quickToggle = useMutation({
    mutationFn: async ({ id, row, checked }: { id: number; row: BackendServer; checked: boolean }) => {
      const { id: _id, ...body } = row
      await apiClient.put(`/backend-servers/${id}`, { ...body, active: checked })
    },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] }) },
    onError: (e: Error) => message.error(e.message),
  })

  const cols: ColumnsType<BackendServer> = [
    {
      title: t('backends.server.name'), dataIndex: 'name',
      render: (s: string) => <code>{s}</code>,
    },
    {
      title: t('backends.server.target'), key: 'tgt',
      render: (_, r) => <Text code>{r.address}:{r.port}</Text>,
    },
    { title: t('backends.server.weight'), dataIndex: 'weight', width: 80 },
    {
      title: t('backends.server.backup'), dataIndex: 'backup', width: 90,
      render: (v: boolean) => v ? <Tag color="purple">Backup</Tag> : '—',
    },
    {
      title: t('backends.active'), dataIndex: 'active', width: 80,
      render: (v: boolean, r: BackendServer) => (
        <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('backends.server.live'), key: 'live', width: 160,
      render: (_, r) => {
        const stat = haproxyStats.find(
          s => s.backend === `eg_backend_${backendID}` && s.server === safeID(r.name)
        )
        if (!stat) return <Text type="secondary" style={{ fontSize: 11 }}>—</Text>
        const color = stat.status === 'UP' ? 'green' : stat.status === 'no check' ? 'default' : 'red'
        return (
          <Tooltip title={`↓${fmtBytes(stat.bytes_in)} ↑${fmtBytes(stat.bytes_out)} · ${stat.req_tot} req total · ${stat.health || stat.status}`}>
            <Tag color={color} style={{ margin: 0, fontSize: 11 }}>{stat.status}</Tag>
            <Text type="secondary" style={{ fontSize: 11, marginLeft: 4 }}>
              {stat.sessions} sess{stat.req_rate > 0 ? ` · ${stat.req_rate}/s` : ''}
            </Text>
          </Tooltip>
        )
      },
    },
    {
      title: t('common.actions'), key: 'a', width: 100,
      render: (_, r) => (
        <ActionButtons
          onEdit={() => {
            setEditing(r)
            form.setFieldsValue({
              name: r.name, address: r.address, port: r.port,
              weight: r.weight, backup: r.backup, active: r.active,
            })
          }}
          onDelete={() => del.mutate(r.id)}
          deleteConfirm={t('backends.server.deleteConfirm', { name: r.name })}
        />
      ),
    },
  ]

  return (
    <>
      <div className="mb-8" style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
          <Button type="primary" icon={<PlusOutlined />} size="small" disabled={isViewer} onClick={() => {
            setOpen(true); form.resetFields()
            form.setFieldsValue({ weight: 100, backup: false, active: true, port: 8080 })
          }}>
            {t('backends.server.add')}
          </Button>
        </Tooltip>
      </div>
      <Table
        size="small" rowKey="id" loading={isLoading}
        dataSource={servers ?? []} columns={cols}
        pagination={false}
        locale={{ emptyText: t('backends.server.empty') }}
      />
      <Modal
        title={editing ? t('backends.server.edit') : t('backends.server.add')}
        open={open || editing !== null}
        onCancel={() => { setOpen(false); setEditing(null); form.resetFields() }}
        onOk={() => { void form.submit() }}
        confirmLoading={create.isPending || update.isPending}
        destroyOnHidden
      >
        <Form form={form} layout="vertical"
          onFinish={(v) => editing ? update.mutate({ id: editing.id, v }) : create.mutate(v)}>
          <Form.Item label={t('backends.server.name')} name="name" rules={[{ required: true }]}>
            <Input placeholder="vmm-1" />
          </Form.Item>
          <Form.Item label={t('backends.server.address')} name="address" rules={[{ required: true }]}>
            <Input placeholder="10.0.0.11" />
          </Form.Item>
          <Form.Item label={t('backends.server.port')} name="port" rules={[{ required: true }]}>
            <InputNumber min={1} max={65535} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label={t('backends.server.weight')} name="weight" extra={t('backends.server.weightHint')}>
            <InputNumber min={0} max={256} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label={t('backends.server.backup')} name="backup" valuePropName="checked"
            extra={t('backends.server.backupHint')}>
            <Switch />
          </Form.Item>
          <Form.Item label={t('backends.active')} name="active" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}