import SwiftUI

public struct SunoUserHeader: View {
    public enum Avatar {
        case single(String?)
        case multiple(String?, [String])

        var primary: String? {
            switch self {
            case .single(let value), .multiple(let value, _): return value
            }
        }
    }

    @Binding private var headerVisible: Bool
    private var avatar: Avatar
    private let userId: String?
    private var title: String
    private var subtitle: String
    private var primaryAvatarShape: AnyShape

    public init(
        headerVisible: Binding<Bool> = .constant(true),
        avatar: Avatar,
        userId: String?,
        title: String,
        subtitle: String,
        primaryAvatarShape: AnyShape = .init(.circle)
    ) {
        self._headerVisible = headerVisible
        self.avatar = avatar
        self.userId = userId
        self.title = title
        self.subtitle = subtitle
        self.primaryAvatarShape = primaryAvatarShape
    }

    public var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ZStack(alignment: .leading) {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 16) {
                        switch avatar {
                        case .single:
                            EmptyView()

                        case .multiple(_, let backups):
                            if backups.isEmpty {
                                ForEach(0 ... 3, id: \.self) { _ in
                                    RoundedRectangle(cornerRadius: 16)
                                        .stroke(Color.SemanticV1.borderPrimary, lineWidth: 1)
                                        .frame(width: 112, height: 160)
                                }

                            } else {
                                ForEach(backups.prefix(4), id: \.self) { url in
                                    RemoteImage(url: url, fallbackId: userId)
                                        .cornerRadius(16)
                                        .frame(width: 112, height: 160)
                                }
                            }
                        }
                    }
                }
                .padding(.horizontal, -24)
                .scrollDisabled(true)

                primaryAvatarShape
                    .stroke(Color.SemanticV1.borderPrimary, lineWidth: 1)
                    .frame(width: 208, height: 208)
                    .overlay {
                        if let primary = avatar.primary {
                            RemoteImage(url: primary, fallbackId: userId)
                                .aspectRatio(1, contentMode: .fill)
                        }
                    }
                    .clipShape(primaryAvatarShape)
            }
            .padding(.bottom, 32)

            Text(title)
                .typographyV1(.headline2)
                .foregroundStyle(Color.SemanticV1.textPrimary)
                .padding(.bottom, 8)

            Text(subtitle)
                .typographyV1(.caption2)
                .foregroundStyle(Color.SemanticV1.textPrimary)
        }
        .onAppear { headerVisible = true }
        .onDisappear { headerVisible = false }
    }
}