import 'package:flutter/material.dart';

import '../../../core/theme/colors.dart';
import '../../widgets/common/skeleton_loading.dart';

/// Mobile Home Page with loading states
class MobileHomePage extends StatelessWidget {
  const MobileHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: Integrate with actual data provider
    // For now, showing skeleton loading as example
    final isLoading = false; // Change to true to see skeleton

    return CustomScrollView(
      slivers: [
        // Header
        SliverAppBar(
          expandedHeight: 180,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text(
              'Good Evening',
              style: TextStyle(
                color: AppColors.onBackground,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
            background: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    AppColors.surface,
                    AppColors.surfaceVariant,
                  ],
                ),
              ),
            ),
          ),
        ),

        // Content sections or skeleton
        SliverToBoxAdapter(
          child: isLoading
              ? const PageSkeleton(
                  showHero: false,
                  sectionCount: 3,
                )
              : Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Quick picks grid
                      GridView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          childAspectRatio: 2.5,
                          crossAxisSpacing: 12,
                          mainAxisSpacing: 12,
                        ),
                        itemCount: 6,
                        itemBuilder: (context, index) {
                          return const _QuickPickCard();
                        },
                      ),

                      const SizedBox(height: 24),

                      // Recently played
                      const _SectionTitle(title: 'Recently Played'),
                      const SizedBox(height: 12),
                      SizedBox(
                        height: 160,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: 10,
                          itemBuilder: (context, index) {
                            return const _AlbumCard();
                          },
                        ),
                      ),

                      const SizedBox(height: 24),

                      // Made for you
                      const _SectionTitle(title: 'Made For You'),
                      const SizedBox(height: 12),
                      SizedBox(
                        height: 160,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: 8,
                          itemBuilder: (context, index) {
                            return const _PlaylistCard();
                          },
                        ),
                      ),
                    ],
                  ),
                ),
        ),
      ],
    );
  }
}

class _SectionTitle extends StatelessWidget {
  final String title;

  const _SectionTitle({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: Theme.of(context).textTheme.displaySmall?.copyWith(
            color: AppColors.cyan,
            fontSize: 20,
          ),
    );
  }
}

class _QuickPickCard extends StatelessWidget {
  const _QuickPickCard();

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            AppColors.surface,
            AppColors.surfaceVariant,
          ],
        ),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: AppColors.cyan.withOpacity(0.2),
          width: 1,
        ),
      ),
      child: Row(
        children: [
          Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              gradient: AppColors.primaryGradient,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(7),
                bottomLeft: Radius.circular(7),
              ),
            ),
            child: const Icon(
              Icons.music_note,
              color: AppColors.onBackground,
              size: 20,
            ),
          ),
          const Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Playlist',
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      color: AppColors.onSurface,
                      fontSize: 13,
                    ),
                  ),
                  Text(
                    'Description',
                    style: TextStyle(
                      fontSize: 10,
                      color: AppColors.muted,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _AlbumCard extends StatelessWidget {
  const _AlbumCard();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 120,
      margin: const EdgeInsets.only(right: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Album art
          Container(
            width: 120,
            height: 120,
            decoration: BoxDecoration(
              gradient: AppColors.accentGradient,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Icon(
              Icons.album,
              size: 48,
              color: AppColors.onBackground,
            ),
          ),

          const SizedBox(height: 6),

          // Album info
          const Text(
            'Album Name',
            style: TextStyle(
              fontWeight: FontWeight.w500,
              color: AppColors.onSurface,
              fontSize: 13,
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          const Text(
            'Artist',
            style: TextStyle(
              fontSize: 11,
              color: AppColors.muted,
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}

class _PlaylistCard extends StatelessWidget {
  const _PlaylistCard();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 120,
      margin: const EdgeInsets.only(right: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Playlist art
          Container(
            width: 120,
            height: 120,
            decoration: BoxDecoration(
              gradient: AppColors.fullGradient,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Icon(
              Icons.playlist_play,
              size: 48,
              color: AppColors.onBackground,
            ),
          ),

          const SizedBox(height: 6),

          // Playlist info
          const Text(
            'Playlist',
            style: TextStyle(
              fontWeight: FontWeight.w500,
              color: AppColors.onSurface,
              fontSize: 13,
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          const Text(
            'Description',
            style: TextStyle(
              fontSize: 11,
              color: AppColors.muted,
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}