import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Space } from 'antd'
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams'

const { Title, Text } = Typography

const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
  live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
  pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
  ended: { color: 'default', label: '已结束', icon: null },
  cancelled: { color: 'default', label: '已取消', icon: null },
}

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

  useEffect(() => {
    fetchStreams().then(setStreams).catch(() => {}).finally(() => setLoading(false))
  }, [])

  const sorted = [...streams].sort((a, b) => {
    const order: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 }
    return (order[a.status] ?? 9) - (order[b.status] ?? 9)
  })

  return (
    <div style={{ minHeight: '100vh', background: '#F6F3ED' }}>
      <div style={{
        background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
        padding: '48px 48px 40px',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <Title level={1} style={{
            margin: 0, fontWeight: 600, letterSpacing: -1,
            fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
          }}>
            StreamCore
          </Title>
          <Text type="secondary" style={{ fontSize: 17, marginTop: 8, display: 'block', fontWeight: 400 }}>
            企业级直播平台
          </Text>
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px' }}>
        <Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>直播频道</Title>
        {loading ? (
          <Row gutter={[24, 24]}>
            {[1,2,3,4,5,6].map(i => (
              <Col key={i} xs={24} sm={12} md={8} lg={8}>
                <Card style={{ borderRadius: 10 }}><Skeleton active /></Card>
              </Col>
            ))}
          </Row>
        ) : sorted.length === 0 ? (
          <Empty description="暂无直播" style={{ marginTop: 80 }} />
        ) : (
          <Row gutter={[24, 24]}>
            {sorted.map(s => {
              const meta = statusMeta[s.status] ?? statusMeta.pending
              return (
                <Col key={s.id} xs={24} sm={12} md={8} lg={8}>
                  <Card hoverable style={{ overflow: 'hidden', borderRadius: 10 }}
                    cover={
                      <div style={{
                        height: 180, position: 'relative',
                        background: s.cover_url
                          ? `url(${s.cover_url}) center/cover no-repeat`
                          : 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #2B241C 100%)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        {!s.cover_url && (
                          <VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.2)', fontSize: 48 }} />
                        )}
                        <div style={{ position: 'absolute', top: 12, right: 12 }}>
                          <Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0 }}>
                            {meta.icon} {meta.label}
                          </Tag>
                        </div>
                      </div>
                    }
                    bodyStyle={{ padding: '16px 20px' }}
                    onClick={() => navigate(`/watch/${s.id}`)}
                  >
                    <Card.Meta
                      title={<Text strong style={{ fontSize: 15 }} ellipsis>{s.title}</Text>}
                      description={<Text type="secondary" ellipsis style={{ fontSize: 13 }}>{s.description || '暂无简介'}</Text>}
                    />
                  </Card>
                </Col>
              )
            })}
          </Row>
        )}
      </div>
    </div>
  )
}