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

const { Header, Content } = Layout
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 (
    <Layout style={{ minHeight: '100vh', background: '#FAF8F5' }}>
      <Header style={{
        background: '#FFFFFF',
        borderBottom: '1px solid #E8E4DD',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 32px',
        height: 60,
      }}>
        <Title level={4} style={{ margin: 0, letterSpacing: -0.5, color: '#1A1A16' }}>
          LiveStream
          <Text type="secondary" style={{ fontSize: 14, marginLeft: 10, fontWeight: 400 }}>
            简易直播平台
          </Text>
        </Title>
        <Button
          type="text"
          icon={<LoginOutlined />}
          onClick={() => navigate('/admin')}
        >
          管理后台
        </Button>
      </Header>
      <Content style={{ padding: '32px 48px', maxWidth: 1280, margin: '0 auto' }}>
        <Title level={3} style={{ marginBottom: 24 }}>全部直播</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><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: 8 }}
                    cover={
                      <div style={{
                        height: 160,
                        background: s.cover_url
                          ? `url(${s.cover_url}) center/cover no-repeat`
                          : 'linear-gradient(135deg, #2b2b2b 0%, #1a1a16 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                        {!s.cover_url && (
                          <Text style={{ color: '#666', fontSize: 36 }}>
                            {s.status === 'live' ? <FireOutlined style={{ color: '#D97757' }} /> : '🎬'}
                          </Text>
                        )}
                      </div>
                    }
                    onClick={() => navigate(`/watch/${s.id}`)}
                  >
                    <Card.Meta
                      title={
                        <Space>
                          <Tag color={meta.color} style={{ margin: 0 }}>
                            {meta.icon} {meta.label}
                          </Tag>
                          <Text ellipsis style={{ maxWidth: 160 }}>{s.title}</Text>
                        </Space>
                      }
                      description={
                        s.description
                          ? <Text type="secondary" ellipsis>{s.description}</Text>
                          : <Text type="secondary" italic>暂无简介</Text>
                      }
                    />
                  </Card>
                </Col>
              )
            })}
          </Row>
        )}
      </Content>
    </Layout>
  )
}