import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'dart:io';
import '../../../providers/mobile_xtream_providers.dart';
import '../../../providers/mobile_settings_providers.dart';
import '../screens/native_player_screen.dart';
import '../../../../core/models/iptv_models.dart';
import '../../../../core/models/playlist_config.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../../core/api/dns_resolver.dart';
import '../../../theme/mobile_theme.dart';
import 'package:xtremflow/mobile/widgets/tv_focusable.dart';
import 'package:xtremflow/mobile/features/iptv/screens/lite_player_screen.dart';
import 'package:flutter/services.dart';

class MobileLiveTVTab extends ConsumerStatefulWidget {
  final PlaylistConfig playlist;
  const MobileLiveTVTab({super.key, required this.playlist});

  @override
  ConsumerState<MobileLiveTVTab> createState() => _MobileLiveTVTabState();
}

class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> with AutomaticKeepAliveClientMixin {


  final TextEditingController _searchController = TextEditingController();
  final FocusNode _searchFocusNode = FocusNode();
  String _searchQuery = '';
  bool _showFavoritesOnly = false;
  bool _isSearchEditing = false;

  @override
  void initState() {
    super.initState();
    _searchController.addListener(() {
      setState(() {
        _searchQuery = _searchController.text.toLowerCase();
      });
    });
  }

  @override
  void dispose() {
    _searchController.dispose();
    _searchFocusNode.dispose();
    super.dispose();
  }




  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final channelsAsync = ref.watch(mobileLiveChannelsProvider(widget.playlist));
    final favorites = ref.watch(mobileFavoritesProvider);
    final settings = ref.watch(mobileSettingsProvider);
    final uiState = ref.watch(mobileLiveTvUiStateProvider);
    final uiNotifier = ref.read(mobileLiveTvUiStateProvider.notifier);

