import SwiftUI

struct CreatorChannelDonationRankingSection: View {
    let rankings: [MemberDonationRankingResponse]
    let onTapViewAll: () -> Void

    var body: some View {
        if rankings.isEmpty == false {
            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
                Text("후원 랭킹")
                    .appFont(size: 20, weight: .bold)
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity, alignment: .leading)

                LazyVGrid(columns: columns, spacing: SodaSpacing.s14) {
                    ForEach(displayRankings.indices, id: \.self) { rank in
                        rankingItem(rank: rank, ranking: displayRankings[rank])
                    }
                }

                Button(action: onTapViewAll) {
                    Text("전체보기")
                        .appFont(size: 16, weight: .medium)
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity)
                        .frame(height: 36)
                        .overlay(
                            Capsule()
                                .stroke(Color.white.opacity(0.3), lineWidth: 1)
                        )
                        .contentShape(Rectangle())
                }
                .buttonStyle(.plain)
            }
            .padding(SodaSpacing.s14)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color.gray900)
            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
            .padding(.horizontal, SodaSpacing.s14)
            .padding(.bottom, SodaSpacing.s14)
        }
    }

    private var displayRankings: [MemberDonationRankingResponse] {
        Array(rankings.prefix(8))
    }

    private var columns: [GridItem] {
        [
            GridItem(.flexible(), spacing: SodaSpacing.s14),
            GridItem(.flexible(), spacing: SodaSpacing.s14),
            GridItem(.flexible(), spacing: SodaSpacing.s14),
            GridItem(.flexible(), spacing: SodaSpacing.s14)
        ]
    }

    private func rankingItem(rank: Int, ranking: MemberDonationRankingResponse) -> some View {
        VStack(spacing: SodaSpacing.s8) {
            GeometryReader { proxy in
                let imageSize = min(proxy.size.width, 75)

                ZStack(alignment: .bottom) {
                    DownsampledKFImage(
                        url: URL(string: ranking.profileImage),
                        size: CGSize(width: imageSize, height: imageSize)
                    )
                    .frame(width: imageSize, height: imageSize)
                    .background(Color.gray800)
                    .clipShape(Circle())

                    Text("\(rank + 1)")
                        .appFont(size: 28, weight: .regular, family: .pattaya)
                        .foregroundColor(.white)
                        .shadow(color: Color.black.opacity(0.8), radius: 3, x: 0, y: 2)
                        .shadow(color: Color.black.opacity(0.4), radius: 1, x: 0, y: 0)
                        .offset(y: SodaSpacing.s4)
                        .padding(.bottom, -12)
                }
                .frame(width: imageSize, height: imageSize)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .aspectRatio(1, contentMode: .fit)

            Text(ranking.nickname)
                .appFont(size: 14, weight: .medium)
                .foregroundColor(.white)
                .lineLimit(1)
                .truncationMode(.tail)
                .multilineTextAlignment(.center)
                .frame(maxWidth: 75)
        }
        .frame(maxWidth: .infinity)
    }
}

struct CreatorChannelDonationRankingSection_Previews: PreviewProvider {
    static var previews: some View {
        CreatorChannelDonationRankingSection(
            rankings: [
                MemberDonationRankingResponse(userId: 1, nickname: "첫 번째 팬", profileImage: "https://picsum.photos/120/120?1", donationCan: 100),
                MemberDonationRankingResponse(userId: 2, nickname: "두 번째 팬", profileImage: "https://picsum.photos/120/120?2", donationCan: 80),
                MemberDonationRankingResponse(userId: 3, nickname: "세 번째 팬", profileImage: "https://picsum.photos/120/120?3", donationCan: 60)
            ],
            onTapViewAll: {}
        )
        .background(Color.black)
        .previewLayout(.sizeThatFits)
    }
}