import type { ReactNode } from "react";
import Link from "next/link";
import { cn } from "@/lib/cn";

export type AdminStatTone = "blue" | "green" | "orange" | "purple" | "rose" | "navy";

const toneStyles: Record<AdminStatTone, string> = {
  blue: "bg-sky-50 text-sky-700",
  green: "bg-emerald-50 text-emerald-700",
  orange: "bg-orange-50 text-orange-600",
  purple: "bg-violet-50 text-violet-700",
  rose: "bg-rose-50 text-rose-600",
  navy: "bg-primary/5 text-primary",
};

export function AdminStatCard({
  label,
  value,
  hint,
  icon,
  tone = "navy",
  emphasis = "default",
  size = "default",
  href,
  className,
}: {
  label: string;
  value: string | number;
  hint?: string;
  icon?: ReactNode;
  /** Soft tinted icon tile — matches marketplace overview concept. */
  tone?: AdminStatTone;
  emphasis?: "default" | "finance";
  size?: "default" | "primary" | "secondary";
  href?: string;
  className?: string;
}) {
  const content = (
    <div className="flex items-start gap-3">
      {icon ? (
        <span
          className={cn(
            "flex shrink-0 items-center justify-center rounded-[10px]",
            size === "secondary" ? "size-9" : "size-10",
            toneStyles[tone],
          )}
          aria-hidden="true"
        >
          {icon}
        </span>
      ) : null}
      <div className="min-w-0 flex-1">
        <p
          className={cn(
            "font-medium leading-snug",
            size === "secondary"
              ? "text-[0.75rem] text-ink-40"
              : "text-[0.8125rem] text-ink-60",
          )}
        >
          {label}
        </p>
        <p
          className={cn(
            "mt-1.5 tracking-[-0.03em] tabular-nums",
            size === "primary" && "text-[1.375rem] font-semibold leading-none text-primary",
            size === "default" &&
              (emphasis === "finance"
                ? "text-[1.25rem] font-semibold leading-none text-primary"
                : "text-[1.1875rem] font-semibold leading-none text-primary"),
            size === "secondary" && "text-[1.0625rem] font-medium leading-none text-primary/85",
          )}
        >
          {value}
        </p>
        {hint ? <p className="mt-1.5 text-[0.75rem] leading-snug text-ink-40">{hint}</p> : null}
      </div>
    </div>
  );

  const classes = cn(
    "flex h-full min-h-0 flex-col rounded-[10px] border border-line/80 bg-surface shadow-pv",
    size === "primary" && "px-4 py-3.5",
    size === "default" && "px-3.5 py-3",
    size === "secondary" && "px-3.5 py-2.5",
    href &&
      "transition hover:border-primary/25 hover:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
    className,
  );

  if (href) {
    return (
      <Link href={href} className={classes}>
        {content}
      </Link>
    );
  }

  return <div className={classes}>{content}</div>;
}