"use client";

import { cn } from "@/lib/utils";

export function ProgressRing({
  value,
  max = 100,
  size = 56,
  strokeWidth = 5,
  className,
  label,
}: {
  value: number;
  max?: number;
  size?: number;
  strokeWidth?: number;
  className?: string;
  label?: string;
}) {
  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
  const r = (size - strokeWidth) / 2;
  const c = 2 * Math.PI * r;
  const offset = c - (pct / 100) * c;

  return (
    <div className={cn("relative inline-flex flex-col items-center", className)}>
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke="var(--muted)"
          strokeWidth={strokeWidth}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke="var(--primary)"
          strokeWidth={strokeWidth}
          strokeDasharray={c}
          strokeDashoffset={offset}
          strokeLinecap="round"
          className="transition-all duration-700 ease-out"
        />
      </svg>
      <span className="absolute inset-0 flex items-center justify-center text-xs font-semibold">
        {Math.round(pct)}%
      </span>
      {label ? (
        <span className="mt-1 text-xs text-muted-foreground">{label}</span>
      ) : null}
    </div>
  );
}

export function MiniBarChart({
  items,
  className,
}: {
  items: { label: string; value: number; color?: string }[];
  className?: string;
}) {
  const max = Math.max(...items.map((i) => i.value), 1);

  return (
    <div className={cn("space-y-2", className)}>
      {items.map((item) => (
        <div key={item.label}>
          <div className="mb-1 flex justify-between text-xs">
            <span className="text-muted-foreground">{item.label}</span>
            <span className="font-medium tabular-nums">{item.value}</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full transition-all duration-500"
              style={{
                width: `${(item.value / max) * 100}%`,
                background: item.color ?? "var(--primary)",
              }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

export function StatTrend({
  label,
  value,
  trend,
  trendLabel,
  icon,
  accent = "primary",
}: {
  label: string;
  value: string | number;
  trend?: number;
  trendLabel?: string;
  icon?: React.ReactNode;
  accent?: "primary" | "accent" | "secondary";
}) {
  const accentClass =
    accent === "accent"
      ? "from-accent/20 to-accent/5 border-accent/30"
      : accent === "secondary"
        ? "from-secondary/20 to-secondary/5 border-secondary/30"
        : "from-primary/20 to-primary/5 border-primary/30";

  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-xl border bg-gradient-to-br p-5 transition-shadow hover:shadow-md",
        accentClass
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="text-sm font-medium text-muted-foreground">{label}</p>
          <p className="mt-1 text-2xl font-bold tracking-tight tabular-nums">{value}</p>
          {trend != null ? (
            <p
              className={cn(
                "mt-1 text-xs font-medium",
                trend >= 0 ? "text-accent" : "text-destructive"
              )}
            >
              {trend >= 0 ? "↑" : "↓"} {Math.abs(trend)}% {trendLabel ?? ""}
            </p>
          ) : null}
        </div>
        {icon ? (
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-card/80 text-primary shadow-sm">
            {icon}
          </div>
        ) : null}
      </div>
    </div>
  );
}

export function MetricGrid({
  metrics,
}: {
  metrics: { label: string; value: string | number; sub?: string }[];
}) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
      {metrics.map((m) => (
        <div
          key={m.label}
          className="rounded-lg border border-border bg-muted/30 px-3 py-2.5"
        >
          <p className="text-xs text-muted-foreground">{m.label}</p>
          <p className="text-lg font-semibold tabular-nums">{m.value}</p>
          {m.sub ? <p className="text-xs text-muted-foreground">{m.sub}</p> : null}
        </div>
      ))}
    </div>
  );
}