import type { ComponentType } from "react";
import { TrendingDown, TrendingUp } from "lucide-react";
import { Card, CardContent } from "@/components/common/Card";
import { Skeleton } from "@/components/common/Skeleton";
import { cn } from "@/lib/utils";

interface Props {
  icon: ComponentType<{ className?: string }>;
  label: string;
  value?: string | null;
  trend?: { value: string; direction: "up" | "down" | "flat" };
  accent?: "brand" | "accent" | "emerald" | "amber" | "slate";
  className?: string;
}


const ICON_ACCENTS = {
  brand:   "bg-gradient-to-br from-brand-500/15 via-blue-500/10 to-transparent text-brand-600 ring-1 ring-inset ring-brand-500/25 dark:from-brand-500/25 dark:text-brand-300 dark:ring-brand-400/30 shadow-brand-500/5",
  accent:  "bg-gradient-to-br from-emerald-500/15 via-teal-500/10 to-transparent text-emerald-600 ring-1 ring-inset ring-emerald-500/25 dark:from-emerald-500/25 dark:text-emerald-300 dark:ring-emerald-400/30 shadow-emerald-500/5",
  emerald: "bg-gradient-to-br from-emerald-500/15 via-teal-500/10 to-transparent text-emerald-600 ring-1 ring-inset ring-emerald-500/25 dark:from-emerald-500/25 dark:text-emerald-300 dark:ring-emerald-400/30 shadow-emerald-500/5",
  amber:   "bg-gradient-to-br from-amber-500/15 via-orange-500/10 to-transparent text-amber-600 ring-1 ring-inset ring-amber-500/25 dark:from-amber-500/25 dark:text-amber-300 dark:ring-amber-400/30 shadow-amber-500/5",
  slate:   "bg-gradient-to-br from-slate-500/15 via-slate-400/10 to-transparent text-slate-600 ring-1 ring-inset ring-slate-500/25 dark:from-slate-400/25 dark:text-slate-300 dark:ring-slate-400/30 shadow-slate-500/5",
} as const;

const WATERMARK_ACCENTS = {
  brand:   "text-brand-500/[0.04] group-hover:text-brand-500/[0.09] dark:text-brand-400/[0.04] dark:group-hover:text-brand-400/[0.12]",
  accent:  "text-emerald-500/[0.04] group-hover:text-emerald-500/[0.09] dark:text-emerald-400/[0.04] dark:group-hover:text-emerald-400/[0.12]",
  emerald: "text-emerald-500/[0.04] group-hover:text-emerald-500/[0.09] dark:text-emerald-400/[0.04] dark:group-hover:text-emerald-400/[0.12]",
  amber:   "text-amber-500/[0.04] group-hover:text-amber-500/[0.09] dark:text-amber-400/[0.04] dark:group-hover:text-amber-400/[0.12]",
  slate:   "text-slate-500/[0.04] group-hover:text-slate-500/[0.09] dark:text-slate-400/[0.04] dark:group-hover:text-slate-400/[0.12]",
} as const;

const VALUE_HOVER_ACCENTS = {
  brand:   "group-hover:text-brand-600 dark:group-hover:text-brand-300",
  accent:  "group-hover:text-emerald-600 dark:group-hover:text-emerald-300",
  emerald: "group-hover:text-emerald-600 dark:group-hover:text-emerald-300",
  amber:   "group-hover:text-amber-600 dark:group-hover:text-amber-300",
  slate:   "group-hover:text-slate-700 dark:group-hover:text-slate-200",
} as const;

export function StatCard({
  icon: Icon,
  label,
  value,
  trend,
  accent = "brand",
  className,
}: Props) {
  return (
    <Card
      interactive
      className={cn(
        "group relative h-[190px] overflow-hidden rounded-3xl border-slate-200/80 bg-gradient-to-b from-white via-white to-slate-50/60 p-0 shadow-soft transition-all duration-300 ease-out hover:-translate-y-1 hover:border-slate-300/90 hover:shadow-lg dark:border-slate-800/80 dark:from-slate-900/95 dark:via-slate-900/80 dark:to-slate-950/60 dark:hover:border-slate-700/80",
        className,
      )}
    >

      {/* Dynamic Watermark Background Icon */}
      <div className="pointer-events-none absolute -bottom-6 -end-6 -z-0 overflow-hidden">
        <Icon
          className={cn(
            "h-32 w-32 -rotate-12 transition-all duration-500 ease-out group-hover:scale-110 group-hover:-rotate-6",
            WATERMARK_ACCENTS[accent],
          )}
          aria-hidden
        />
      </div>

      <CardContent className="relative z-10 flex h-full flex-col justify-between p-6 sm:p-7">
        {/* Header: Jewel Icon Box & Trend Badge */}
        <div className="flex items-start justify-between gap-3">
          <div
            className={cn(
              "grid h-12 w-12 shrink-0 place-items-center rounded-2xl shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:shadow-md",
              ICON_ACCENTS[accent],
            )}
          >
            <Icon className="h-6 w-6" />
          </div>

          {trend && (
            <span
              className={cn(
                "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold tracking-wide shadow-2xs backdrop-blur-md transition-all duration-300 group-hover:scale-105",
                trend.direction === "up" &&
                  "border border-emerald-200/80 bg-emerald-50/90 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-300",
                trend.direction === "down" &&
                  "border border-rose-200/80 bg-rose-50/90 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/15 dark:text-rose-300",
                trend.direction === "flat" &&
                  "border border-slate-200/80 bg-slate-100/90 text-slate-600 dark:border-slate-700/60 dark:bg-slate-800/80 dark:text-slate-300",
              )}
            >
              {trend.direction === "up" ? (
                <TrendingUp className="h-3 w-3" aria-hidden />
              ) : trend.direction === "down" ? (
                <TrendingDown className="h-3 w-3" aria-hidden />
              ) : null}
              {trend.value}
            </span>
          )}
        </div>

        {/* Footer: Typography & Micro-animations */}
        <div className="mt-6 flex flex-col">
          <div className="text-[length:var(--text-sm-fixed)] font-medium capitalize tracking-wide text-slate-400 transition-colors duration-200 group-hover:text-slate-600 dark:text-slate-400 dark:group-hover:text-slate-300">
            {label}
          </div>
          <div
            className={cn(
              "mt-1.5 text-3xl font-black tabular-nums tracking-tight text-slate-900 transition-colors duration-200 dark:text-white sm:text-3xl",
              VALUE_HOVER_ACCENTS[accent],
            )}
          >
            {value === null || value === undefined ? (
              <Skeleton className="my-1 h-8 w-28 rounded-xl" />
            ) : (
              value
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}