import { useState } from 'react'
import { Button, Card, Form, Input, InputNumber, Modal, Select, Space, Switch, Table, Tag, Tooltip, Typography, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { ClusterOutlined, PlusOutlined } from '@ant-design/icons'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import ActionButtons from '../../components/ActionButtons'

import apiClient, { isEnvelope } from '../../api/client'

interface NetworkInterface {
  id: number
  name: string
  type: 'ethernet' | 'vlan' | 'bond' | 'bridge' | 'wireguard'
  parent?: string | null
  vlan_id?: number | null
  members: string[]
  role: string
  mtu?: number | null
  active: boolean
  description?: string | null
  created_at: string
  updated_at: string
}

interface IfaceFormValues {
  name: string
  type: NetworkInterface['type']
  parent?: string
  vlan_id?: number
  members?: string[]
  role: string
  mtu?: number
  active: boolean
  description?: string
}

interface SystemInterface {
  ifname: string
  link_type?: string
  address?: string
  flags?: string[]
  addr_info?: Array<{ family: 'inet' | 'inet6'; local: string; prefixlen: number }>
  rx_bytes: number; tx_bytes: number
  rx_packets: number; tx_packets: number
  rx_drop: number; tx_drop: number
}

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'
}

async function listInterfaces(): Promise<NetworkInterface[]> {
  const r = await apiClient.get('/network-interfaces')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { interfaces?: NetworkInterface[] }).interfaces ?? []
}

async function listSystemInterfaces(): Promise<SystemInterface[]> {
  const r = await apiClient.get('/system/interfaces')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { interfaces?: SystemInterface[] }).interfaces ?? []
}

interface FwZone { id: number; name: string; description?: string | null; builtin: boolean }
async function listZones(): Promise<FwZone[]> {
  const r = await apiClient.get('/firewall/zones')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { zones?: FwZone[] }).zones ?? []
}