    return Container(
      decoration: const BoxDecoration(gradient: AppColors.appleTvGradient),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: PopScope(
        canPop: uiState.isCategoryView && _searchQuery.isEmpty && !_showFavoritesOnly,
        onPopInvoked: (didPop) {
          if (didPop) return;
          
          if (_searchQuery.isNotEmpty) {
            setState(() {
              _searchController.clear();
              _searchQuery = '';
            });
          } else if (_showFavoritesOnly) {
            setState(() => _showFavoritesOnly = false);
          } else if (!uiState.isCategoryView) {
            uiNotifier.state = uiState.copyWith(isCategoryView: true);
          }
        },
        child: channelsAsync.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (e, s) => Center(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              'Erreur: $e',
              style: const TextStyle(color: Colors.red),
              textAlign: TextAlign.center,
            ),
          ),
        ),
        data: (groupedChannels) {
          // Prepare categories
          var categories = groupedChannels.keys.toList();
          if (settings.liveTvKeywords.isNotEmpty) {
            categories = categories.where((cat) => settings.matchesLiveTvFilter(cat)).toList();
          }
          categories.sort();

          // Prepare channels
          List<Channel> displayedChannels = [];
          
          // Determine mode based on search/favorites/selection
          bool showGrid = uiState.isCategoryView && _searchQuery.isEmpty && !_showFavoritesOnly;

          if (!showGrid) {
            if (_searchQuery.isNotEmpty) {
              displayedChannels = groupedChannels.values.expand((l) => l)
                  .where((c) => c.name.toLowerCase().contains(_searchQuery))
                  .toList();
            } else if (_showFavoritesOnly) {
              displayedChannels = groupedChannels.values.expand((l) => l)
                  .where((c) => favorites.contains(c.streamId))
                  .toList();
            } else if (uiState.selectedCategory != null) {
              displayedChannels = groupedChannels[uiState.selectedCategory] ?? [];
            }
          }

          return SafeArea(
            bottom: false,
            child: Column(
              children: [
                // Header (Search + Title/Back)
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Column(
                    children: [
                      // Search Bar
                      GestureDetector(
                        onTap: () {
                          setState(() => _isSearchEditing = true);
                          WidgetsBinding.instance.addPostFrameCallback((_) {
                            _searchFocusNode.requestFocus();
                          });
                        },
                        child: Container(
                          height: 48,
                          decoration: BoxDecoration(
                            color: AppColors.surface,
                            borderRadius: BorderRadius.circular(12),
                            border: _isSearchEditing ? Border.all(color: AppColors.primary) : null,
                          ),
                          padding: const EdgeInsets.symmetric(horizontal: 12),
                          child: Row(
                            children: [
                              const Icon(Icons.search, color: AppColors.textSecondary),
                              const SizedBox(width: 8),
                              Expanded(
                                child: ExcludeFocus(
                                  excluding: !_isSearchEditing,
                                  child: TextField(
                                    controller: _searchController,
                                    focusNode: _searchFocusNode,
                                    readOnly: !_isSearchEditing,
                                    style: const TextStyle(color: AppColors.textPrimary),
                                    decoration: const InputDecoration(
                                      hintText: 'Rechercher une chaîne...',
                                      border: InputBorder.none,
                                      isDense: true,
                                    ),
                                    onSubmitted: (_) => setState(() => _isSearchEditing = false),
                                  ),
                                ),
                              ),
                              if (_searchQuery.isNotEmpty)
                                GestureDetector(
                                  onTap: () => _searchController.clear(),
                                  child: const Icon(Icons.close, color: AppColors.textSecondary),
                                ),
                            ],
                          ),
                        ),
                      ),
                      
                      const SizedBox(height: 12),
                      
                      // Title / Navigation Row
                      Row(
                        children: [
                          if (!showGrid || _showFavoritesOnly || _searchQuery.isNotEmpty) ...[
                            IconButton(
                              icon: const Icon(Icons.arrow_back, color: AppColors.textPrimary),
                              onPressed: () {
                                if (_searchQuery.isNotEmpty) {
                                  _searchController.clear();
                                } else if (_showFavoritesOnly) {
                                  setState(() => _showFavoritesOnly = false);
                                } else {
                                  uiNotifier.state = uiState.copyWith(isCategoryView: true);
                                }
                              },
                              padding: EdgeInsets.zero,
                              constraints: const BoxConstraints(),
                            ),
                            const SizedBox(width: 12),
                          ],
                          Expanded(
                            child: Text(
                              _searchQuery.isNotEmpty ? 'Résultats de recherche' : 
                              _showFavoritesOnly ? 'Favoris' : 
                              showGrid ? 'Catégories' : 
                              uiState.selectedCategory ?? 'Chaînes',
                              style: const TextStyle(
                                color: AppColors.textPrimary, 
                                fontWeight: FontWeight.bold,
                                fontSize: 18,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              _showFavoritesOnly ? Icons.favorite : Icons.favorite_border,
                              color: _showFavoritesOnly ? AppColors.error : AppColors.textSecondary,
                            ),
                            onPressed: () => setState(() {
                              _showFavoritesOnly = !_showFavoritesOnly;
                              // Reset category view if entering favorites
                              if (_showFavoritesOnly) uiNotifier.state = uiState.copyWith(isCategoryView: false);
                              // If exiting favorites, default depends on logic (here back to category grid if was previously)
                              if (!_showFavoritesOnly) uiNotifier.state = uiState.copyWith(isCategoryView: true);
                            }),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                // Main Content
                Expanded(
                  child: showGrid
                    ? _buildCategoryGrid(categories)
                    : _buildChannelList(displayedChannels),
                ),
              ],
            ),
          );
        },
      ),
    ),
      ),
    );
  }

  Widget _buildCategoryGrid(List<String> categories) {
    if (categories.isEmpty) {
      return Center(
        child: Text(
          'Aucune catégorie trouvée',
          style: GoogleFonts.inter(color: AppColors.textSecondary),
        ),
      );
    }

    return GridView.builder(
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 6, // Adjusted to 6 columns as requested
        childAspectRatio: 1.0,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: categories.length,
      itemBuilder: (context, index) {
        final category = categories[index];
        return TVFocusable(
          onPressed: () {
            ref.read(mobileLiveTvUiStateProvider.notifier).state = LiveTvUiState(
              selectedCategory: category,
              isCategoryView: false,
            );
          },
          borderRadius: BorderRadius.circular(16),
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  AppColors.surface,
                  AppColors.surface.withOpacity(0.8),
                ],
              ),
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: Colors.white.withOpacity(0.05)),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.2),
                  blurRadius: 8,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                 const Icon(
                  Icons.tv, 
                  color: AppColors.primary, 
                  size: 32,
                ),
                const SizedBox(height: 12),
                Text(
                  category,
                  style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    fontSize: 14,
                  ),
                  textAlign: TextAlign.center,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildChannelList(List<Channel> channels) {
    if (channels.isEmpty) {
      return Center(
        child: Text(
          'Aucune chaîne trouvée',
          style: GoogleFonts.inter(color: AppColors.textSecondary),
        ),
      );
    }

    return ListView.separated(
      padding: const EdgeInsets.fromLTRB(16, 0, 16, 80),
      itemCount: channels.length,
      separatorBuilder: (_, __) => const SizedBox(height: 12),
      itemBuilder: (context, index) {
        final channel = channels[index];
        return _MobileChannelTile(
          channel: channel,
          playlist: widget.playlist,
          onTap: () => _playChannel(context, channel, channels, widget.playlist, index),
        );
      },
    );
  }

  void _playChannel(BuildContext context, Channel channel, List<Channel> channels, PlaylistConfig playlist, int index) {
          final engine = ref.read(mobileSettingsProvider).playerEngine;
          
          if (engine == 'lite') {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => LitePlayerScreen(
                  streamId: channel.streamId,
                  title: channel.name,
                  playlist: playlist,
                  streamType: StreamType.live,
                  channels: channels, // Pass full channel list for zapping
                  initialIndex: index,
                ),
              ),
            );
          } else {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NativePlayerScreen(
                  streamId: channel.streamId,
                  title: channel.name,
                  playlist: playlist,
                  streamType: StreamType.live,
                  channels: channels, // Pass full channel list for zapping
                  initialIndex: index,
                ),
              ),
            );
          }
  }
}

