import 'package:flutter/material.dart';
import '../../models/device_model.dart';
import '../../providers/device_provider.dart';
import '../../constants.dart';
import 'package:lasertag_app/l10n/app_localizations.dart';

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

  @override
  Widget build(BuildContext context) {
    final provider = DeviceProvider(); // Später via "Provider"-Paket
    final l10n = AppLocalizations.of(context)!;

    return Scaffold(
      appBar: AppBar(title: Text(l10n.appTitle)),
      body: CustomScrollView(
        slivers: [
          // SEKTION 1: SPIEL-LEITER
          _buildHeader(context, l10n.typeLeader),
          _buildDeviceList(context, provider.dummyLeaders, isLeader: true),

          // SEKTION 2: AUSRÜSTUNG (Waffen, Westen, etc.)
          _buildHeader(context, "Meine Ausrüstung"), // Später in ARB übersetzen
          _buildDeviceList(context, provider.dummyEquip, isLeader: false),
        ],
      ),
    );
  }

  Widget _buildHeader(BuildContext context, String title) {
    return SliverToBoxAdapter(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
        child: Text(
          title.toUpperCase(),
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.bold,
            color: Theme.of(context).colorScheme.secondary,
            letterSpacing: 1.2,
          ),
        ),
      ),
    );
  }

  Widget _buildDeviceList(BuildContext context, List<LasertagDevice> devices, {required bool isLeader}) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          final device = devices[index];
          return ListTile(
            leading: Icon(
              isLeader ? Icons.hub : Icons.radar,
              color: Theme.of(context).colorScheme.primary,
            ),
            title: Text(device.name, style: const TextStyle(fontWeight: FontWeight.bold)),
            subtitle: Text("ID: ${device.id}"),
            trailing: const Icon(Icons.chevron_right),
            onTap: () {
              debugPrint("${device.name} ausgewählt für Konfiguration");
            },
          );
        },
        childCount: devices.length,
      ),
    );
  }
}