import 'package:abawo_bt_app/model/bluetooth_device_model.dart';
import 'package:flutter/material.dart';
import 'dart:ui'; // Required for ImageFilter

class DeviceListItem extends StatelessWidget {
  final String deviceName;
  final String deviceId; // Added for potential future use or subtitle
  final DeviceType type;
  // final String? imageUrl; // Optional image URL - commented out for now
  final bool isConnecting; // Add this line
  final Widget? trailing;

  const DeviceListItem({
    super.key,
    required this.deviceName,
    required this.deviceId,
    required this.type,
    // this.imageUrl,
    this.isConnecting = false, // Add this line
    this.trailing,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDarkMode = theme.brightness == Brightness.dark;

    // Glassy effect colors - adjust transparency and base color as needed
    final glassColor = isDarkMode
        ? Colors.white.withValues(alpha: 0.1)
        : Colors.black.withValues(alpha: 0.05);
    final shadowColor = isDarkMode
        ? Colors.black.withValues(alpha: 0.4)
        : Colors.grey.withValues(alpha: 0.5);

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Row(
        children: [
          // Left side: Rounded Square Container
          Container(
            width: 60, // Square size
            height: 60,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12), // Rounded corners
              boxShadow: [
                BoxShadow(
                  color: shadowColor,
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: ClipRRect(
              // Apply blur effect within rounded corners
              borderRadius: BorderRadius.circular(12),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                child: Container(
                  decoration: BoxDecoration(
                    color:
                        glassColor, // Semi-transparent color for glass effect
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(
                      color:
                          Colors.white.withValues(alpha: 0.2), // Subtle border
                      width: 0.5,
                    ),
                  ),
                  child: type == DeviceType.universalShifters
                      // For Universal Shifters: Image fills the container, constrained by rounded borders
                      ? ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: Image.asset(
                            'assets/images/shifter-wireframe.png',
                            fit: BoxFit.cover, // Cover the entire container
                            width: 60,
                            height: 60,
                          ),
                        )
                      // For other devices: Question mark with padding
                      : const Center(
                          child: Text(
                            '?',
                            style: TextStyle(
                              fontSize: 30,
                              fontWeight: FontWeight.bold,
                              color: Colors.white70,
                            ),
                          ),
                        ),
                ),
              ),
            ),
          ),
          const SizedBox(width: 16), // Spacing between image and text

          // Right side: Device Name and ID
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  deviceName.isEmpty ? 'Unknown Device' : deviceName,
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: deviceName.isEmpty
                        ? FontWeight.normal
                        : FontWeight.w500,
                    fontStyle: deviceName.isEmpty
                        ? FontStyle.italic
                        : FontStyle.normal,
                    color: deviceName.isEmpty
                        ? theme.hintColor
                        : theme.textTheme.bodyLarge?.color,
                  ),
                  overflow: TextOverflow
                      .ellipsis, // Prevent long names from overflowing
                ),
                const SizedBox(height: 4),
                Text(
                  deviceId, // Display device ID as subtitle
                  style: theme.textTheme.bodySmall
                      ?.copyWith(color: theme.hintColor),
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          // Add spinner if connecting (Add this block)
          if (isConnecting)
            Padding(
              padding: const EdgeInsets.only(left: 12.0), // Add some spacing
              child: SizedBox(
                width: 20, // Define spinner size
                height: 20,
                child: CircularProgressIndicator(
                    strokeWidth: 2.0), // Use a small spinner
              ),
            )
          else if (trailing != null)
            trailing!,
          // Optional: Add an icon or button on the far right if needed later
          // Icon(Icons.chevron_right, color: theme.hintColor),
        ],
      ),
    );
  }
}