<script setup>
import { useTheme } from "vuetify";
import { hexToRgb } from "@layouts/utils";

const vuetifyTheme = useTheme();
const currentTab = ref(0);
const refVueApexChart = ref();

const cardBackgroundStyle = computed(() => {
  const currentTheme = vuetifyTheme.current.value.colors;
  const primaryColor = currentTheme.primary;

  const createGradientColor = (color, opacity = 0.08) => {
    if (color.includes("rgba")) {
      return color.replace(/[\d\.]+\)$/g, `${opacity})`);
    }
    if (color.startsWith("#")) {
      return `rgba(${hexToRgb(color)}, ${opacity})`;
    }
    if (color.includes("rgb")) {
      return color.replace("rgb", "rgba").replace(")", `, ${opacity})`);
    }
    return `rgba(${hexToRgb(color)}, ${opacity})`;
  };

  const gradientColor1 = createGradientColor(primaryColor, 0.12);
  const gradientColor2 = createGradientColor(primaryColor, 0.04);

  return {
    background: `linear-gradient(135deg, 
      ${gradientColor1} 0%, 
      ${gradientColor2} 50%,
      ${gradientColor1} 100%)`,
  };
});

const chartConfigs = computed(() => {
  const currentTheme = vuetifyTheme.current.value.colors;
  const variableTheme = vuetifyTheme.current.value.variables;
  const labelPrimaryColor = `rgba(${hexToRgb(currentTheme.primary)},${
    variableTheme["dragged-opacity"]
  })`;
  const legendColor = `rgba(${hexToRgb(currentTheme["on-background"])},${
    variableTheme["high-emphasis-opacity"]
  })`;
  const borderColor = `rgba(${hexToRgb(
    String(variableTheme["border-color"])
  )},${variableTheme["border-opacity"]})`;
  const labelColor = `rgba(${hexToRgb(currentTheme["on-surface"])},${
    variableTheme["disabled-opacity"]
  })`;

  return [
    {
      title: "Orders",
      icon: "tabler-shopping-cart",
      chartOptions: {
        chart: {
          parentHeightOffset: 0,
          type: "bar",
          toolbar: { show: false },
        },
        plotOptions: {
          bar: {
            columnWidth: "32%",
            borderRadiusApplication: "end",
            borderRadius: 4,
            distributed: true,
            dataLabels: { position: "top" },
          },
        },
        grid: {
          show: false,
          padding: {
            top: 0,
            bottom: 0,
            left: -10,
            right: -10,
          },
        },
        colors: [
          labelPrimaryColor,
          labelPrimaryColor,
          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
        ],
        dataLabels: {
          enabled: true,
          formatter(val) {
            return `${val}k`;
          },
          offsetY: -25,
          style: {
            fontSize: "15px",
            colors: [legendColor],
            fontWeight: "600",
            fontFamily: "Public Sans",
          },
        },
        legend: { show: false },
        tooltip: { enabled: false },
        xaxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
          ],
          axisBorder: {
            show: true,
            color: borderColor,
          },
          axisTicks: { show: false },
          labels: {
            style: {
              colors: labelColor,
              fontSize: "13px",
              fontFamily: "Public Sans",
            },
          },
        },
        yaxis: {
          labels: {
            offsetX: -15,
            formatter(val) {
              return `${val / 1}k`;
            },
            style: {
              fontSize: "13px",
              colors: labelColor,
              fontFamily: "Public Sans",
            },
            min: 0,
            max: 60000,
            tickAmount: 6,
          },
        },
        responsive: [
          {
            breakpoint: 1441,
            options: { plotOptions: { bar: { columnWidth: "41%" } } },
          },
          {
            breakpoint: 590,
            options: {
              plotOptions: { bar: { columnWidth: "61%" } },
              yaxis: { labels: { show: false } },
              grid: {
                padding: {
                  right: 0,
                  left: -20,
                },
              },
              dataLabels: {
                style: {
                  fontSize: "12px",
                  fontWeight: "400",
                },
              },
            },
          },
        ],
      },
      series: [
        {
          data: [28, 10, 45, 38, 15, 30, 35, 30, 8],
        },
      ],
    },
    {
      title: "Sales",
      icon: "tabler-chart-bar",
      chartOptions: {
        chart: {
          parentHeightOffset: 0,
          type: "bar",
          toolbar: { show: false },
        },
        plotOptions: {
          bar: {
            columnWidth: "32%",
            borderRadiusApplication: "end",
            borderRadius: 4,
            distributed: true,
            dataLabels: { position: "top" },
          },
        },
        grid: {
          show: false,
          padding: {
            top: 0,
            bottom: 0,
            left: -10,
            right: -10,
          },
        },
        colors: [
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
          labelPrimaryColor,
          labelPrimaryColor,
        ],
        dataLabels: {
          enabled: true,
          formatter(val) {
            return `${val}k`;
          },
          offsetY: -25,
          style: {
            fontSize: "15px",
            colors: [legendColor],
            fontWeight: "600",
            fontFamily: "Public Sans",
          },
        },
        legend: { show: false },
        tooltip: { enabled: false },
        xaxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
          ],
          axisBorder: {
            show: true,
            color: borderColor,
          },
          axisTicks: { show: false },
          labels: {
            style: {
              colors: labelColor,
              fontSize: "13px",
              fontFamily: "Public Sans",
            },
          },
        },
        yaxis: {
          labels: {
            offsetX: -15,
            formatter(val) {
              return `${val / 1}k`;
            },
            style: {
              fontSize: "13px",
              colors: labelColor,
              fontFamily: "Public Sans",
            },
            min: 0,
            max: 60000,
            tickAmount: 6,
          },
        },
        responsive: [
          {
            breakpoint: 1441,
            options: { plotOptions: { bar: { columnWidth: "41%" } } },
          },
          {
            breakpoint: 590,
            options: {
              plotOptions: { bar: { columnWidth: "61%" } },
              grid: { padding: { right: 0 } },
              dataLabels: {
                style: {
                  fontSize: "12px",
                  fontWeight: "400",
                },
              },
              yaxis: { labels: { show: false } },
            },
          },
        ],
      },
      series: [
        {
          data: [35, 25, 15, 40, 42, 25, 48, 8, 30],
        },
      ],
    },
    {
      title: "Profit",
      icon: "tabler-currency-dollar",
      chartOptions: {
        chart: {
          parentHeightOffset: 0,
          type: "bar",
          toolbar: { show: false },
        },
        plotOptions: {
          bar: {
            columnWidth: "32%",
            borderRadiusApplication: "end",
            borderRadius: 4,
            distributed: true,
            dataLabels: { position: "top" },
          },
        },
        grid: {
          show: false,
          padding: {
            top: 0,
            bottom: 0,
            left: -10,
            right: -10,
          },
        },
        colors: [
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
        ],
        dataLabels: {
          enabled: true,
          formatter(val) {
            return `${val}k`;
          },
          offsetY: -25,
          style: {
            fontSize: "15px",
            colors: [legendColor],
            fontWeight: "600",
            fontFamily: "Public Sans",
          },
        },
        legend: { show: false },
        tooltip: { enabled: false },
        xaxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
          ],
          axisBorder: {
            show: true,
            color: borderColor,
          },
          axisTicks: { show: false },
          labels: {
            style: {
              colors: labelColor,
              fontSize: "13px",
              fontFamily: "Public Sans",
            },
          },
        },
        yaxis: {
          labels: {
            offsetX: -15,
            formatter(val) {
              return `${val / 1}k`;
            },
            style: {
              fontSize: "13px",
              colors: labelColor,
              fontFamily: "Public Sans",
            },
            min: 0,
            max: 60000,
            tickAmount: 6,
          },
        },
        responsive: [
          {
            breakpoint: 1441,
            options: { plotOptions: { bar: { columnWidth: "41%" } } },
          },
          {
            breakpoint: 590,
            options: {
              plotOptions: { bar: { columnWidth: "61%" } },
              grid: { padding: { right: 0 } },
              dataLabels: {
                style: {
                  fontSize: "12px",
                  fontWeight: "400",
                },
              },
              yaxis: { labels: { show: false } },
            },
          },
        ],
      },
      series: [
        {
          data: [10, 22, 27, 33, 42, 32, 27, 22, 8],
        },
      ],
    },
    {
      title: "Income",
      icon: "tabler-chart-pie-2",
      chartOptions: {
        chart: {
          parentHeightOffset: 0,
          type: "bar",
          toolbar: { show: false },
        },
        plotOptions: {
          bar: {
            columnWidth: "32%",
            borderRadius: 6,
            distributed: true,
            borderRadiusApplication: "end",
            dataLabels: { position: "top" },
          },
        },
        grid: {
          show: false,
          padding: {
            top: 0,
            bottom: 0,
            left: -10,
            right: -10,
          },
        },
        colors: [
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          labelPrimaryColor,
          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
        ],
        dataLabels: {
          enabled: true,
          formatter(val) {
            return `${val}k`;
          },
          offsetY: -25,
          style: {
            fontSize: "15px",
            colors: [legendColor],
            fontWeight: "600",
            fontFamily: "Public Sans",
          },
        },
        legend: { show: false },
        tooltip: { enabled: false },
        xaxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
          ],
          axisBorder: {
            show: true,
            color: borderColor,
          },
          axisTicks: { show: false },
          labels: {
            style: {
              colors: labelColor,
              fontSize: "13px",
              fontFamily: "Public Sans",
            },
          },
        },
        yaxis: {
          labels: {
            offsetX: -15,
            formatter(val) {
              return `${val / 1}k`;
            },
            style: {
              fontSize: "13px",
              colors: labelColor,
              fontFamily: "Public Sans",
            },
            min: 0,
            max: 60000,
            tickAmount: 6,
          },
        },
        responsive: [
          {
            breakpoint: 1441,
            options: { plotOptions: { bar: { columnWidth: "41%" } } },
          },
          {
            breakpoint: 590,
            options: {
              plotOptions: { bar: { columnWidth: "50%" } },
              dataLabels: {
                style: {
                  fontSize: "12px",
                  fontWeight: "400",
                },
              },
              grid: { padding: { right: 0 } },
              yaxis: { labels: { show: false } },
            },
          },
        ],
      },
      series: [
        {
          data: [5, 9, 12, 18, 20, 25, 30, 36, 48],
        },
      ],
    },
  ];
});

