import APIClient
import ComponentLibrary
import SwiftUI
import Utilities

public struct SnippetRowView: View {
    let songTitle: String
    let songTags: String
    let displayTags: String?
    let clipModel: Clip.HighLevelModelVersion
    let thumbnail: String?
    let isLiked: Bool
    let isCurrentClip: Bool
    let isPlaying: Bool
    let onRowTapped: () -> Void

    private let tagFont: TypographyV1 = .tagText
    @State private var isAnimatingWaveform: Bool = false

    public init(
        songTitle: String,
        songTags: String,
        displayTags: String?,
        clipModel: Clip.HighLevelModelVersion,
        thumbnail: String?,
        isLiked: Bool,
        isCurrentClip: Bool,
        isPlaying: Bool,
        onRowTapped: @escaping () -> Void
    ) {
        self.songTitle = songTitle
        self.songTags = songTags
        self.displayTags = displayTags
        self.clipModel = clipModel
        self.thumbnail = thumbnail
        self.isLiked = isLiked
        self.isCurrentClip = isCurrentClip
        self.isPlaying = isPlaying
        self.onRowTapped = onRowTapped
    }

    public var body: some View {
        Button {
            onRowTapped()
        } label: {
            HStack(spacing: 12) {
                songThumbnail
                songTitleAndStyleTags
                Spacer()
                if isLiked {
                    likedIcon
                        .padding(.trailing, 24)
                }
            }
        }
        .environment(\.colorScheme, .dark)
        .padding(12)
        .frame(maxWidth: .infinity)
        .background {
            if isCurrentClip {
                Color.SemanticV2.backgroundFogThin
            }
        }
    }

    @ViewBuilder
    private var songThumbnail: some View {
        RemoteImage(url: thumbnail, fallbackId: songTitle)
            .frame(width: 46, height: 62)
            .cornerRadius(9.2)
            .overlay(alignment: .center) {
                if isCurrentClip {
                    waveform
                }
            }
    }

    @ViewBuilder
    private var waveform: some View {
        Waveform(isAnimating: isAnimatingWaveform)
            .frame(width: 16, height: 16)
            .environment(\.colorScheme, .dark)
            .transition(.opacity)
            .onDisappear { isAnimatingWaveform = false }
            .onAppear { isAnimatingWaveform = isPlaying }
            .onChange(of: isPlaying) { _, isPlaying in isAnimatingWaveform = isPlaying }
    }

    @ViewBuilder
    private var title: some View {
        Text(songTitle)
            .foregroundColor(.SemanticV1.textPrimary)
            .typographyV1(.titleText)
            .lineLimit(1)
            .truncationMode(.tail)
    }

    @ViewBuilder
    private var styleTags: some View {
        if let displayTags = displayTags, !displayTags.isEmpty, clipModel == .v4_5 {
            TagText(displayTags, fontSize: 12, font: .tagText, textColor: .SemanticV1.textSecondary)
        } else if !songTags.isEmpty {
            TagText(songTags)
        }
    }

    @ViewBuilder
    private var songTitleAndStyleTags: some View {
        VStack(alignment: .leading, spacing: 6) {
            title
            styleTags
        }
    }

    @ViewBuilder
    private var likedIcon: some View {
        Image.Icon.thumbsUpV2
            .renderingMode(.template)
            .resizable()
            .frame(width: 18, height: 18)
            .foregroundColor(.SemanticV1.foregroundInactive)
    }
}

private extension TypographyV1 {
    static let tagText: TypographyV1 = .init(
        name: "Tag Text",
        size: 12,
        style: .body,
        weight: .ppNeueMontrealRegular,
        kerning: 0.24,
        lineHeight: 14
    )

    static let titleText: TypographyV1 = .init(
        name: "Title Text",
        size: 14,
        style: .body,
        weight: .ppNeueMontrealMedium,
        kerning: 0.28,
        lineHeight: 18
    )
}