<template>
  <div class="stat bg-base-100 rounded-lg shadow">
    <div class="stat-figure" :class="iconColorClass">
      <svg v-if="changeDirection === 'up'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
      </svg>
      <svg v-else-if="changeDirection === 'down'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181" />
      </svg>
      <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
      </svg>
    </div>
    <div class="stat-title">{{ title }}</div>
    <div class="stat-value text-2xl">{{ formattedValue }}</div>
    <div class="stat-desc" :class="changeColorClass">
      <span v-if="changeDirection === 'up'">+</span>
      <span v-else-if="changeDirection === 'down'">-</span>
      {{ Math.abs(changePercent).toFixed(1) }}% vs {{ compareYear }}
      <span class="text-base-content/60 ml-1">({{ formattedPrevious }})</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  title: string;
  currentValue: number;
  previousValue: number;
  changePercent: number;
  changeDirection: 'up' | 'down' | 'neutral';
  compareYear: number;
  format?: 'number' | 'currency' | 'gallons';
}

const props = withDefaults(defineProps<Props>(), {
  format: 'number'
});

const formattedValue = computed(() => {
  if (props.format === 'currency') {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      maximumFractionDigits: 0
    }).format(props.currentValue);
  }
  if (props.format === 'gallons') {
    return props.currentValue.toLocaleString() + ' gal';
  }
  return props.currentValue.toLocaleString();
});

const formattedPrevious = computed(() => {
  if (props.format === 'currency') {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      maximumFractionDigits: 0
    }).format(props.previousValue);
  }
  if (props.format === 'gallons') {
    return props.previousValue.toLocaleString() + ' gal';
  }
  return props.previousValue.toLocaleString();
});

const iconColorClass = computed(() => {
  if (props.changeDirection === 'up') return 'text-success';
  if (props.changeDirection === 'down') return 'text-error';
  return 'text-base-content/50';
});

const changeColorClass = computed(() => {
  if (props.changeDirection === 'up') return 'text-success';
  if (props.changeDirection === 'down') return 'text-error';
  return 'text-base-content/50';
});
</script>
