import SwiftUI

struct CreatorChannelHomeView: View {
    let creatorId: Int

    @StateObject private var viewModel = CreatorChannelHomeViewModel()
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(spacing: 0) {
                titleBar
                tabBar

                if viewModel.selectedTab != .home || viewModel.isApiFailedPlaceholderVisible {
                    CreatorChannelPlaceholderTabView(title: viewModel.selectedTab.title)
                } else {
                    homeContent
                }
            }

            if viewModel.isLoading {
                LoadingView()
            }
        }
        .navigationBarBackButtonHidden(true)
        .onAppear {
            if viewModel.hasLoaded == false {
                viewModel.fetchHome(creatorId: creatorId)
            }
        }
        .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
    }

    private var titleBar: some View {
        HStack(spacing: 12) {
            Button {
                dismiss()
            } label: {
                Image(systemName: "chevron.left")
                    .foregroundColor(.white)
                    .frame(width: 44, height: 44)
            }

            Spacer()

            if let creator = viewModel.response?.creator {
                Button {
                    if creator.isFollow {
                        viewModel.unfollow(creatorId: creator.creatorId)
                    } else {
                        viewModel.follow(creatorId: creator.creatorId, notify: true)
                    }
                } label: {
                    Text(creator.isFollow ? I18n.CreatorChannelHome.following : I18n.CreatorChannelHome.follow)
                        .font(.system(size: 13, weight: .semibold))
                        .foregroundColor(creator.isFollow ? .white : .black)
                        .padding(.horizontal, 12)
                        .frame(height: 30)
                        .background(creator.isFollow ? Color.gray33 : Color.soda400)
                        .clipShape(Capsule())
                }
            }
        }
        .frame(height: 56)
        .padding(.horizontal, 8)
        .background(Color.black)
    }

    private var tabBar: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20) {
                ForEach(CreatorChannelHomeTab.allCases, id: \.self) { tab in
                    Button {
                        viewModel.selectedTab = tab
                    } label: {
                        VStack(spacing: 8) {
                            Text(tab.title)
                                .font(.system(size: 15, weight: viewModel.selectedTab == tab ? .semibold : .regular))
                                .foregroundColor(viewModel.selectedTab == tab ? .white : Color.gray500)

                            Rectangle()
                                .fill(viewModel.selectedTab == tab ? Color.soda400 : Color.clear)
                                .frame(height: 2)
                        }
                    }
                }
            }
            .padding(.horizontal, 20)
        }
        .frame(height: 48)
        .background(Color.black)
    }

    private var homeContent: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                if let creator = viewModel.response?.creator {
                    Text(creator.nickname)
                        .font(.system(size: 24, weight: .bold))
                        .foregroundColor(.white)

                    Text(I18n.CreatorChannelHome.followerCount(creator.followerCount.comma()))
                        .font(.system(size: 14))
                        .foregroundColor(Color.gray500)
                } else {
                    CreatorChannelPlaceholderTabView(title: CreatorChannelHomeTab.home.title)
                        .frame(minHeight: 240)
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(20)
        }
        .background(Color.black)
    }
}