<script setup lang="ts">
import { ref, computed } from 'vue'
import { SkeletonLoader } from '@shared/ui/components'
import { useModelsList } from '../composables/useModels'

const currentPage = ref(1)
const pageSize = ref(20)

const queryParams = computed(() => ({
  page: currentPage.value,
  pageSize: pageSize.value,
}))

const modelsQuery = useModelsList(queryParams.value)

const items = computed(() => {
  const data = modelsQuery.data as any
  return data?.items || []
})
</script>

<template>
  <div class="models-page">
    <header class="page-header">
      <h1>Model Management</h1>
      <p>Manage trading models across their complete lifecycle</p>
    </header>

    <!-- Loading State -->
    <div v-if="modelsQuery.isPending" class="loading-state">
      <SkeletonLoader type="table" :rows="5" />
    </div>

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

    <!-- Empty State -->
    <div v-else-if="!items.length" class="empty-state">
      <p>No models found. Create a new model to get started.</p>
    </div>

    <!-- Data State -->
    <div v-else class="models-grid">
      <table class="models-table">
        <thead>
          <tr>
            <th>Model ID</th>
            <th>Name</th>
            <th>Phase</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="model in items" :key="model.id" data-testid="model-row">
            <td>{{ (model as any).id }}</td>
            <td>{{ (model as any).name }}</td>
            <td>{{ (model as any).phase }}</td>
            <td>{{ (model as any).active ? 'Active' : 'Inactive' }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.models-page {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

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

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

.page-header p {
  margin: 0.5rem 0 0 0;
  color: var(--color-text-secondary);
}

.loading-state,
.error-state,
.empty-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);
}

.models-grid {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.models-table {
  width: 100%;
  border-collapse: collapse;
}

.models-table thead {
  background-color: var(--color-background-secondary);
}

.models-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-primary);
}

.models-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border-primary);
}

.models-table tbody tr:hover {
  background-color: var(--color-background-hover);
}
</style>
