{% comment %}
Reusable Trace Score Trends chart component.
Params: canvas_id (default: trendChart), title (default: Trace Score Trends)
Expects parent Alpine scope: getTrendDataForChart(), graphOverlay
Parent should call refreshTrendChart() and set up filter watchers to update data.
{% endcomment %}
<c-card class="flex flex-col" style="height: 100%;" x-init="$nextTick(() => { EvalCharts.initScoreTrendChart('{{ canvas_id|default:'trendChart' }}', getTrendDataForChart(), graphOverlay); $watch('graphOverlay', () => EvalCharts.applyOverlayWithRetry('{{ canvas_id|default:'trendChart' }}', graphOverlay), { deep: true }); })">
  <c-card-header class="shrink-0 flex flex-col gap-2">
    <div class="flex items-center justify-between">
      <c-card-title>{{ title|default:"Trace Score Trends" }}</c-card-title>
      <button type="button" @click="EvalCharts.resetZoom('{{ canvas_id|default:'trendChart' }}')" class="text-xs text-muted-foreground hover:text-foreground transition-colors">Reset zoom</button>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground">Overlay:</span>
      <button type="button" @click="graphOverlay.score = !graphOverlay.score; $nextTick(() => EvalCharts.applyOverlayWithRetry('{{ canvas_id|default:'trendChart' }}', graphOverlay))" class="h-7 px-2.5 rounded-md text-xs font-medium transition-colors border"
              :class="graphOverlay.score ? '' : 'border-input bg-transparent text-muted-foreground hover:bg-muted/50'" :style="graphOverlay.score ? 'background-color: rgba(14, 165, 233, 0.15); border-color: #0ea5e9; color: #0369a1' : ''">Factual accuracy</button>
      <button type="button" @click="graphOverlay.cost = !graphOverlay.cost; $nextTick(() => EvalCharts.applyOverlayWithRetry('{{ canvas_id|default:'trendChart' }}', graphOverlay))" class="h-7 px-2.5 rounded-md text-xs font-medium transition-colors border"
              :class="graphOverlay.cost ? '' : 'border-input bg-transparent text-muted-foreground hover:bg-muted/50'" :style="graphOverlay.cost ? 'background-color: rgba(249, 115, 22, 0.15); border-color: #f97316; color: #c2410c' : ''">Coherence</button>
      <button type="button" @click="graphOverlay.totalTokens = !graphOverlay.totalTokens; $nextTick(() => EvalCharts.applyOverlayWithRetry('{{ canvas_id|default:'trendChart' }}', graphOverlay))" class="h-7 px-2.5 rounded-md text-xs font-medium transition-colors border"
              :class="graphOverlay.totalTokens ? '' : 'border-input bg-transparent text-muted-foreground hover:bg-muted/50'" :style="graphOverlay.totalTokens ? 'background-color: rgba(168, 85, 247, 0.15); border-color: #a855f7; color: #7e22ce' : ''">Relevance</button>
      <button type="button" @click="graphOverlay.inputTokens = !graphOverlay.inputTokens; $nextTick(() => EvalCharts.applyOverlayWithRetry('{{ canvas_id|default:'trendChart' }}', graphOverlay))" class="h-7 px-2.5 rounded-md text-xs font-medium transition-colors border"
              :class="graphOverlay.inputTokens ? '' : 'border-input bg-transparent text-muted-foreground hover:bg-muted/50'" :style="graphOverlay.inputTokens ? 'background-color: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #065f46' : ''">Safety</button>
      <button type="button" @click="graphOverlay.outputTokens = !graphOverlay.outputTokens; $nextTick(() => EvalCharts.applyOverlayWithRetry('{{ canvas_id|default:'trendChart' }}', graphOverlay))" class="h-7 px-2.5 rounded-md text-xs font-medium transition-colors border"
              :class="graphOverlay.outputTokens ? '' : 'border-input bg-transparent text-muted-foreground hover:bg-muted/50'" :style="graphOverlay.outputTokens ? 'background-color: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #b91c1c' : ''">Completeness</button>
    </div>
  </c-card-header>
  <c-card-content class="flex-1 flex flex-col" style="min-height: 0;">
    <div class="flex-1 relative min-h-0" style="max-height: 161px;">
      <canvas id="{{ canvas_id|default:'trendChart' }}" class="w-full"></canvas>
    </div>
    <div class="mt-2 flex flex-wrap gap-3 text-xs shrink-0 text-muted-foreground">
      <span class="inline-flex items-center gap-1.5">
        <span class="w-4 border-t-[3px] rounded border-solid" style="border-color: #4f46e5"></span>
        <span>Avg</span>
      </span>
      <span class="inline-flex items-center gap-1.5 transition-opacity" :class="graphOverlay.score ? '' : 'opacity-50'">
        <span class="w-4 border-t rounded" style="border-color: rgba(14, 165, 233, 0.9)"></span>
        <span :class="graphOverlay.score ? 'text-foreground' : ''">Factual accuracy</span>
      </span>
      <span class="inline-flex items-center gap-1.5 transition-opacity" :class="graphOverlay.cost ? '' : 'opacity-50'">
        <span class="w-4 border-t rounded" style="border-color: rgba(249, 115, 22, 0.9)"></span>
        <span :class="graphOverlay.cost ? 'text-foreground' : ''">Coherence</span>
      </span>
      <span class="inline-flex items-center gap-1.5 transition-opacity" :class="graphOverlay.totalTokens ? '' : 'opacity-50'">
        <span class="w-4 border-t rounded" style="border-color: rgba(168, 85, 247, 0.9)"></span>
        <span :class="graphOverlay.totalTokens ? 'text-foreground' : ''">Relevance</span>
      </span>
      <span class="inline-flex items-center gap-1.5 transition-opacity" :class="graphOverlay.inputTokens ? '' : 'opacity-50'">
        <span class="w-4 border-t rounded" style="border-color: rgba(16, 185, 129, 0.9)"></span>
        <span :class="graphOverlay.inputTokens ? 'text-foreground' : ''">Safety</span>
      </span>
      <span class="inline-flex items-center gap-1.5 transition-opacity" :class="graphOverlay.outputTokens ? '' : 'opacity-50'">
        <span class="w-4 border-t rounded" style="border-color: rgba(239, 68, 68, 0.9)"></span>
        <span :class="graphOverlay.outputTokens ? 'text-foreground' : ''">Completeness</span>
      </span>
    </div>
  </c-card-content>
</c-card>