// lib/pages/home_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/audio_service.dart';
import '../widgets/mini_player_bar.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  // 收藏数据（从你的 ASCII 图提取）
  final List<Map<String, String>> _favorites = const [
    {'title': '暧昧', 'artist': '王菲', 'format': 'flac', 'tag': 'openlist'},
    {'title': '清平调（独唱版）', 'artist': '王菲', 'format': 'flac', 'tag': 'openlist'},
    {
      'title': 'Rain in the Park',
      'artist': 'Marika Takeuchi',
      'format': 'flac',
      'tag': 'openlist'
    },
  ];

  @override
  Widget build(BuildContext context) {
    final audioService = context.watch<AudioService>();
    final showMiniBar = audioService.currentSong != null;

    return Scaffold(
      backgroundColor: const Color(0xFF0E1211),
      // ---------- 主体：可滚动内容 ----------
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 48),
                  // ---------- 顶部标题栏 ----------
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        '清听',
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.w600,
                          color: Colors.white,
                        ),
                      ),
                      IconButton(
                        icon: const Icon(Icons.menu, color: Colors.white54),
                        onPressed: () {
                          // 后续：菜单入口
                        },
                      ),
                    ],
                  ),
                  const SizedBox(height: 28),

                  // ---------- 【媒体库】区域 ----------
                  const Text(
                    '媒体库',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFFB8D4D0),
                    ),
                  ),
                  const SizedBox(height: 12),

                  // ---- WebDAV 连接状态卡片 ----
                  Container(
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: const Color(0xFF1A2A2A),
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(
                          color: const Color(0xFF2A4A4A), width: 0.5),
                    ),
                    child: Row(
                      children: [
                        const Icon(Icons.cloud_outlined,
                            color: Color(0xFFB8D4D0), size: 24),
                        const SizedBox(width: 12),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'WebDAV',
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.w500),
                              ),
                              Text(
                                'username@nas', // 后续替换为真实用户名
                                style: TextStyle(
                                    fontSize: 13, color: Colors.grey[400]),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 4),
                          decoration: BoxDecoration(
                            color: const Color(0xFF4CAF50).withOpacity(0.15),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: const Text(
                            '已连接',
                            style: TextStyle(
                                fontSize: 12, color: Color(0xFF4CAF50)),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20),

                  // ---- 三个功能入口（横向三列） ----
                  Row(
                    children: [
                      _buildEntryCard(Icons.music_note, '本地音乐'),
                      const SizedBox(width: 12),
                      _buildEntryCard(Icons.history, '最近播放'),
                      const SizedBox(width: 12),
                      _buildEntryCard(Icons.playlist_play, '歌单列表'),
                    ],
                  ),
                  const SizedBox(height: 32),

                  // ---------- 【我的收藏】区域 ----------
                  Row(
                    children: [
                      const Icon(Icons.favorite,
                          color: Color(0xFFB8D4D0), size: 20),
                      const SizedBox(width: 8),
                      const Text(
                        '我的收藏',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500,
                          color: Color(0xFFB8D4D0),
                        ),
                      ),
                      const Spacer(),
                      TextButton(
                        onPressed: () {},
                        child: const Text(
                          '查看全部',
                          style: TextStyle(fontSize: 13, color: Colors.grey),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 8),

                  // ---- 收藏列表 ----
                  ListView.separated(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: _favorites.length,
                    separatorBuilder: (_, __) => const Divider(
                      color: Colors.white10,
                      height: 1,
                    ),
                    itemBuilder: (context, index) {
                      final song = _favorites[index];
                      return ListTile(
                        contentPadding: EdgeInsets.zero,
                        leading: Container(
                          width: 40,
                          height: 40,
                          decoration: BoxDecoration(
                            color: const Color(0xFF2A3332),
                            borderRadius: BorderRadius.circular(6),
                          ),
                          child: const Icon(Icons.music_note,
                              color: Colors.white38, size: 20),
                        ),
                        title: Text(
                          '${song['title']} - ${song['artist']}.${song['format']}',
                          style: const TextStyle(
                              fontSize: 15, fontWeight: FontWeight.w400),
                        ),
                        subtitle: Text(
                          song['tag']!,
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey[500]),
                        ),
                        trailing: Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 10, vertical: 4),
                          decoration: BoxDecoration(
                            color: const Color(0xFF2A4A4A).withOpacity(0.4),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Text(
                            song['tag']!,
                            style: const TextStyle(
                                fontSize: 11, color: Color(0xFF7C9A9E)),
                          ),
                        ),
                        onTap: () {
                          // 后续：播放该歌曲
                        },
                      );
                    },
                  ),
                  const SizedBox(height: 80), // 底部留空，避免被播放栏遮挡
                ],
              ),
            ),
          ),
          // ---------- 底部全局播放控制栏（固定） ----------
          if (showMiniBar) const MiniPlayerBar(),
        ],
      ),
    );
  }

  // 功能入口卡片（横向三列共用）
  Widget _buildEntryCard(IconData icon, String label) {
    return Expanded(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 14),
        decoration: BoxDecoration(
          color: const Color(0xFF1A1F1E),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: Colors.grey[800]!, width: 0.5),
        ),
        child: InkWell(
          borderRadius: BorderRadius.circular(12),
          onTap: () {
            // 后续跳转
          },
          child: Column(
            children: [
              Icon(icon, size: 28, color: const Color(0xFFB8D4D0)),
              const SizedBox(height: 6),
              Text(
                label,
                style:
                    const TextStyle(fontSize: 13, fontWeight: FontWeight.w400),
              ),
            ],
          ),
        ),
      ),
    );
  }
}