class _MobileChannelTile extends ConsumerStatefulWidget {
  final Channel channel;
  final VoidCallback onTap;
  final PlaylistConfig playlist;

  const _MobileChannelTile({
    required this.channel, 
    required this.onTap,
    required this.playlist,
  });

  @override
  ConsumerState<_MobileChannelTile> createState() => _MobileChannelTileState();
}

class _MobileChannelTileState extends ConsumerState<_MobileChannelTile> {
  String? _epgTitle;
  
  @override
  void initState() {
    super.initState();
    _loadEpg();
  }
  
  Future<void> _loadEpg() async {
    try {
      final service = await ref.read(mobileXtreamServiceProvider(widget.playlist).future);
      // Fetch current program
      final epg = await service.getShortEPG(widget.channel.streamId);
      if (mounted && epg.nowPlaying != null && epg.nowPlaying!.isNotEmpty) {
        setState(() {
          _epgTitle = epg.nowPlaying;
        });
      }
    } catch (e) {
      // Ignore EPG errors
    }
  }

  @override
  Widget build(BuildContext context) {
    // On mobile, use direct URL (no proxy needed)
    final iconUrl = widget.channel.streamIcon.isNotEmpty && widget.channel.streamIcon.startsWith('http') 
        ? widget.channel.streamIcon 
        : null;
    
    // Watch favorites state
    final favorites = ref.watch(mobileFavoritesProvider);
    final isFavorite = favorites.contains(widget.channel.streamId);

    return TVFocusable(
      onPressed: widget.onTap,
      borderRadius: BorderRadius.circular(12),
      child: Container(
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: AppColors.surface,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            // Icon
            Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.black26,
                borderRadius: BorderRadius.circular(8),
              ),
              child: iconUrl != null
                  ? CachedNetworkImage(
                      imageUrl: iconUrl,
                      fit: BoxFit.contain,
                      errorWidget: (_, __, ___) => const Icon(Icons.tv, color: Colors.white24),
                      placeholder: (_, __) => const Icon(Icons.tv, color: Colors.white24),
                    )
                  : const Icon(Icons.tv, color: Colors.white24),
            ),
            const SizedBox(width: 12),
            // Name and EPG
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    widget.channel.name,
                    style: const TextStyle(
                      color: AppColors.textPrimary,
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  if (_epgTitle != null)
                    Padding(
                      padding: const EdgeInsets.only(top: 4),
                      child: Text(
                        _epgTitle!,
                        style: const TextStyle(
                          color: AppColors.textSecondary,
                          fontSize: 12,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                ],
              ),
            ),
            // Favorite Button
            IconButton(
              icon: Icon(
                isFavorite ? Icons.favorite : Icons.favorite_border,
                color: isFavorite ? Colors.red : AppColors.textSecondary,
              ),
              onPressed: () {
                ref.read(mobileFavoritesProvider.notifier).toggle(widget.channel.streamId);
              },
              padding: EdgeInsets.zero,
              constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
            ),
            // Play Icon
            const Icon(Icons.play_circle_outline, color: AppColors.primary),
          ],
        ),
      ),
    );
  }
}