<!-- /src/components/financialReports/charts/ForecastChart.vue -->
<!-- Bar chart of expected future cash inflow, bucketed by the upcoming due-date week. -->
<template>
  <div class="chart-wrap" dir="ltr" :style="{ height: height + 'px' }">
    <Bar :data="chartData" :options="options" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { Bar } from 'vue-chartjs';
import { usePersianDate } from '@/composables/usePersianDate';
import { CHART_COLORS } from '@/utils/chartTheme';

const props = defineProps({
  labels: { type: Array, default: () => [] },
  amounts: { type: Array, default: () => [] },
  counts: { type: Array, default: () => [] },
  height: { type: Number, default: 240 }
});

const { toPersianDigits } = usePersianDate();
const formatToman = (v) => `${toPersianDigits(Math.round(v || 0).toLocaleString())} تومان`;

const chartData = computed(() => ({
  labels: props.labels,
  datasets: [
    {
      label: 'دریافتی پیش‌بینی‌شده',
      data: props.amounts,
      backgroundColor: CHART_COLORS.sessionIncome,
      borderRadius: 6,
      maxBarThickness: 40
    }
  ]
}));

const options = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: { display: false },
    tooltip: {
      rtl: true,
      textDirection: 'rtl',
      callbacks: {
        label: (ctx) => `${formatToman(ctx.parsed.y)}`,
        afterLabel: (ctx) => {
          const count = props.counts[ctx.dataIndex];
          return count ? `${toPersianDigits(count)} قسط در انتظار` : '';
        }
      }
    }
  },
  scales: {
    x: { grid: { display: false }, ticks: { color: CHART_COLORS.muted } },
    y: {
      grid: { color: CHART_COLORS.gridLine, drawBorder: false },
      ticks: { color: CHART_COLORS.muted, callback: (v) => toPersianDigits(Number(v).toLocaleString()) }
    }
  }
}));
</script>

<style scoped>
.chart-wrap {
  width: 100%;
  position: relative;
}
</style>
