import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Table, Button, Tag, Space, Modal, Typography, message, Tooltip, Popconfirm,
} from 'antd'
import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '../../api/streams'

const { Title, Text } = Typography

const statusMap: Record<string, { color: string; label: string }> = {
  pending: { color: 'blue', label: '待开播' },
  live: { color: 'green', label: '直播中' },
  ended: { color: 'default', label: '已结束' },
  cancelled: { color: 'red', label: '已取消' },
}

export default function StreamList() {
  const [streams, setStreams] = useState<StreamInfo[]>([])
  const [loading, setLoading] = useState(true)
  const navigate = useNavigate()

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

  async function loadData() {
    setLoading(true)
    try {
      const data = await fetchStreams()
      setStreams(data)
    } catch { message.error('加载失败') }
    setLoading(false)
  }

  async function handleDelete(id: number) {
    try {
      await deleteStream(id)
      message.success('已删除')
      loadData()
    } catch { message.error('删除失败') }
  }

  async function handleGoLive(id: number) {
    try {
      await goLive(id)
      message.success('已设置为直播中')
      loadData()
    } catch { message.error('操作失败') }
  }

  async function handleEnd(id: number) {
    try {
      await endStream(id)
      message.success('已结束直播')
      loadData()
    } catch { message.error('操作失败') }
  }

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
    { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
    {
      title: '状态', dataIndex: 'status', key: 'status', width: 100,
      render: (s: string) => {
        const info = statusMap[s] || { color: 'default', label: s }
        return <Tag color={info.color}>{info.label}</Tag>
      },
    },
    { title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
    {
      title: '操作', key: 'actions', width: 280,
      render: (_: any, record: StreamInfo) => (
        <Space size="small">
          <Button
            size="small"
            icon={<LinkOutlined />}
            onClick={() => {
              navigator.clipboard.writeText(record.stream_key)
              message.success('推流码已复制')
            }}
          >
            复制推流码
          </Button>
          {record.status !== 'live' ? (
            <Tooltip title="切换为直播中">
              <Button size="small" type="primary" icon={<PlayCircleOutlined />}
                onClick={() => handleGoLive(record.id)} ghost />
            </Tooltip>
          ) : (
            <Tooltip title="结束直播">
              <Button size="small" icon={<StopOutlined />}
                onClick={() => handleEnd(record.id)} danger />
            </Tooltip>
          )}
          <Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
            观看
          </Button>
          <Popconfirm title="确定删除这条直播？" onConfirm={() => handleDelete(record.id)}>
            <Button size="small" icon={<DeleteOutlined />} danger />
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <Title level={3} style={{ margin: 0 }}>直播列表</Title>
        <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
          创建直播
        </Button>
      </div>
      <Table
        dataSource={streams}
        columns={columns}
        rowKey="id"
        loading={loading}
        pagination={{ pageSize: 15 }}
        size="middle"
      />
    </div>
  )
}