import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import '../../../core/constants/colors.dart';
import '../../../core/constants/api_constants.dart';
import '../../posts/screens/posts_screen.dart';
import '../../automation/screens/automation_screen.dart';

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

  @override
  State<ChannelsScreen> createState() => _ChannelsScreenState();
}

class _ChannelsScreenState extends State<ChannelsScreen> {
  List<dynamic> _channels = [];
  Map<String, dynamic>? _accountData;
  bool _isLoading = true;
  String? _connectedChannelId;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    setState(() => _isLoading = true);
    try {
      final prefs = await SharedPreferences.getInstance();
      final email = prefs.getString('user_email');
      _connectedChannelId = prefs.getString('connectedChannel');

      final response = await http.get(
        Uri.parse('${ApiConstants.liveBaseUrl}/social/channels?userId=$email'),
      );
      
      if (response.statusCode == 200) {
        setState(() {
          _channels = jsonDecode(response.body);
        });
      }

      if (_connectedChannelId != null) {
        await _loadAccountDetails();
      }
    } catch (e) {
      debugPrint("Error loading channels: $e");
    } finally {
      if (mounted) setState(() => _isLoading = false);
    }
  }

  Future<void> _loadAccountDetails() async {
    try {
      final prefs = await SharedPreferences.getInstance();
      final email = prefs.getString('user_email');
      final response = await http.get(
        Uri.parse('${ApiConstants.liveBaseUrl}/social/account?userId=$email'),
      );
      if (response.statusCode == 200) {
        setState(() {
          _accountData = jsonDecode(response.body);
        });
      }
    } catch (e) {
      debugPrint("Error loading account details: $e");
    }
  }

  Future<void> _connectChannel(String channelId, String channelName) async {
    setState(() => _isLoading = true);
    try {
      final prefs = await SharedPreferences.getInstance();
      final email = prefs.getString('user_email');
      
      final response = await http.post(
        Uri.parse('${ApiConstants.liveBaseUrl}/social/connect?userId=$email'),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode({'channel_id': channelId}),
      );

      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
        final savedId = data['data']?['channel_id'] ?? channelId;
        await prefs.setString('connectedChannel', savedId);
        setState(() => _connectedChannelId = savedId.toString());
        await _loadAccountDetails();
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text("$channelName connected successfully!")),
          );
        }
      } else {
        final error = jsonDecode(response.body);
         if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(error['error'] ?? "Failed to connect $channelName")),
          );
        }
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("Error: $e")),
        );
      }
    } finally {
      if (mounted) setState(() => _isLoading = false);
    }
  }

  Future<void> _removeChannel() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('connectedChannel');
    setState(() {
      _connectedChannelId = null;
      _accountData = null;
    });
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("Channel removed successfully!")),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.darkBg,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text("Instagram Channels", style: GoogleFonts.nunito(color: Colors.white, fontWeight: FontWeight.bold)),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: _isLoading 
        ? const Center(child: CircularProgressIndicator(color: Colors.pinkAccent))
        : _connectedChannelId != null 
          ? _buildAccountDetails()
          : _buildChannelSelection(),
    );
  }

  Widget _buildAccountDetails() {
    if (_accountData == null) {
      return const Center(child: CircularProgressIndicator(color: Colors.pinkAccent));
    }

    return SingleChildScrollView(
      padding: const EdgeInsets.all(24),
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(32),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  AppColors.cardBg.withOpacity(0.9),
                  AppColors.cardBg.withOpacity(0.7),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.circular(30),
              border: Border.all(color: Colors.white.withOpacity(0.1)),
              boxShadow: [
                BoxShadow(color: const Color(0xFF833AB4).withOpacity(0.15), blurRadius: 30, offset: const Offset(0, 10)),
                BoxShadow(color: Colors.black.withOpacity(0.3), blurRadius: 20, offset: const Offset(0, 10)),
              ],
            ),
            child: Column(
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      width: 130,
                      height: 130,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient: const LinearGradient(
                          colors: [Color(0xFF833AB4), Color(0xFFFD1D1D), Color(0xFFFCAF45)],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: const Color(0xFFFD1D1D).withOpacity(0.4),
                            blurRadius: 20,
                            offset: const Offset(0, 8),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 122,
                      height: 122,
                      decoration: const BoxDecoration(
                        shape: BoxShape.circle,
                        color: AppColors.cardBg, // Border effect
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: CircleAvatar(
                          radius: 56,
                          backgroundColor: Colors.black,
                          backgroundImage: NetworkImage(_accountData!['profile_picture_url'] ?? ''),
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      right: 10,
                      child: Container(
                        padding: const EdgeInsets.all(6),
                        decoration: BoxDecoration(
                          color: const Color(0xFFFD1D1D),
                          shape: BoxShape.circle,
                          border: Border.all(color: AppColors.cardBg, width: 3),
                        ),
                        child: const Icon(Icons.check, color: Colors.white, size: 16),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 24),
                Text(
                  _accountData!['username'] ?? 'User',
                  style: GoogleFonts.nunito(
                    fontSize: 28,
                    fontWeight: FontWeight.w900,
                    color: Colors.white,
                    letterSpacing: 0.5,
                  ),
                ),
                if (_accountData!['name'] != null)
                  Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text(
                      _accountData!['name'],
                      style: GoogleFonts.nunito(
                        fontSize: 16,
                        color: Colors.white54,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                const SizedBox(height: 32),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.03),
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: Colors.white.withOpacity(0.05)),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      _buildStatItem(_accountData!['media_count']?.toString() ?? "0", "Posts"),
                      Container(width: 1, height: 40, color: Colors.white10),
                      _buildStatItem(_accountData!['followers_count']?.toString() ?? "0", "Followers"),
                      Container(width: 1, height: 40, color: Colors.white10),
                      _buildStatItem(_accountData!['follows_count']?.toString() ?? "0", "Following"),
                    ],
                  ),
                ),
                const SizedBox(height: 32),
                if (_accountData!['biography'] != null)
                  Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: Colors.black.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Text(
                      _accountData!['biography'],
                      textAlign: TextAlign.center,
                      style: GoogleFonts.nunito(color: Colors.white70, fontSize: 14, height: 1.5),
                    ),
                  ),
                const SizedBox(height: 40),
                SizedBox(
                  width: double.infinity,
                  height: 56,
                  child: ElevatedButton(
                    onPressed: _removeChannel,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.red.withOpacity(0.1),
                      side: BorderSide(color: Colors.red.withOpacity(0.5), width: 1),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
                      elevation: 0,
                    ).copyWith(
                      overlayColor: MaterialStateProperty.all(Colors.red.withOpacity(0.1)),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.logout, color: Colors.red),
                        const SizedBox(width: 12),
                        Text(
                          "Disconnect Channel",
                          style: GoogleFonts.nunito(
                            color: Colors.red,
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 24),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.info_outline, color: Colors.white38, size: 16),
              const SizedBox(width: 8),
              Text(
                "Switch channels by disconnecting current one",
                textAlign: TextAlign.center,
                style: GoogleFonts.nunito(color: Colors.white38, fontSize: 12),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildStatItem(String value, String label) {
    return Column(
      children: [
        Text(
          value,
          style: GoogleFonts.nunito(
            fontSize: 24,
            fontWeight: FontWeight.w900,
            color: Colors.white,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          style: GoogleFonts.nunito(
            fontSize: 12,
            color: Colors.white54,
            fontWeight: FontWeight.w600,
            letterSpacing: 0.5,
          ),
        ),
      ],
    );
  }

  Widget _buildChannelSelection() {
    if (_channels.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(
                  colors: [Colors.purple.withOpacity(0.2), Colors.pink.withOpacity(0.2)],
                ),
              ),
              child: const Icon(Icons.account_circle_outlined, size: 64, color: Colors.white24),
            ),
            const SizedBox(height: 16),
            Text(
              "No Instagram Channels",
              style: GoogleFonts.nunito(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: Text(
                "Connect via Facebook to get started",
                textAlign: TextAlign.center,
                style: GoogleFonts.nunito(
                  color: Colors.white54,
                  fontSize: 13,
                  height: 1.5,
                ),
              ),
            ),
          ],
        ),
      );
    }

    return ListView.builder(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
      itemCount: _channels.length,
      itemBuilder: (context, index) {
        final ch = _channels[index];
        final hasLinked = ch['has_linked_account'] == true;
        
        return Container(
          margin: const EdgeInsets.only(bottom: 12),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            gradient: LinearGradient(
              colors: hasLinked 
                ? [Colors.purple.withOpacity(0.1), Colors.pink.withOpacity(0.1)]
                : [Colors.grey.withOpacity(0.05), Colors.grey.withOpacity(0.05)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            border: Border.all(
              width: 1,
              color: hasLinked 
                ? Colors.purpleAccent.withOpacity(0.3)
                : Colors.white.withOpacity(0.1),
            ),
            boxShadow: [
              BoxShadow(
                color: hasLinked 
                  ? Colors.purpleAccent.withOpacity(0.1)
                  : Colors.black.withOpacity(0.2),
                blurRadius: 8,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              borderRadius: BorderRadius.circular(16),
              onTap: hasLinked ? () => _connectChannel(ch['id'].toString(), ch['name']) : null,
              child: Padding(
                padding: const EdgeInsets.all(12),
                child: Row(
                  children: [
                    // Instagram Icon
                    Container(
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        gradient: hasLinked
                          ? const LinearGradient(
                              colors: [Color(0xFF833AB4), Color(0xFFFD1D1D), Color(0xFFFCAF45)],
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                            )
                          : LinearGradient(
                              colors: [Colors.grey.shade800, Colors.grey.shade700],
                            ),
                        boxShadow: [
                          BoxShadow(
                            color: hasLinked 
                              ? Colors.purpleAccent.withOpacity(0.2)
                              : Colors.black.withOpacity(0.1),
                            blurRadius: 4,
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                      child: const Icon(
                        Icons.camera_alt_rounded,
                        color: Colors.white,
                        size: 24,
                      ),
                    ),
                    const SizedBox(width: 12),
                    
                    // Channel Info
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Flexible(
                                child: Text(
                                  ch['name'] ?? 'Channel',
                                  style: GoogleFonts.nunito(
                                    fontSize: 15,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                  ),
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                              if (hasLinked) ...[
                                const SizedBox(width: 6),
                                Icon(Icons.check_circle, size: 14, color: Colors.greenAccent),
                              ],
                            ],
                          ),
                          const SizedBox(height: 4),
                          Text(
                            hasLinked ? "Ready" : "Auth Required",
                            style: GoogleFonts.nunito(
                              fontSize: 11,
                              color: hasLinked ? Colors.greenAccent : Colors.orangeAccent,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    ),
                    
                    const SizedBox(width: 12),

                    // Connect Button
                    Container(
                      height: 36,
                      decoration: BoxDecoration(
                        gradient: hasLinked
                          ? const LinearGradient(
                              colors: [Color(0xFF667EEA), Color(0xFF764BA2)],
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                            )
                          : null,
                        color: hasLinked ? null : Colors.white.withOpacity(0.1),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                          borderRadius: BorderRadius.circular(10),
                          onTap: hasLinked ? () => _connectChannel(ch['id'].toString(), ch['name']) : null,
                          child: Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 12),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  hasLinked ? "Link" : "Lock",
                                  style: GoogleFonts.nunito(
                                    color: hasLinked ? Colors.white : Colors.white38,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 12,
                                  ),
                                ),
                                const SizedBox(width: 4),
                                Icon(
                                  hasLinked ? Icons.arrow_forward_rounded : Icons.lock_outline,
                                  color: hasLinked ? Colors.white : Colors.white38,
                                  size: 14,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}