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

function HomePage({ onPlaySong }) {
  const [playlists, setPlaylists] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  
  // 模拟林俊杰热门歌曲数据
  const hotSongs = [
    { id: 1, title: '江南', artist: '林俊杰', duration: '4:27' },
    { id: 2, title: '小酒窝', artist: '林俊杰', duration: '3:37' },
    { id: 3, title: '曹操', artist: '林俊杰', duration: '3:19' },
    { id: 4, title: '她说', artist: '林俊杰', duration: '4:49' },
    { id: 5, title: '背对背拥抱', artist: '林俊杰', duration: '3:42' },
    { id: 6, title: '一千年以后', artist: '林俊杰', duration: '4:29' }
  ]

  useEffect(() => {
    // 获取热门歌单
    const fetchPlaylists = async () => {
      try {
        // 模拟API请求 - 使用本地模拟数据
        const mockPlaylists = [
          {
            id: 1,
            name: '我的最爱',
            songs: [
              { id: 1, title: '歌曲1', artist: '歌手1', duration: '3:45' },
              { id: 2, title: '歌曲2', artist: '歌手2', duration: '4:12' },
              { id: 3, title: '歌曲3', artist: '歌手3', duration: '3:58' }
            ]
          },
          {
            id: 2,
            name: '工作时听',
            songs: [
              { id: 4, title: '轻松音乐1', artist: '艺术家A', duration: '5:20' },
              { id: 5, title: '轻松音乐2', artist: '艺术家B', duration: '4:35' }
            ]
          },
          {
            id: 3,
            name: '运动节奏',
            songs: [
              { id: 6, title: '动感音乐1', artist: 'DJ X', duration: '3:15' },
              { id: 7, title: '动感音乐2', artist: 'DJ Y', duration: '2:58' },
              { id: 8, title: '动感音乐3', artist: 'DJ Z', duration: '3:42' }
            ]
          },
          {
            id: 4,
            name: '睡前放松',
            songs: [
              { id: 9, title: '摇篮曲1', artist: '音乐人C', duration: '4:10' },
              { id: 10, title: '摇篮曲2', artist: '音乐人D', duration: '5:05' }
            ]
          }
        ]
        
        // 模拟网络延迟
        await new Promise(resolve => setTimeout(resolve, 500))
        setPlaylists(mockPlaylists)
        setLoading(false)
      } catch (err) {
        setError('无法加载歌单，请稍后再试')
        setLoading(false)
        console.error('Error fetching playlists:', err)
      }
    }

    fetchPlaylists()
  }, [])

  // 模拟推荐歌单数据
  const featuredPlaylists = [
    {
      id: 'featured-1',
      name: '放松时刻',
      description: '适合放松的轻音乐',
      imageUrl: 'https://picsum.photos/seed/relax/400/400'
    },
    {
      id: 'featured-2',
      name: '动感节拍',
      description: '充满活力的流行音乐',
      imageUrl: 'https://picsum.photos/seed/energy/400/400'
    },
    {
      id: 'featured-3',
      name: '怀旧金曲',
      description: '经典老歌，回忆满满',
      imageUrl: 'https://picsum.photos/seed/classic/400/400'
    }
  ]

  if (loading) {
    return <div className="main-content">加载中...</div>
  }

  if (error) {
    return <div className="main-content">{error}</div>
  }

  return (
    <div className="main-content">
      <h1 className="page-title">发现音乐</h1>
      
      {/* 推荐歌单 */}
      <section className="featured-section">
        <h2>精选推荐</h2>
        <div className="playlists-grid">
          {featuredPlaylists.map(playlist => (
            <div 
              key={playlist.id} 
              className="card playlist-card"
              onClick={() => window.history.pushState({}, '', `/playlists/${playlist.id}`)}
            >
              <img src={playlist.imageUrl} alt={playlist.name} />
              <div className="playlist-info">
                <h3>{playlist.name}</h3>
                <p>{playlist.description}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 热门歌曲 */}
      <section className="hot-songs-section">
        <h2>热门歌曲</h2>
        <div className="songs-list">
          {hotSongs.map((song, index) => (
            <div 
              key={song.id} 
              className="song-item"
              onClick={() => window.history.pushState({}, '', `/songs/${song.id}`)}
            >
              <div className="song-rank">{index + 1}</div>
              <div className="song-info">
                <h3>{song.title}</h3>
                <p>{song.artist}</p>
              </div>
              <div className="song-duration">{song.duration}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 热门歌单 */}
      <section className="popular-section">
        <h2>热门歌单</h2>
        <div className="playlists-grid">
          {playlists.slice(0, 6).map(playlist => (
            <div 
              key={playlist.id} 
              className="card playlist-card"
              onClick={() => window.history.pushState({}, '', `/playlists/${playlist.id}`)}
            >
              <img 
                src={`https://picsum.photos/seed/playlist${playlist.id}/400/400`} 
                alt={playlist.name} 
              />
              <div className="playlist-info">
                <h3>{playlist.name}</h3>
                <p>{playlist.songs?.length || 0} 首歌曲</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  )
}

export default HomePage