tetraq/lib/ui/settings/settings_screen.dart

// ===========================================================================
// FILE: lib/ui/settings/settings_screen.dart
// ===========================================================================

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../core/theme_manager.dart';
import '../../core/app_colors.dart';
import '../../services/storage_service.dart';
import '../../widgets/painters.dart';

class SettingsScreen extends StatefulWidget {
  const SettingsScreen({super.key});

  @override
  State<SettingsScreen> createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  @override
  Widget build(BuildContext context) {
    final themeManager = context.watch<ThemeManager>();
    final theme = themeManager.currentColors;
    final themeType = themeManager.currentThemeType;

    int playerLevel = StorageService.instance.playerLevel;

    final double screenHeight = MediaQuery.of(context).size.height;
    final double vScale = (screenHeight / 920.0).clamp(0.7, 1.2);

    return Scaffold(
      backgroundColor: theme.background,
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        toolbarHeight: 80 * vScale,
        title: Text(
            "SELEZIONA TEMA",
            style: getSharedTextStyle(themeType, TextStyle(
                fontWeight: FontWeight.w900,
                color: Colors.white,
                letterSpacing: 2.0,
                fontSize: 20 * vScale,
                shadows: [Shadow(color: Colors.black.withOpacity(0.8), blurRadius: 5, offset: const Offset(2, 2))]
            ))
        ),
        centerTitle: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
        iconTheme: IconThemeData(color: Colors.white, size: 28 * vScale),
      ),
      body: Stack(
        children: [
          Container(color: themeType == AppThemeType.doodle ? Colors.white : theme.background),

          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: const AssetImage('assets/images/sfondo_temi.jpg'),
                  fit: BoxFit.cover,
                  colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken),
                ),
              ),
            ),
          ),

          ListView(
            padding: EdgeInsets.only(top: 120 * vScale, left: 20 * vScale, right: 20 * vScale, bottom: 40 * vScale),
            physics: const BouncingScrollPhysics(),
            children: [
              _ThemeCard(
                title: "Quaderno",
                subtitle: "Sfondo a quadretti, tratto a penna",
                type: AppThemeType.doodle,
                previewColors: AppColors.doodle,
                requiredLevel: 1,
                currentLevel: playerLevel,
                vScale: vScale,
              ),
              SizedBox(height: 25 * vScale),
              _ThemeCard(
                title: "Cyberpunk",
                subtitle: "Nero profondo, luci al neon",
                type: AppThemeType.cyberpunk,
                previewColors: AppColors.cyberpunk,
                requiredLevel: 3,
                currentLevel: playerLevel,
                vScale: vScale,
              ),
              SizedBox(height: 25 * vScale),
              _ThemeCard(
                title: "8-Bit Arcade",
                subtitle: "Sale giochi, fosfori verdi e pixel",
                type: AppThemeType.arcade,
                previewColors: AppColors.arcade,
                requiredLevel: 7,
                currentLevel: playerLevel,
                vScale: vScale,
              ),
              SizedBox(height: 25 * vScale),
              _ThemeCard(
                title: "Grimorio",
                subtitle: "Incantesimi antichi, rune magiche",
                type: AppThemeType.grimorio,
                previewColors: AppColors.grimorio,
                requiredLevel: 10,
                currentLevel: playerLevel,
                vScale: vScale,
              ),
              SizedBox(height: 25 * vScale),
              _ThemeCard(
                title: "Musica",
                subtitle: "Vinili, cassette e vibrazioni sonore",
                type: AppThemeType.music,
                previewColors: AppColors.music,
                requiredLevel: 15,
                currentLevel: playerLevel,
                vScale: vScale,
              ),
              SizedBox(height: 40 * vScale),
            ],
          ),
        ],
      ),
    );
  }
}

