import ComponentLibrary
import Localization
import SwiftUI

public struct MadlibsHeaderView<Step: Hashable>: View {
    public struct LeadingButtonConfig {
        let icon: MenuButtonType
        let showing: Bool
        let disabled: Bool
        let action: () -> Void

        public init(
            icon: MenuButtonType,
            showing: Bool,
            disabled: Bool,
            action: @escaping () -> Void
        ) {
            self.icon = icon
            self.showing = showing
            self.disabled = disabled
            self.action = action
        }
    }

    public struct SkipButtonConfig {
        let showing: Bool
        let disabled: Bool
        let action: () -> Void

        public init(
            showing: Bool,
            disabled: Bool,
            action: @escaping () -> Void
        ) {
            self.showing = showing
            self.disabled = disabled
            self.action = action
        }
    }

    let leadingButton: LeadingButtonConfig
    let skipButton: SkipButtonConfig

    let showProgressBar: Bool
    let progressSteps: [Step]
    let isStepActive: (Step) -> Bool

    public init(
        leadingButton: LeadingButtonConfig,
        skipButton: SkipButtonConfig,
        showProgressBar: Bool,
        progressSteps: [Step],
        isStepActive: @escaping (Step) -> Bool
    ) {
        self.leadingButton = leadingButton
        self.skipButton = skipButton
        self.showProgressBar = showProgressBar
        self.progressSteps = progressSteps
        self.isStepActive = isStepActive
    }

    public var body: some View {
        HStack(spacing: MadlibsContainerConstants.headerSpacing) {
            leadingButtonView
                .opacity(leadingButton.showing ? 1.0 : 0)
                .disabled(leadingButton.disabled)
                .animation(.easeInOut, value: leadingButton.showing)

            progressBar
                .opacity(showProgressBar ? 1.0 : 0)
                .animation(.easeInOut, value: showProgressBar)

            skipButtonView
                .disabled(skipButton.disabled)
                .opacity(skipButton.showing ? 1.0 : 0.5)
                .animation(.easeInOut, value: skipButton.showing)
        }
    }

    private var leadingButtonView: some View {
        ToolbarButton(
            leadingButton.icon,
            color: Color.SemanticV1.iconInvert,
            background: Material.ultraThin,
            action: leadingButton.action
        )
        .environment(\.colorScheme, .light)
    }

    private var progressBar: some View {
        // Pre-calculate progress data to avoid repeated calls
        let progressData = progressSteps.map { step in
            (step: step, isActive: isStepActive(step))
        }

        return ZStack {
            HStack(spacing: MadlibsContainerConstants.progressBarCapsuleSpacing) {
                ForEach(progressData, id: \.step) { _ in
                    Capsule()
                        .fill(Color.SemanticV2.backgroundFogThin)
                        .frame(height: MadlibsContainerConstants.progressBarHeight)
                        .frame(maxWidth: .infinity)
                }
            }

            AuraShaderView(
                id: "progress-bar-continuous-background",
                appPreset: .pinkYellowOrange,
                morphSpeed: 0.008,
                scale: 0.2,
                isPaused: false
            )
            .frame(height: MadlibsContainerConstants.progressBarHeight)
            .mask(
                HStack(spacing: MadlibsContainerConstants.progressBarCapsuleSpacing) {
                    ForEach(progressData, id: \.step) { data in
                        Capsule()
                            .fill(data.isActive ? Color.black : Color.clear)
                            .frame(height: MadlibsContainerConstants.progressBarHeight)
                            .frame(maxWidth: .infinity)
                    }
                }
            )
        }
        .animation(.easeInOut(duration: 0.2), value: progressData.map(\.isActive))
    }

    private var skipButtonView: some View {
        Button(
            action: skipButton.action,
            label: {
                Text(L10n.FeatureOnboarding.skip)
                    .typographyV1(.subtitleMedium)
                    .foregroundStyle(Color.SemanticV1.alwaysLighterBeige)
                    .opacity(0.5)
            }
        )
    }
}