import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'stream_screen.dart'; // Import the camera stream screen
import 'spectator_screen.dart';
import '../utils/translations.dart';

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

  @override
  State<TargetScreen> createState() => _TargetScreenState();
}

class _TargetScreenState extends State<TargetScreen> {
  List<bool> _cameraButtonsEnabled =
      List.generate(6, (_) => false); // Initially, all buttons are disabled
  String _selectedLanguage = 'English';

  @override
  void initState() {
    super.initState();
    _loadLanguage();
    _loadCameraData();
  }

  String _t(String key) {
    return AppTranslations.translate(key, _selectedLanguage);
  }

  Future<void> _loadLanguage() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _selectedLanguage = prefs.getString('language') ?? 'English';
    });
  }

  /// Load the camera IPs from SharedPreferences and update button status
  Future<void> _loadCameraData() async {
    final prefs = await SharedPreferences.getInstance();
    final List<String> defaultIPs = [
      '192.168.0.134:9081',
      '192.168.0.134:9082',
      '192.168.0.134:9083',
      '192.168.0.134:9084',
      '192.168.0.134:9085',
      '192.168.0.134:9086',
    ];

    List<bool> cameraDataStatus = List.generate(6, (index) {
      String key = 'cameraIP_${index + 1}';

      if (!prefs.containsKey(key)) {
        prefs.setString(key, defaultIPs[index]);
        return true; // Default set
      }

      String? ip = prefs.getString(key);
      return ip != null && ip.isNotEmpty && ip != 'Not Set';
    });

    if (!mounted) return;
    setState(() {
      _cameraButtonsEnabled = cameraDataStatus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
        child: Column(
          children: [
            Expanded(
              child: Column(
                children: [
                  // Camera grid (6 cameras)
                  Expanded(
                    child: GridView.builder(
                      itemCount: 6,
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        mainAxisSpacing: 16,
                        crossAxisSpacing: 16,
                        childAspectRatio: 1,
                      ),
                      itemBuilder: (context, index) {
                        final isEnabled = _cameraButtonsEnabled[index];
                        return GestureDetector(
                          onTap: isEnabled
                              ? () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) =>
                                          CameraStreamScreen(cameraIndex: index + 1),
                                    ),
                                  );
                                }
                              : null,
                          child: Container(
                            decoration: BoxDecoration(
                              color: isEnabled ? Colors.grey[900] : Colors.grey[300],
                              borderRadius: BorderRadius.circular(16),
                            ),
                            padding: const EdgeInsets.all(16),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.videocam_rounded,
                                  color: isEnabled ? Colors.white : Colors.grey[500],
                                  size: 36,
                                ),
                                const SizedBox(height: 12),
                                Text(
                                  "${_t('Camera')} ${index + 1}",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: isEnabled ? Colors.white : Colors.grey[600],
                                    fontSize: 20,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  const SizedBox(height: 16),
                  // Spectate button (spans full width, half height)
                  GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => SpectatorScreen(
                            selectedLanguage: _selectedLanguage,
                          ),
                        ),
                      );
                    },
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(
                        color: Colors.grey[900],
                        borderRadius: BorderRadius.circular(16),
                      ),
                      padding: const EdgeInsets.all(16),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.visibility_rounded,
                            color: Colors.white,
                            size: 28,
                          ),
                          const SizedBox(width: 12),
                          Text(
                            _t('Spectate'),
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}