import SwiftUI

enum TrendDirection {
    case up, down, neutral

    var symbol: String {
        switch self {
        case .up:      return "arrow.up"
        case .down:    return "arrow.down"
        case .neutral: return "minus"
        }
    }

    var color: Color {
        switch self {
        case .up:      return Color(.systemGreen)
        case .down:    return Color(.systemRed)
        case .neutral: return Color(.systemGray)
        }
    }
}

struct MetricCard: View {
    let icon: String
    let value: String
    let label: String
    let trend: TrendDirection
    let accentColor: Color
    var backgroundColor: Color = Color(.secondarySystemBackground)

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack(alignment: .top) {
                Image(systemName: icon)
                    .font(.system(size: 16, weight: .semibold))
                    .foregroundStyle(accentColor)
                    .frame(width: 32, height: 32)
                    .background(accentColor.opacity(0.15))
                    .clipShape(RoundedRectangle(cornerRadius: 8))

                Spacer()

                Image(systemName: trend.symbol)
                    .font(.system(size: 11, weight: .bold))
                    .foregroundStyle(trend.color)
                    .padding(5)
                    .background(trend.color.opacity(0.12))
                    .clipShape(Circle())
            }

            Text(value)
                .font(.system(size: 26, weight: .bold, design: .rounded))
                .foregroundStyle(.primary)
                .lineLimit(1)
                .minimumScaleFactor(0.6)

            Text(label)
                .font(.system(size: 12, weight: .medium))
                .foregroundStyle(.secondary)
                .lineLimit(2)
        }
        .padding(16)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(backgroundColor)
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

#Preview {
    ScrollView {
        LazyVStack(spacing: 8) {
            HStack(spacing: 8) {
                MetricCard(
                    icon: "cpu",
                    value: "72%",
                    label: "CPU Usage",
                    trend: .up,
                    accentColor: Color(.systemBlue)
                )
                MetricCard(
                    icon: "memorychip",
                    value: "3.2 GB",
                    label: "Memory",
                    trend: .down,
                    accentColor: Color(.systemGreen)
                )
            }
            HStack(spacing: 8) {
                MetricCard(
                    icon: "exclamationmark.triangle",
                    value: "14",
                    label: "Active Alerts",
                    trend: .up,
                    accentColor: Color(.systemOrange)
                )
                MetricCard(
                    icon: "network",
                    value: "99.8%",
                    label: "Uptime",
                    trend: .neutral,
                    accentColor: Color(.systemBlue)
                )
            }
            MetricCard(
                icon: "arrow.down.circle",
                value: "1.24 GB/s",
                label: "Ingest throughput (last 5 min)",
                trend: .down,
                accentColor: Color(.systemRed)
            )
        }
        .padding()
    }
    .background(Color(.systemBackground))
}