import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';

class DeviceManagerScreen extends StatelessWidget {
  const DeviceManagerScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF2E1065),
      body: SafeArea(
        child: Column(
          children: [
            _buildHeader(context),
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildSectionTitle('已连接设备'),
                    const SizedBox(height: 12),
                    _buildDeviceCard(name: 'Link-X Pro', id: '884-X9-01', battery: 85, isConnected: true),
                    const SizedBox(height: 24),
                    _buildSectionTitle('历史设备'),
                    const SizedBox(height: 12),
                    _buildDeviceCard(name: 'Link-S Mini', id: '772-M3-02', battery: 0, isConnected: false),
                    const SizedBox(height: 24),
                    _buildAddDeviceButton(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 8, 16, 16),
      child: Row(
        children: [
          IconButton(
            onPressed: () => Navigator.of(context).pop(),
            icon: Icon(LucideIcons.chevronLeft, color: Colors.white.withOpacity(0.7)),
          ),
          const Text('我的设备', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(title, style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2, color: Colors.white.withOpacity(0.4)));
  }

  Widget _buildDeviceCard({required String name, required String id, required int battery, required bool isConnected}) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.05),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.white.withOpacity(0.1)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Icon(LucideIcons.bluetooth, size: 24, color: isConnected ? const Color(0xFF34D399) : Colors.white.withOpacity(0.5)),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(name, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white)),
                      const SizedBox(height: 2),
                      Text('ID: $id', style: TextStyle(fontSize: 12, fontFamily: 'monospace', color: Colors.white.withOpacity(0.5))),
                    ],
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  color: isConnected ? const Color(0xFF34D399).withOpacity(0.2) : Colors.white.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Text(
                  isConnected ? '已连接' : '未连接',
                  style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: isConnected ? const Color(0xFF34D399) : Colors.white.withOpacity(0.5)),
                ),
              ),
            ],
          ),
          if (isConnected) ...[
            const SizedBox(height: 16),
            Row(
              children: [
                Icon(LucideIcons.battery, size: 16, color: const Color(0xFF34D399)),
                const SizedBox(width: 8),
                Text('$battery%', style: const TextStyle(fontSize: 14, fontFamily: 'monospace', color: Colors.white)),
              ],
            ),
          ],
        ],
      ),
    );
  }

  Widget _buildAddDeviceButton() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 16),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.1),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.white.withOpacity(0.2)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(LucideIcons.plus, size: 20, color: Colors.white.withOpacity(0.7)),
          const SizedBox(width: 8),
          Text('添加新设备', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.white.withOpacity(0.7))),
        ],
      ),
    );
  }
}