import ComponentLibrary
import SwiftUI
import APIClient

struct ModalPageView: View {
    let modal: Modal
    let onPrimaryCTA: () -> Void
    let onDismiss: () -> Void

    var body: some View {
        VStack(spacing: 0) {
            topBar

            Spacer()

            textStack

            button
        }
        .padding(.top, 18)
        .padding(.horizontal, 22)
        .background(backgroundView)
        .clipShape(RoundedRectangle(cornerRadius: 32))
        .shadow(color: .black.opacity(0.25), radius: 4, x: 0, y: 4)
    }

    // MARK: - Components

    @ViewBuilder
    private var topBar: some View {
        HStack {
            // Tag badge
            if let tag = modal.tag {
                Text(tag.text.text)
                    .typographyV1(.tag)
                    .foregroundColor(tagTextColor)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 6)
                    .background(tagBackgroundColor)
                    .clipShape(Capsule())
            }

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

    @ViewBuilder
    private var button: some View {
        if let primaryCta = modal.primaryCta {
            Button {
                onPrimaryCTA()
            } label: {
                Text(primaryCta.text.text)
                    .typographyV1(.cta)
                    .foregroundColor(primaryCtaTextColor)
                    .padding(.vertical, 12)
                    .padding(.horizontal, 14)
                    .background(primaryCtaBackgroundColor)
                    .clipShape(Capsule())
            }
            .padding(.bottom, 50)
        }
    }

    @ViewBuilder
    private var textStack: some View {
        VStack(spacing: 0) {
            Text(modal.titleText.text)
                .typographyV1(.title)
                .multilineTextAlignment(.center)
                .padding(.bottom, 12)
                .foregroundColor(modalTitleTextColor)

            Text(modal.subtitleText.text)
                .typographyV1(.detail)
                .multilineTextAlignment(.center)
                .padding(.bottom, 24)
                .foregroundColor(modalSubtitleTextColor)
        }
        .colorScheme(.dark)
        .foregroundStyle(Color.SemanticV2.foregroundPrimary)
    }

    @ViewBuilder
    private var backgroundView: some View {
        ZStack {
            if let urlString = modal.heroBackgroundImageUrlMobile {
                RemoteImage(url: urlString, fallbackId: "1", backgroundColor: modalHeroBackgroundColor)
                    .clipped()
            }
        }
    }
}

extension ModalPageView {
    private var tagTextColor: Color {
        if let color = modal.tag?.text.color {
            return Color(hex: color)
        }
        return Color.black
    }

    private var tagBackgroundColor: Color {
        if let color = modal.tag?.color {
            return Color(hex: color)
        }
        return Color.pink
    }

    private var primaryCtaTextColor: Color {
        if let color = modal.primaryCta?.text.color {
            return Color(hex: color)
        }
        return Color.black
    }

    private var primaryCtaBackgroundColor: Color {
        if let color = modal.primaryCta?.color {
            return Color(hex: color)
        }
        return Color.white
    }

    private var modalTitleTextColor: Color {
        if let color = modal.titleText.color {
            return Color(hex: color)
        }
        return Color.white
    }

    private var modalSubtitleTextColor: Color {
        if let color = modal.subtitleText.color {
            return Color(hex: color)
        }
        return Color.white
    }

    private var modalHeroBackgroundColor: Color {
        if let color = modal.heroBackgroundColor {
            return Color(hex: color)
        }
        return Color.black
    }
}

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

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

    static let tag: TypographyV1 = .init(
        name: "Tag Text",
        size: 14,
        style: .body,
        weight: .ppNeueMontrealMedium,
        lineHeight: 19
    )

    static let cta: TypographyV1 = .init(
        name: "CTA Text",
        size: 16,
        style: .body,
        weight: .ppNeueMontrealMedium,
        lineHeight: 24
    )
}