"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { jsx, jsxs } from 'react/jsx-runtime';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as React from 'react';

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var badgeVariants = cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  ...props
}) {
  const Comp = asChild ? Slot : "span";
  return /* @__PURE__ */ jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
function Tabs({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    TabsPrimitive.Root,
    {
      "data-slot": "tabs",
      className: cn("flex flex-col gap-2", className),
      ...props
    }
  );
}
function TabsList({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    TabsPrimitive.List,
    {
      "data-slot": "tabs-list",
      className: cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      ),
      ...props
    }
  );
}
function TabsTrigger({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    TabsPrimitive.Trigger,
    {
      "data-slot": "tabs-trigger",
      className: cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props
    }
  );
}
function TabsContent({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    TabsPrimitive.Content,
    {
      "data-slot": "tabs-content",
      className: cn("flex-1 outline-none", className),
      ...props
    }
  );
}
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const { url, iconName } = React.useMemo(() => {
    const separator = name.includes("/") ? "/" : ":";
    const [prefix, iconName2] = name.split(separator);
    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
    return {
      url: baseUrl,
      iconName: iconName2
    };
  }, [name, size]);
  React.useEffect(() => {
    let isMounted = true;
    const fetchSvg = async () => {
      const cached = svgCache.get(url);
      if (cached) {
        if (isMounted) {
          setSvgContent(cached);
          setIsLoading(false);
        }
        return;
      }
      try {
        setIsLoading(true);
        setError(null);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Failed to fetch icon: ${response.status}`);
        }
        let svg = await response.text();
        svg = processSvgForCurrentColor(svg);
        svgCache.set(url, svg);
        if (isMounted) {
          setSvgContent(svg);
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err instanceof Error ? err.message : "Failed to load icon");
          setIsLoading(false);
        }
      }
    };
    fetchSvg();
    return () => {
      isMounted = false;
    };
  }, [url]);
  if (isLoading) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: cn("inline-flex items-center justify-center", className),
      style: {
        width: size,
        height: size,
        color: color || "inherit"
      },
      role: "img",
      "aria-label": alt || iconName,
      dangerouslySetInnerHTML: { __html: svgContent }
    }
  );
}
function processSvgForCurrentColor(svg) {
  let processed = svg;
  processed = processed.replace(
    /stroke=["'](#000000|#000|black)["']/gi,
    'stroke="currentColor"'
  );
  processed = processed.replace(
    /fill=["'](#000000|#000|black)["']/gi,
    'fill="currentColor"'
  );
  return processed;
}
var defaultPeriods = [
  {
    id: "weekly",
    label: "Weekly",
    stats: [
      { label: "New Sign-ups", value: "1,284", change: 12.3, trend: "up", previousLabel: "Previous week" },
      { label: "Active Sessions", value: "32,891", change: 8.7, trend: "up", previousLabel: "Previous week" },
      { label: "Conversion Rate", value: "5.2%", change: 0.8, trend: "up", previousLabel: "Previous week" },
      { label: "Support Tickets", value: "187", change: -5.3, trend: "down", previousLabel: "Previous week", inversePositive: true }
    ]
  },
  {
    id: "monthly",
    label: "Monthly",
    stats: [
      { label: "New Sign-ups", value: "5,726", change: 15.8, trend: "up", previousLabel: "Previous month" },
      { label: "Active Sessions", value: "142,308", change: 11.2, trend: "up", previousLabel: "Previous month" },
      { label: "Conversion Rate", value: "6.7%", change: 1.4, trend: "up", previousLabel: "Previous month" },
      { label: "Support Tickets", value: "834", change: -3.1, trend: "down", previousLabel: "Previous month", inversePositive: true }
    ]
  },
  {
    id: "quarterly",
    label: "Quarterly",
    stats: [
      { label: "New Sign-ups", value: "18,492", change: 32.1, trend: "up", previousLabel: "Previous quarter" },
      { label: "Active Sessions", value: "487,125", change: 24.3, trend: "up", previousLabel: "Previous quarter" },
      { label: "Conversion Rate", value: "8.3%", change: 2.1, trend: "up", previousLabel: "Previous quarter" },
      { label: "Support Tickets", value: "2,874", change: -8.5, trend: "down", previousLabel: "Previous quarter", inversePositive: true }
    ]
  },
  {
    id: "yearly",
    label: "Yearly",
    stats: [
      { label: "New Sign-ups", value: "76,542", change: 65.4, trend: "up", previousLabel: "Previous year" },
      { label: "Active Sessions", value: "2.1M", change: 48.7, trend: "up", previousLabel: "Previous year" },
      { label: "Conversion Rate", value: "9.2%", change: 3.5, trend: "up", previousLabel: "Previous year" },
      { label: "Support Tickets", value: "12,458", change: -12.3, trend: "down", previousLabel: "Previous year", inversePositive: true }
    ]
  }
];
function StatsTimelineTabs({
  className,
  badge = "Performance Timeline",
  heading = "Growth Progression",
  description = "Track our key metrics over different time periods to see our consistent growth and improvements",
  periods = defaultPeriods,
  defaultPeriod = "monthly"
}) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]",
        className
      ),
      children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-6xl", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6", children: [
        /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
          /* @__PURE__ */ jsx(Badge, { className: "mb-2", children: badge }),
          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold md:text-4xl", children: heading }),
          /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-2xl text-muted-foreground", children: description })
        ] }),
        /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultPeriod, className: "mt-8 w-full", children: [
          /* @__PURE__ */ jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsx(TabsList, { children: periods.map((period) => /* @__PURE__ */ jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
          periods.map((period) => /* @__PURE__ */ jsx(TabsContent, { value: period.id, className: "mt-4", children: /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-4", children: period.stats.map((stat, index) => {
            const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
            return /* @__PURE__ */ jsxs(
              "div",
              {
                className: "rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
                children: [
                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
                    /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
                    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                      /* @__PURE__ */ jsx(
                        DynamicIcon,
                        {
                          name: "lucide/clock",
                          size: 16,
                          className: "mr-1 text-muted-foreground"
                        }
                      ),
                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                    ] })
                  ] }),
                  /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
                  /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center", children: [
                    /* @__PURE__ */ jsxs(
                      "div",
                      {
                        className: cn(
                          "flex items-center rounded-full px-2 py-1 text-xs font-medium",
                          isPositive ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400" : "bg-rose-50 text-rose-600 dark:bg-rose-950 dark:text-rose-400"
                        ),
                        children: [
                          /* @__PURE__ */ jsx(
                            DynamicIcon,
                            {
                              name: stat.trend === "up" ? "lucide/arrow-up-right" : "lucide/arrow-down-right",
                              size: 12,
                              className: "mr-1"
                            }
                          ),
                          Math.abs(stat.change),
                          "%"
                        ]
                      }
                    ),
                    /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                      "vs ",
                      stat.previousLabel
                    ] })
                  ] })
                ]
              },
              index
            );
          }) }) }, period.id))
        ] })
      ] }) })
    }
  );
}

export { StatsTimelineTabs };
//# sourceMappingURL=stats-timeline-tabs.js.map
//# sourceMappingURL=stats-timeline-tabs.js.map