import SwiftUI

struct ClockSettingsView: View {
    @Binding var style: ClockStyle
    var onCommit: () -> Void = {}
    
    @State private var digitColor: Color = .white
    @State private var backgroundColor: Color = .black
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Time")) {
                    Toggle("24‑Hour", isOn: $style.use24Hour)
                    Toggle("Show Seconds", isOn: $style.showSeconds)
                    
                    // Show the AM/PM toggle only when 24-hour mode is OFF
                    if !style.use24Hour {
                        Toggle("Show AM/PM Badge", isOn: $style.showAmPmBadge)
                    }
                }
                
                Section(header: Text("Appearance")) {
                    ColorPicker("Digit Color", selection: $digitColor, supportsOpacity: false)
                    Toggle("Randomize Color (every minute)", isOn: $style.randomizeColor)
                    
                    Toggle("Stretched (auto-fit)", isOn: $style.stretched)
                    
                    // Show Size slider only when Stretched is OFF
                    if !style.stretched {
                        HStack {
                            Text("Size")
                            Slider(value: $style.digitScale, in: 0.0...1.0)
                            Text("\(Int((min(max(style.digitScale, 0.0), 1.0)) * 100))%")
                                .frame(width: 50, alignment: .trailing)
                        }
                    }
                    
                    HStack {
                        Text("Glow")
                        Slider(value: $style.glowIntensity, in: 0...1)
                        Text("\(Int(style.glowIntensity * 100))%")
                            .frame(width: 50, alignment: .trailing)
                    }
                    
                    HStack {
                        Text("Clock Opacity")
                        Slider(value: $style.clockOpacity, in: 0.0...1.0)
                        Text("\(Int(style.clockOpacity * 100))%")
                            .frame(width: 50, alignment: .trailing)
                    }
                }
                
                Section(header: Text("Overlays")) {
                    // Move Overlay Opacity slider here at the top of the section
                    HStack {
                        Text("Overlay Opacity")
                        Slider(value: $style.overlayOpacity, in: 0.0...1.0)
                        Text("\(Int(style.overlayOpacity * 100))%")
                            .frame(width: 50, alignment: .trailing)
                    }
                    
                    Toggle("Battery Level", isOn: $style.showBattery)
                    Toggle("Date", isOn: $style.showDate)
                }
                
                Section(header: Text("Background")) {
                    ColorPicker("Background Color", selection: $backgroundColor, supportsOpacity: true)
                    HStack {
                        Button("Night") {
                            backgroundColor = .black
                            digitColor = .white
                        }
                        Spacer()
                        Button("Day") {
                            backgroundColor = .white
                            digitColor = .black
                        }
                    }
                }
            }
            .navigationTitle("Clock Settings")
            .navigationBarTitleDisplayMode(.inline)
            .onAppear {
                digitColor = Color(hex: style.digitColorHex) ?? .white
                backgroundColor = Color(hex: style.backgroundHex) ?? .black
            }
            .onChange(of: digitColor) { newValue in
                style.digitColorHex = newValue.toHex() ?? "#FFFFFF"
                onCommit()
            }
            .onChange(of: backgroundColor) { newValue in
                style.backgroundHex = newValue.toHex() ?? "#000000"
                onCommit()
            }
        }
    }
}

#Preview {
    ClockSettingsView(style: .constant(ClockStyle()))
}
