//
//  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: "Advanced Appearance",
                systemImage: "sparkles",
                accentColor: AppAccent.primary
            )

            SettingsCard(backgroundColor: AppSurface.card, borderColor: AppBorder.subtle) {
                VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
                    Text("Digit Animation")
                        .font(.subheadline)
                        .foregroundStyle(AppTextColors.secondary)
                    
                    Picker("Digit Animation", selection: $style.digitAnimationStyle) {
                        ForEach(DigitAnimationStyle.allCases, id: \.self) { animation in
                            Text(animation.displayName).tag(animation)
                        }
                    }
                    .pickerStyle(.menu)
                    .tint(AppAccent.primary)
                }
                .padding(.vertical, Design.Spacing.xSmall)

                SettingsToggle(
                    title: "Randomize Color",
                    subtitle: "Shift the color every minute",
                    isOn: $style.randomizeColor,
                    accentColor: AppAccent.primary
                )

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

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

            Text("Fine-tune the visual appearance of your clock.")
                .font(.caption)
                .foregroundStyle(AppTextColors.tertiary)
        }
    }
}
