<template>
  <div v-if="usage" 
       class="usage-display" 
       :title="computationTitle"
       @click="copyMeta"
       style="cursor: pointer;"
  >
    {{ totalCostLabel }}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Agent } from '../composables/agents';

const props = defineProps<{
  usage: any;
  agentId: string | null;
  allAgents: Agent[];
  type?: 'turn' | 'session';
}>();

const agent = computed(() => props.allAgents?.find(a => a.id === props.agentId));

const pricing = computed(() => {
  const a = agent.value;
  if (!a || a.promptPrice === null || a.completionPrice === null) return null;
  return { prompt: a.promptPrice, completion: a.completionPrice };
});

const totalCostLabel = computed(() => {
  const inn = props.usage?.input_tokens ?? props.usage?.in ?? 0;
  const out = props.usage?.output_tokens ?? props.usage?.out ?? 0;
  const pricingVal = pricing.value;
  if (pricingVal) {
    const total = (inn / 1_000_000) * pricingVal.prompt + (out / 1_000_000) * pricingVal.completion;
    return `$${total.toFixed(4)}`;
  }
  // fallback to backend cost
  const cost = typeof props.usage?.cost === 'object' ? (props.usage.cost?.total ?? 0) : Number(props.usage?.cost || 0);
  return cost > 0 ? `$${cost.toFixed(4)}` : `${(inn + out).toLocaleString()} tokens`;
});

const computationTitle = computed(() => {
  const inn = props.usage?.input_tokens ?? props.usage?.in ?? 0;
  const out = props.usage?.output_tokens ?? props.usage?.out ?? 0;
  
  const typeLabel = props.type === 'session' ? '[SESSION TOTAL]' : '[SINGLE TURN]';
  const modelName = agent.value?.modelName || agent.value?.model || 'Unknown model';
  const pricingVal = pricing.value;
  const pricingInfo = pricingVal 
    ? `promptPrice: $${pricingVal.prompt.toFixed(2)}/1M | completionPrice: $${pricingVal.completion.toFixed(2)}/1M`
    : `Pricing: Not available for this model`;

  if (!pricingVal) {
    const costValue = typeof props.usage?.cost === 'object' ? (props.usage.cost?.total ?? 0) : Number(props.usage?.cost || 0);
    return `${typeLabel}\nModel: ${modelName}\n${pricingInfo}\nTokens: ${(inn + out).toLocaleString()} | backendCost: $${costValue.toFixed(4)}`;
  }
  
  const inCost = (inn / 1_000_000) * pricingVal.prompt;
  const outCost = (out / 1_000_000) * pricingVal.completion;
  const total = inCost + outCost;
  
  return `${typeLabel}\nModel: ${modelName}\n${pricingInfo}\nUsage: ${inn.toLocaleString()} in + ${out.toLocaleString()} out = ${(inn + out).toLocaleString()} tokens\nCalculation: (${inn.toLocaleString()} * $${pricingVal.prompt.toFixed(2)}/1M) + (${out.toLocaleString()} * $${pricingVal.completion.toFixed(2)}/1M) = $${total.toFixed(4)}`;
});

function copyMeta() {
  navigator.clipboard.writeText(computationTitle.value).then(() => {
    // Optional: could add a temporary success state/toast here
    console.log('Copied usage meta to clipboard');
  });
}
</script>

<style scoped>
.usage-display {
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  background: var(--surface);
}
</style>
