//
//  AdvancedAppearanceSection.swift
//  TheNoiseClock
//
//  Created by Matt Bruce on 9/7/25.
//

import SwiftUI
import Bedrock

struct AdvancedAppearanceSection: View {
    @Binding var style: ClockStyle
    
    var body: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.small) {
            SettingsSectionHeader(
                title: String(localized: "settings.advanced_appearance.section_title", defaultValue: "Advanced Appearance"),
                systemImage: "sparkles",
                accentColor: AppAccent.primary
            )

            SettingsCard(backgroundColor: AppSurface.card, borderColor: AppBorder.subtle) {
                VStack(spacing: 0) {
                    SettingsNavigationRow(
                        title: String(localized: "settings.advanced_appearance.digit_animation.title", defaultValue: "Digit Animation"),
                        subtitle: style.digitAnimationStyle.displayName,
                        backgroundColor: .clear
                    ) {
                        SettingsSelectionView(
                            selection: $style.digitAnimationStyle,
                            options: DigitAnimationStyle.allCases,
                            title: String(localized: "settings.advanced_appearance.digit_animation.title", defaultValue: "Digit Animation"),
                            toString: { $0.displayName }
                        )
                    }

                    SettingsDivider(color: AppBorder.subtle)

                    SettingsToggle(
                        title: String(localized: "settings.advanced_appearance.randomize_color.title", defaultValue: "Randomize Color"),
                        subtitle: String(localized: "settings.advanced_appearance.randomize_color.subtitle", defaultValue: "Shift the color every minute"),
                        isOn: $style.randomizeColor,
                        accentColor: AppAccent.primary
                    )

                    SettingsDivider(color: AppBorder.subtle)

                    SettingsSlider(
                        title: String(localized: "settings.advanced_appearance.glow.title", defaultValue: "Glow"),
                        subtitle: String(localized: "settings.advanced_appearance.glow.subtitle", defaultValue: "Adjust the glow intensity"),
                        value: $style.glowIntensity,
                        in: 0.0...1.0,
                        step: 0.01,
                        format: SliderFormat.percentage,
                        accentColor: AppAccent.primary
                    )

                    SettingsDivider(color: AppBorder.subtle)

                    SettingsSlider(
                        title: String(localized: "settings.advanced_appearance.clock_opacity.title", defaultValue: "Clock Opacity"),
                        subtitle: String(localized: "settings.advanced_appearance.clock_opacity.subtitle", defaultValue: "Set the clock transparency"),
                        value: $style.clockOpacity,
                        in: 0.0...1.0,
                        step: 0.01,
                        format: SliderFormat.percentage,
                        accentColor: AppAccent.primary
                    )
                }
            }

            Text(String(localized: "settings.advanced_appearance.footer", defaultValue: "Fine-tune the visual appearance of your clock."))
                .font(.caption)
                .foregroundStyle(AppTextColors.tertiary)
        }
    }
}