import APIClient
import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

public struct InviteShareCardView: View {
    let avatarUrl: String?
    let avatarFallbackId: String

    public init(
        avatarUrl: String?,
        avatarFallbackId: String
    ) {
        self.avatarUrl = avatarUrl
        self.avatarFallbackId = avatarFallbackId
    }

    public var body: some View {
        VStack(spacing: 0) {
            cardContent
                .padding(.top, 76)
            Spacer()
            cta
            Spacer().frame(height: 24)
        }
        .frame(width: 290, height: 380)
        .background {
            ZStack {
                Image.Assets.inviteShareCardBackground

                LinearGradient(
                    stops: [
                        Gradient.Stop(color: Color.SemanticV1.backgroundInvert.opacity(0), location: 0.00),
                        Gradient.Stop(color: Color.SemanticV1.backgroundInvert.opacity(0.6), location: 1.00),
                    ],
                    startPoint: UnitPoint(x: 0.5, y: 0.05),
                    endPoint: UnitPoint(x: 0.5, y: 0.6)
                )
                .environment(\.colorScheme, .light)
            }
        }
        .clipShape(RoundedRectangle(cornerRadius: 18))
        .overlay {
            RoundedRectangle(cornerRadius: 18)
                .inset(by: 1)
                .stroke(.white, lineWidth: 2.15)
                .mask(
                    LinearGradient(gradient: Gradient(stops: [
                        .init(color: Color.white.opacity(0.8), location: 0.0),
                        .init(color: Color.white.opacity(0.0), location: 0.5),
                    ]), startPoint: .top, endPoint: .bottom)
                )
        }
        .clipped()
        .shadow(color: .black.opacity(0.25), radius: 8.61151, x: 0, y: 17.22302)
    }

    @ViewBuilder
    var cardContent: some View {
        VStack(spacing: 8) {
            RemoteImage(url: avatarUrl, fallbackId: avatarFallbackId)
                .frame(width: 98, height: 98)
                .clipShape(.circle)

            Text(L10n.FeatureShare.inviteFriendsCardHeader)
                .typographyV1(.headline2.editorialNewLight())
                .foregroundColor(.SemanticV1.textOnDark)
                .multilineTextAlignment(.center)
                .lineLimit(1)

            Text(L10n.FeatureShare.inviteFriendsCardSubtitle)
                .typographyV1(.caption.neueMontrealMedium())
                .foregroundColor(.SemanticV1.textOnDark)
                .multilineTextAlignment(.center)
                .lineLimit(1)
        }
    }

    @ViewBuilder
    var cta: some View {
        HStack(spacing: 12) {
            AppIcon()
                .frame(width: 38, height: 38)
                .clipShape(RoundedRectangle(cornerRadius: 8))
            Text(L10n.FeatureShare.inviteFriendsCardCta)
                .typographyV1(.body1Wide)
                .foregroundStyle(Color.SemanticV1.textOnDark)
        }
        .padding([.vertical, .leading], 8)
        .padding(.trailing, 16)
        .background(Color.SemanticV1.backgroundPrimary.opacity(0.25))
        .environment(\.colorScheme, .light)
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}