import APIClient
import ComponentLibrary
import ComposableArchitecture
import FeatureClipDetail
import Localization
import SwiftUI

@Reducer
public struct PlaylistListItem {
    @ObservableState
    public struct State: Identifiable, Equatable {
        public var id: String { playlist.id }
        public var playlist: Playlist
        var position: Int

        public init(playlist: Playlist, position: Int) {
            self.playlist = playlist
            self.position = position
        }
    }

    public enum Action {
        case playlistTapped(Playlist)
    }

    public init() {}

    public var body: some ReducerOf<Self> {
        Reduce { _, action in
            switch action {
            case .playlistTapped:
                return .none
            }
        }
    }
}

public struct PlaylistListItemView: View {
    let store: StoreOf<PlaylistListItem>

    public init(store: StoreOf<PlaylistListItem>) {
        self.store = store
    }

    public var body: some View {
        itemView
            .listRowInsets(.init())
            .listRowBackground(Color.clear)
            .alignmentGuide(.listRowSeparatorLeading) { d in
                d[.leading] + 24
            }
            .onTapGesture {
                store.send(.playlistTapped(store.playlist))
            }
    }

    private var itemView: some View {
        HStack(spacing: 16) {
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                    .foregroundColor(Color.SemanticV1.backgroundTertiary)
                    .frame(width: 48, height: 48)

                if store.playlist.imageUrl != nil {
                    RemoteImage(url: store.playlist.imageUrl, fallbackId: store.playlist.id)
                        .clipShape(.rect(cornerRadius: 8))
                        .frame(width: 48, height: 48)
                } else {
                    GradientSpinner(size: .large)
                }
            }
            .frame(width: 48, height: 48)

            VStack(alignment: .leading, spacing: 0) {
                Text(store.playlist.name)
                    .typographyV1(.body3)
                    .foregroundColor(.SemanticV1.textPrimary)
                    .lineLimit(1)

                HStack(spacing: 8) {
                    if store.playlist.totalResults == 0 {
                        infoView(icon: Image.Icon.note, text: L10n.FeatureClipList.noSongsYet)
                            .opacity(store.playlist.playCount == nil ? 0 : 1)
                    } else {
                        infoView(icon: Image.Icon.note, text: "\(store.playlist.totalResults)")
                            .opacity(store.playlist.playCount == nil ? 0 : 1)
                    }
                    infoView(icon: Image.Icon.userFilled, text: store.playlist.userDisplayName ?? "")
                        .opacity(store.playlist.userDisplayName == nil ? 0 : 1)
                }
                .padding(.top, 4)
            }
            .multilineTextAlignment(.leading)
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .contentShape(.rect)
        .padding(.vertical, 8)
    }

    private func infoView(icon: Image, text: String, isNumberStyle: Bool = false) -> some View {
        HStack(spacing: 4) {
            icon
                .resizable()
                .frame(width: 15, height: 15, alignment: .center)
                .foregroundStyle(Color.SemanticV1.iconPrimary)

            Text(text)
                .lineLimit(1)
                .typographyV1(isNumberStyle ? .monospace : .caption2)
                .foregroundStyle(Color.SemanticV1.textPrimary.opacity(0.5))
        }
    }
}