import APIClient
import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

@Reducer
public struct AudioCreateStyleSelection {
    @ObservableState
    public struct State: Equatable {
        public var selectedStyle: BlendedCreatePrompt.AudioCreateStyle
        public var imageUrl: String?
    }

    public enum Action {
        case selectStyle(BlendedCreatePrompt.AudioCreateStyle)
        case dismiss
    }

    @Dependency(\.dismiss) var dismiss

    public var body: some ReducerOf<Self> {
        Reduce<State, Action> { state, action in
            switch action {
            case .dismiss:
                return .run { _ in await dismiss() }

            case .selectStyle(let style):
                state.selectedStyle = style
                return .send(.dismiss)
            }
        }
    }
}

public struct AudioCreateStyleSelectionView: View {
    let store: StoreOf<AudioCreateStyleSelection>

    public init(store: StoreOf<AudioCreateStyleSelection>) {
        self.store = store
    }

    public var body: some View {
        VStack(spacing: 8) {
            ForEach(BlendedCreatePrompt.AudioCreateStyle.allCases, id: \.self) { style in
                Button {
                    store.send(.selectStyle(style))
                } label: {
                    VStack(spacing: 16) {
                        timeline(style)
                            .padding(.horizontal, 63)
                        Text(style.description)
                            .typographyV1(.body1)
                            .foregroundStyle(Color.SemanticV1.textPrimary)
                            .frame(maxWidth: .infinity)
                            .padding(.horizontal, 16)
                    }
                    .padding(.top, 46)
                    .padding(.bottom, 38)
                    .background(
                        RoundedRectangle(cornerRadius: 24)
                            .stroke(Color.SemanticV1.textLink, lineWidth: store.selectedStyle == style ? 1 : 0)
                            .fill(Color.SemanticV1.backgroundPrimary)
                            .shadow(color: Color.SemanticV1.backgroundBlockOverlay.opacity(0.1), radius: 6, x: 0, y: 4)
                    )
                    .contentShape(.rect)
                }
                .buttonStyle(ScaleButtonStyle(scaleAmount: 0.98))
            }
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 16)
        .toolbar(.hidden, for: .navigationBar)
        .sheetNavigationBar(
            leading: { EmptyView() },
            center: {
                Text(L10n.FeatureCreateClip.createStyleTitle)
                    .typographyV1(.headline4)
                    .foregroundStyle(Color.SemanticV1.textPrimary)
            },
            trailing: {
                ToolbarButton(.close, background: Color.SemanticV1.backgroundQuaternary) {
                    store.send(.dismiss)
                }
            }
        )
        .animation(.spring, value: store.selectedStyle)
        .selfSizingPresentation()
        .background(Color.SemanticV1.backgroundSecondary)
    }

    @ViewBuilder
    private func timeline(_ style: BlendedCreatePrompt.AudioCreateStyle) -> some View {
        let timelineImage = Image.Assets.timelineBackground.resizable().aspectRatio(contentMode: .fill)

        ZStack {
            switch style {
            case .cover:
                RoundedRectangle(cornerRadius: 4)
                    .overlay(timelineImage)
                    .overlay {
                        HStack(spacing: 0) {
                            ForEach(0 ..< 8) { _ in
                                RemoteImage(url: store.imageUrl, fallbackId: "1")
                                    .frame(width: 40, height: 56)
                                    .clipped()
                                    .opacity(0.2)
                            }
                        }
                    }
                    .frame(height: 56)
                    .overlay(
                        Image.Icon.note
                            .foregroundStyle(Color.SemanticV1.textInvert)
                    )

            case .extend:
                Rectangle()
                    .overlay(timelineImage)
                    .overlay(alignment: .leading) {
                        RemoteImage(url: store.imageUrl, fallbackId: "1")
                            .frame(width: 40, height: 56)
                            .clipped()
                    }
                    .frame(height: 56)
                    .overlay(
                        Image.Icon.note
                            .foregroundStyle(Color.SemanticV1.textInvert)
                    )
            }
        }
        .cornerRadius(4)
    }
}

extension BlendedCreatePrompt.AudioCreateStyle {
    var description: String {
        switch self {
        case .cover: L10n.FeatureCreateClip.coverDescription
        case .extend: L10n.FeatureCreateClip.extendDescription
        }
    }
}