import 'package:flutter/material.dart';

import 'package:asciineverdie/l10n/app_localizations.dart';
import 'package:asciineverdie/src/shared/retro_colors.dart';
import 'package:asciineverdie/src/shared/widgets/retro_widgets.dart';

/// 레트로 스타일 사운드 설정 다이얼로그
class RetroSoundDialog extends StatelessWidget {
  const RetroSoundDialog({
    super.key,
    required this.bgmVolume,
    required this.sfxVolume,
    required this.onBgmChanged,
    required this.onSfxChanged,
  });

  final double bgmVolume;
  final double sfxVolume;
  final ValueChanged<double> onBgmChanged;
  final ValueChanged<double> onSfxChanged;

  @override
  Widget build(BuildContext context) {
    final background = RetroColors.backgroundOf(context);
    final gold = RetroColors.goldOf(context);

    return Dialog(
      backgroundColor: Colors.transparent,
      child: Container(
        constraints: const BoxConstraints(maxWidth: 360),
        decoration: BoxDecoration(
          color: background,
          border: Border.all(color: gold, width: 2),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 타이틀
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(12),
              color: gold.withValues(alpha: 0.2),
              child: Text(
                L10n.of(context).soundTitle,
                style: TextStyle(
                  fontFamily: 'PressStart2P',
                  fontSize: 10,
                  color: gold,
                ),
                textAlign: TextAlign.center,
              ),
            ),
            // 슬라이더
            Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  _buildVolumeSlider(
                    context,
                    icon: bgmVolume == 0 ? Icons.music_off : Icons.music_note,
                    label: L10n.of(context).bgmLabel,
                    value: bgmVolume,
                    onChanged: onBgmChanged,
                  ),
                  const SizedBox(height: 16),
                  _buildVolumeSlider(
                    context,
                    icon: sfxVolume == 0 ? Icons.volume_off : Icons.volume_up,
                    label: L10n.of(context).sfxLabel,
                    value: sfxVolume,
                    onChanged: onSfxChanged,
                  ),
                ],
              ),
            ),
            // 확인 버튼
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
              child: SizedBox(
                width: double.infinity,
                child: RetroTextButton(
                  text: L10n.of(context).ok,
                  onPressed: () => Navigator.pop(context),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildVolumeSlider(
    BuildContext context, {
    required IconData icon,
    required String label,
    required double value,
    required ValueChanged<double> onChanged,
  }) {
    final gold = RetroColors.goldOf(context);
    final border = RetroColors.borderOf(context);
    final percentage = (value * 100).round();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(icon, size: 18, color: gold),
            const SizedBox(width: 8),
            Text(
              label,
              style: TextStyle(
                fontFamily: 'PressStart2P',
                fontSize: 16,
                color: RetroColors.textPrimaryOf(context),
              ),
            ),
            const Spacer(),
            Text(
              '$percentage%',
              style: TextStyle(
                fontFamily: 'PressStart2P',
                fontSize: 16,
                color: gold,
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        SliderTheme(
          data: SliderThemeData(
            trackHeight: 8,
            activeTrackColor: gold,
            inactiveTrackColor: border,
            thumbColor: RetroColors.goldLightOf(context),
            thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 8),
            overlayColor: gold.withValues(alpha: 0.2),
            trackShape: const RectangularSliderTrackShape(),
          ),
          child: Slider(value: value, onChanged: onChanged, divisions: 10),
        ),
      ],
    );
  }
}