//
//  RecommendChannelItemView.swift
//  SodaLive
//
//  Created by klaus on 7/14/25.
//

import SwiftUI
import Kingfisher

struct RecommendChannelItemView: View {
    
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    
    let item: RecommendChannelResponse
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(spacing: 6) {
                KFImage(URL(string: item.creatorProfileImageUrl))
                    .cancelOnDisappear(true)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 80, height: 80, alignment: .top)
                    .clipShape(Circle())
                
                VStack(alignment: .leading, spacing: 4) {
                    Text(item.creatorNickname)
                        .font(.custom(Font.preBold.rawValue, size: 24))
                        .foregroundColor(.white)
                    
                    HStack(spacing: 4) {
                        Text("콘텐츠")
                            .font(.custom(Font.preRegular.rawValue, size: 18))
                            .foregroundColor(.white)
                        
                        Text("\(item.contentCount)")
                            .font(.custom(Font.preBold.rawValue, size: 18))
                            .foregroundColor(.white)
                    }
                }
            }
            .onTapGesture {
                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                    AppState.shared
                        .setAppStep(step: .creatorDetail(userId: item.channelId))
                } else {
                    AppState.shared
                        .setAppStep(step: .login)
                }
            }
            
            ForEach(0..<item.contentList.count, id: \.self) {
                RecommendChannelContentItemView(item: item.contentList[$0])
            }
        }
        .padding(20)
        .frame(width: 280, alignment: .leading)
        .background(Color(hex: "263238"))
        .cornerRadius(16)
    }
}

#Preview {
    RecommendChannelItemView(
        item: RecommendChannelResponse(
            channelId: 1,
            creatorNickname: "닉네임",
            creatorProfileImageUrl: "https://cf.sodalive.net/profile/34638/34638-profile-5bfc2bac-3278-48f8-b60c-1294b615f629-8832-1751707083877",
            contentCount: 55,
            contentList: [
                RecommendChannelContentItem(
                    contentId: 1,
                    title: "고품격 음악 밥솥",
                    thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
                    likeCount: 999,
                    commentCount: 99
                ),
                RecommendChannelContentItem(
                    contentId: 2,
                    title: "고품격 음악 밥솥",
                    thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
                    likeCount: 999,
                    commentCount: 99
                ),
                RecommendChannelContentItem(
                    contentId: 3,
                    title: "고품격 음악 밥솥",
                    thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
                    likeCount: 999,
                    commentCount: 99
                )
            ]
        )
    )
}