<script setup lang="ts">
import { useBacktest } from '@/composables/useBacktest'
import BacktestConfig from '@/components/BacktestConfig.vue'
import EquityCurve from '@/components/EquityCurve.vue'
import MetricsPanel from '@/components/MetricsPanel.vue'
import TradeLog from '@/components/TradeLog.vue'

const { currentResult, loading, error } = useBacktest()
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold">Lowkey Backtest</h1>
        <p class="text-text-secondary text-sm mt-1">
          Run and analyze trading strategy backtests
        </p>
      </div>
    </div>
    
    <!-- Error Banner -->
    <div 
      v-if="error" 
      class="p-4 rounded-lg bg-loss/10 border border-loss/30 text-loss"
    >
      {{ error }}
    </div>
    
    <!-- Main Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Config Panel (Left) -->
      <div class="lg:col-span-1">
        <BacktestConfig />
      </div>
      
      <!-- Results (Right) -->
      <div class="lg:col-span-2 space-y-6">
        <!-- Loading State -->
        <div 
          v-if="loading" 
          class="card flex items-center justify-center h-[400px]"
        >
          <div class="text-center">
            <div class="spinner mx-auto mb-4" style="width: 40px; height: 40px;"></div>
            <p class="text-text-secondary">Running backtest...</p>
          </div>
        </div>
        
        <!-- Results Display -->
        <template v-else-if="currentResult">
          <!-- Result Header -->
          <div class="card">
            <div class="flex items-center justify-between">
              <div>
                <h2 class="text-lg font-semibold">
                  {{ currentResult.strategy }} on {{ currentResult.symbol }}
                </h2>
                <p class="text-sm text-text-secondary mt-1">
                  {{ currentResult.start_date }} - {{ currentResult.end_date }}
                  <span class="mx-2">|</span>
                  {{ currentResult.market_type.toUpperCase() }}
                  <span v-if="currentResult.leverage > 1" class="ml-2">
                    {{ currentResult.leverage }}x
                  </span>
                </p>
              </div>
              <div class="text-right">
                <div 
                  class="text-2xl font-bold"
                  :class="currentResult.metrics.total_return >= 0 ? 'profit' : 'loss'"
                >
                  {{ currentResult.metrics.total_return >= 0 ? '+' : '' }}{{ currentResult.metrics.total_return.toFixed(2) }}%
                </div>
                <div class="text-sm text-text-secondary">
                  Sharpe: {{ currentResult.metrics.sharpe_ratio.toFixed(2) }}
                </div>
              </div>
            </div>
          </div>
          
          <!-- Equity Curve -->
          <div class="card">
            <h3 class="text-sm font-semibold text-text-secondary uppercase tracking-wide mb-4">
              Equity Curve
            </h3>
            <div class="h-[350px]">
              <EquityCurve :data="currentResult.equity_curve" />
            </div>
          </div>
          
          <!-- Metrics -->
          <MetricsPanel 
            :metrics="currentResult.metrics"
            :leverage="currentResult.leverage"
            :market-type="currentResult.market_type"
          />
          
          <!-- Trade Log -->
          <TradeLog :trades="currentResult.trades" />
          
          <!-- Parameters Used -->
          <div class="card">
            <h3 class="text-sm font-semibold text-text-secondary uppercase tracking-wide mb-3">
              Parameters
            </h3>
            <div class="flex flex-wrap gap-2">
              <span 
                v-for="(value, key) in currentResult.params" 
                :key="key"
                class="px-2 py-1 rounded bg-bg-tertiary text-sm font-mono"
              >
                {{ key }}: {{ value }}
              </span>
            </div>
          </div>
        </template>
        
        <!-- Empty State -->
        <div 
          v-else 
          class="card flex items-center justify-center h-[400px]"
        >
          <div class="text-center text-text-muted">
            <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            <p>Configure and run a backtest to see results.</p>
            <p class="text-xs mt-2">Or select a run from history.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