export default function InterfacesTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()

  const { data: ifs, isLoading } = useQuery({ queryKey: ['network-interfaces'], queryFn: listInterfaces })
  const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces, refetchInterval: 10_000 })
  const { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })

  const [editing, setEditing] = useState<NetworkInterface | null>(null)
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<IfaceFormValues>()

  const create = useMutation({
    mutationFn: async (v: IfaceFormValues) => { await apiClient.post('/network-interfaces', v) },
    onSuccess: () => {
      message.success(t('common.save'))
      setCreating(false); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['network-interfaces'] })
    },
  })
  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: IfaceFormValues }) => { await apiClient.put(`/network-interfaces/${id}`, v) },
    onSuccess: () => {
      message.success(t('common.save'))
      setEditing(null); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['network-interfaces'] })
    },
  })
  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/network-interfaces/${id}`) },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) },
  })
  const quickToggle = useMutation({
    mutationFn: async ({ id, row, checked }: { id: number; row: NetworkInterface; checked: boolean }) => {
      const { id: _id, created_at: _ca, updated_at: _ua, ...body } = row
      await apiClient.put(`/network-interfaces/${id}`, { ...body, active: checked })
    },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) },
    onError: (e: Error) => message.error(e.message),
  })

  // Stable colour palette for role tags. Builtin zones get a fixed
  // colour; custom zones cycle through the palette by name hash so
  // the same custom zone always shows up in the same shade.
  const PALETTE = ['blue', 'green', 'orange', 'purple', 'magenta', 'cyan', 'gold', 'volcano', 'geekblue']
  const FIXED: Record<string, string> = { wan: 'blue', lan: 'green', dmz: 'orange', mgmt: 'purple', cluster: 'magenta' }
  const roleColor = (r: string): string => {
    if (FIXED[r]) return FIXED[r]
    let h = 0
    for (let i = 0; i < r.length; i++) h = (h * 31 + r.charCodeAt(i)) >>> 0
    return PALETTE[h % PALETTE.length]
  }

  const columns: ColumnsType<NetworkInterface> = [
    { title: t('networks.name'), dataIndex: 'name', key: 'name', render: (s: string) => <code>{s}</code> },
    { title: t('networks.type'), dataIndex: 'type', key: 'type' },
    {
      title: t('networks.composition'), key: 'composition',
      render: (_, row) => {
        if (row.type === 'vlan')                       return <span><code>{row.parent}</code>.{row.vlan_id}</span>
        if (row.type === 'bridge' || row.type === 'bond') {
          return <Space size={4} wrap>{(row.members ?? []).map((m) => <Tag key={m}>{m}</Tag>)}</Space>
        }
        return '—'
      },
    },
    {
      title: t('networks.role'), dataIndex: 'role', key: 'role',
      render: (r: string) => <Tag color={roleColor(r)}>{r.toUpperCase()}</Tag>,
    },
    { title: t('networks.mtu'), dataIndex: 'mtu', key: 'mtu', render: (v?: number) => v ?? '—' },
    {
      title: t('networks.active'), dataIndex: 'active', key: 'active', width: 80,
      render: (v: boolean, row: NetworkInterface) => (
        <Switch
          size="small"
          checked={v}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
      ),
    },
    {
      title: t('common.actions'), key: 'actions',
      render: (_, row) => (
        <ActionButtons
          onEdit={() => {
            setEditing(row)
            form.setFieldsValue({
              name: row.name, type: row.type, parent: row.parent ?? undefined,
              vlan_id: row.vlan_id ?? undefined, members: row.members ?? [],
              role: row.role,
              mtu: row.mtu ?? undefined, active: row.active,
              description: row.description ?? undefined,
            })
          }}
          onDelete={() => del.mutate(row.id)}
          deleteConfirm={t('networks.deleteConfirm', { name: row.name })}
        />
      ),
    },
  ]

  const openCreate = () => {
    setCreating(true); form.resetFields()
    form.setFieldsValue({ type: 'ethernet', role: 'lan', active: true })
  }

  return (
    <div>
      <Card title={t('networks.systemDiscovered')} className="mb-12" size="small">
        <Table
          size="small"
          dataSource={(sys ?? []).filter(i => i.ifname !== 'lo')}
          rowKey="ifname"
          pagination={false}
          columns={[
            {
              title: t('networks.name'), dataIndex: 'ifname', key: 'ifname', width: 120,
              render: (s: string) => <code>{s}</code>,
            },
            {
              title: t('networks.addresses'), key: 'addrs',
              render: (_, row: SystemInterface) => {
                const addrs = (row.addr_info ?? []).map(a => `${a.local}/${a.prefixlen}`)
                return addrs.length
                  ? <Space size={4} wrap>{addrs.map(a => <Tag key={a} style={{ fontFamily: 'monospace', fontSize: 11 }}>{a}</Tag>)}</Space>
                  : <Typography.Text type="secondary">—</Typography.Text>
              },
            },
            {
              title: '▼ RX', key: 'rx', width: 130,
              render: (_, row: SystemInterface) => (
                <Tooltip title={`${row.rx_packets?.toLocaleString()} pkts${row.rx_drop ? ` · ${row.rx_drop} drop` : ''}`}>
                  <span style={{ fontFamily: 'monospace', fontSize: 12 }}>{fmtBytes(row.rx_bytes ?? 0)}</span>
                </Tooltip>
              ),
            },
            {
              title: '▲ TX', key: 'tx', width: 130,
              render: (_, row: SystemInterface) => (
                <Tooltip title={`${row.tx_packets?.toLocaleString()} pkts${row.tx_drop ? ` · ${row.tx_drop} drop` : ''}`}>
                  <span style={{ fontFamily: 'monospace', fontSize: 12 }}>{fmtBytes(row.tx_bytes ?? 0)}</span>
                </Tooltip>
              ),
            },
            {
              title: t('networks.linkType'), dataIndex: 'link_type', key: 'link_type', width: 90,
              render: (v?: string) => v ? <Tag>{v}</Tag> : '—',
            },
          ]}
          locale={{ emptyText: t('networks.systemEmpty') }}
        />
      </Card>

      <DataTable
        rowKey="id"
        loading={isLoading}
        dataSource={ifs ?? []}
        columns={columns}
        extraActions={
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
            {t('networks.addInterface')}
          </Button>
        }
        emptyContent={
          <EmptyState
            icon={<ClusterOutlined />}
            title={t('networks.emptyTitle')}
            description={t('networks.emptyDesc')}
            action={
              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
                {t('networks.addInterface')}
              </Button>
            }
          />
        }
      />

      <Modal
        title={editing ? t('networks.editInterface') : t('networks.addInterface')}
        open={editing !== null || creating}
        onCancel={() => { setEditing(null); setCreating(false) }}
        onOk={() => { void form.submit() }}
        confirmLoading={create.isPending || update.isPending}
        width={560}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={(v) => {
            if (editing) update.mutate({ id: editing.id, v })
            else create.mutate(v)
          }}
        >
          <Form.Item label={t('networks.name')} name="name" rules={[{ required: true }]}>
            <Input placeholder="eth0 / eth0.100 / bond0" />
          </Form.Item>
          <Form.Item label={t('networks.type')} name="type" rules={[{ required: true }]}>
            <Select options={[
              { value: 'ethernet', label: 'ethernet' },
              { value: 'vlan',     label: 'vlan' },
              { value: 'bond',     label: 'bond' },
              { value: 'bridge',   label: 'bridge' },
              { value: 'wireguard',label: 'wireguard' },
            ]} />
          </Form.Item>
          <Form.Item noStyle shouldUpdate={(p, c) => p.type !== c.type}>
            {({ getFieldValue }) => {
              const tp = getFieldValue('type') as NetworkInterface['type'] | undefined
              const sysOptions = (sys ?? [])
                .filter((i) => i.ifname !== 'lo')
                .map((i) => ({ value: i.ifname, label: i.ifname }))
              if (tp === 'vlan') {
                return (
                  <>
                    <Form.Item label={t('networks.parent')} name="parent" rules={[{ required: true }]}>
                      <Select placeholder={t('networks.selectParent')} showSearch options={sysOptions} />
                    </Form.Item>
                    <Form.Item label={t('networks.vlanId')} name="vlan_id" rules={[{ required: true }]}>
                      <InputNumber min={1} max={4094} style={{ width: '100%' }} />
                    </Form.Item>
                  </>
                )
              }
              if (tp === 'bridge' || tp === 'bond') {
                return (
                  <Form.Item
                    label={t('networks.members')}
                    name="members"
                    rules={[{ required: true, type: 'array', min: 1, message: t('networks.membersRequired') }]}
                    extra={tp === 'bridge' ? t('networks.membersHintBridge') : t('networks.membersHintBond')}
                  >
                    <Select
                      mode="multiple"
                      placeholder={t('networks.selectMembers')}
                      showSearch
                      options={sysOptions}
                    />
                  </Form.Item>
                )
              }
              return null
            }}
          </Form.Item>
          <Form.Item
            label={t('networks.role')}
            name="role"
            rules={[{ required: true }]}
            extra={t('networks.roleHint')}
          >
            <Select
              showSearch
              options={(zones ?? []).map(z => ({
                value: z.name,
                label: z.builtin ? z.name.toUpperCase() : `${z.name.toUpperCase()} (custom)`,
              }))}
            />
          </Form.Item>
          <Form.Item label={t('networks.mtu')} name="mtu">
            <InputNumber min={68} max={9216} style={{ width: '100%' }} placeholder="1500" />
          </Form.Item>
          <Form.Item label={t('networks.description')} name="description">
            <Input.TextArea rows={2} />
          </Form.Item>
          <Form.Item label={t('networks.active')} name="active" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}