import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../models/device_status.dart';
import '../config/theme.dart';

class StatusBar extends StatelessWidget {
  final DeviceStatus status;
  final VoidCallback? onTap;

  const StatusBar({
    super.key,
    required this.status,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(
            height: 32, // h-7 is ~28px, adjusted for touch target
            padding: const EdgeInsets.symmetric(horizontal: 12),
            decoration: BoxDecoration(
              color: const Color(0xFF1A1625).withOpacity(0.8),
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.white.withOpacity(0.1)),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                // Connection Status Icon
                if (status.connected) ...[
                   // TODO: Add ping animation if needed using flutter_animate
                   const Icon(LucideIcons.bluetooth, size: 14, color: AppTheme.neonGreen),
                ] else ...[
                   Container(
                     width: 6, 
                     height: 6, 
                     decoration: const BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
                   ),
                ],

                const SizedBox(width: 8),
                Container(width: 1, height: 10, color: Colors.white.withOpacity(0.1)),
                const SizedBox(width: 8),

                // Battery Status
                if (status.connected) ...[
                  Text(
                    '${status.battery.floor()}%',
                    style: TextStyle(
                      fontFamily: 'monospace',
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                      color: status.battery < 20 ? Theme.of(context).colorScheme.error : Colors.white,
                    ),
                  ),
                  const SizedBox(width: 4),
                  Icon(
                    LucideIcons.zap,
                    size: 12,
                    color: status.battery < 20 ? Theme.of(context).colorScheme.error : AppTheme.neonPurple,
                  ),
                ] else ...[
                   const Text(
                     '未连接',
                     style: TextStyle(fontSize: 10, color: Colors.grey),
                   ),
                ],
              ],
            ),
          ),
        ),
      ),
    );
  }
}