1struct SessionsResponse: Decodable {
2    let sessions: [WorkoutSession]
3}
4
5struct WorkoutSession: Decodable {
6    let id: Int
7    let contentTitle: String
8    let contentImageUrl: String
9    let contentDifficulty: String
10    let caloriesBurned: Double            // actual calories the user burned
11    let actualDurationSeconds: Int        // actual time spent exercising
12    let completionPercentage: Double      // 0–100, authoritative
13    let totalExercises: Int
14
15    enum CodingKeys: String, CodingKey {
16        case id
17        case contentTitle          = "content_title"
18        case contentImageUrl       = "content_image_url"
19        case contentDifficulty     = "content_difficulty"
20        case caloriesBurned        = "calories_burned"
21        case actualDurationSeconds = "actual_duration_seconds"
22        case completionPercentage  = "completion_percentage"
23        case totalExercises        = "total_exercises"
24    }
25}
26
27func fetchSessions(apiKey: String,
28                   userId: String,
29                   page: Int = 1,
30                   limit: Int = 20) async throws -> [WorkoutSession] {
31    var components = URLComponents(string: "https://data.kinestex.com/api/workout-sessions")!
32    components.queryItems = [
33        URLQueryItem(name: "page",  value: "\(page)"),
34        URLQueryItem(name: "limit", value: "\(limit)"),
35        URLQueryItem(name: "sort",  value: "started_at_desc")
36    ]
37
38    var request = URLRequest(url: components.url!)
39    request.setValue(apiKey, forHTTPHeaderField: "x-api-key")
40    request.setValue(userId, forHTTPHeaderField: "x-user-id")
41
42    let (data, response) = try await URLSession.shared.data(for: request)
43    guard let http = response as? HTTPURLResponse, (200...299).contains(http.statusCode) else {
44        throw URLError(.badServerResponse)
45    }
46    return try JSONDecoder().decode(SessionsResponse.self, from: data).sessions
47}

// Uses OkHttp + Gson. Run the request off the main thread.
data class SessionsResponse(val sessions: List<WorkoutSession>)

data class WorkoutSession(
    val id: Int,
    @SerializedName("content_title")           val contentTitle: String,
    @SerializedName("content_image_url")       val contentImageUrl: String,
    @SerializedName("content_difficulty")      val contentDifficulty: String,
    @SerializedName("calories_burned")         val caloriesBurned: Double,       // actual calories burned
    @SerializedName("actual_duration_seconds") val actualDurationSeconds: Int,   // actual time spent
    @SerializedName("completion_percentage")   val completionPercentage: Double, // 0–100
    @SerializedName("total_exercises")         val totalExercises: Int
)

suspend fun fetchSessions(
    apiKey: String,
    userId: String,
    page: Int = 1,
    limit: Int = 20
): List<WorkoutSession> = withContext(Dispatchers.IO) {
    val url = "https://data.kinestex.com/api/workout-sessions" +
              "?page=$page&limit=$limit&sort=started_at_desc"
    val request = Request.Builder()
        .url(url)
        .addHeader("x-api-key", apiKey)
        .addHeader("x-user-id", userId)
        .build()

    OkHttpClient().newCall(request).execute().use { response ->
        if (!response.isSuccessful) throw IOException("HTTP ${response.code}")
        Gson().fromJson(response.body!!.string(), SessionsResponse::class.java).sessions
    }
}

1struct CompletedWorkoutCardView: View {
2    let session: WorkoutSession
3    var onTap: () -> Void
4
5    private var durationText: String {
6        let s = session.actualDurationSeconds
7        switch s {
8        case ..<60:   return "\(s) sec"
9        case ..<3600: return "\(s / 60) min"
10        default:
11            let h = s / 3600, m = (s % 3600) / 60
12            return m == 0 ? "\(h) hr" : "\(h) hr \(m) min"
13        }
14    }
15
16    var body: some View {
17        Button(action: onTap) {
18            HStack(spacing: 16) {
19                AsyncImage(url: URL(string: session.contentImageUrl)) {
20                    $0.resizable().aspectRatio(contentMode: .fill)
21                } placeholder: { Color.gray.opacity(0.15) }
22                .frame(width: 96, height: 96)
23                .clipShape(RoundedRectangle(cornerRadius: 16))
24
25                VStack(alignment: .leading, spacing: 10) {
26                    Text(session.contentTitle).font(.title3).bold()
27                    HStack(spacing: 16) {
28                        Label("\(Int(session.caloriesBurned.rounded())) cal", systemImage: "flame.fill")
29                        Label(durationText, systemImage: "clock.fill")
30                        Label(session.contentDifficulty, systemImage: "chart.bar.fill")
31                    }
32                    .font(.subheadline)
33                    // Progress is driven by completion_percentage (authoritative)
34                    ProgressView(value: session.completionPercentage, total: 100)
35                    HStack {
36                        Text("\(Int(session.completionPercentage.rounded()))% complete")
37                        Spacer()
38                        Text("\(session.totalExercises) exercises")
39                    }
40                    .font(.caption).foregroundColor(.secondary)
41                }
42            }
43            .padding()
44            .background(Color(.secondarySystemBackground))
45            .clipShape(RoundedRectangle(cornerRadius: 20))
46        }
47        .buttonStyle(.plain)
48    }
49}

