import SwiftUI

struct ProviderCardView: View {
    let providerID: ProviderID
    let state: ProviderDisplayState?
    @ObservedObject var settings: AppSettings

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Text(providerID.displayName)
                    .font(.headline)
                Spacer()
                if state?.snapshot?.isStale == true {
                    Text("Stale")
                        .font(.caption2)
                        .padding(.horizontal, 6)
                        .padding(.vertical, 2)
                        .background(Color.orange.opacity(0.2))
                        .foregroundStyle(.orange)
                        .clipShape(Capsule())
                }
            }

            if state?.isLoading == true {
                HStack(spacing: 8) {
                    ProgressView()
                        .controlSize(.small)
                    Text("Loading…")
                        .foregroundStyle(.secondary)
                }
            } else if let error = state?.errorMessage {
                Text(error)
                    .font(.caption)
                    .foregroundStyle(.red)
                    .fixedSize(horizontal: false, vertical: true)
            } else if let snapshot = state?.snapshot {
                Group {
                    ForEach(settings.settings(for: providerID).popoverMetrics) { metric in
                        if let formatted = snapshot.formatted(metric) {
                            HStack {
                                Text(metric.displayName)
                                    .foregroundStyle(.secondary)
                                Spacer()
                                Text(formatted)
                                    .fontWeight(.medium)
                            }
                            .font(.caption)
                        }
                    }
                }
                .id(settings.revision)

                Text("Updated \(snapshot.fetchedAt.formatted(date: .omitted, time: .shortened))")
                    .font(.caption2)
                    .foregroundStyle(.tertiary)
            } else {
                Text("No data")
                    .font(.caption)
                    .foregroundStyle(.secondary)
            }
        }
        .padding(12)
        .background(Color(nsColor: .controlBackgroundColor))
        .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

extension UsageMetric: Hashable {}