"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import {
  LineChart as RechartsLineChart,
  AreaChart as RechartsAreaChart,
  Line,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend
} from "recharts";
import { Spinner } from "@open-mercato/ui/primitives/spinner";
import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
function defaultValueFormatter(value) {
  if (Math.abs(value) >= 1e6) {
    return `${(value / 1e6).toFixed(1)}M`;
  }
  if (Math.abs(value) >= 1e3) {
    return `${(value / 1e3).toFixed(1)}K`;
  }
  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
}
function LineChart({
  title,
  data,
  index,
  categories,
  loading,
  error,
  colors,
  showArea = false,
  valueFormatter = defaultValueFormatter,
  showLegend = true,
  showGridLines = true,
  curveType = "monotone",
  connectNulls = true,
  className = "",
  emptyMessage = "No data available",
  categoryLabels
}) {
  const getLineColor = (idx) => {
    return resolveChartColor(colors?.[idx], idx);
  };
  if (error) {
    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }) })
    ] });
  }
  if (loading) {
    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
    ] });
  }
  if (!data || data.length === 0) {
    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
    ] });
  }
  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart;
  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
    title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
      ChartComponent,
      {
        data,
        margin: { top: 5, right: 10, left: 10, bottom: 5 },
        children: [
          showGridLines && /* @__PURE__ */ jsx(
            CartesianGrid,
            {
              strokeDasharray: "3 3",
              stroke: "hsl(var(--border))"
            }
          ),
          /* @__PURE__ */ jsx(
            XAxis,
            {
              dataKey: index,
              tick: { fontSize: 12 },
              tickLine: false,
              axisLine: false
            }
          ),
          /* @__PURE__ */ jsx(
            YAxis,
            {
              tickFormatter: valueFormatter,
              tick: { fontSize: 12 },
              tickLine: false,
              axisLine: false,
              width: 56
            }
          ),
          /* @__PURE__ */ jsx(
            Tooltip,
            {
              content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter, categoryLabels }),
              cursor: { stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }
            }
          ),
          showLegend && categories.length > 1 && /* @__PURE__ */ jsx(
            Legend,
            {
              verticalAlign: "top",
              height: 36,
              formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
            }
          ),
          showArea ? categories.map((category, idx) => /* @__PURE__ */ jsx(
            Area,
            {
              type: curveType,
              dataKey: category,
              stroke: getLineColor(idx),
              fill: getLineColor(idx),
              fillOpacity: 0.2,
              strokeWidth: 2,
              connectNulls,
              dot: false,
              activeDot: { r: 4, strokeWidth: 0 }
            },
            category
          )) : categories.map((category, idx) => /* @__PURE__ */ jsx(
            Line,
            {
              type: curveType,
              dataKey: category,
              stroke: getLineColor(idx),
              strokeWidth: 2,
              connectNulls,
              dot: false,
              activeDot: { r: 4, strokeWidth: 0 }
            },
            category
          ))
        ]
      }
    ) }) })
  ] });
}
var LineChart_default = LineChart;
export {
  LineChart,
  LineChart_default as default
};
//# sourceMappingURL=LineChart.js.map
