//
//  SeriesItemView.swift
//  SodaLive
//
//  Created by klaus on 7/11/25.
//

import SwiftUI
import Kingfisher

struct SeriesItemView: View {
    
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    
    let item: SeriesListItem
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            ZStack {
                DownsampledKFImage(
                    url: URL(string: item.coverImage),
                    size: CGSize(width: 160, height: 227)
                )
                .cornerRadius(16)
                .clipped()
                
                VStack(alignment: .leading, spacing: 0) {
                    HStack(spacing: 0) {
                        if item.isPopular {
                            Text("인기")
                                .font(.custom(Font.preRegular.rawValue, size: 12))
                                .foregroundColor(.white)
                                .padding(.horizontal, 10)
                                .padding(.vertical, 3)
                                .background(Color(hex: "EF5247"))
                                .cornerRadius(16, corners: [.topLeft, .bottomRight])
                        }
                        
                        if item.isNew {
                            Text("신작")
                                .font(.custom(Font.preRegular.rawValue, size: 12))
                                .foregroundColor(.white)
                                .padding(.horizontal, 10)
                                .padding(.vertical, 3)
                                .background(
                                    LinearGradient(
                                        gradient: Gradient(stops: [
                                            .init(color: Color(hex: "0001B1"), location: 0.24),
                                            .init(color: Color(hex: "3B5FF1"), location: 1.0)
                                        ]),
                                        startPoint: .top,
                                        endPoint: .bottom
                                    )
                                )
                                .cornerRadius(16, corners: [.topLeft, .bottomRight])
                        }
                        
                        if item.isComplete {
                            Text("완결")
                                .font(.custom(Font.preRegular.rawValue, size: 12))
                                .foregroundColor(.white)
                                .padding(.horizontal, 10)
                                .padding(.vertical, 3)
                                .background(Color.black.opacity(0.7))
                                .cornerRadius(16, corners: [.topLeft, .bottomRight])
                        }
                    }
                    
                    Spacer()
                    
                    HStack {
                        Spacer()
                        
                        Text("총 \(item.numberOfContent)화")
                            .font(.custom(Font.preRegular.rawValue, size: 12))
                            .foregroundColor(.white)
                            .padding(.horizontal, 10)
                            .padding(.vertical, 3)
                            .overlay {
                                RoundedRectangle(cornerRadius: 39)
                                    .strokeBorder(lineWidth: 1)
                                    .foregroundColor(.white)
                            }
                    }
                    .padding(.bottom, 8)
                    .padding(.trailing, 8)
                }
            }
            .frame(width: 160, height: 227, alignment: .center)
            
            Text(item.title)
                .font(.custom(Font.preRegular.rawValue, size: 18))
                .foregroundColor(Color(hex: "B0BEC5"))
                .lineLimit(1)
                .padding(.horizontal, 8)
            
            Text(item.creator.nickname)
                .font(.custom(Font.preRegular.rawValue, size: 14))
                .foregroundColor(Color(hex: "78909C"))
                .lineLimit(1)
                .padding(.horizontal, 8)
        }
        .frame(width: 160)
        .contentShape(Rectangle())
        .onTapGesture {
            if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                AppState.shared
                    .setAppStep(step: .seriesDetail(seriesId: item.seriesId))
            } else {
                AppState.shared
                    .setAppStep(step: .login)
            }
        }
    }
}

#Preview {
    SeriesItemView(
        item: SeriesListItem(
            seriesId: 1,
            title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",
            coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
            publishedDaysOfWeek: "매주 수, 토요일",
            isComplete: true,
            creator: SeriesListItemCreator(
                creatorId: 1,
                nickname: "creator",
                profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
            ),
            numberOfContent: 10,
            isNew: true,
            isPopular: true
        )
    )
}