import 'dart:async';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../widgets/tab_content_layout.dart';

enum DeviceState { disconnected, connecting, connected }

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

  @override
  State<ControlScreen> createState() => _ControlScreenState();
}

class _ControlScreenState extends State<ControlScreen> {
  DeviceState _deviceStatus = DeviceState.disconnected;

  void _connectDevice() {
    setState(() => _deviceStatus = DeviceState.connecting);
    Future.delayed(const Duration(milliseconds: 1500), () {
      if (mounted) setState(() => _deviceStatus = DeviceState.connected);
    });
  }

  void _disconnectDevice() {
    setState(() => _deviceStatus = DeviceState.disconnected);
  }

  @override
  Widget build(BuildContext context) {
    const double bottomNavHeight = 90;
    
    return TabContentLayout(
      child: SingleChildScrollView(
        padding: EdgeInsets.fromLTRB(16, 8, 16, bottomNavHeight + 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Device Card
            _DeviceCard(
              status: _deviceStatus,
              onConnect: _connectDevice,
              onDisconnect: _disconnectDevice,
            ),
            
            const SizedBox(height: 16),
            
            // Mode Selection Title
            Text(
              '操控模式',
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                letterSpacing: 2,
                color: Colors.white.withOpacity(0.4),
              ),
            ),
            const SizedBox(height: 12),
            
            // Free Control Button
            _ModeButton(
              title: '自由操控',
              subtitle: '指尖滑动控制 • 实时反馈',
              icon: LucideIcons.sliders,
              iconColor: const Color(0xFFC084FC),
              enabled: _deviceStatus == DeviceState.connected,
              onTap: () => context.push('/control/free'),
            ),
            
            const SizedBox(height: 12),
            
            // Pattern Control Button
            _ModeButton(
              title: '波形模式',
              subtitle: '6种预设震动韵律',
              icon: LucideIcons.waves,
              iconColor: const Color(0xFF60A5FA),
              enabled: _deviceStatus == DeviceState.connected,
              onTap: () => context.push('/control/pattern'),
            ),
          ],
        ),
      ),
    );
  }
}

// Device Card Widget
class _DeviceCard extends StatelessWidget {
  final DeviceState status;
  final VoidCallback onConnect;
  final VoidCallback onDisconnect;

  const _DeviceCard({
    required this.status,
    required this.onConnect,
    required this.onDisconnect,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.1),
        borderRadius: BorderRadius.circular(24),
        border: Border.all(color: Colors.white.withOpacity(0.2)),
      ),
      child: Stack(
        children: [
          // Background Icon
          Positioned(
            right: -20,
            top: -20,
            child: Icon(
              LucideIcons.bluetooth,
              size: 100,
              color: Colors.white.withOpacity(0.05),
            ),
          ),
          
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          const Text(
                            'Link-X Pro',
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                          if (status == DeviceState.connected) ...[
                            const SizedBox(width: 8),
                            Container(
                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                              decoration: BoxDecoration(
                                color: const Color(0xFF34D399).withOpacity(0.2),
                                borderRadius: BorderRadius.circular(12),
                                border: Border.all(color: const Color(0xFF34D399).withOpacity(0.3)),
                              ),
                              child: const Text(
                                'ONLINE',
                                style: TextStyle(
                                  fontSize: 10,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xFF34D399),
                                ),
                              ),
                            ),
                          ],
                        ],
                      ),
                      const SizedBox(height: 4),
                      Text(
                        status == DeviceState.disconnected
                            ? '设备未连接'
                            : status == DeviceState.connecting
                                ? '正在搜索信号...'
                                : 'ID: 884-X9-01',
                        style: TextStyle(
                          fontSize: 12,
                          fontFamily: 'monospace',
                          color: Colors.white.withOpacity(0.6),
                        ),
                      ),
                    ],
                  ),
                  
                  // Connect Button
                  GestureDetector(
                    onTap: status == DeviceState.connected ? onDisconnect : onConnect,
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                      decoration: BoxDecoration(
                        color: status == DeviceState.connected
                            ? Colors.white.withOpacity(0.1)
                            : status == DeviceState.connecting
                                ? Colors.white.withOpacity(0.2)
                                : Colors.white,
                        borderRadius: BorderRadius.circular(20),
                        border: status == DeviceState.connected
                            ? Border.all(color: Colors.white.withOpacity(0.1))
                            : null,
                      ),
                      child: Text(
                        status == DeviceState.connected
                            ? '断开'
                            : status == DeviceState.connecting
                                ? '连接中'
                                : '连接设备',
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: status == DeviceState.connected
                              ? Colors.white.withOpacity(0.7)
                              : const Color(0xFF2E1065),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              
              // Battery Info
              if (status == DeviceState.connected) ...[
                const SizedBox(height: 16),
                Row(
                  children: [
                    const Icon(LucideIcons.battery, size: 16, color: Color(0xFF34D399)),
                    const SizedBox(width: 8),
                    const Text(
                      '85%',
                      style: TextStyle(
                        fontSize: 14,
                        fontFamily: 'monospace',
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ],
            ],
          ),
        ],
      ),
    );
  }
}

// Mode Button Widget
class _ModeButton extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;
  final Color iconColor;
  final bool enabled;
  final VoidCallback onTap;

  const _ModeButton({
    required this.title,
    required this.subtitle,
    required this.icon,
    required this.iconColor,
    required this.enabled,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: enabled ? onTap : null,
      child: AnimatedOpacity(
        duration: const Duration(milliseconds: 300),
        opacity: enabled ? 1.0 : 0.5,
        child: Container(
          height: 120,
          padding: const EdgeInsets.symmetric(horizontal: 24),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(enabled ? 0.1 : 0.05),
            borderRadius: BorderRadius.circular(24),
            border: Border.all(
              color: Colors.white.withOpacity(enabled ? 0.2 : 0.05),
            ),
          ),
          child: Row(
            children: [
              Container(
                width: 56,
                height: 56,
                decoration: BoxDecoration(
                  color: iconColor.withOpacity(0.2),
                  shape: BoxShape.circle,
                ),
                child: Icon(icon, size: 28, color: iconColor),
              ),
              const SizedBox(width: 20),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.white.withOpacity(0.5),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}