import SwiftUI

struct MainContentMostCommentedAudioSection: View {
    let title: String
    let items: [CommentedAudioResponse]
    let onTapContent: (Int) -> Void

    private let thumbnailSize: CGFloat = 88

    private var cardWidth: CGFloat {
        UIScreen.main.bounds.width - (SodaSpacing.s14 * 2)
    }

    var body: some View {
        if !items.isEmpty {
            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
                SectionTitle(title: title)

                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .top, spacing: SodaSpacing.s4) {
                        ForEach(items) { item in
                            card(item)
                        }
                    }
                    .padding(.leading, SodaSpacing.s14)
                    .padding(.trailing, SodaSpacing.s20)
                }
            }
        }
    }

    private func card(_ item: CommentedAudioResponse) -> some View {
        Button {
            onTapContent(item.audioContentId)
        } label: {
            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
                audioSummary(item)

                commentPreview(item)
            }
            .padding(SodaSpacing.s14)
            .frame(width: cardWidth, alignment: .leading)
            .background(Color.gray900)
            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
        }
        .buttonStyle(.plain)
    }

    private func audioSummary(_ item: CommentedAudioResponse) -> some View {
        HStack(alignment: .center, spacing: SodaSpacing.s14) {
            DownsampledKFImage(
                url: URL(string: item.imageUrl),
                size: CGSize(width: thumbnailSize, height: thumbnailSize)
            )
            .background(Color.gray800)
            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))

            Text(item.title)
                .appFont(size: 16, weight: .bold)
                .foregroundColor(.white)
                .lineLimit(1)
                .truncationMode(.tail)
                .frame(maxWidth: .infinity, alignment: .leading)
        }
    }

    private func commentPreview(_ item: CommentedAudioResponse) -> some View {
        HStack(alignment: .center, spacing: SodaSpacing.s14) {
            DownsampledKFImage(
                url: URL(string: item.latestCommentWriterProfileImageUrl),
                size: CGSize(width: 28, height: 28)
            )
            .background(Color.gray700)
            .clipShape(Circle())

            Text(item.latestComment)
                .appFont(size: 14, weight: .regular)
                .foregroundColor(.white)
                .lineLimit(2)
                .truncationMode(.tail)
                .frame(maxWidth: .infinity, alignment: .leading)

            Image(systemName: "chevron.down")
                .font(.system(size: 12, weight: .medium))
                .foregroundColor(.white)
                .frame(width: 18, height: 18)
        }
        .padding(SodaSpacing.s12)
        .background(Color.gray800)
        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
    }
}