import APIClient
import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

public struct LikedListItemView: View {
    var type: NotificationType
    var user: MiniProfile
    var totalUsers: Int
    var clipOrPlaylist: MiniClipOrPlaylist?
    var formattedCreateAt: String
    var userTapped: (MiniProfile) -> Void
    var clipOrPlaylistTapped: (MiniClipOrPlaylist) -> Void
    var clipOrPlaylistLoading: Bool

    var usersText: String {
        let displayName = user.displayName.trimmingCharacters(in: .whitespaces)
        if totalUsers == 1 {
            // Steve
            return displayName
        } else {
            // Steve and 3 more
            return L10n.FeatureProfile.userAndNMore(displayName, totalUsers - 1)
        }
    }

    var actionText: String {
        switch type {
        case .clipLike:
            return L10n.FeatureProfile.likedYourSong
        case .sceneLike:
            return L10n.FeatureProfile.likedYourScene
        case .playlistLike:
            return L10n.FeatureProfile.likedYourPlaylist
        case .announcement,
             .clipComment,
             .clipUnlike,
             .codeRedeem,
             .commentLike,
             .commentReply,
             .commentMention,
             .captionMention,
             .defaultValue,
             .delete,
             .follow,
             .hookComment,
             .hookCommentLike,
             .hookCommentMention,
             .hookCommentReply,
             .hookCreated,
             .hookLike,
             .videoCoverHookLike,
             .videoCoverHookComment,
             .videoCoverHookCommentLike,
             .videoCoverHookCommentMention,
             .videoCoverHookCommentReply,
             .invite,
             .inviteAccepted,
             .personaFavorite,
             .personaFollow,
             .personaUsed,
             .playlistComment,
             .playlistUnlike,
             .sceneComment,
             .sceneUnlike,
             .unfollow,
             .clipCreateFollowee,
             .restrictedByDefault,
             .clipRemix:
            return ""
            /*
                 Are no-op at the moment since only V1 is integrated
             */
        }
    }

    public var body: some View {
        content
            .listRowInsets(.init())
            .listRowBackground(Color.clear)
            .alignmentGuide(.listRowSeparatorLeading) { d in
                d[.leading] + 24
            }
    }

    private var content: some View {
        HStack(spacing: 16) {
            avatar

            VStack(alignment: .leading, spacing: 2) {
                Text(.init("[\(usersText)](suno://user-tapped) \(actionText)"))
                    .typographyV1(.body1)
                    .accentColor(.SemanticV1.textPrimary)
                    .foregroundColor(.SemanticV1.textTertiary)
                    .fixedSize(horizontal: false, vertical: true)
                    .lineLimit(2)
                    .environment(\.openURL, OpenURLAction { _ in
                        userTapped(user)
                        return .handled
                    })

                Text(formattedCreateAt)
                    .typographyV1(.caption4)
                    .foregroundColor(.SemanticV1.textSecondary)
                    .lineLimit(1)
            }
            .multilineTextAlignment(.leading)
            .frame(maxWidth: .infinity, alignment: .leading)

            if let clipOrPlaylist = clipOrPlaylist {
                cover(for: clipOrPlaylist)
            }
        }
        .contentShape(.rect)
        .padding(.vertical, 8)
    }

    @ViewBuilder
    private var avatar: some View {
        RemoteImage(url: user.avatarImageUrl, fallbackId: user.handle)
            .clipShape(.rect(cornerRadius: 20))
            .frame(width: 40, height: 40)
            .onTapGesture { userTapped(user) }
    }

    private func cover(for clipOrPlaylist: MiniClipOrPlaylist) -> some View {
        RemoteImage(url: clipOrPlaylist.imageUrl, fallbackId: clipOrPlaylist.id)
            .clipShape(.rect(cornerRadius: 4))
            .frame(width: 44, height: 56)
            .onTapGesture { clipOrPlaylistTapped(clipOrPlaylist) }
            .overlay {
                ProgressView()
                    .tint(Color.SemanticV1.iconInvert)
                    .controlSize(.mini)
                    .opacity(clipOrPlaylistLoading ? 1 : 0)
            }
    }
}