import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../models/stream_entry.dart';
import '../providers/m3u_provider.dart';
import '../player_screen.dart';
import 'channel_tile.dart';

class ChannelList extends ConsumerStatefulWidget {
  final TextEditingController m3uController;

  const ChannelList({super.key, required this.m3uController});

  @override
  ConsumerState<ChannelList> createState() => _ChannelListState();
}

class _ChannelListState extends ConsumerState<ChannelList> {
  String _query = '';

  @override
  Widget build(BuildContext context) {
    final state = ref.watch(channelListProvider);
    final selected = ref.watch(selectedChannelProvider);

    return Container(
      width: 360,
      decoration: BoxDecoration(color: Colors.grey[900]),
      child: Column(children: [
        Padding(
          padding: const EdgeInsets.all(12.0),
          child: Row(children: [
            Expanded(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                  const Text('실시간 채널',
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                  const SizedBox(height: 6),
                  TextField(
                    onChanged: (v) => setState(() => _query = v),
                    decoration: InputDecoration(
                      hintText: 'Search channels',
                      filled: true,
                      fillColor: Colors.grey[850],
                      prefixIcon:
                          const Icon(Icons.search, color: Colors.white70),
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide.none),
                    ),
                  )
                ])),
            IconButton(
                onPressed: () => ref
                    .read(channelListProvider.notifier)
                    .fetch(widget.m3uController.text.trim()),
                icon: const Icon(Icons.refresh)),
          ]),
        ),
        const Divider(height: 1),
        Expanded(
          child: state.when(
            data: (list) {
              final filtered = list
                  .where((s) =>
                      s.title.toLowerCase().contains(_query.toLowerCase()) ||
                      s.url.toLowerCase().contains(_query.toLowerCase()))
                  .toList();
              if (filtered.isEmpty)
                return const Center(child: Text('채널이 없습니다. 검색어를 변경해보세요.'));
              return ListView.builder(
                itemCount: filtered.length,
                itemBuilder: (context, idx) {
                  final s = filtered[idx];
                  final isSelected = selected?.url == s.url;
                  return ChannelTile(
                    entry: s,
                    selected: isSelected,
                    onTap: () =>
                        ref.read(selectedChannelProvider.notifier).state = s,
                    onOpen: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) => PlayerScreen(
                                videoPath: s.url, videoName: s.title))),
                  );
                },
              );
            },
            loading: () => const Center(child: CircularProgressIndicator()),
            error: (e, st) => Center(
                child: Column(mainAxisSize: MainAxisSize.min, children: [
              Text('불러오기 실패: $e'),
              const SizedBox(height: 8),
              ElevatedButton(
                  onPressed: () => ref
                      .read(channelListProvider.notifier)
                      .fetch(widget.m3uController.text.trim()),
                  child: const Text('다시시도'))
            ])),
          ),
        )
      ]),
    );
  }
}