import 'package:flutter/material.dart';
import '../utils/translations.dart';

class CameraSelectionDialog extends StatefulWidget {
  final List<Map<String, dynamic>> availableCameras;
  final String selectedLanguage;

  const CameraSelectionDialog({
    super.key,
    required this.availableCameras,
    required this.selectedLanguage,
  });

  @override
  State<CameraSelectionDialog> createState() => _CameraSelectionDialogState();
}

class _CameraSelectionDialogState extends State<CameraSelectionDialog> {
  late List<bool> _selectedCameras;

  @override
  void initState() {
    super.initState();
    _selectedCameras = List.generate(widget.availableCameras.length, (_) => false);
  }

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

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      backgroundColor: Colors.grey[900],
      title: Text(
        _t('Select Cameras to Spectate'),
        style: const TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w600,
        ),
      ),
      content: SizedBox(
        width: double.maxFinite,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              _t('Choose 1-6 cameras'),
              style: TextStyle(
                color: Colors.grey[400],
                fontSize: 14,
              ),
            ),
            const SizedBox(height: 16),
            Flexible(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: widget.availableCameras.length,
                itemBuilder: (context, index) {
                  final camera = widget.availableCameras[index];
                  final cameraIndex = camera['index'] as int;
                  final cameraIp = camera['ip'] as String;

                  return CheckboxListTile(
                    title: Text(
                      "${_t('Camera')} $cameraIndex",
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    subtitle: Text(
                      cameraIp,
                      style: TextStyle(
                        color: Colors.grey[400],
                        fontSize: 12,
                      ),
                    ),
                    value: _selectedCameras[index],
                    onChanged: (value) {
                      setState(() {
                        _selectedCameras[index] = value ?? false;
                      });
                    },
                    activeColor: Colors.grey[800],
                    checkColor: Colors.white,
                    tileColor: Colors.grey[850],
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                    contentPadding: const EdgeInsets.symmetric(
                      horizontal: 12,
                      vertical: 4,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text(
            _t('Cancel'),
            style: const TextStyle(color: Colors.grey),
          ),
        ),
        TextButton(
          onPressed: _selectedCameras.contains(true)
              ? () {
                  final selectedCameras = <Map<String, dynamic>>[];
                  for (int i = 0; i < _selectedCameras.length; i++) {
                    if (_selectedCameras[i]) {
                      selectedCameras.add(widget.availableCameras[i]);
                    }
                  }
                  Navigator.pop(context, selectedCameras);
                }
              : null,
          child: Text(
            _t('View Cameras'),
            style: TextStyle(
              color: _selectedCameras.contains(true)
                  ? Colors.white
                  : Colors.grey[600],
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ],
    );
  }
}