import ComponentLibrary
import Foundation
import Localization
import SwiftUI

struct HooksFeedOnboardingView: View {
    let onDismiss: () -> Void

    var body: some View {
        ZStack {
            landingVideo

            VStack(spacing: 16) {
                titleText
                descriptionText
                exploreButton
            }
            .frame(maxHeight: .infinity, alignment: .bottom)
            .padding(.bottom, 130)
            .padding(.horizontal, 30)
        }
        .background(Color.black)
        .environment(\.colorScheme, .dark)
        .dynamicTypeSize((.small) ... .xxLarge)
    }

    private var titleText: some View {
        Text(L10n.FeatureHooks.onboardingTitlePartOne)
            .foregroundStyle(.white)
            .inlineTypographyV1(.titleText) +
            Text(L10n.FeatureHooks.onboardingTitlePartTwo)
            .foregroundStyle(.white)
            .inlineTypographyV1(.titleTextItalics)
    }

    private var descriptionText: some View {
        Text(L10n.FeatureHooks.onboardingDescription)
            .typographyV1(.descriptionText)
            .foregroundStyle(.white)
            .multilineTextAlignment(.center)
    }

    private var exploreButton: some View {
        Button {
            onDismiss()
        } label: {
            Text(L10n.FeatureHooks.explore)
                .typographyV1(.buttonText)
                .foregroundStyle(.black)
                .multilineTextAlignment(.center)
                .padding(.horizontal, 35)
                .padding(.vertical, 19)
                .background(Color.SemanticV2.foregroundPrimary)
                .cornerRadius(100)
        }
    }

    private var landingVideo: some View {
        ZStack {
            if let url = URL(string: HooksFeedOnboardingView.videoUrlString) {
                // FIXME: video does not loop
                LoopingVideoPlayer(
                    playableUrl: url,
                    restartBeforePlaying: false,
                    autoPlay: true,
                    isPlaying: .constant(true),
                    isMuted: true,
                    videoGravity: .resizeAspectFill,
                    fallbackView: { landingVideoThumbnail }
                )
            } else {
                landingVideoThumbnail
            }

            LinearGradient(
                /// Slightly darker on the bottom, and slightly more vibrant at the top
                gradient: Gradient(stops: [
                    .init(color: Color.clear, location: 0),
                    .init(color: Color.black.opacity(0.1), location: 0.4),
                    .init(color: Color.black.opacity(0.3), location: 0.5),
                    .init(color: Color.black.opacity(0.96), location: 0.7),
                    .init(color: Color.black, location: 1.0),
                ]),
                startPoint: .top,
                endPoint: .bottom
            )
        }
        .ignoresSafeArea()
    }

    private var landingVideoThumbnail: some View {
        Image.Assets.hooksFeedOnboardingVideoThumbnail
            .resizable()
            .scaledToFill()
            .clipped()
    }
}

private extension HooksFeedOnboardingView {
    static let videoUrlString = "https://cdn-o.suno.com/suno_mobile_onboarding.mp4"
}

private extension TypographyV1 {
    static let titleText: TypographyV1 = .init(
        name: "Title Text",
        size: 28,
        style: .body,
        weight: .ppEditorialNewLight,
        kerning: 0.56,
        lineHeight: 24
    )

    static let titleTextItalics: TypographyV1 = .init(
        name: "Title Text",
        size: 28,
        style: .body,
        weight: .ppEditorialNewLightItalic,
        kerning: 0.56,
        lineHeight: 24
    )

    static let descriptionText: TypographyV1 = .init(
        name: "Description Text",
        size: 16,
        style: .body,
        weight: .ppNeueMontrealRegular,
        kerning: 0.32,
        lineHeight: 24
    )

    static let buttonText: TypographyV1 = .init(
        name: "Button Text",
        size: 18,
        style: .body,
        weight: .ppNeueMontrealMedium,
        kerning: 0.36,
        lineHeight: 24
    )
}