import Foundation
import SwiftUI

struct MetricsBar: View {
    let id: String
    let title: String
    let subTitle: String
    let contextTitle: String
    let description: String

    @State var isExpanded = false

    var body: some View {
        Button {
            isExpanded = !isExpanded
        } label: {
            VStack {
                HStack {
                    VStack(alignment: .leading, spacing: 2.0) {
                        Text(contextTitle)
                            .font(.system(size: 8.0, weight: .bold, design: .monospaced))
                            .foregroundStyle(.white.opacity(0.5))

                        Text(title)
                            .font(.system(size: 10.0, weight: .medium))
                            .foregroundStyle(.white.opacity(0.8))

                        Text(subTitle)
                            .font(.system(size: 12.0, weight: .medium))
                            .foregroundStyle(.green)
                    }

                    Spacer()

                    Button {
                        UIPasteboard.general.string = "\(subTitle)\n\(description)"
                    } label: {
                        Image(systemName: "square.and.arrow.up")
                            .font(.system(size: 12.0, weight: .medium))
                            .foregroundColor(.white.opacity(0.5))
                    }

                    Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
                        .font(.system(size: 12.0, weight: .medium))
                        .foregroundColor(.white.opacity(0.5))
                }

                if isExpanded {
                    ScrollView {
                        Text(description)
                            .font(.system(size: 10.0, weight: .bold, design: .monospaced))
                            .foregroundColor(.white.opacity(0.8))
                            .padding(.vertical, 16.0)
                            .multilineTextAlignment(.leading)
                    }
                }
            }
            .padding(.top, isExpanded ? 16.0 : 0.0)
            .padding(.leading, 12.0)
            .padding(.trailing, 16.0)
            .frame(height: isExpanded ? 256.0 : 58.0)
            .background {
                Color.black.opacity(0.2)
            }
            .clipShape(.rect(cornerRadius: 8.0))
        }
    }
}