const moreList = [
  {
    title: "View More",
    value: "View More",
  },
  {
    title: "Delete",
    value: "Delete",
  },
];
</script>

<template>
  <VCard
    title="Earning Reports"
    subtitle="Yearly Earnings Overview"
    :style="cardBackgroundStyle"
  >
    <template #append>
      <div class="mt-n4 me-n2">
        <MoreBtn size="small" :menu-list="moreList" />
      </div>
    </template>

    <VCardText>
      <VSlideGroup v-model="currentTab" show-arrows mandatory class="mb-10">
        <VSlideGroupItem
          v-for="(report, index) in chartConfigs"
          :key="report.title"
          v-slot="{ isSelected, toggle }"
          :value="index"
        >
          <div
            style="block-size: 100px; inline-size: 110px"
            :style="
              isSelected
                ? 'border-color:rgb(var(--v-theme-primary)) !important'
                : ''
            "
            :class="isSelected ? 'border' : 'border border-dashed'"
            class="d-flex flex-column justify-center align-center cursor-pointer rounded py-4 px-5 me-4"
            @click="toggle"
          >
            <VAvatar
              rounded
              size="38"
              :color="isSelected ? 'primary' : ''"
              variant="tonal"
              class="mb-2"
            >
              <VIcon size="22" :icon="report.icon" />
            </VAvatar>
            <h6 class="text-base font-weight-medium mb-0">
              {{ report.title }}
            </h6>
          </div>
        </VSlideGroupItem>

        <!-- 👉 slider more -->
        <VSlideGroupItem>
          <div
            style="block-size: 100px; inline-size: 110px"
            class="d-flex flex-column justify-center align-center rounded border border-dashed py-4 px-5"
          >
            <VAvatar rounded size="38" variant="tonal">
              <VIcon size="22" icon="tabler-plus" />
            </VAvatar>
          </div>
        </VSlideGroupItem>
      </VSlideGroup>

      <VueApexCharts
        ref="refVueApexChart"
        :key="currentTab"
        :options="chartConfigs[Number(currentTab)].chartOptions"
        :series="chartConfigs[Number(currentTab)].series"
        height="230"
        class="mt-3"
      />
    </VCardText>
  </VCard>
</template>