class _ThemeCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final AppThemeType type;
  final ThemeColors previewColors;
  final int requiredLevel;
  final int currentLevel;
  final double vScale;

  const _ThemeCard({
    required this.title,
    required this.subtitle,
    required this.type,
    required this.previewColors,
    required this.requiredLevel,
    required this.currentLevel,
    required this.vScale,
  });

  @override
  Widget build(BuildContext context) {
    final themeManager = context.watch<ThemeManager>();
    bool isSelected = themeManager.currentThemeType == type;
    bool isLocked = currentLevel < requiredLevel;

    String? bgImage;
    if (type == AppThemeType.doodle) bgImage = 'assets/images/doodle_bg.jpg';
    if (type == AppThemeType.cyberpunk) bgImage = 'assets/images/cyber_bg.jpg';
    if (type == AppThemeType.music) bgImage = 'assets/images/music_bg.jpg';
    if (type == AppThemeType.arcade) bgImage = 'assets/images/arcade.jpg';
    if (type == AppThemeType.grimorio) bgImage = 'assets/images/grimorio.jpg';

    Border border;
    // OMBRA MARCATA PER DARE SPESSORE AL TASTO (Offset 0, 10)
    List<BoxShadow> shadows = [
      BoxShadow(color: Colors.black.withOpacity(0.8), offset: const Offset(0, 10), blurRadius: 15)
    ];

    if (type == AppThemeType.doodle) {
      border = Border.all(color: isSelected ? previewColors.playerBlue : const Color(0xFF111122).withOpacity(0.8), width: isSelected ? 4 : 2);
      if (isSelected) shadows.add(const BoxShadow(color: Color(0xFF111122), offset: Offset(4, 5)));
    } else if (type == AppThemeType.cyberpunk || type == AppThemeType.music) {
      border = Border.all(color: isSelected ? previewColors.playerBlue : previewColors.gridLine.withOpacity(0.8), width: isSelected ? 3 : 1.5);
      if (isSelected) shadows.add(BoxShadow(color: previewColors.playerBlue.withOpacity(0.8), blurRadius: 25, spreadRadius: 3));
    } else if (type == AppThemeType.arcade) {
      border = Border.all(color: isSelected ? previewColors.gridLine : Colors.white54, width: isSelected ? 4 : 2);
      if (isSelected) shadows.add(BoxShadow(color: previewColors.gridLine.withOpacity(0.5), offset: const Offset(4, 4)));
    } else {
      border = Border.all(color: isSelected ? Colors.amber : previewColors.gridLine.withOpacity(0.8), width: isSelected ? 3 : 1.5);
      if (isSelected) shadows.add(BoxShadow(color: Colors.amber.withOpacity(0.6), blurRadius: 20));
    }

    return GestureDetector(
      onTap: () {
        if (isLocked) {
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("Gioca per raggiungere il Liv. $requiredLevel e sbloccare questo tema!", style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
                backgroundColor: Colors.redAccent,
                behavior: SnackBarBehavior.floating,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                duration: const Duration(seconds: 2),
              )
          );
          return;
        }
        themeManager.setTheme(type);
        Navigator.pop(context);
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        height: 140 * vScale, // Leggermente più alto per ospitare la cornice del testo
        padding: EdgeInsets.symmetric(horizontal: 20 * vScale, vertical: 15 * vScale),
        decoration: BoxDecoration(
          color: isLocked ? Colors.black87 : previewColors.background,
          borderRadius: BorderRadius.circular(20),
          border: border,
          boxShadow: shadows, // L'ombra per lo spessore viene applicata qui
          image: bgImage != null ? DecorationImage(
            image: AssetImage(bgImage!),
            fit: BoxFit.cover,
            // Scuriamo leggermente di più le card per far risaltare la targa chiara
            colorFilter: type == AppThemeType.doodle
                ? ColorFilter.mode(Colors.white.withOpacity(isLocked ? 0.9 : 0.4), BlendMode.lighten)
                : ColorFilter.mode(Colors.black.withOpacity(isLocked ? 0.85 : 0.5), BlendMode.darken),
          ) : null,
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Opacity(
              opacity: isLocked ? 0.3 : 1.0,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    // --- LA NUOVA CORNICE CHIARA PER IL TESTO ---
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 15 * vScale, vertical: 10 * vScale),
                      decoration: BoxDecoration(
                          color: Colors.white.withOpacity(0.9), // Sfondo chiaro semitrasparente
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(color: Colors.white, width: 2),
                          boxShadow: [
                            BoxShadow(color: Colors.black.withOpacity(0.3), blurRadius: 8, offset: const Offset(2, 4))
                          ]
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          FittedBox(
                            fit: BoxFit.scaleDown,
                            alignment: Alignment.centerLeft,
                            child: Text(
                                title,
                                style: getSharedTextStyle(
                                    type,
                                    TextStyle(
                                      fontSize: (type == AppThemeType.arcade ? 15 : 22) * vScale,
                                      fontWeight: FontWeight.w900,
                                      color: const Color(0xFF111122), // Testo scuro per contrastare lo sfondo chiaro
                                      letterSpacing: type == AppThemeType.music ? 1.5 : 0.5,
                                    )
                                )
                            ),
                          ),
                          SizedBox(height: 4 * vScale),
                          FittedBox(
                            fit: BoxFit.scaleDown,
                            alignment: Alignment.centerLeft,
                            child: Text(
                                subtitle,
                                style: getSharedTextStyle(
                                    type,
                                    TextStyle(
                                      fontSize: (type == AppThemeType.arcade ? 8 : 12) * vScale,
                                      color: const Color(0xFF333344), // Grigio scuro per il sottotitolo
                                      fontWeight: FontWeight.bold,
                                    )
                                )
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(width: 15 * vScale),
                  Container(
                      width: 28 * vScale, height: 28 * vScale,
                      decoration: BoxDecoration(
                          color: previewColors.playerRed,
                          shape: type == AppThemeType.arcade ? BoxShape.rectangle : BoxShape.circle,
                          border: Border.all(color: Colors.white, width: 2), // Bordino bianco per far risaltare il colore
                          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.5), blurRadius: 5, offset: const Offset(1, 2))]
                      )
                  ),
                  SizedBox(width: 12 * vScale),
                  Container(
                      width: 28 * vScale, height: 28 * vScale,
                      decoration: BoxDecoration(
                          color: previewColors.playerBlue,
                          shape: type == AppThemeType.arcade ? BoxShape.rectangle : BoxShape.circle,
                          border: Border.all(color: Colors.white, width: 2), // Bordino bianco per far risaltare il colore
                          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.5), blurRadius: 5, offset: const Offset(1, 2))]
                      )
                  ),
                ],
              ),
            ),
            if (isLocked)
              Container(
                padding: EdgeInsets.symmetric(horizontal: 16 * vScale, vertical: 10 * vScale),
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.95),
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(color: previewColors.playerRed.withOpacity(0.8), width: 2),
                  boxShadow: [BoxShadow(color: previewColors.playerRed.withOpacity(0.5), blurRadius: 20)],
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.lock_rounded, color: Colors.white, size: 20 * vScale),
                    SizedBox(width: 8 * vScale),
                    Text(
                        "LIV. $requiredLevel",
                        style: getSharedTextStyle(type, TextStyle(color: Colors.white, fontWeight: FontWeight.w900, fontSize: 16 * vScale, letterSpacing: 2))
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}