<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { SkeletonLoader } from '../../../shared/ui/components'
import { useShadowRunDetail } from '../composables/useShadowRuns'

const route = useRoute()

const runId = computed(() => route.params.runId as string)

const shadowRunQuery = useShadowRunDetail(runId.value)

const run = computed(() => shadowRunQuery.data as any)
</script>

<template>
  <div class="shadow-run-detail-page">
    <header class="page-header">
      <h1>Shadow Run Details</h1>
    </header>

    <!-- Loading State -->
    <div v-if="shadowRunQuery.isPending" class="loading-state">
      <SkeletonLoader type="card" />
    </div>

    <!-- Error State -->
    <div v-else-if="shadowRunQuery.isError" class="error-state">
      <p>Failed to load shadow run</p>
    </div>

    <!-- Data State -->
    <div v-else-if="run && run.id" class="shadow-run-detail">
      <div class="detail-section">
        <h2>Run #{{ run.id }}</h2>
        <div class="detail-grid">
          <div class="detail-item">
            <label>Model</label>
            <p>{{ run.modelName }}</p>
          </div>
          <div class="detail-item">
            <label>Status</label>
            <p>{{ run.status }}</p>
          </div>
          <div class="detail-item">
            <label>PBO</label>
            <p>{{ run.pbo }}%</p>
          </div>
          <div class="detail-item">
            <label>DSR</label>
            <p>{{ run.dsr }}%</p>
          </div>
          <div class="detail-item">
            <label>OOS</label>
            <p>{{ run.oos }}%</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.shadow-run-detail-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

.loading-state,
.error-state {
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  background-color: var(--color-background-secondary);
}

.shadow-run-detail {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  padding: 2rem;
  background-color: var(--color-background-secondary);
}

.detail-section h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.detail-item label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-secondary);
}

.detail-item p {
  margin: 0;
  color: var(--color-text-primary);
}
</style>
