import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:dialer/services/obfuscate_service.dart';
import 'package:dialer/widgets/username_color_generator.dart';

class CallPage extends StatefulWidget {
  final String displayName;
  final Uint8List? thumbnail;

  const CallPage({super.key, required this.displayName, this.thumbnail});

  @override
  _CallPageState createState() => _CallPageState();
}

class _CallPageState extends State<CallPage> {
  final ObfuscateService _obfuscateService = ObfuscateService();
  bool isMuted = false;
  bool isSpeakerOn = false;
  bool isKeypadVisible = false;
  bool icingProtocolOk = true;

  void _toggleMute() {
    setState(() {
      isMuted = !isMuted;
    });
  }

  void _toggleSpeaker() {
    setState(() {
      isSpeakerOn = !isSpeakerOn;
    });
  }

  void _toggleKeypad() {
    setState(() {
      isKeypadVisible = !isKeypadVisible;
    });
  }

  void _toggleIcingProtocol() {
    setState(() {
      icingProtocolOk = !icingProtocolOk;
    });
  }

  void _hangUp() {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    final double avatarRadius = isKeypadVisible ? 30.0 : 60.0;
    final double nameFontSize = isKeypadVisible ? 20.0 : 32.0;
    final double statusFontSize = isKeypadVisible ? 14.0 : 20.0;

    return Scaffold(
      body: Container(
        color: Colors.black,
        child: SafeArea(
          child: Column(
            children: [
              // Header area with Icing protocol status first
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const SizedBox(height: 60),
                  // Icing protocol status moved here
                  ObfuscatedAvatar(
                    imageBytes: widget.thumbnail,
                    radius: avatarRadius,
                    backgroundColor: generateColorFromName(widget.displayName),
                    fallbackInitial: widget.displayName,
                  ),
                  const SizedBox(height: 20),
                  GestureDetector(
                    onTap: _toggleIcingProtocol,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          icingProtocolOk ? Icons.lock : Icons.lock_open,
                          color: icingProtocolOk ? Colors.green : Colors.red,
                          size: 20,
                        ),
                        const SizedBox(width: 8),
                        Text(
                          'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}',
                          style: TextStyle(
                            color: icingProtocolOk ? Colors.green : Colors.red,
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 10),
                  Text(
                    _obfuscateService.obfuscateData(widget.displayName),
                    style: TextStyle(
                      fontSize: nameFontSize,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    'Calling...',
                    style: TextStyle(fontSize: statusFontSize, color: Colors.white70),
                  ),
                ],
              ),

              // Middle section with keypad or control buttons
              Expanded(
                child: Column(
                  children: [
                    // Add a smaller top spacer to move buttons higher
                    const Spacer(flex: 2),

                    if (isKeypadVisible) ...[
                      // Close keypad button
                      Align(
                        alignment: Alignment.topRight,
                        child: Padding(
                          padding: const EdgeInsets.only(right: 20.0),
                          child: IconButton(
                            onPressed: _toggleKeypad,
                            icon: const Icon(
                              Icons.close,
                              color: Colors.white,
                              size: 24,
                            ),
                          ),
                        ),
                      ),
                      // Keypad
                      Container(
                        margin: const EdgeInsets.symmetric(horizontal: 40),
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          color: Colors.black45,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: GridView.count(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          crossAxisCount: 3,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 10,
                          children: List.generate(12, (index) {
                            String label;
                            if (index < 9) {
                              label = '${index + 1}';
                            } else if (index == 9) {
                              label = '*';
                            } else if (index == 10) {
                              label = '0';
                            } else {
                              label = '#';
                            }
                            return Center(
                              child: Text(
                                label,
                                style: const TextStyle(fontSize: 24, color: Colors.white),
                              ),
                            );
                          }),
                        ),
                      ),
                    ] else ...[
                      // Control buttons row with labels under each button
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 32.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            // Mic button with label
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  onPressed: _toggleMute,
                                  icon: Icon(
                                    isMuted ? Icons.mic_off : Icons.mic,
                                    color: Colors.white,
                                    size: 32,
                                  ),
                                ),
                                Text(
                                  isMuted ? 'Unmute' : 'Mute',
                                  style: const TextStyle(color: Colors.white, fontSize: 14),
                                ),
                              ],
                            ),
                            // Dialpad button with label
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  onPressed: _toggleKeypad,
                                  icon: Icon(
                                    Icons.dialpad,
                                    color: Colors.white,
                                    size: 32,
                                  ),
                                ),
                                const Text(
                                  'Keypad',
                                  style: TextStyle(color: Colors.white, fontSize: 14),
                                ),
                              ],
                            ),
                            // Speaker button with label
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  onPressed: _toggleSpeaker,
                                  icon: Icon(
                                    isSpeakerOn ? Icons.volume_up : Icons.volume_off,
                                    color: isSpeakerOn ? Colors.amber : Colors.white,
                                    size: 32,
                                  ),
                                ),
                                const Text(
                                  'Speaker',
                                  style: TextStyle(color: Colors.white, fontSize: 14),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),

                      const SizedBox(height: 20),

                      // Additional buttons row: "Add Contact" and "Change SIM"
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 32.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            // "Add Contact" button
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  onPressed: () {
                                    // Implement your add contact logic here
                                  },
                                  icon: const Icon(
                                    Icons.person_add,
                                    color: Colors.white,
                                    size: 32,
                                  ),
                                ),
                                const Text(
                                  'Add Contact',
                                  style: TextStyle(color: Colors.white, fontSize: 14),
                                ),
                              ],
                            ),
                            // "Change SIM" button
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  onPressed: () {
                                    // Implement your change SIM logic here
                                  },
                                  icon: const Icon(
                                    Icons.sim_card,
                                    color: Colors.white,
                                    size: 32,
                                  ),
                                ),
                                const Text(
                                  'Change SIM',
                                  style: TextStyle(color: Colors.white, fontSize: 14),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                    
                    // Add a larger bottom spacer
                    const Spacer(flex: 6),
                  ],
                ),
              ),

              // Hang up button
              Transform.translate(
                offset: const Offset(0, -40), // Moves button 20 pixels upward
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                  child: GestureDetector(
                    onTap: _hangUp,
                    child: Container(
                      padding: const EdgeInsets.all(10), // adjust to desired size
                      decoration: const BoxDecoration(
                        color: Colors.red,
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(
                        Icons.call_end,
                        color: Colors.white,
                        size: 40,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}