//
//  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) {
                SettingsToggle(
                    title: "Randomize Color",
                    subtitle: "Shift the color every minute",
                    isOn: $style.randomizeColor,
                    accentColor: AppAccent.primary
                )

                SettingsToggle(
                    title: "Stretched (Auto‑Fit)",
                    subtitle: "Fit the clock to available space",
                    isOn: $style.stretched,
                    accentColor: AppAccent.primary
                )

                if !style.stretched {
                    SettingsSlider(
                        title: "Size",
                        subtitle: "Manual scaling when auto‑fit is off",
                        value: $style.digitScale,
                        in: 0.0...1.0,
                        step: 0.01,
                        format: SliderFormat.percentage,
                        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)
        }
    }
}
