import 'package:flutter/material.dart';
import '../models/channel.dart';
import '../services/api_service.dart';
import '../services/auth_service.dart';
import 'channel_screen.dart';
import 'login_screen.dart';

class ChannelListScreen extends StatefulWidget {
  const ChannelListScreen({super.key});

  @override
  State<ChannelListScreen> createState() => _ChannelListScreenState();
}

class _ChannelListScreenState extends State<ChannelListScreen> {
  final _authService = AuthService();
  late final ApiService _api;

  List<Channel> _channels = [];
  bool _loading = true;
  String? _error;

  @override
  void initState() {
    super.initState();
    _api = ApiService(_authService);
    _loadChannels();
  }

  Future<void> _loadChannels() async {
    setState(() {
      _loading = true;
      _error = null;
    });
    final channels = await _api.getChannels();
    if (!mounted) return;
    if (channels.isEmpty && _channels.isEmpty) {
      setState(() {
        _loading = false;
        _error = 'کانالی یافت نشد';
      });
    } else {
      setState(() {
        _channels = channels;
        _loading = false;
      });
    }
  }

  Future<void> _logout() async {
    await _authService.logout();
    if (!mounted) return;
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (_) => const LoginScreen()),
    );
  }

  void _enterChannel(Channel ch) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChannelScreen(channel: ch)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          children: [
            // Header
            Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
              child: Row(
                children: [
                  const SizedBox(width: 4),
                  const Icon(Icons.settings_input_antenna,
                      color: Color(0xFF00C853), size: 16),
                  const SizedBox(width: 4),
                  const Expanded(
                    child: Text(
                      'کانال‌ها',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 13,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  // Refresh
                  IconButton(
                    onPressed: _loading ? null : _loadChannels,
                    padding: EdgeInsets.zero,
                    constraints:
                        const BoxConstraints(minWidth: 32, minHeight: 32),
                    icon: const Icon(Icons.refresh,
                        color: Colors.white54, size: 18),
                  ),
                  // Logout
                  IconButton(
                    onPressed: _logout,
                    padding: EdgeInsets.zero,
                    constraints:
                        const BoxConstraints(minWidth: 32, minHeight: 32),
                    icon: const Icon(Icons.logout,
                        color: Colors.white38, size: 16),
                  ),
                ],
              ),
            ),

            // Content
            Expanded(
              child: _loading
                  ? const Center(
                      child: CircularProgressIndicator(
                          color: Color(0xFF00C853), strokeWidth: 2),
                    )
                  : _error != null && _channels.isEmpty
                      ? Center(
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              const Icon(Icons.wifi_off,
                                  color: Colors.white38, size: 24),
                              const SizedBox(height: 6),
                              Text(_error!,
                                  style: const TextStyle(
                                      color: Colors.white38, fontSize: 11)),
                              const SizedBox(height: 8),
                              TextButton(
                                onPressed: _loadChannels,
                                child: const Text('تلاش مجدد',
                                    style: TextStyle(
                                        color: Color(0xFF00C853),
                                        fontSize: 11)),
                              ),
                            ],
                          ),
                        )
                      : ListView.builder(
                          padding: const EdgeInsets.only(bottom: 4),
                          itemCount: _channels.length,
                          itemBuilder: (ctx, i) {
                            return _ChannelTile(
                              channel: _channels[i],
                              onTap: () => _enterChannel(_channels[i]),
                            );
                          },
                        ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ChannelTile extends StatelessWidget {
  final Channel channel;
  final VoidCallback onTap;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
        height: 44,
        decoration: BoxDecoration(
          color: const Color(0xFF1C1C1E),
          borderRadius: BorderRadius.circular(14),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 12),
        child: Row(
          children: [
            const Icon(Icons.radio, color: Color(0xFF00C853), size: 16),
            const SizedBox(width: 8),
            Expanded(
              child: Text(
                channel.name,
                style: const TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    fontWeight: FontWeight.w500),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            const SizedBox(width: 4),
            const Icon(Icons.chevron_right, color: Colors.white24, size: 16),
          ],
        ),
      ),
    );
  }
}