import { useEffect, useState } from 'react'
import { Button, Card, Col, Empty, Row, Select, Space, Statistic, Table, Tag, Typography, message } from 'antd'
import { DashboardOutlined, DatabaseOutlined, FullscreenExitOutlined, FullscreenOutlined, ReloadOutlined, SignalFilled, TeamOutlined, WarningOutlined } from '@ant-design/icons'
import api from '../../api/client'
import { getSystemMetrics, type SystemMetrics } from '../../api/system'
import {
  createRemoteSession,
  fetchStreams,
  fetchViewerSessions,
  sendRemoteCommand,
  type StreamInfo,
  type ViewerSessionInfo,
} from '../../api/streams'

const { Title, Text } = Typography

interface NodeMetric {
  id: string
  name: string
  online: boolean
  metrics?: {
    cpu_percent?: number | null
    memory_percent?: number | null
    network_in_mbps?: number | null
    network_out_mbps?: number | null
    viewer_count?: number | null
  } | null
}

const formatBytes = (value = 0) => {
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let amount = Math.max(0, value)
  let index = 0
  while (amount >= 1024 && index < units.length - 1) { amount /= 1024; index += 1 }
  return `${amount.toFixed(index ? 1 : 0)} ${units[index]}`
}

export default function LiveBoard() {
  const [streams, setStreams] = useState<StreamInfo[]>([])
  const [streamId, setStreamId] = useState<number>()
  const [sessions, setSessions] = useState<ViewerSessionInfo[]>([])
  const [selected, setSelected] = useState<React.Key[]>([])
  const [loading, setLoading] = useState(true)
  const [systemMetrics, setSystemMetrics] = useState<SystemMetrics | null>(null)
  const [nodes, setNodes] = useState<NodeMetric[]>([])
  const [quality, setQuality] = useState('auto')
  const [nodeId, setNodeId] = useState('auto')
  const [wallMode, setWallMode] = useState(false)

  async function load() {
    try {
      const programs = await fetchStreams(true)
      setStreams(programs)
      const nextId = streamId || programs.find(program => program.status === 'live')?.id
      if (nextId) {
        setStreamId(nextId)
        setSessions(await fetchViewerSessions(nextId))
      } else {
        setSessions([])
      }
    } catch {
      message.error('看板数据加载失败')
    } finally {
      try {
        setSystemMetrics(await getSystemMetrics())
      } catch {
        setSystemMetrics(null)
      }
      try {
        const nodeResponse = await api.get<NodeMetric[]>('/nodes')
        setNodes(nodeResponse.data)
      } catch {
        setNodes([])
      }
      setLoading(false)
    }
  }

  useEffect(() => {
    void load()
    const timer = window.setInterval(load, 5000)
    return () => window.clearInterval(timer)
  }, [streamId])

  async function controlViewers() {
    if (!streamId || selected.length === 0) return
    try {
      const session = await createRemoteSession(streamId)
      const targets = selected.map(String)
      if (nodeId !== 'auto') await sendRemoteCommand(streamId, session.token, 'switch_node', targets, nodeId)
      if (quality !== 'auto') await sendRemoteCommand(streamId, session.token, 'switch_quality', targets, quality)
      if (nodeId === 'auto' && quality === 'auto') await sendRemoteCommand(streamId, session.token, 'restore_auto', targets)
      message.success(`已向 ${selected.length} 个观众下发节点与清晰度策略`)
    } catch {
      message.error('控制命令下发失败，请确认节目已启用审计式播放控制')
    }
  }

  const activeSessions = sessions.filter(item => Date.now() - new Date(item.last_heartbeat).getTime() < 30000)
  const buffering = activeSessions.filter(item => item.playback_state === 'buffering' || Number(item.buffered_seconds || 0) < 1)
  const totalCardsLoading = !systemMetrics

  return (
    <div>
      <Space direction="vertical" size={24} style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <div>
            <Title level={2} style={{ margin: 0 }}>直播看板</Title>
            <Text type="secondary">实时检查节目、观众会话、线路与播放健康度</Text>
          </div>
          <Space wrap>
            <Select
              value={streamId}
              placeholder="选择直播节目"
              style={{ minWidth: 220 }}
              options={streams.map(program => ({ value: program.id, label: `${program.title} · ${program.status}` }))}
              onChange={value => { setStreamId(value); setSelected([]) }}
            />
            <Button icon={wallMode ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={() => setWallMode(value => !value)}>{wallMode ? '退出大屏' : '大屏模式'}</Button>
            <Button icon={<ReloadOutlined />} onClick={load}>刷新</Button>
          </Space>
        </div>

        <Row gutter={[16, 16]}>
          <Col xs={24} sm={8}><Card><Statistic title="活跃观众" value={activeSessions.length} prefix={<TeamOutlined />} /></Card></Col>
          <Col xs={24} sm={8}><Card><Statistic title="播放正常" value={Math.max(0, activeSessions.length - buffering.length)} prefix={<SignalFilled />} /></Card></Col>
          <Col xs={24} sm={8}><Card><Statistic title="疑似卡顿" value={buffering.length} prefix={<WarningOutlined />} valueStyle={{ color: buffering.length ? '#cf5c36' : undefined }} /></Card></Col>
        </Row>

        <Row gutter={[16, 16]}>
          <Col xs={24} md={8}><Card><Statistic title="CPU 使用率" value={systemMetrics?.cpu_percent ?? 0} precision={1} suffix="%" loading={totalCardsLoading} prefix={<DashboardOutlined />} /></Card></Col>
          <Col xs={24} md={8}><Card><Statistic title="内存使用率" value={systemMetrics?.memory_percent ?? 0} precision={1} suffix="%" loading={totalCardsLoading} prefix={<DatabaseOutlined />} /><Text type="secondary">{formatBytes(systemMetrics?.memory_used_bytes)} / {formatBytes(systemMetrics?.memory_total_bytes)}</Text></Card></Col>
          <Col xs={24} md={8}><Card><Statistic title="存储使用率" value={systemMetrics?.disk_percent ?? 0} precision={1} suffix="%" loading={totalCardsLoading} prefix={<DatabaseOutlined />} /><Text type="secondary">{formatBytes(systemMetrics?.disk_used_bytes)} / {formatBytes(systemMetrics?.disk_total_bytes)}</Text></Card></Col>
          <Col xs={24} md={12}><Card><Statistic title="NET I/O 下载总量" value={formatBytes(systemMetrics?.network_received_bytes)} loading={totalCardsLoading} /></Card></Col>
          <Col xs={24} md={12}><Card><Statistic title="NET I/O 上传总量" value={formatBytes(systemMetrics?.network_sent_bytes)} loading={totalCardsLoading} /></Card></Col>
        </Row>

        <Card title="节点实时指标">
          <Row gutter={[12, 12]}>
            {nodes.map(node => <Col xs={24} md={12} xl={8} key={node.id}><Card size="small" title={<Space>{node.name}<Tag color={node.online ? 'green' : 'default'}>{node.online ? '在线' : '离线'}</Tag></Space>}><Space direction="vertical"><Text>CPU：{node.metrics?.cpu_percent?.toFixed(1) ?? '-'}%</Text><Text>内存：{node.metrics?.memory_percent?.toFixed(1) ?? '-'}%</Text><Text>NET IN：{node.metrics?.network_in_mbps?.toFixed(2) ?? '-'} Mbps</Text><Text>NET OUT：{node.metrics?.network_out_mbps?.toFixed(2) ?? '-'} Mbps</Text><Text>观众：{node.metrics?.viewer_count ?? 0}</Text></Space></Card></Col>)}
          </Row>
        </Card>

        {!streamId ? <Empty description="当前没有可查看的直播节目" /> : (
          <Card
            title="审计式观众会话"
            extra={
              <Space wrap>
                <Select value={nodeId} onChange={setNodeId} style={{ width: 180 }} options={[{ value: 'auto', label: '节点：保持自动' }, ...nodes.filter(node => node.online).map(node => ({ value: node.id, label: `节点：${node.name}` }))]} />
                <Select value={quality} onChange={setQuality} style={{ width: 160 }} options={[
                  { value: 'auto', label: '恢复自动' },
                  { value: '1080p', label: '1080p' },
                  { value: '720p', label: '720p' },
                  { value: '480p', label: '480p' },
                  { value: '360p', label: '360p' },
                ]} />
                <Button type="primary" disabled={!selected.length} onClick={controlViewers}>批量切换</Button>
              </Space>
            }
          >
            <Table
              rowKey="session_id"
              loading={loading}
              dataSource={sessions}
              scroll={{ x: 850 }}
              rowSelection={{ selectedRowKeys: selected, onChange: setSelected }}
              pagination={{ pageSize: 20 }}
              columns={[
                { title: '会话', dataIndex: 'session_id', ellipsis: true, width: 180 },
                { title: '节点', dataIndex: 'node_name', render: value => value || '未知' },
                { title: '清晰度', dataIndex: 'quality', render: value => value || '自动' },
                { title: '状态', dataIndex: 'playback_state', render: value => <Tag color={value === 'playing' ? 'green' : value === 'buffering' ? 'orange' : 'default'}>{value}</Tag> },
                { title: '缓冲', dataIndex: 'buffered_seconds', render: value => `${Number(value || 0).toFixed(1)}s` },
                { title: '远程调整', dataIndex: 'remote_adjusted', render: value => value ? <Tag color="gold">已调整</Tag> : '否' },
                { title: '最后心跳', dataIndex: 'last_heartbeat', render: value => new Date(value).toLocaleTimeString() },
                { title: '错误', dataIndex: 'error', ellipsis: true, render: value => value || '-' },
              ]}
            />
          </Card>
        )}
      </Space>
    </div>
  )
}