import React, { useState, useEffect } from 'react'

// 资讯页面 - 展示寻配号和行情信息（所有人可见）
export default function News() {
  const [activeTab, setActiveTab] = useState('deal')
  const [infoList, setInfoList] = useState([])
  const [loading, setLoading] = useState(false)

  const API_BASE = localStorage.getItem('API_BASE') || ''

  // 获取资讯列表
  useEffect(() => {
    fetchInfoList()
  }, [activeTab])

  const fetchInfoList = async () => {
    setLoading(true)
    try {
      const token = localStorage.getItem('token')
      // 根据tab获取不同类型的数据
      const type = activeTab === 'seek' ? 'seek' : 'deal'
      const res = await fetch(`${API_BASE}/api/information/list?info_type=${type}`, {
        headers: { Authorization: `Bearer ${token}` }
      })
      const data = await res.json()
      setInfoList(data || [])
    } catch (e) {
      console.error(e)
    }
    setLoading(false)
  }

  // Tab切换
  const tabs = [
    { key: 'seek', label: '🔍 寻配号' },
    { key: 'deal', label: '💰 成交行情' }
  ]

  const formatDate = (dateStr) => {
    if (!dateStr) return '-'
    const date = new Date(dateStr)
    return `${date.getMonth() + 1}/${date.getDate()}`
  }

  return (
    <div style={{ minHeight: '100vh', background: '#0f172a', paddingBottom: '60px' }}>
      {/* Tab导航 */}
      <div style={{ display: 'flex', padding: '12px 16px', background: '#1e293b', gap: '8px', overflowX: 'auto' }}>
        {tabs.map(tab => (
          <div
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            style={{
              padding: '10px 20px',
              borderRadius: '8px',
              background: activeTab === tab.key ? '#3b82f6' : 'transparent',
              color: '#fff',
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              fontSize: '14px'
            }}
          >
            {tab.label}
          </div>
        ))}
      </div>

      {/* 资讯列表 */}
      <div style={{ padding: '16px' }}>
        <h3 style={{ color: '#fff', marginBottom: '16px' }}>
          {activeTab === 'seek' ? '🔍 寻配号信息' : '💰 成交行情信息'}
        </h3>
        
        {loading ? (
          <div style={{ color: '#94a3b8', textAlign: 'center', padding: '40px' }}>加载中...</div>
        ) : infoList.length === 0 ? (
          <div style={{ color: '#94a3b8', textAlign: 'center', padding: '40px' }}>
            暂无{activeTab === 'seek' ? '寻配号' : '成交行情'}信息
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {infoList.map(item => (
              <div key={item.id} style={{ background: '#1e293b', borderRadius: '12px', padding: '16px' }}>
                <div style={{ color: '#fbbf24', fontSize: '15px', fontWeight: '500', marginBottom: '8px' }}>
                  {item.title}
                </div>
                <div style={{ color: '#94a3b8', fontSize: '12px', marginBottom: '8px' }}>
                  {formatDate(item.created_at)} | {item.info_source || '系统'}
                </div>
                {item.content && (
                  <div style={{ color: '#e2e8f0', fontSize: '14px', lineHeight: '1.6' }}>
                    {item.content}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}