SmilesBalance

import SwiftUI
import EandTokens

// smiles-balance-card: white (surface/base/inverse), full width × 148 (row-2), r16.
// Header 16/16/0: the 28pt total (heading/lg variables) over "Points" (24pt style) with
// a 20pt info button, and a 40pt tier pill. Footer 8/16/0, bottom-aligned, gap 4: a 12pt
// pill progress bar (sunken-inverse track, positive fill) and the next-tier line.
struct SmilesBalance: View {
  let points: String; let progress: Double   // 0…1
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      HStack(alignment: .top) {
        VStack(alignment: .leading, spacing: 0) {
          Text(points).font(.system(size: EandTypography.headingXl.size, weight: .bold))   // 28pt
          HStack(spacing: EandSpacing.xs) {
            Text("Points")
              .font(.system(size: EandTypography.headingLg.size, weight: EandTypography.headingLg.weight))
            Image(systemName: "info.circle.fill").font(.system(size: EandIcon.md))
              .frame(width: EandIcon.lg, height: EandIcon.lg)
          }
        }
        Spacer()
        TierPill(tier: .silver)       // 40pt pill, 32pt medal; legacy fill #f4f3f5 (no token)
      }
      .padding([.top, .horizontal], EandSpacing.lg)
      Spacer(minLength: EandSpacing.sm)
      VStack(alignment: .leading, spacing: EandSpacing.xs) {
        GeometryReader { geo in
          ZStack(alignment: .leading) {
            Capsule().fill(EandColor.surfaceSunkenInverse)
            Capsule().fill(EandColor.textPositiveSubtle).frame(width: geo.size.width * progress)
          }
        }
        .frame(height: EandScale.scale12)
        Text("Just 2,500 points to your Gold Tier").font(.system(size: EandTypography.bodyMd.size))
      }
      .padding(.horizontal, EandSpacing.lg)
    }
    .foregroundColor(EandColor.textDefaultDefault)
    .frame(maxWidth: .infinity).frame(height: EandSection.bodyHeightRow2)
    .background(EandColor.surfaceBaseInverse)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius6))
  }
}