import SwiftUI

struct CreatorChannelDonationSection: View {
    let channelDonations: [CreatorChannelDonationResponse]
    let onSelectTab: (CreatorChannelTab) -> Void
    let onTapDonate: () -> Void

    init(
        channelDonations: [CreatorChannelDonationResponse],
        onSelectTab: @escaping (CreatorChannelTab) -> Void,
        onTapDonate: @escaping () -> Void = {}
    ) {
        self.channelDonations = channelDonations
        self.onSelectTab = onSelectTab
        self.onTapDonate = onTapDonate
    }

    var body: some View {
        VStack(alignment: .leading, spacing: SodaSpacing.s14) {
            SectionTitle(title: I18n.CreatorChannelHome.donation) {
                onSelectTab(.donation)
            }

            if channelDonations.isEmpty {
                CreatorChannelDonationEmptyCard(onTapDonate: onTapDonate)
                    .padding(.horizontal, SodaSpacing.s14)
            } else {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .top, spacing: SodaSpacing.s4) {
                        ForEach(channelDonations.indices, id: \.self) { index in
                            CreatorChannelDonationCard(donation: channelDonations[index])
                                .frame(width: 374)
                        }
                    }
                    .padding(.leading, SodaSpacing.s14)
                    .padding(.trailing, SodaSpacing.s14)
                }

                Button(action: onTapDonate) {
                    HStack(spacing: SodaSpacing.s6) {
                        Image("ic_new_donation")
                            .resizable()
                            .renderingMode(.template)
                            .foregroundColor(.white)
                            .scaledToFit()
                            .frame(width: 20, height: 20)

                        Text(I18n.ContentDetail.DonationDialog.title)
                            .appFont(size: 16, weight: .medium)
                            .foregroundColor(.white)
                            .lineLimit(1)
                    }
                    .frame(maxWidth: .infinity)
                    .padding(SodaSpacing.s12)
                    .overlay(
                        Capsule()
                            .stroke(Color.white.opacity(0.3), lineWidth: 1)
                    )
                    .contentShape(Rectangle())
                }
                .buttonStyle(.plain)
                .padding(.horizontal, SodaSpacing.s14)
            }
        }
        .padding(.top, SodaSpacing.s20)
    }
}

private struct CreatorChannelDonationEmptyCard: View {
    let onTapDonate: () -> Void

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("처음으로 크리에이터를\n후원해 보세요!")
                .appFont(size: 24, weight: .bold)
                .foregroundColor(.white)
                .lineSpacing(0)
                .padding(.top, SodaSpacing.s20)
                .padding(.leading, SodaSpacing.s20)

            Spacer(minLength: 0)

            Button(action: onTapDonate) {
                HStack(spacing: SodaSpacing.s6) {
                    Image("ic_new_donation")
                        .resizable()
                        .renderingMode(.template)
                        .foregroundColor(.black)
                        .scaledToFit()
                        .frame(width: 20, height: 20)

                    Text(I18n.ContentDetail.DonationDialog.title)
                        .appFont(size: 16, weight: .medium)
                        .foregroundColor(.black)
                        .lineLimit(1)
                }
                .frame(maxWidth: .infinity)
                .padding(SodaSpacing.s12)
                .background(Color.white)
                .clipShape(Capsule())
            }
            .buttonStyle(.plain)
            .padding(.horizontal, SodaSpacing.s20)
            .padding(.bottom, SodaSpacing.s20)
        }
        .frame(height: 196)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color.gray900)
        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
    }
}

struct CreatorChannelDonationSection_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: SodaSpacing.s20) {
            CreatorChannelDonationSection(
                channelDonations: [],
                onSelectTab: { _ in }
            )

            CreatorChannelDonationSection(
                channelDonations: [
                    CreatorChannelDonationResponse(
                        nickname: "팬 이름 501",
                        profileImageUrl: "https://picsum.photos/120/120?4",
                        can: 501,
                        message: "501캔 이상 후원 컬러를 확인하는 Preview 샘플입니다.",
                        createdAtUtc: "2026-07-03T03:41:00Z"
                    ),
                    CreatorChannelDonationResponse(
                        nickname: "팬 이름 50",
                        profileImageUrl: "https://picsum.photos/120/120?1",
                        can: 50,
                        message: "크리에이터가 커뮤니티에 올린 글이 보이는 부분 크리에이터가 커뮤니티에 올린 글이 보이는 부분",
                        createdAtUtc: "2026-07-03T03:44:00Z"
                    ),
                    CreatorChannelDonationResponse(
                        nickname: "팬 이름 100",
                        profileImageUrl: "https://picsum.photos/120/120?2",
                        can: 100,
                        message: "51~100캔 후원 컬러를 확인하는 Preview 샘플입니다.",
                        createdAtUtc: "2026-07-03T03:43:00Z"
                    ),
                    CreatorChannelDonationResponse(
                        nickname: "팬 이름 500",
                        profileImageUrl: "https://picsum.photos/120/120?3",
                        can: 500,
                        message: "101~500캔 후원 컬러를 확인하는 Preview 샘플입니다.",
                        createdAtUtc: "2026-07-03T03:42:00Z"
                    )
                ],
                onSelectTab: { _ in }
            )
        }
        .background(Color.black)
        .previewLayout(.sizeThatFits)
    }
}