import ComponentLibrary
import Localization
import SwiftUI

struct ClipDetailView: View {
    @Binding var title: String
    var imageUrl: String?
    var isUploading: Bool
    var uploadProgress: Double
    var isPlaying: Bool
    var isPlayButtonDisabled: Bool
    var elapsedTime: TimeInterval
    var totalTime: TimeInterval
    var elapsed: String
    var playPause: () -> Void
    var delete: () -> Void

    private var progressView: some View {
        let progress = min(totalTime, max(0, elapsedTime))
        return ProgressView(value: progress, total: totalTime)
            .progressViewStyle(LinearProgressViewStyle())
            .background(Capsule().fill(.ultraThinMaterial))
            .tint(Color.SemanticV1.textLink)
            .contentShape(.rect)
    }

    var body: some View {
        HStack(spacing: 8) {
            if let imageUrl {
                RemoteImage(url: imageUrl, fallbackId: "1")
                    .frame(width: 40, height: 56)
                    .clipShape(RoundedRectangle(cornerRadius: 4))
            } else {
                RoundedRectangle(cornerRadius: 4)
                    .fill(Color.SemanticV1.backgroundQuaternary)
                    .frame(width: 40, height: 56)
            }

            if isUploading {
                uploadingProgressView
            } else {
                uploadedProgressView
            }
        }
        .padding(16)
        .background(
            UnevenRoundedRectangle(cornerRadii: .init(topLeading: 8, topTrailing: 8))
                .fill(Color.SemanticV1.backgroundSecondary)
        )
        .environment(\.colorScheme, .light)
        .animation(.spring, value: imageUrl)
    }

    @ViewBuilder
    private var uploadingProgressView: some View {
        VStack(alignment: .leading, spacing: 4) {
            TextField(L10n.FeatureCreateClip.clipTitlePlaceholder, text: $title)
                .typographyV1(.body1)
                .foregroundStyle(Color.SemanticV1.textPrimary)

            HStack(spacing: 12) {
                ProgressView(value: uploadProgress, total: 1)
                    .progressViewStyle(LinearProgressViewStyle())
                    .background(Capsule().fill(.ultraThinMaterial))
                    .tint(Color.SemanticV1.textLink)
                    .contentShape(.rect)

                Text(uploadProgress.formatted(.percent))
                    .typographyV1(.bodySmall)
                    .monospaced()
                    .foregroundStyle(Color.SemanticV1.textTertiary)
            }
        }
    }

    @ViewBuilder
    private var uploadedProgressView: some View {
        VStack(alignment: .leading, spacing: 4) {
            TextField(L10n.FeatureCreateClip.clipTitlePlaceholder, text: $title)
                .typographyV1(.body1)
                .foregroundStyle(Color.SemanticV1.textPrimary)

            Text(elapsed)
                .typographyV1(.bodySmall)
                .monospaced()
                .foregroundStyle(Color.SemanticV1.textTertiary)
        }

        Spacer()

        ButtonView(image: isPlaying ? Image.Icon.pause : Image.Icon.playFilled) {
            playPause()
        }
        .disabled(isPlayButtonDisabled)

        ButtonView(image: Image.Icon.trashV1) {
            delete()
        }
    }
}