// ===========================================================================
// FILE: lib/widgets/music_theme_widgets.dart
// ===========================================================================

import 'package:flutter/material.dart';
import '../core/app_colors.dart';
import 'painters.dart';

class MusicCassetteCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final Color neonColor;
  final double angle;
  final IconData leftIcon;
  final IconData rightIcon;
  final VoidCallback onTap;
  final AppThemeType themeType;

  const MusicCassetteCard({
    super.key,
    required this.title,
    required this.subtitle,
    required this.neonColor,
    required this.angle,
    required this.leftIcon,
    required this.rightIcon,
    required this.onTap,
    required this.themeType
  });

  @override
  Widget build(BuildContext context) {
    // Calcoliamo la scala in base all'altezza dello schermo per strizzare la cassetta
    final double screenHeight = MediaQuery.of(context).size.height;
    final double vScale = (screenHeight / 850.0).clamp(0.65, 1.0);

    return Transform.rotate(
      angle: angle,
      child: GestureDetector(
        onTap: onTap,
        child: Container(
          height: 125 * vScale, // Altezza dinamica!
          margin: EdgeInsets.symmetric(vertical: 8 * vScale, horizontal: 10),
          padding: EdgeInsets.all(12 * vScale),
          decoration: BoxDecoration(
              color: const Color(0xFF22222A),
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.black87, width: 2),
              boxShadow: [
                BoxShadow(color: neonColor.withOpacity(0.5), blurRadius: 25, spreadRadius: 2),
                const BoxShadow(color: Colors.black54, offset: Offset(5, 10), blurRadius: 15)
              ]
          ),
          child: Column(
            children: [
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                      color: neonColor.withOpacity(0.15),
                      borderRadius: BorderRadius.circular(4),
                      border: Border.all(color: neonColor.withOpacity(0.5), width: 1.5)
                  ),
                  child: Row(
                    children: [
                      Padding(
                          padding: EdgeInsets.symmetric(horizontal: 12 * vScale),
                          child: Icon(leftIcon, color: neonColor, size: 28 * vScale)
                      ),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Flexible(
                                child: FittedBox(
                                    fit: BoxFit.scaleDown,
                                    child: Text(title, style: getSharedTextStyle(themeType, TextStyle(color: Colors.white, fontSize: 20 * vScale, fontWeight: FontWeight.w900, shadows: [Shadow(color: neonColor, blurRadius: 10)])))
                                )
                            ),
                            Flexible(
                                child: FittedBox(
                                    fit: BoxFit.scaleDown,
                                    child: Text(subtitle, style: getSharedTextStyle(themeType, TextStyle(color: Colors.white70, fontSize: 11 * vScale, fontWeight: FontWeight.bold)))
                                )
                            ),
                          ],
                        ),
                      ),
                      Padding(
                          padding: EdgeInsets.symmetric(horizontal: 12 * vScale),
                          child: Icon(rightIcon, color: neonColor, size: 28 * vScale)
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 10 * vScale),
              Container(
                height: 35 * vScale,
                width: 180 * vScale,
                decoration: BoxDecoration(
                    color: const Color(0xFF0D0D12),
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: Colors.white24, width: 1)
                ),
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(height: 2, width: 120 * vScale, color: const Color(0xFF333333)),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [ _buildSpool(vScale), _buildSpool(vScale) ]
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSpool(double vScale) {
    return Container(
      width: 26 * vScale,
      height: 26 * vScale,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white70,
          border: Border.all(color: Colors.black87, width: 5 * vScale)
      ),
      child: Center(
          child: Container(
              width: 6 * vScale,
              height: 6 * vScale,
              decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.black)
          )
      ),
    );
  }
}

class MusicKnobCard extends StatelessWidget {
  final String title;
  final IconData icon;
  final VoidCallback onTap;
  final AppThemeType themeType;
  final Color? iconColor;

  const MusicKnobCard({
    super.key,
    required this.title,
    required this.icon,
    required this.onTap,
    required this.themeType,
    this.iconColor
  });

  @override
  Widget build(BuildContext context) {
    // Adattiamo anche le manopole in base all'altezza dello schermo
    final double screenHeight = MediaQuery.of(context).size.height;
    final double vScale = (screenHeight / 850.0).clamp(0.65, 1.0);

    return GestureDetector(
      onTap: onTap,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 65 * vScale,
            height: 65 * vScale,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: const Color(0xFF222222),
              border: Border.all(color: const Color(0xFF111111), width: 2),
              boxShadow: const [
                BoxShadow(color: Colors.black87, blurRadius: 10, offset: Offset(2, 6)),
                BoxShadow(color: Colors.white12, blurRadius: 2, offset: Offset(-1, -1))
              ],
            ),
            child: Padding(
              padding: EdgeInsets.all(6.0 * vScale),
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: Colors.black54, width: 1),
                  gradient: const SweepGradient(colors: [Color(0xFF555555), Color(0xFFAAAAAA), Color(0xFF555555), Color(0xFF222222), Color(0xFF555555)]),
                ),
                child: Padding(
                  padding: EdgeInsets.all(4.0 * vScale),
                  child: Container(
                    decoration: const BoxDecoration(shape: BoxShape.circle, color: Color(0xFF1A1A1A)),
                    child: Center(child: Icon(icon, color: iconColor ?? Colors.white70, size: 20 * vScale)),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 10 * vScale),
          FittedBox(
              fit: BoxFit.scaleDown,
              child: Text(title, style: getSharedTextStyle(themeType, TextStyle(color: Colors.white70, fontSize: 11 * vScale, fontWeight: FontWeight.bold, letterSpacing: 1.0)))
          ),
        ],
      ),
    );
  }
}