import SwiftUI
import Kingfisher

struct CreatorChannelHeaderSection: View {
    let creator: CreatorChannelCreatorResponse
    let onTapTalk: () -> Void

    var body: some View {
        ZStack(alignment: .bottom) {
            KFImage(URL(string: creator.profileImageUrl))
                .placeholder { Color.gray.opacity(0.2) }
                .retry(maxCount: 2, interval: .seconds(1))
                .cancelOnDisappear(true)
                .downsampled(to: CGSize(width: screenSize().width, height: screenSize().width))
                .resizable()
                .scaledToFill()
                .frame(width: screenSize().width, height: screenSize().width)
                .clipped()

            VStack(spacing: 0) {
                LinearGradient(
                    colors: [Color.black.opacity(0.3), Color.black.opacity(0)],
                    startPoint: .top,
                    endPoint: .bottom
                )
                .frame(height: 120)

                Spacer(minLength: 0)

                LinearGradient(
                    gradient: Gradient(stops: [
                        .init(color: Color.black.opacity(0), location: 0),
                        .init(color: Color.black.opacity(0), location: 0.35),
                        .init(color: Color.black.opacity(0.85), location: 1)
                    ]),
                    startPoint: .top,
                    endPoint: .bottom
                )
                .frame(height: 180)
            }

            VStack(alignment: .center, spacing: SodaSpacing.s8) {
                Text(I18n.CreatorChannelHome.followerCount(creator.followerCount.comma()))
                    .appFont(size: 16, weight: .medium)
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)

                Text(creator.nickname)
                    .appFont(size: 32, weight: .bold)
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)

                CreatorChannelTalkActionSection(
                    isAiChatAvailable: creator.isAiChatAvailable,
                    onTapTalk: onTapTalk
                )
            }
            .frame(maxWidth: .infinity)
            .padding(.horizontal, SodaSpacing.s24)
            .padding(.bottom, SodaSpacing.s14)
        }
        .frame(width: screenSize().width, height: screenSize().width)
    }
}