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

import SwiftUI
import Bedrock

// MARK: - Custom Color Picker Button

/// Custom color picker with premium gating
struct CustomColorPickerButton: View {
    @Binding var customColor: Color
    let isSelected: Bool
    let isPremiumUnlocked: Bool
    let onPremiumRequired: () -> Void

    /// Whether the custom color is locked
    private var isLocked: Bool { !isPremiumUnlocked }

    var body: some View {
        if isPremiumUnlocked {
            // Premium users get the full color picker
            VStack(spacing: Design.Spacing.xxSmall) {
                ColorPicker(
                    selection: $customColor,
                    supportsOpacity: false
                ) {
                    EmptyView()
                }
                .labelsHidden()
                .frame(width: Design.Size.avatarSmall, height: Design.Size.avatarSmall)
                .clipShape(.circle)
                .overlay(
                    Circle()
                        .strokeBorder(
                            isSelected ? Color.Accent.primary : Color.Border.subtle,
                            lineWidth: isSelected ? Design.LineWidth.thick : Design.LineWidth.thin
                        )
                )
                .shadow(
                    color: customColor.opacity(Design.Opacity.light),
                    radius: isSelected ? Design.Shadow.radiusSmall : 0
                )

                Text(String(localized: "Custom"))
                    .font(.system(size: Design.BaseFontSize.xSmall))
                    .foregroundStyle(.white.opacity(isSelected ? 1.0 : Design.Opacity.accent))
                    .lineLimit(1)
                    .minimumScaleFactor(Design.MinScaleFactor.tight)

                Image(systemName: "crown.fill")
                    .font(.system(size: Design.BaseFontSize.xxSmall))
                    .foregroundStyle(Color.Status.warning)
            }
            .padding(Design.Spacing.xSmall)
            .background(
                RoundedRectangle(cornerRadius: Design.CornerRadius.small)
                    .fill(isSelected ? Color.Accent.primary.opacity(Design.Opacity.subtle) : Color.clear)
            )
            .accessibilityLabel(String(localized: "Custom color"))
            .accessibilityAddTraits(isSelected ? .isSelected : [])
        } else {
            // Non-premium users see a locked button that shows paywall
            Button(action: onPremiumRequired) {
                VStack(spacing: Design.Spacing.xxSmall) {
                    ZStack {
                        // Rainbow gradient to show what's possible
                        Circle()
                            .fill(
                                AngularGradient(
                                    colors: [.red, .orange, .yellow, .green, .blue, .purple, .red],
                                    center: .center
                                )
                            )
                            .frame(width: Design.Size.avatarSmall, height: Design.Size.avatarSmall)
                            .overlay(
                                Circle()
                                    .strokeBorder(Color.Border.subtle, lineWidth: Design.LineWidth.thin)
                            )

                        // Lock overlay
                        Circle()
                            .fill(.black.opacity(Design.Opacity.medium))
                            .frame(width: Design.Size.avatarSmall, height: Design.Size.avatarSmall)

                        Image(systemName: "lock.fill")
                            .font(.system(size: Design.BaseFontSize.small))
                            .foregroundStyle(.white)
                    }

                    Text(String(localized: "Custom"))
                        .font(.system(size: Design.BaseFontSize.xSmall))
                        .foregroundStyle(.white.opacity(Design.Opacity.medium))
                        .lineLimit(1)
                        .minimumScaleFactor(Design.MinScaleFactor.tight)

                    Image(systemName: "crown")
                        .font(.system(size: Design.BaseFontSize.xxSmall))
                        .foregroundStyle(Color.Status.warning.opacity(Design.Opacity.medium))
                }
                .padding(Design.Spacing.xSmall)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(String(localized: "Custom color"))
            .accessibilityHint(String(localized: "Locked. Tap to unlock with Pro."))
        }
    }
}
