<script setup lang="ts">
import { computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { KsButton } from '@shared/ui/components'
import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
import { useModelDetail, useActivateModel, useDeactivateModel, useTransitionPhase } from '../composables/useModels'

const route = useRoute()
const router = useRouter()
const registry = useKbxRegistry()

// Get screen definition from registry
const screenDef = computed(() =>
  registry.getScreen('model-ops.models.detail'),
)

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

// Phases in lifecycle order
const phases = [
  'Freeze',
  'Mature',
  'Score',
  'Diagnose',
  'Hypothesis',
  'Challenger',
  'Validate',
  'Review',
  'Manual Activation',
]

// TanStack Query hooks
const modelQuery = useModelDetail(modelId.value)
const activateMutation = useActivateModel()
const deactivateMutation = useDeactivateModel()
const transitionMutation = useTransitionPhase()

// Computed property for model data
const model = computed(() => modelQuery.data.value || {
  modelId: modelId.value,
  name: 'Loading...',
  description: '',
  phase: 'Freeze' as const,
  active: false,
  lastValidation: '',
  pbo: 0,
  dsr: 0,
  oos: 0,
  returnMtd: 0,
  createdAt: '',
  updatedAt: '',
  validationHistory: [],
  configuration: {
    lookbackPeriod: 252,
    rebalanceFrequency: 'daily',
    riskLimit: 2.0,
    maxPositions: 20,
    minLiquidityDays: 10,
  },
})

// Find current phase index
const currentPhaseIndex = computed(() => {
  return phases.findIndex(p => p === model.value.phase)
})

// Check activation requirements
const activationRequirements = computed(() => {
  return {
    shadowRun: { met: true, requirement: '252+ trading days', value: '✓ 252+ days completed' },
    pbo: { met: model.value.pbo <= 20, requirement: 'PBO < 20%', value: `${model.value.pbo}%` },
    dsr: { met: model.value.dsr >= 95, requirement: 'DSR ≥ 95%', value: `${model.value.dsr}%` },
    oos: { met: model.value.oos <= 2.5, requirement: 'OOS ≤ 2.5%', value: `${model.value.oos}%` },
    approval: { met: false, requirement: 'Maker-checker approval', value: '⏳ Pending' },
  }
})

// Check if all requirements met
const canActivate = computed(() => {
  return Object.values(activationRequirements.value).every(r => r.met)
})

// Actions
const handleBack = () => {
  router.push('/model-ops/models')
}

const handleEdit = () => {
  router.push(`/model-ops/models/${modelId.value}/edit`)
}

const handleActivate = async () => {
  if (canActivate.value) {
    await activateMutation.mutateAsync(modelId.value)
  }
}

const handleDeactivate = async () => {
  await deactivateMutation.mutateAsync(modelId.value)
}

const handlePhaseTransition = async (newPhase: string) => {
  const currentIndex = currentPhaseIndex.value
  const newIndex = phases.indexOf(newPhase)

  if (newIndex > currentIndex) {
    await transitionMutation.mutateAsync({
      modelId: modelId.value,
      phase: newPhase as any,
    })
  }
}

// Keyboard shortcuts
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Escape') {
    handleBack()
  } else if (e.ctrlKey && e.key === 'e') {
    e.preventDefault()
    handleEdit()
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<template>
  <div class="model-detail">
    <!-- Header -->
    <header class="detail-header">
      <div>
        <h1>{{ model.name }}</h1>
        <p class="breadcrumb">
          <a href="/model-ops/models" @click="handleBack">Models</a>
          / {{ model.name }}
        </p>
      </div>
      <div class="header-actions">
        <KsButton
          label="Edit"
          severity="secondary"
          @click="handleEdit"
        />
        <KsButton
          v-if="!model.active"
          :label="canActivate ? 'Activate' : 'Cannot Activate'"
          :severity="canActivate ? 'primary' : 'secondary'"
          :disabled="!canActivate"
          @click="handleActivate"
        />
        <KsButton
          v-else
          label="Deactivate"
          severity="danger"
          @click="handleDeactivate"
        />
        <KsButton
          label="Back"
          severity="secondary"
          @click="handleBack"
        />
      </div>
    </header>

    <!-- Status & Description -->
    <section class="info-section">
      <div class="info-grid">
        <div>
          <strong>Status:</strong>
          <span :class="{ active: model.active, inactive: !model.active }">
            {{ model.active ? 'Active' : 'Inactive' }}
          </span>
        </div>
        <div>
          <strong>Phase:</strong>
          {{ model.phase }}
        </div>
        <div>
          <strong>Last Validation:</strong>
          {{ model.lastValidation }}
        </div>
        <div>
          <strong>Created:</strong>
          {{ model.createdAt }}
        </div>
      </div>
      <div v-if="model.description" class="description">
        <strong>Description:</strong>
        <p>{{ model.description }}</p>
      </div>
    </section>

    <!-- Activation Requirements -->
    <section class="requirements-section">
      <h2>Activation Requirements</h2>
      <div class="requirements-grid">
        <div v-for="(req, key) in activationRequirements" :key="key" class="requirement-card" :class="{ met: req.met }">
          <div class="requirement-check">
            {{ req.met ? '✓' : '✗' }}
          </div>
          <div class="requirement-info">
            <div class="requirement-name">{{ req.requirement }}</div>
            <div class="requirement-value">{{ req.value }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Key Metrics -->
    <section class="metrics-section">
      <h2>Key Metrics</h2>
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-label">PBO</div>
          <div class="metric-value" :class="{ ok: model.pbo <= 20 }">
            {{ model.pbo }}%
          </div>
          <div class="metric-requirement">Target: ≤ 20%</div>
        </div>
        <div class="metric-card">
          <div class="metric-label">DSR</div>
          <div class="metric-value" :class="{ ok: model.dsr >= 95 }">
            {{ model.dsr }}%
          </div>
          <div class="metric-requirement">Target: ≥ 95%</div>
        </div>
        <div class="metric-card">
          <div class="metric-label">OOS</div>
          <div class="metric-value" :class="{ ok: model.oos <= 2.5 }">
            {{ model.oos }}%
          </div>
          <div class="metric-requirement">Target: ≤ 2.5%</div>
        </div>
        <div class="metric-card">
          <div class="metric-label">Return (MTD)</div>
          <div class="metric-value positive">
            +{{ model.returnMtd }}%
          </div>
          <div class="metric-requirement">Month-to-date</div>
        </div>
      </div>
    </section>

    <!-- Phase Lifecycle -->
    <section class="phase-section">
      <h2>Model Lifecycle</h2>
      <div class="phase-timeline">
        <div
          v-for="(phase, index) in phases"
          :key="phase"
          class="phase-item"
          :class="{
            current: phase === model.phase,
            completed: index < currentPhaseIndex,
            future: index > currentPhaseIndex,
          }"
        >
          <div class="phase-dot"></div>
          <div class="phase-label">{{ phase }}</div>
          <div v-if="index < currentPhaseIndex" class="phase-badge">✓</div>
        </div>
      </div>
    </section>

    <!-- Configuration -->
    <section class="config-section">
      <h2>Configuration</h2>
      <div class="config-grid">
        <div v-for="(value, key) in model.configuration" :key="key" class="config-item">
          <strong>{{ key.replace(/([A-Z])/g, ' $1').toLowerCase() }}:</strong>
          {{ value }}
        </div>
      </div>
    </section>

    <!-- Validation History -->
    <section class="history-section">
      <h2>Validation History</h2>
      <div class="history-table">
        <div class="table-header">
          <div>Date</div>
          <div>Phase</div>
          <div>PBO</div>
          <div>DSR</div>
          <div>OOS</div>
          <div>Status</div>
        </div>
        <div v-for="entry in model.validationHistory" :key="entry.date" class="table-row">
          <div>{{ entry.date }}</div>
          <div>{{ entry.phase }}</div>
          <div>{{ entry.pbo }}%</div>
          <div>{{ entry.dsr }}%</div>
          <div>{{ entry.oos }}%</div>
          <div :class="{ approved: entry.status === 'approved', rejected: entry.status === 'rejected' }">
            {{ entry.status }}
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.model-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 16px;
}

