import ComponentLibrary
import ComposableArchitecture
import FeatureBrandedAlert
import Localization
import SwiftUI
import Utilities

public struct LibraryScreenHeaderV2: View {
    let store: StoreOf<Library>
    @State private var hapticProxy = 0

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

    private var deprecateScenesBannerText: AttributedString {
        let date = L10n.FeatureCatalog.deprecateScenesBannerDate
        let description = L10n.FeatureCatalog.deprecateScenesBannerDescription(date)

        guard let range = description.range(of: date) else {
            var result = AttributedString(description)
            result.foregroundColor = UIColor.SemanticV1.textSecondary
            result.font = TypographyV1.caption4.uiFont
            return result
        }

        var result = AttributedString(description[..<range.lowerBound])
        result.foregroundColor = UIColor.SemanticV1.textSecondary
        result.font = TypographyV1.caption4.uiFont

        var dateText = AttributedString(date)
        dateText.foregroundColor = UIColor.SemanticV1.textPrimary
        dateText.font = TypographyV1.caption5.uiFont
        result.append(dateText)

        var endText = AttributedString(description[range.upperBound...])
        endText.foregroundColor = UIColor.SemanticV1.textSecondary
        endText.font = TypographyV1.caption4.uiFont
        result.append(endText)

        return result
    }

    public var body: some View {
        VStack(spacing: 16.0) {
            if store.shouldShowDeprecateScenesBanner {
                deprecateScenesBanner
                    .transition(.move(edge: .top).combined(with: .opacity))
            }

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 12) {
                    libraryCover(
                        image: Image.Library.likedSongs,
                        title: L10n.FeatureCatalog.liked,
                        onTap: {
                            store.send(.likedSongsTapped)
                        }
                    )

                    libraryCover(
                        image: Image.Library.playlists,
                        title: L10n.FeatureCatalog.playlists,
                        onTap: {
                            store.send(.playlistsTapped)
                        }
                    )

                    libraryCover(
                        image: Image.Library.hooks,
                        title: L10n.FeatureCatalog.hooks,
                        onTap: {
                            store.send(.hooksTapped)
                        }
                    )
                }
                .scrollTargetLayout()
            }
            .scrollTargetBehavior(.viewAligned)
            .scrollClipDisabled()
            .disablePressDelay()

            HStack {
                Text(L10n.FeatureCatalog.mySongs)
                    .typographyV1(.headline5.lineHeight(24).kerning(0.24))
                    .foregroundColor(Color.SemanticV1.textPrimary)

                Spacer()

                LibraryFilterMenu(store: store)
            }
        }
        .padding(.bottom, 8)
        .padding(.top, 8)
    }

    private func libraryCover(
        image: Image,
        title: String,
        onTap: @escaping () -> Void
    ) -> some View {
        Button {
            onTap()
        } label: {
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
                .contentShape(.rect)
                .containerRelativeFrame(.horizontal) { width, _ in
                    width * 0.375
                }
                .cornerRadius(12)
                .overlay(alignment: .bottomLeading) {
                    Text(title)
                        .typographyV1(.subtitleMedium.neueMontrealRegular())
                        .foregroundStyle(Color.SemanticV1.textPrimary)
                        .padding(.bottom, 8)
                        .padding(.leading, 12)
                }
                .glassBorder(shape: .rect(cornerRadius: 12))
                .environment(\.colorScheme, .dark)
        }
        .buttonStyle(ScaleButtonStyle(scaleAmount: 0.98))
    }
    var deprecateScenesBanner: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading, spacing: 4) {
                Text(L10n.FeatureCatalog.deprecateScenesBannerTitle)
                    .typographyV1(.body1)
                    .foregroundColor(Color.SemanticV1.textPrimary)

                Text(deprecateScenesBannerText)
                    .foregroundColor(.SemanticV1.textSecondary)
                    .typographyV1(.caption4)
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            Button(action: {
                store.send(.dismissDeprecateScenesBanner)
            }) {
                Image.Icon.close
                    .resizable()
                    .frame(width: 16, height: 16)
                    .foregroundColor(Color.SemanticV2.iconPrimary)
                    .padding(6)
                    .background(Color.SemanticV2.backgroundFogThin)
                    .clipShape(.circle)
                    .padding(.leading, 20)
            }
        }
        .padding(.leading, 20)
        .padding(.trailing, 12)
        .padding(.vertical, 12)
        .background(Color.SemanticV1.backgroundSecondary)
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .padding(.horizontal, 12)
    }
}