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

import SwiftUI
import Bedrock

struct BasicAppearanceSection: View {
    @Binding var style: ClockStyle
    @Binding var digitColor: Color
    @Binding var backgroundColor: Color
    
    var body: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.small) {
            SettingsSectionHeader(
                title: "Colors",
                systemImage: "paintpalette.fill",
                accentColor: AppAccent.primary
            )

            SettingsCard(backgroundColor: AppSurface.card, borderColor: AppBorder.subtle) {
                VStack(alignment: .leading, spacing: Design.Spacing.medium) {
                    VStack(alignment: .leading, spacing: Design.Spacing.xxSmall) {
                        Text("Color Theme")
                            .font(.subheadline.weight(.medium))
                            .foregroundStyle(AppTextColors.primary)

                        Picker("Color Theme", selection: $style.selectedColorTheme) {
                            ForEach(ClockStyle.availableColorThemes(), id: \.0) { theme in
                                HStack {
                                    Circle()
                                        .fill(themeColor(for: theme.0))
                                        .frame(width: 20, height: 20)
                                    Text(theme.1)
                                }
                                .tag(theme.0)
                            }
                        }
                        .pickerStyle(.menu)
                        .onChange(of: style.selectedColorTheme) { _, newTheme in
                            if newTheme != "Custom" {
                                style.applyColorTheme(newTheme)
                                digitColor = Color(hex: style.digitColorHex) ?? .white
                                backgroundColor = Color(hex: style.backgroundHex) ?? .black
                            }
                        }
                    }

                    if style.selectedColorTheme == "Custom" {
                        ColorPicker("Digit Color", selection: $digitColor, supportsOpacity: false)
                            .foregroundStyle(AppTextColors.primary)
                        ColorPicker("Background Color", selection: $backgroundColor, supportsOpacity: true)
                            .foregroundStyle(AppTextColors.primary)
                    }
                }
            }

            Text("Choose your favorite color theme or create a custom look.")
                .font(.caption)
                .foregroundStyle(AppTextColors.tertiary)
        }
        .onChange(of: backgroundColor) { _, newValue in
            style.backgroundHex = newValue.toHex() ?? AppConstants.Defaults.backgroundColorHex
            style.selectedColorTheme = "Custom"
            style.clearColorCache()
        }
        .onChange(of: digitColor) { _, newValue in
            style.digitColorHex = newValue.toHex() ?? AppConstants.Defaults.digitColorHex
            style.selectedColorTheme = "Custom"
            style.clearColorCache()
        }
    }
    
    /// Get the color for a theme
    private func themeColor(for theme: String) -> Color {
        switch theme {
        case "Custom":
            return .gray
        case "Night":
            return .white
        case "Day":
            return .black
        case "Red":
            return .red
        case "Orange":
            return .orange
        case "Yellow":
            return .yellow
        case "Green":
            return .green
        case "Blue":
            return .blue
        case "Purple":
            return .purple
        case "Pink":
            return .pink
        case "White":
            return .white
        default:
            return .gray
        }
    }
}
