import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

public struct V5AnnouncementView: View {
    private let store: StoreOf<V5Announcement>

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

    public var body: some View {
        ZStack {
            /// Dark background overlay
            Color.black.opacity(0.75)
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            /// Announcement banner
            VStack(spacing: 0) {
                topBar

                Spacer()
                    .frame(minHeight: 100, maxHeight: 300)

                textStack

                button
            }
            .padding(.top, 18)
            .padding([.horizontal, .bottom], 22)
            .background(
                Image(.v5AnnouncementBackground)
                    .resizable()
                    .scaledToFill()
            )
            .clipShape(RoundedRectangle(cornerRadius: 32))
            .shadow(color: .black.opacity(0.25), radius: 4, x: 0, y: 4)
            .padding(.horizontal, 40)
        }
        .ignoresSafeArea()
    }

    private var topBar: some View {
        HStack {
            BadgeLabel(L10n.FeatureCreateClip.newModelTooltipBadge)

            Spacer()

            ToolbarButton(.close, color: Color.SemanticV2.foregroundPrimary) {
                store.send(.dismiss)
            }
            .foregroundStyle(Color.SemanticV2.foregroundPrimary)
            .background(Color.SemanticV2.backgroundPrimary)
            .clipShape(.circle)
            .frame(width: 40, height: 40)
            .colorScheme(.light)
        }
    }

    private var textStack: some View {
        VStack(spacing: 0) {
            Text(L10n.FeatureAnnouncements.v5AnnouncementModalTitle)
                .typographyV1(.title)
                .multilineTextAlignment(.center)
                .padding(.bottom, 12)

            Text(L10n.FeatureAnnouncements.v5AnnouncementModalDescription)
                .typographyV1(.detail)
                .multilineTextAlignment(.center)
                .padding(.bottom, 35)
        }
        .colorScheme(.dark)
        .foregroundStyle(Color.SemanticV2.foregroundPrimary)
    }

    private var button: some View {
        Button(store.ctaButtonText) {
            store.send(.ctaButtonTapped)
        }
        .buttonStyle(CapsuleButtonStyle())
        .colorScheme(.light)
    }
}

private extension TypographyV1 {
    static let title: TypographyV1 = .init(
        name: "Announcement Title",
        size: 27,
        style: .title,
        weight: .editorialNewLight,
        lineHeight: 31
    )

    static let detail: TypographyV1 = .init(
        name: "Announcement Detail",
        size: 14,
        style: .body,
        weight: .ppNeueMontrealMedium,
        lineHeight: 17
    )
}