.detail-header h1 {
  margin: 0;
  font-size: 28px;
}

.breadcrumb {
  margin: 8px 0 0 0;
  color: #666;
  font-size: 14px;
}

.breadcrumb a {
  color: var(--kbx-color-primary, #3b82f6);
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Info Section */
.info-section {
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
  background: #f9f9f9;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.info-grid div strong {
  display: block;
  margin-bottom: 4px;
  color: #666;
  font-size: 12px;
  text-transform: uppercase;
}

.info-grid .active {
  color: #10b981;
  font-weight: bold;
}

.info-grid .inactive {
  color: #666;
  font-weight: bold;
}

.description {
  padding-top: 16px;
  border-top: 1px solid #d0d0d0;
}

.description strong {
  display: block;
  margin-bottom: 8px;
}

.description p {
  margin: 0;
  line-height: 1.6;
}

/* Requirements Section */
.requirements-section h2,
.metrics-section h2,
.phase-section h2,
.config-section h2,
.history-section h2 {
  font-size: 18px;
  margin: 0 0 16px 0;
}

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

.requirement-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
}

.requirement-card.met {
  background: #f0fdf4;
  border-left-color: #10b981;
}

.requirement-check {
  font-size: 20px;
  font-weight: bold;
  min-width: 24px;
}

.requirement-card.met .requirement-check {
  color: #10b981;
}

.requirement-card:not(.met) .requirement-check {
  color: #ef4444;
}

.requirement-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.requirement-value {
  font-size: 14px;
  color: #666;
}

/* Metrics Section */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.metric-card {
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.metric-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.metric-value.ok {
  color: #10b981;
}

.metric-value.positive {
  color: #10b981;
}

.metric-requirement {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* Phase Timeline */
.phase-timeline {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0;
}

.phase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  position: relative;
}

.phase-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d0d0d0;
  border: 2px solid white;
}

.phase-item.completed .phase-dot {
  background: #10b981;
}

.phase-item.current .phase-dot {
  background: var(--kbx-color-primary, #3b82f6);
  width: 20px;
  height: 20px;
  border-width: 3px;
}

.phase-label {
  font-size: 12px;
  text-align: center;
  max-width: 90px;
  line-height: 1.3;
}

.phase-badge {
  font-size: 12px;
  font-weight: bold;
  color: #10b981;
}

/* Configuration Section */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.config-item {
  padding: 12px;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 14px;
}

.config-item strong {
  display: block;
  margin-bottom: 4px;
  color: #666;
  text-transform: capitalize;
}

/* History Table */
.history-table {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 100px 100px 60px 60px 60px 100px;
  gap: 0;
  background: #f0f0f0;
  padding: 12px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.table-row {
  display: grid;
  grid-template-columns: 100px 100px 60px 60px 60px 100px;
  gap: 0;
  padding: 12px;
  border-top: 1px solid #e0e0e0;
  font-size: 14px;
  align-items: center;
}

.table-row .approved {
  color: #10b981;
  font-weight: 600;
}

.table-row .rejected {
  color: #ef4444;
  font-weight: 600;
}
</style>
