//
//  MeterCardView.swift
//  USB Meter
//

import SwiftUI

struct MeterCardView: View {
    let meterSummary: AppData.MeterSummary

    var body: some View {
        HStack(spacing: 14) {
            Image(systemName: "sensor.tag.radiowaves.forward.fill")
                .font(.system(size: 18, weight: .semibold))
                .foregroundColor(meterSummary.tint)
                .frame(width: 42, height: 42)
                .background(
                    Circle()
                        .fill(meterSummary.tint.opacity(0.18))
                )
                .overlay(alignment: .bottomTrailing) {
                    Circle()
                        .fill(Color.red)
                        .frame(width: 12, height: 12)
                        .overlay(
                            Circle()
                                .stroke(Color(uiColor: .systemBackground), lineWidth: 2)
                        )
                }

            VStack(alignment: .leading, spacing: 4) {
                Text(meterSummary.displayName)
                    .font(.headline)
                Text(meterSummary.modelSummary)
                    .font(.caption)
                    .foregroundColor(.secondary)
                if let advertisedName = meterSummary.advertisedName, advertisedName != meterSummary.modelSummary {
                    Text("Advertised as \(advertisedName)")
                        .font(.caption2)
                        .foregroundColor(.secondary)
                }
            }

            Spacer()

            VStack(alignment: .trailing, spacing: 4) {
                HStack(spacing: 6) {
                    Circle()
                        .fill(Color.red)
                        .frame(width: 8, height: 8)
                    Text("Missing")
                        .font(.caption.weight(.semibold))
                        .foregroundColor(.secondary)
                }
                .padding(.horizontal, 10)
                .padding(.vertical, 6)
                .background(
                    Capsule(style: .continuous)
                        .fill(Color.red.opacity(0.12))
                )
                .overlay(
                    Capsule(style: .continuous)
                        .stroke(Color.red.opacity(0.22), lineWidth: 1)
                )
            }
        }
        .padding(14)
        .meterCard(
            tint: meterSummary.tint,
            fillOpacity: 0.16,
            strokeOpacity: 0.22,
            cornerRadius: 18
        )
    }
}