import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../providers/app_settings_provider.dart';
import '../../theme/etm_theme.dart';

/// Écran "Écrans actifs" — choisir et réordonner les onglets du menu principal.
class ScreensSettingsScreen extends StatelessWidget {
  const ScreensSettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final settings = context.watch<AppSettingsProvider>();

    return Scaffold(
      backgroundColor: const Color(0xFFF0F2F5),
      appBar: AppBar(
        title: const Text('Écrans actifs'),
        backgroundColor: Colors.white,
        foregroundColor: const Color(0xFF1A1A2E),
        elevation: 0,
      ),
      body: Column(
        children: [
          // Sous-titre
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
            child: Text(
              'Choisissez les écrans visibles dans le menu principal',
              style: const TextStyle(
                  color: Color(0xFF6B7280), fontSize: 13),
            ),
          ),

          Expanded(
            child: ReorderableListView.builder(
              padding: const EdgeInsets.all(12),
              itemCount: settings.screens.length,
              onReorder: (oldIdx, newIdx) {
                if (newIdx > oldIdx) newIdx--;
                context
                    .read<AppSettingsProvider>()
                    .reorderScreens(oldIdx, newIdx);
              },
              itemBuilder: (context, i) {
                final screen = settings.screens[i];
                return _ScreenTile(
                  key: ValueKey(screen.id),
                  screen: screen,
                  onToggle: (v) => context
                      .read<AppSettingsProvider>()
                      .setScreenVisible(screen.id, v),
                );
              },
            ),
          ),

          // Astuce
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 8, 16, 20),
            child: Row(
              children: const [
                Icon(Icons.drag_handle_rounded,
                    size: 16, color: Color(0xFF9CA3AF)),
                SizedBox(width: 6),
                Text(
                  'Faites glisser pour réordonner',
                  style: TextStyle(
                      fontSize: 12, color: Color(0xFF9CA3AF)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _ScreenTile extends StatelessWidget {
  final AppScreen    screen;
  final ValueChanged<bool> onToggle;

  const _ScreenTile({
    super.key,
    required this.screen,
    required this.onToggle,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 8),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        child: Row(
          children: [
            // Checkbox
            Checkbox(
              value: screen.visible,
              activeColor: ETMTheme.accentColor,
              onChanged: (v) => onToggle(v ?? false),
            ),
            const SizedBox(width: 4),
            // Icône
            Icon(screen.icon,
                size: 22, color: const Color(0xFF1A1A2E)),
            const SizedBox(width: 12),
            // Label
            Expanded(
              child: Text(
                screen.label,
                style: TextStyle(
                  fontSize: 14,
                  color: screen.visible
                      ? const Color(0xFF1A1A2E)
                      : const Color(0xFF9CA3AF),
                ),
              ),
            ),
            // Drag handle
            const Icon(Icons.drag_handle_rounded,
                size: 22, color: Color(0xFF9CA3AF)),
          ],
        ),
      ),
    );
  }
}