import SwiftUI

struct CreatorChannelSeriesTabView: View {
    let creatorId: Int
    let isOwnCreatorChannel: Bool
    let onTapSeries: (Int) -> Void

    @StateObject private var viewModel = CreatorChannelSeriesViewModel()
    @State private var isSortPopupPresented = false

    var body: some View {
        content
            .background(Color.black)
            .onAppear {
                if viewModel.hasLoaded == false {
                    viewModel.fetchFirstPage(creatorId: creatorId)
                }
            }
            .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
    }

    private var content: some View {
        VStack(spacing: 0) {
            if isEmptyState {
                emptyStateView
            } else {
                ZStack(alignment: .topTrailing) {
                    VStack(spacing: 0) {
                        CreatorChannelSortBar(
                            selectedSort: viewModel.selectedSort,
                            totalCount: viewModel.response?.seriesCount,
                            onTapSort: {
                                isSortPopupPresented.toggle()
                            }
                        )

                        LazyVStack(spacing: 0) {
                            ForEach(viewModel.series) { series in
                                CreatorChannelSeriesListItem(
                                    series: series,
                                    showsOwnershipProgress: isOwnCreatorChannel == false
                                ) {
                                    onTapSeries(series.seriesId)
                                }
                                .onAppear {
                                    viewModel.fetchNextPageIfNeeded(creatorId: creatorId, currentItem: series)
                                }
                            }

                            if viewModel.isLoadingNextPage {
                                ProgressView()
                                    .padding(.vertical, SodaSpacing.s20)
                            }
                        }
                        .padding(.bottom, isOwnCreatorChannel ? 70 : SodaSpacing.s20)
                    }

                    if isSortPopupPresented {
                        Color.black
                            .opacity(0.001)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .onTapGesture {
                                isSortPopupPresented = false
                            }

                        CreatorChannelSortContextPopup(selectedSort: viewModel.selectedSort) { sort in
                            viewModel.selectSort(sort, creatorId: creatorId)
                            isSortPopupPresented = false
                        }
                        .padding(.top, 52)
                        .padding(.trailing, SodaSpacing.s14)
                        .zIndex(1)
                    }
                }
                .frame(maxWidth: .infinity, alignment: .topTrailing)
                .onChange(of: viewModel.selectedSort) { _ in
                    isSortPopupPresented = false
                }
                .onDisappear {
                    isSortPopupPresented = false
                }
            }
        }
    }

    private var isEmptyState: Bool {
        guard viewModel.hasLoaded, let response = viewModel.response else { return false }
        return response.seriesCount == 0
    }

    private var emptyStateView: some View {
        Text(I18n.CreatorChannelSeries.emptyMessage)
            .appFont(.body3)
            .foregroundColor(Color.gray500)
            .multilineTextAlignment(.center)
            .frame(maxWidth: .infinity)
            .padding(.top, 20)
            .padding(.bottom, 48)
    }
}

struct CreatorChannelSeriesTabView_Previews: PreviewProvider {
    static var previews: some View {
        CreatorChannelSeriesTabView(
            creatorId: 1,
            isOwnCreatorChannel: false,
            onTapSeries: { _ in }
        )
        .background(Color.black)
        .previewLayout(.sizeThatFits)
    }
}