import { ref as B, defineComponent as S, watch as T, computed as _, onMounted as le, createElementBlock as d, openBlock as o, createElementVNode as a, renderSlot as H, toDisplayString as w, resolveDirective as X, createCommentVNode as A, Fragment as z, renderList as P, createBlock as V, withDirectives as M, resolveDynamicComponent as N, unref as m, withCtx as I, createVNode as h, normalizeClass as L, resolveComponent as R, useModel as ae, createTextVNode as oe, isRef as j, nextTick as se } from "vue";
import { _ as ne } from "./Default.vue_vue_type_script_setup_true_lang-CNXchelN.js";
import { _ as ie } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-BZUipGZh.js";
import { a as G, q as O, F as J, u as K, g as Y, b as re } from "./vue-i18n-C1hP_yGq.js";
import { storeToRefs as Q } from "pinia";
import { d as W } from "./app-Clip2uYf.js";
import { C as ee, r as de } from "./chart-DDDh8zNk.js";
import { components as E, useSnackbar as ce } from "@feedmepos/ui-library";
import { _ as ue } from "./NoData.vue_vue_type_script_setup_true_lang-BwIUTmvY.js";
import { a as fe, G as me } from "./NavigationTab.vue_vue_type_script_setup_true_lang-Dbo0pwH4.js";
import { useCoreStore as ge } from "@feedmepos/mf-common";
function pe({ start: e, end: t }) {
  return `${W(t).format("DD MMM")}, ${W(t).format("YYYY")}`;
}
B(!0);
const ye = async (e) => {
  const { businessId: t } = Q(G());
  if (t) {
    const l = {
      fetchType: J.Post,
      url: `${t.value}/insights`,
      data: {
        ...e,
        isAnomaly: !0
        // isAnomaly: anomaly.value
      }
    };
    return O.fetch(l);
  } else
    return Promise.reject(new Error("Business Id is not defined"));
}, he = async (e) => {
  const { businessId: t } = G(), l = {
    fetchType: J.Post,
    url: `${t}/insights/feedbacks`,
    data: e
  };
  return O.fetch(l);
};
ee.register(...de);
const ve = { class: "flex flex-col h-full overflow-hidden" }, xe = { class: "flex flex-col gap-8" }, we = { class: "fm-color-typo-primary fm-typo-en-body-lg-400" }, be = { class: "fm-color-typo-secondary fm-typo-en-body-md-400" }, Ce = { class: "grow" }, ke = /* @__PURE__ */ S({
  __name: "LineChart",
  props: {
    name: { default: void 0 },
    paragraph: { default: void 0 },
    datasets: {},
    xAxis: {},
    transpose: { type: Boolean, default: !1 },
    stacked: { type: Boolean },
    maintainAspectRatio: { type: Boolean },
    hideXAxis: { type: Boolean, default: void 0 },
    hideYAxis: { type: Boolean, default: void 0 },
    legend: { default: void 0 }
  },
  setup(e) {
    const t = e, l = B(null);
    let s = null;
    T(
      [
        () => t.transpose,
        () => t.maintainAspectRatio,
        () => t.hideXAxis,
        () => t.hideYAxis,
        () => t.legend
      ],
      () => {
        s && s.config.options && (s.destroy(), u());
      }
    );
    const i = _(() => t.transpose ? "y" : "x"), x = _(() => ({
      labels: t.xAxis.categories,
      datasets: t.datasets.map((r) => ({
        ...r,
        borderDash: r.dash ? [5, 5] : void 0,
        tension: r.tension || 0.1
      }))
    }));
    T(
      x,
      () => {
        s && (s.data = x.value, s.update());
      },
      { deep: !0 }
    );
    function u() {
      l.value && (s = new ee(l.value, {
        type: "line",
        data: x.value,
        options: {
          plugins: {
            legend: t.legend || {
              display: !0,
              position: "bottom",
              maxHeight: 60,
              labels: {
                usePointStyle: !0,
                pointStyle: "line"
              }
            }
          },
          maintainAspectRatio: t.maintainAspectRatio,
          responsive: !0,
          indexAxis: i.value,
          scales: {
            x: {
              display: !t.hideXAxis,
              stacked: t.stacked,
              grid: {
                display: !1
              },
              beginAtZero: !0
            },
            y: {
              display: !t.hideYAxis,
              stacked: t.stacked,
              grid: {
                display: !0
              },
              position: "right",
              beginAtZero: !0
            }
          },
          elements: {
            line: {
              borderWidth: 1.5
            },
            point: {
              radius: 0,
              hitRadius: 30,
              hoverRadius: 6,
              hoverBackgroundColor: "#FFFFFF",
              hoverBorderWidth: 3
            }
          }
        }
      }));
    }
    return le(() => {
      u();
    }), (r, b) => (o(), d("div", ve, [
      a("div", xe, [
        H(r.$slots, "title"),
        a("div", we, w(r.name), 1),
        a("div", be, w(r.paragraph), 1)
      ]),
      a("div", Ce, [
        a("canvas", {
          ref_key: "canvas",
          ref: l
        }, null, 512)
      ])
    ]));
  }
}), _e = ["width", "height"], $e = ["fill"], Ae = ["fill"], Fe = ["stroke"], Ve = ["stroke"], te = /* @__PURE__ */ S({
  __name: "SparkIcon",
  props: {
    size: {
      type: Number,
      default: 24
    },
    color: {
      type: String,
      default: "#6B6B6B"
    }
  },
  setup(e) {
    const t = e, l = _(() => `${t.size}px`);
    return (s, i) => (o(), d("svg", {
      width: l.value,
      height: l.value,
      viewBox: "0 0 24 24",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg"
    }, [
      a("path", {
        d: "M7.6 7.6C8.17076 6.94229 8.5 5.5 8.5 5.5C8.5 5.5 8.81356 6.87361 9.35714 7.5C9.92948 8.15953 11.5 8.5 11.5 8.5C11.5 8.5 9.92948 8.69761 9.35714 9.35714C8.81356 9.98354 8.5 11.5 8.5 11.5C8.5 11.5 8.32076 10.1888 7.75 9.59091C7.14905 8.96136 5.5 8.5 5.5 8.5C5.5 8.5 6.99905 8.29251 7.6 7.6Z",
        fill: t.color
      }, null, 8, $e),
      a("path", {
        d: "M12.2 12.2C13.3415 10.8846 14 8 14 8C14 8 14.6271 10.7472 15.7143 12C16.859 13.3191 20 14 20 14C20 14 16.859 14.3952 15.7143 15.7143C14.6271 16.9671 14 20 14 20C14 20 13.6415 17.3777 12.5 16.1818C11.2981 14.9227 8 14 8 14C8 14 10.9981 13.585 12.2 12.2Z",
        fill: t.color
      }, null, 8, Ae),
      a("path", {
        d: "M7.6 7.6C8.17076 6.94229 8.5 5.5 8.5 5.5C8.5 5.5 8.81356 6.87361 9.35714 7.5C9.92948 8.15953 11.5 8.5 11.5 8.5C11.5 8.5 9.92948 8.69761 9.35714 9.35714C8.81356 9.98354 8.5 11.5 8.5 11.5C8.5 11.5 8.32076 10.1888 7.75 9.59091C7.14905 8.96136 5.5 8.5 5.5 8.5C5.5 8.5 6.99905 8.29251 7.6 7.6Z",
        stroke: t.color,
        "stroke-width": "1.5",
        "stroke-linecap": "round",
        "stroke-linejoin": "round"
      }, null, 8, Fe),
      a("path", {
        d: "M12.2 12.2C13.3415 10.8846 14 8 14 8C14 8 14.6271 10.7472 15.7143 12C16.859 13.3191 20 14 20 14C20 14 16.859 14.3952 15.7143 15.7143C14.6271 16.9671 14 20 14 20C14 20 13.6415 17.3777 12.5 16.1818C11.2981 14.9227 8 14 8 14C8 14 10.9981 13.585 12.2 12.2Z",
        stroke: t.color,
        "stroke-width": "1.5",
        "stroke-linecap": "round",
        "stroke-linejoin": "round"
      }, null, 8, Ve)
    ], 8, _e));
  }
}), Be = { class: "flex flex-col gap-16" }, Ie = { class: "fm-typo-en-title-sm-600" }, Se = { class: "flex justify-center items-center" }, Re = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, De = {
  key: 0,
  class: "rounded-lg p-2"
}, Me = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary text-wrap" }, Le = { key: 0 }, Te = {
  key: 0,
  class: "flex justify-center w-full gap-8"
}, je = ["onClick"], Z = /* @__PURE__ */ S({
  __name: "CarouselCard",
  props: {
    title: {
      type: String,
      default: ""
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  setup(e) {
    const t = B(0), l = B(), s = e;
    function i(u) {
      var r;
      if (l.value) {
        const b = (((r = l.value) == null ? void 0 : r.scrollWidth) ?? 1) / s.items.length;
        l.value.scrollLeft = b * u;
      }
      t.value = u;
    }
    T(
      () => l.value,
      () => {
        var u;
        if (l.value) {
          const r = ((((u = l.value) == null ? void 0 : u.scrollWidth) ?? 1) - 400) / s.items.length;
          l.value.addEventListener("scroll", () => {
            var n;
            const b = Math.floor((((n = l.value) == null ? void 0 : n.scrollLeft) ?? 1) / r);
            t.value = b;
          });
        }
      }
    );
    const { FmTooltip: x } = E;
    return (u, r) => {
      const b = X("wave");
      return o(), d("div", Be, [
        a("p", Ie, w(s.title), 1),
        a("div", {
          ref_key: "scroll",
          ref: l,
          class: "flex gap-8 overflow-x-scroll snap-x snap-mandatory w-full scrollbar-hide"
        }, [
          (o(!0), d(z, null, P(s.items, (n, g) => (o(), d("div", {
            key: `reason_${g}`,
            class: "min-w-[368px] border rounded-lg p-16 snap-always snap-center flex gap-8 flex-col"
          }, [
            a("div", Se, [
              (o(), V(N(n.defination ? m(x) : "div"), {
                content: n.defination,
                "z-index": 100
              }, {
                default: I(() => [
                  a("p", Re, w(n.header), 1)
                ]),
                _: 2
              }, 1032, ["content"])),
              r[0] || (r[0] = a("div", { class: "grow" }, null, -1)),
              n.header === "Introduce Kid-Friendly Menu Items" ? M((o(), d("button", De, [
                h(te, { size: 22 })
              ])), [
                [b, !0]
              ]) : A("", !0)
            ]),
            a("p", Me, w(n.subLabel), 1)
          ]))), 128)),
          s.items.length === 0 ? (o(), d("div", Le, [
            a("p", null, "No " + w(s.title.toLowerCase()) + " at the moment", 1)
          ])) : A("", !0)
        ], 512),
        e.items.length > 1 ? (o(), d("div", Te, [
          (o(!0), d(z, null, P(e.items, (n, g) => (o(), d("span", {
            key: `carousel_${g}`,
            class: L([
              "w-[11px] h-[11px] rounded-lg cursor-pointer",
              g === t.value ? " bg-fm-color-neutral-gray-300" : "bg-fm-color-neutral-gray-100"
            ]),
            onClick: ($) => i(g)
          }, null, 10, je))), 128))
        ])) : A("", !0)
      ]);
    };
  }
}), ze = { class: "flex flex-col flex-grow gap-16" }, Pe = { class: "flex flex-row items-center gap-2" }, We = { class: "flex flex-row items-center justify-center gap-1" }, Ne = { class: "text-fm-color-typo-secondary fm-typo-en-body-lg-400" }, Ee = { class: "flex flex-col fm-typo-en-body-lg-600" }, Ue = { class: "flex flex-col" }, Ye = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Ze = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, qe = {
  key: 0,
  style: { height: "240px" }
}, He = {
  key: 1,
  class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary"
}, Xe = {
  key: 0,
  class: "flex flex-col gap-40"
}, Ge = {
  key: 1,
  class: "flex flex-row items-center justify-between"
}, Oe = { class: "fm-typo-en-body-lg-600" }, Je = { class: "flex flex-row items-center gap-8" }, q = /* @__PURE__ */ S({
  __name: "InsightCard",
  props: {
    widget: {
      type: Object,
      default: () => null
    },
    detail: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["click-feedback"],
  setup(e, { emit: t }) {
    const { t: l } = K(), s = _(() => e.widget.data.isAnomaly > 0 ? "bg-fm-color-system-success-100 text-fm-color-typo-success" : e.widget.data.isAnomaly < 0 ? "bg-fm-color-system-error-100 text-fm-color-typo-error" : ""), i = t;
    function x(y) {
      y === e.widget.feedback.reaction ? i("click-feedback", null) : i("click-feedback", y);
    }
    const u = _(() => {
      const y = "rgb(66, 133, 244)";
      let c = y;
      return e.widget.data.isAnomaly > 0 ? c = "#1F7735" : e.widget.data.isAnomaly < 0 && (c = "#99231D"), [
        {
          label: "Anomaly",
          data: e.widget.data.actualValues.map(
            (v, p) => p >= e.widget.data.actualValues.length - 2 ? v : null
          ),
          fill: !1,
          borderColor: c,
          borderWidth: 2,
          pointRadius: function(v) {
            return v.dataIndex === e.widget.data.actualValues.length - 1 ? 5 : 0;
          },
          pointStyle: "circle",
          pointBackgroundColor: c
        },
        {
          label: "Actual",
          data: e.widget.data.actualValues.map(
            (v, p) => p !== e.widget.data.actualValues.length - 1 ? v : null
          ),
          fill: !1,
          borderColor: y,
          borderWidth: 2
        },
        {
          label: "Expected",
          data: e.widget.data.forecastValues,
          fill: !1,
          borderColor: "white",
          borderWidth: 2
        },
        {
          label: "Upper",
          data: e.widget.data.upperBoundValues,
          fill: 4,
          backgroundColor: "rgba(66, 133, 244, 0.3)",
          borderColor: "white"
        },
        {
          label: "Lower",
          legend: !1,
          data: e.widget.data.lowerBoundValues,
          color: "",
          fill: !1,
          borderColor: "white"
        }
      ];
    }), r = _(
      () => e.widget.data.labels.map((y) => {
        const c = W(y), k = [c.format("DD MMM")], v = c.format("d");
        return (v === "6" || v === "0") && k.push(c.format("ddd")), k;
      })
    ), b = {
      display: !0,
      position: "bottom",
      maxHeight: 54,
      onClick: (y) => y.stopPropagation(),
      labels: {
        usePointStyle: !0,
        filter: function(y, c) {
          return !["Upper", "Lower", "Actual"].includes(
            c.datasets[y.datasetIndex].label
          );
        }
      }
    }, n = _(() => ({ categories: r.value }));
    _(() => Y(e.widget.category));
    const g = _(() => "The total money earned from all customer purchases, including sales, service charges, rounding, and delivery fees, minus any discounts. Revenue = gross sales - discounts + SST + service charge + rounding + delivery fee"), { FmTooltip: $ } = E;
    return (y, c) => {
      var f, D;
      const k = R("FmChip"), v = R("FmIcon"), p = X("wave");
      return o(), d("div", {
        class: L(["flex flex-col gap-40 overflow-y-scroll relative scrollbar-hide", e.detail ? "max-w-[515px]" : "max-w-[368px]"])
      }, [
        M((o(), d("div", {
          variant: "outlined",
          class: L(["flex flex-col p-16 gap-16 relative border rounded-lg", e.detail ? "" : "cursor-pointer"])
        }, [
          a("div", ze, [
            a("div", Pe, [
              a("div", We, [
                h(te, { size: 22 }),
                a("div", Ne, w(m(l)("report.view.insight.title")), 1)
              ]),
              h(k, {
                compact: "",
                label: m(l)(`report.category.${m(Y)(e.widget.category)}`),
                class: "bg-fm-color-system-info-100 text-fm-color-typo-info"
              }, null, 8, ["label"]),
              h(k, {
                class: L(s.value),
                compact: "",
                label: e.widget.data.isAnomaly !== 0 ? m(l)("report.view.insight.status.abnormal") : m(l)("report.view.insight.status.normal")
              }, null, 8, ["class", "label"])
            ]),
            (o(), V(N(e.detail ? m($) : "div"), {
              content: g.value,
              "z-index": 100
            }, {
              default: I(() => [
                a("div", Ee, w(e.widget.title), 1)
              ]),
              _: 1
            }, 8, ["content"])),
            a("div", Ue, [
              a("div", Ye, w(e.widget.restaurantName), 1),
              a("div", Ze, w(m(pe)(e.widget.dateRange)), 1)
            ])
          ]),
          e.detail ? (o(), d("div", qe, [
            h(ke, {
              datasets: u.value,
              "x-axis": n.value,
              legend: b,
              "maintain-aspect-ratio": !1
            }, null, 8, ["datasets", "x-axis"])
          ])) : A("", !0),
          e.detail ? (o(), d("div", He, w(e.widget.description), 1)) : A("", !0)
        ], 2)), [
          [p, !e.detail]
        ]),
        e.detail && e.widget.data.isAnomaly < 0 ? (o(), d("div", Xe, [
          h(Z, {
            title: m(l)("report.view.insight.reason"),
            items: (f = e.widget.data.recommendations) == null ? void 0 : f.map((C) => ({
              header: C.label,
              subLabel: C.reason.replace(C.metric, C.label),
              defination: C.definition
            }))
          }, null, 8, ["title", "items"]),
          h(Z, {
            title: m(l)("report.view.insight.recommendation"),
            items: (D = e.widget.data.recommendations) == null ? void 0 : D.map((C) => ({
              header: C.label,
              subLabel: C.recommendation,
              defination: C.definition
            }))
          }, null, 8, ["title", "items"])
        ])) : A("", !0),
        e.detail ? (o(), d("div", Ge, [
          a("div", Oe, w(m(l)("report.view.insight.feedback.question")), 1),
          a("div", Je, [
            M(h(v, {
              class: "cursor-pointer p-4 icon-btn",
              name: "thumb_up",
              size: "md",
              outline: e.widget.feedback.reaction !== !0,
              onClick: c[0] || (c[0] = () => x(!0))
            }, null, 8, ["outline"]), [
              [p, !0]
            ]),
            M(h(v, {
              class: "cursor-pointer p-4 icon-btn",
              name: "thumb_down",
              size: "md",
              outline: e.widget.feedback.reaction !== !1,
              onClick: c[1] || (c[1] = () => x(!1))
            }, null, 8, ["outline"]), [
              [p, !0]
            ])
          ])
        ])) : A("", !0)
      ], 2);
    };
  }
}), Ke = { class: "flex w-full justify-between items-center" }, Qe = /* @__PURE__ */ S({
  __name: "SidePanel",
  props: {
    modelValue: { type: Boolean, required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const t = ae(e, "modelValue"), { FmSideSheet: l } = E;
    return (s, i) => {
      const x = R("FmButton");
      return o(), V(N(m(l)), {
        modelValue: t.value,
        "onUpdate:modelValue": i[1] || (i[1] = (u) => t.value = u),
        "fullscreen-size": "sm",
        "dismiss-away": !0,
        "max-width": 512
      }, {
        "side-sheet-header": I(() => i[2] || (i[2] = [
          oe("Insight")
        ])),
        "top-sheet-header": I(() => [
          a("div", Ke, [
            i[3] || (i[3] = a("p", null, "Insight", -1)),
            h(x, {
              icon: "close",
              variant: "tertiary",
              onClick: i[0] || (i[0] = (u) => t.value = !1)
            })
          ])
        ]),
        default: I(() => [
          H(s.$slots, "default")
        ]),
        _: 3
      }, 8, ["modelValue"]);
    };
  }
}), et = { class: "flex flex-row px-24 justify-between items-center" }, tt = { class: "flex flex-row items-center gap-2" }, lt = {
  key: 0,
  class: "h-full w-full flex items-center justify-center"
}, at = {
  key: 1,
  class: "h-full"
}, ot = {
  key: 0,
  class: "flex flex-row flex-wrap gap-24 px-24 py-16"
}, yt = /* @__PURE__ */ S({
  __name: "InsightView",
  setup(e) {
    const { t } = K(), l = ge(), {
      dateRange: s,
      compareDateRange: i,
      locations: x,
      selectedLocationIds: u,
      selectedRestaurantIds: r,
      business: b
    } = Q(re()), n = B([]), g = B(null), $ = B(!1), y = ce();
    T(
      b,
      () => {
        b.value && c();
      },
      { immediate: !0 }
    );
    async function c() {
      try {
        $.value = !0, r.value.length === 0 ? n.value = [] : n.value = await ye({
          start: s.value.startDate,
          end: s.value.endDate,
          restaurantIds: r.value
        });
      } catch (p) {
        y.open({ message: p, type: "error" }), n.value = [];
      } finally {
        $.value = !1;
      }
    }
    function k(p) {
      if (p !== null) {
        try {
          l.pushDataLayer(
            {
              event: me.report_insight_click_insight_card,
              insight: JSON.stringify(n.value[p])
            },
            "insight"
          );
        } catch (f) {
          console.warn(f);
        }
        g.value = null;
      }
      se(() => {
        g.value = p;
      });
    }
    async function v(p) {
      if (g.value !== null)
        try {
          $.value = !0;
          const f = await he({
            ...n.value[g.value].feedback,
            reaction: p
          });
          n.value[g.value].feedback = f;
        } catch (f) {
          y.open({ message: f, type: "error" });
        } finally {
          $.value = !1;
        }
    }
    return (p, f) => {
      const D = R("FmPageHead"), C = R("FmCircularProgress");
      return o(), V(ne, null, {
        default: I(() => [
          h(D, {
            title: m(t)("report.view.insight.title")
          }, null, 8, ["title"]),
          a("div", et, [
            a("div", tt, [
              h(fe, {
                modelValue: m(u),
                "onUpdate:modelValue": [
                  f[0] || (f[0] = (F) => j(u) ? u.value = F : null),
                  c
                ],
                options: m(x)
              }, null, 8, ["modelValue", "options"]),
              h(ie, {
                "date-range": m(s),
                "onUpdate:dateRange": [
                  f[1] || (f[1] = (F) => j(s) ? s.value = F : null),
                  c
                ],
                "compare-date-range": m(i),
                "onUpdate:compareDateRange": f[2] || (f[2] = (F) => j(i) ? i.value = F : null),
                compare: !1
              }, null, 8, ["date-range", "compare-date-range"])
            ])
          ]),
          $.value ? (o(), d("div", lt, [
            h(C, { size: "xl" })
          ])) : (o(), d("div", at, [
            n.value.length > 0 ? (o(), d("div", ot, [
              (o(!0), d(z, null, P(n.value, (F, U) => (o(), V(q, {
                key: U,
                widget: F,
                onClick: () => k(U)
              }, null, 8, ["widget", "onClick"]))), 128))
            ])) : (o(), V(ue, { key: 1 }))
          ])),
          h(Qe, {
            "model-value": g.value !== null,
            onBack: f[3] || (f[3] = () => k(null))
          }, {
            default: I(() => [
              g.value !== null ? (o(), V(q, {
                key: 0,
                widget: n.value[g.value],
                detail: "",
                onClickFeedback: v
              }, null, 8, ["widget"])) : A("", !0)
            ]),
            _: 1
          }, 8, ["model-value"])
        ]),
        _: 1
      });
    };
  }
});
export {
  yt as default
};
