//
//  ContentMainCreatorRankingView.swift
//  SodaLive
//
//  Created by klaus on 1/5/25.
//

import SwiftUI
import Kingfisher

struct ContentMainCreatorRankingView: View {
    
    @StateObject var viewModel = ContentMainCreatorRankingViewModel()
    
    let rankingCrawns = ["ic_crown_1", "ic_crown_2", "ic_crown_3"]
    let rankingColors = [
        [Color(hex: "ffdc00"), Color(hex: "ffb600")],
        [Color(hex: "ffffff"), Color(hex: "9f9f9f")],
        [Color(hex: "e6a77a"), Color(hex: "c67e4a")],
        [Color(hex: "ffffff").opacity(0), Color(hex: "ffffff").opacity(0)]
    ]
    
    var body: some View {
        ZStack {
            if let response = viewModel.creatorRankingResponse {
                VStack(alignment: .leading, spacing: 13.3) {
                    VStack(alignment: .leading, spacing: 4) {
                        if let coloredTitle = response.coloredTitle, let color = response.color {
                            let titleArray = response.title.components(separatedBy: coloredTitle)
                            HStack(spacing: 0) {
                                Text(titleArray[0])
                                    .font(.custom(Font.bold.rawValue, size: 18.3))
                                    .foregroundColor(Color.grayee)
                                
                                Text(coloredTitle)
                                    .font(.custom(Font.bold.rawValue, size: 18.3))
                                    .foregroundColor(Color(hex: color))
                                
                                if titleArray.count > 1 {
                                    Text(titleArray[1])
                                        .font(.custom(Font.bold.rawValue, size: 18.3))
                                        .foregroundColor(Color.grayee)
                                }
                            }
                        } else {
                            Text(response.title)
                                .font(.custom(Font.bold.rawValue, size: 18.3))
                                .foregroundColor(Color.grayee)
                        }
                        
                        if let desc = response.desc {
                            VStack(spacing: 8) {
                                Text("\(desc)")
                                    .font(.custom(Font.bold.rawValue, size: 14.7))
                                    .foregroundColor(Color.grayee)
                                
                                Text("※ 인기 크리에이터의 순위는 매주 업데이트됩니다.")
                                    .font(.custom(Font.light.rawValue, size: 13.3))
                                    .foregroundColor(Color.graybb)
                            }
                            .padding(.vertical, 8)
                            .frame(maxWidth: .infinity)
                            .background(Color.gray22)
                            .padding(.top, 13.3)
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .frame(alignment: .leading)
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 13.3) {
                            ForEach(0..<response.creators.count, id: \.self) { index in
                                let creator = response.creators[index]
                                VStack(spacing: 0) {
                                    if let _ = response.desc {
                                        ZStack {
                                            KFImage(URL(string: creator.profileImageUrl))
                                                .cancelOnDisappear(true)
                                                .downsampling(size: CGSize(width: 90, height: 90))
                                                .resizable()
                                                .clipShape(Circle())
                                                .frame(width: 90, height: 90)
                                                .overlay(
                                                    Circle()
                                                        .stroke(
                                                            AngularGradient(colors: rankingColors[index < 4 ? index : 3], center: .center),
                                                            lineWidth: 3
                                                        )
                                                )
                                            
                                            if index < 3 {
                                                VStack(alignment: .trailing, spacing: 0) {
                                                    Spacer()
                                                    
                                                    Image(rankingCrawns[index])
                                                        .resizable()
                                                        .frame(width: 37, height: 37)
                                                }
                                                .frame(width: 93.3, height: 93.3, alignment: .trailing)
                                            }
                                        }
                                        .frame(width: 93.3, height: 93.3)
                                    } else {
                                        KFImage(URL(string: creator.profileImageUrl))
                                            .cancelOnDisappear(true)
                                            .downsampling(size: CGSize(width: 93, height: 93))
                                            .resizable()
                                            .clipShape(Circle())
                                            .frame(width: 93, height: 93)
                                    }
                                    
                                    Text(creator.nickname)
                                        .font(.custom(Font.medium.rawValue, size: 11.3))
                                        .foregroundColor(Color.grayee)
                                        .lineLimit(1)
                                        .frame(width: 93.3)
                                        .padding(.top, 13.3)
                                    
                                    Text(creator.tags)
                                        .font(.custom(Font.medium.rawValue, size: 10))
                                        .foregroundColor(Color.button)
                                        .lineLimit(1)
                                        .frame(width: 93.3)
                                        .padding(.top, 3.3)
                                }
                                .contentShape(Rectangle())
                                .onTapGesture {
                                    AppState.shared
                                        .setAppStep(step: .creatorDetail(userId: creator.id))
                                }
                            }
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .frame(alignment: .leading)
                }
            } else {
                EmptyView()
                    .frame(width: 0, height: 0)
            }
        }
        .onAppear {
            viewModel.getCreatorRanking()
        }
    }
}

#Preview {
    ContentMainCreatorRankingView()
}