import APIClient
import ComponentLibrary
import Localization
import SwiftUI

public struct AuthorCaption: Equatable {
    let userID: String
    let userDisplayName: String
    let userAvatarURL: String?
    let content: String
    let captionMentions: [CaptionUserMention]

    public init(
        userID: String,
        userDisplayName: String,
        userAvatarURL: String?,
        content: String,
        captionMentions: [CaptionUserMention] = []
    ) {
        self.userID = userID
        self.userDisplayName = userDisplayName
        self.userAvatarURL = userAvatarURL
        self.content = content
        self.captionMentions = captionMentions
    }
}

public struct PinnedCaptionView: View {
    private var caption: AuthorCaption
    private let backgroundColor: Color
    private let creatorLabelBackgroundColor: Color
    private let userMentionTapped: ((String) -> Void)?

    @State private var isExpanded: Bool

    public init(
        _ caption: AuthorCaption,
        backgroundColor: Color = Color.SemanticV2.backgroundFogThin,
        creatorLabelBackgroundColor: Color = Color.SemanticV2.backgroundFogThick,
        isExpanded: Bool = false,
        userMentionTapped: ((String) -> Void)? = nil
    ) {
        self.caption = caption
        self.backgroundColor = backgroundColor
        self.creatorLabelBackgroundColor = creatorLabelBackgroundColor
        self.isExpanded = isExpanded
        self.userMentionTapped = userMentionTapped
    }

    public var body: some View {
        HStack(alignment: .top, spacing: 10) {
            RemoteImage(url: caption.userAvatarURL, fallbackId: caption.userID)
                .frame(width: 36, height: 36)
                .clipShape(Circle())

            VStack(alignment: .leading, spacing: 4) {
                HStack(spacing: 4) {
                    Text(caption.userDisplayName)
                        .typographyV1(.userLabel)
                        .fontWeight(.semibold)

                    Text(L10n.FeatureCaptions.creatorLabel)
                        .typographyV1(.creatorLabel)
                        .padding(.vertical, 2)
                        .padding(.horizontal, 4)
                        .background(creatorLabelBackgroundColor)
                        .cornerRadius(3)

                    Spacer()
                }

                ExpandableText(
                    InteractiveTextFormatter.formatCaptionText(
                        caption.content,
                        mentions: caption.captionMentions,
                        config: .pinnedCaption
                    ),
                    font: .captionLabel,
                    isExpanded: $isExpanded
                )
                .onUserMentionTapped { mention in
                    userMentionTapped?(mention)
                }
            }
        }
        .onTapGesture {
            withAnimation(.interactiveSpring) {
                isExpanded.toggle()
            }
        }
        .frame(maxWidth: .infinity)
        .padding(EdgeInsets(top: 10, leading: 14, bottom: 10, trailing: 14))
        .background(backgroundColor)
        .cornerRadius(10)
        .padding(EdgeInsets(top: 0, leading: 16, bottom: 10, trailing: 16))
    }
}

private extension TypographyV1 {
    static let userLabel: TypographyV1 = .init(
        name: "User Label",
        size: 12,
        style: .body,
        weight: .neueMontrealMedium,
        lineHeight: 16
    )

    static let creatorLabel: TypographyV1 = .init(
        name: "Creator Label",
        size: 10,
        style: .caption,
        weight: .neueMontrealMedium,
        kerning: 0.4,
        lineHeight: 16
    )

    static let captionLabel: TypographyV1 = .init(
        name: "Creator Caption",
        size: 13,
        style: .body,
        weight: .neueMontrealMedium,
        kerning: 0.4,
        lineHeight: 16
    )
}

#Preview {
    VStack(spacing: 0) {
        PinnedCaptionView(
            .init(
                userID: "123",
                userDisplayName: "Lady Data",
                userAvatarURL: nil,
                content: "🌙 Step into the realm of the silver moon ✨ “Ethereal Dreams” is a song that whispers of cosmic wonders, forgotten myths, and the secrets hidden in stardust. What mysteries does the silver moon unveil? Let the melody guide you beyond the veil of reality! 🌌🌕 #EtherealDreams #CelestialMagic #MysticMelody",
                captionMentions: []
            )
        )
        .padding()

        Spacer()
    }
}