<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { DetailReadPage } from '../../../shared/ui/screen-types/v2'
import { SkeletonLoader } from '../../../shared/ui/components'
import { useModelDetail } from '../composables/useModels'
import type { StandardScreenProps } from '../../../shared/ui/contracts/screenContract'

const route = useRoute()

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

const modelQuery = useModelDetail(modelId.value)

const model = computed(() => modelQuery.data as any)

const screenState = computed<StandardScreenProps['state']>(() => {
  if (modelQuery.isPending) return 'LOADING'
  if (modelQuery.isError) return 'ERROR'
  return 'READY'
})
const screenEvidence = { asOf: new Date().toISOString(), version: '1.0' }
</script>

<template>
  <DetailReadPage
    title="Model Details"
    :state="screenState"
    :evidence="screenEvidence"
  >
    <template #primary>
    <header class="page-header">
      <h1>Model Details</h1>
    </header>

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

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

    <!-- Data State -->
    <div v-else-if="model && model.name" class="model-detail">
      <div class="detail-section">
        <h2>{{ model.name }}</h2>
        <div class="detail-grid">
          <div class="detail-item">
            <label>Model ID</label>
            <p>{{ model.id }}</p>
          </div>
          <div class="detail-item">
            <label>Phase</label>
            <p>{{ model.phase }}</p>
          </div>
          <div class="detail-item">
            <label>Status</label>
            <p>{{ model.active ? 'Active' : 'Inactive' }}</p>
          </div>
        </div>
      </div>
    </div>
    </template>
  </DetailReadPage>
</template>

<style scoped>
.model-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);
}

.model-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>