// Jetpack Compose; uses Coil (AsyncImage) for the thumbnail.
@Composable
fun CompletedWorkoutCard(session: WorkoutSession, onClick: () -> Unit) {
    val durationText = when {
        session.actualDurationSeconds < 60   -> "${session.actualDurationSeconds} sec"
        session.actualDurationSeconds < 3600 -> "${session.actualDurationSeconds / 60} min"
        else -> {
            val h = session.actualDurationSeconds / 3600
            val m = (session.actualDurationSeconds % 3600) / 60
            if (m == 0) "$h hr" else "$h hr $m min"
        }
    }

    Surface(onClick = onClick, shape = RoundedCornerShape(20.dp), modifier = Modifier.fillMaxWidth()) {
        Row(Modifier.padding(16.dp), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
            AsyncImage(
                model = session.contentImageUrl,
                contentDescription = session.contentTitle,
                contentScale = ContentScale.Crop,
                modifier = Modifier.size(96.dp).clip(RoundedCornerShape(16.dp))
            )
            Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
                Text(session.contentTitle, style = MaterialTheme.typography.titleLarge)
                Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
                    Text("🔥 ${session.caloriesBurned.roundToInt()} cal")
                    Text("⏱ $durationText")
                    Text("📊 ${session.contentDifficulty}")
                }
                // Progress is driven by completion_percentage (authoritative)
                LinearProgressIndicator(
                    progress = { (session.completionPercentage / 100f).toFloat() },
                    modifier = Modifier.fillMaxWidth()
                )
                Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
                    Text("${session.completionPercentage.roundToInt()}% complete")
                    Text("${session.totalExercises} exercises")
                }
            }
        }
    }
}

1struct CompletedWorkoutsView: View {
2    @State private var sessions: [WorkoutSession] = []
3    @State private var openSessionId: Int? = nil
4    @State private var isLoading = true
5
6    let kinestex: KinesteXAIKit
7    let user: UserDetails
8    let apiKey: String
9    let userId: String
10
11    var body: some View {
12        ScrollView {
13            VStack(spacing: 16) {
14                ForEach(sessions, id: \.id) { session in
15                    CompletedWorkoutCardView(session: session) {
16                        openSessionId = session.id   // ← open the session on tap
17                    }
18                }
19            }
20            .padding()
21        }
22        .task {
23            sessions = (try? await fetchSessions(apiKey: apiKey, userId: userId)) ?? []
24        }
25        .fullScreenCover(item: Binding(
26            get: { openSessionId.map { SessionID(value: $0) } },
27            set: { openSessionId = $0?.value }
28        )) { wrapped in
29            kinestex.createCustomComponentView(
30                route: "session/\(wrapped.value)",
31                user: user,
32                style: IStyle(style: "light", themeName: "YOUR_THEME"),
33                isLoading: $isLoading,
34                onMessageReceived: { message in
35                    switch message {
36                    case .exit_kinestex(_):         openSessionId = nil   // dismiss
37                    case .error_occurred(let data): print("Error: \(data)")
38                    default: break
39                    }
40                }
41            )
42        }
43    }
44}
45
46// Lets an Int drive .fullScreenCover(item:)
47struct SessionID: Identifiable { let value: Int; var id: Int { value } }

@Composable
fun CompletedWorkoutsScreen(apiKey: String, userId: String) {
    var sessions by remember { mutableStateOf<List<WorkoutSession>>(emptyList()) }
    var openSessionId by remember { mutableStateOf<Int?>(null) }

    LaunchedEffect(Unit) {
        sessions = runCatching { fetchSessions(apiKey, userId) }.getOrDefault(emptyList())
    }

    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(sessions) { session ->
            CompletedWorkoutCard(session) {
                openSessionId = session.id       // ← open the session on tap
            }
        }
    }

    // Render the KinesteX session view when a card is tapped. Build it exactly
    // like your other KinesteX views — the only thing that changes is the
    // route string: "session/$id". Handle exit_kinestex to dismiss.
    openSessionId?.let { id ->
        KinesteXSessionView(
            route = "session/$id",
            onExit = { openSessionId = null }
        )
    }
}