//
//  ColorPickerOverlay.swift
//  SelfieCam
//
//  Created by Matt Bruce on 1/4/26.
//

import SwiftUI
import Bedrock

// MARK: - Color Picker Overlay

struct ColorPickerOverlay: View {
    @Binding var selectedColor: Color
    @Binding var isPresented: Bool

    private let colors: [Color] = [
        .white, .red, .orange, .yellow, .green, .blue, .purple, .pink,
        .gray, .black, Color(red: 1.0, green: 0.5, blue: 0.0), // Coral
        Color(red: 0.5, green: 1.0, blue: 0.5), // Mint
        Color(red: 0.5, green: 0.5, blue: 1.0), // Periwinkle
        Color(red: 1.0, green: 0.5, blue: 1.0), // Magenta
    ]

    var body: some View {
        ZStack {
            // Semi-transparent background
            Color.black.opacity(Design.Opacity.medium)
                .ignoresSafeArea()

            // Color picker content
            VStack(spacing: Design.Spacing.medium) {
                // Header
                Text("Ring Light Color")
                    .font(.system(size: 18, weight: .semibold))
                    .foregroundStyle(Color.white)

                // Color grid
                LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 4), spacing: Design.Spacing.small) {
                    ForEach(colors, id: \.self) { color in
                        Circle()
                            .fill(color)
                            .frame(width: 50, height: 50)
                            .overlay(
                                Circle()
                                    .stroke(Color.white.opacity(selectedColor == color ? 1.0 : 0.3), lineWidth: selectedColor == color ? 3 : 1)
                            )
                            .onTapGesture {
                                selectedColor = color
                                isPresented = false
                            }
                    }
                }

                // Done button
                Button("Done") {
                    isPresented = false
                }
                .font(.system(size: 16, weight: .medium))
                .foregroundStyle(Color.white)
                .padding(.vertical, Design.Spacing.small)
            }
            .padding(Design.Spacing.large)
            .background(
                RoundedRectangle(cornerRadius: Design.CornerRadius.large)
                    .fill(Color.black.opacity(Design.Opacity.strong))
            )
            .padding(.horizontal, Design.Spacing.large)
        }
    }
}
