Ice Cave Metric Tile

"use client";

import * as React from "react";

export interface IceCaveMetricTileProps {
  label: string;
  value: string | number;
  suffix?: string;
  trend?: number;
  seed?: string | number;
  className?: string;
}

function hashSeed(str: string) {
  let h = 2166136261;
  for (let i = 0; i < str.length; i++) {
    h ^= str.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return h >>> 0;
}

function mulberry32(seed: number) {
  return function random() {
    seed = (seed + 0x6d2b79f5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function buildCrystalClip(seed: string) {
  const rand = mulberry32(hashSeed(seed));
  const between = (min: number, max: number) => min + rand() * (max - min);
  const corner = () => `${between(8, 20).toFixed(1)}px`;
  const inset = () => `${between(2, 8).toFixed(1)}px`;
  const along = (base: number) => `calc(${(base + between(-6, 6)).toFixed(1)}% + ${between(-5, 5).toFixed(1)}px)`;

  const cutTL = corner();
  const cutTR = corner();
  const cutBR = corner();
  const cutBL = corner();

  const points = [
    `${cutTL} 0`,
    `${along(32)} ${inset()}`,
    `${along(66)} ${inset()}`,
    `calc(100% - ${cutTR}) 0`,
    `100% ${cutTR}`,
    `calc(100% - ${inset()}) ${along(32)}`,
    `calc(100% - ${inset()}) ${along(66)}`,
    `100% calc(100% - ${cutBR})`,
    `calc(100% - ${cutBR}) 100%`,
    `${along(66)} calc(100% - ${inset()})`,
    `${along(32)} calc(100% - ${inset()})`,
    `${cutBL} 100%`,
    `0 calc(100% - ${cutBL})`,
    `${inset()} ${along(66)}`,
    `${inset()} ${along(32)}`,
    `0 ${cutTL}`,
  ];

  return `polygon(${points.join(", ")})`;
}

const ICICLES = [7, 15, 5, 19, 9, 16, 6, 12, 8];

const SPARKLES = [
  { top: "20%", left: "72%", delay: "0s" },
  { top: "58%", left: "88%", delay: "0.7s" },
  { top: "32%", left: "14%", delay: "1.3s" },
  { top: "78%", left: "42%", delay: "2s" },
];

function CrystalCluster() {
  const shard = "absolute bottom-0 origin-bottom";
  return (
    <div aria-hidden="true" className="pointer-events-none absolute bottom-2 right-2 h-9 w-10">
      <span
        className={`${shard} right-0 h-7 w-4 rotate-[8deg] bg-gradient-to-t from-cyan-600/70 to-cyan-200/90 dark:from-cyan-400/45 dark:to-cyan-100/70`}
        style={{ clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)" }}
      />
      <span
        className={`${shard} right-4 h-5 w-3 -rotate-[14deg] bg-gradient-to-t from-sky-600/60 to-sky-200/80 dark:from-sky-400/35 dark:to-sky-100/55`}
        style={{ clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)" }}
      />
      <span
        className={`${shard} right-0 h-4 w-3 rotate-[22deg] bg-gradient-to-t from-blue-600/50 to-blue-200/70 dark:from-blue-400/30 dark:to-blue-100/45`}
        style={{ clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)" }}
      />
    </div>
  );
}

export function IceCaveMetricTile({
  label,
  value,
  suffix,
  trend,
  seed,
  className = "",
}: IceCaveMetricTileProps) {
  const clipPath = React.useMemo(
    () => buildCrystalClip(String(seed ?? label)),
    [seed, label],
  );

  return (
    <>
      <style href="ice-cave-sparkle-keyframes" precedence="default">{`
        @keyframes ice-cave-sparkle-twinkle {
          0%, 100% { opacity: 0; transform: scale(0.5); }
          50% { opacity: 1; transform: scale(1); }
        }
      `}</style>
      <div
        className={[
          "group relative min-w-[180px] border border-cyan-900/10 bg-gradient-to-br from-[#eaf6fb] via-[#d9eff8] to-[#c3e6f5] dark:border-cyan-100/10 dark:from-[#0a1628] dark:via-[#10233d] dark:to-[#0d1a30]",
          "drop-shadow-[0_10px_24px_rgba(8,47,73,0.18)] dark:drop-shadow-[0_0_28px_rgba(34,211,238,0.16)]",
          className,
        ]
          .filter(Boolean)
          .join(" ")}
        style={{
          clipPath,
          backgroundImage:
            "radial-gradient(circle at 14% 18%, rgba(255,255,255,0.5), transparent 40%), radial-gradient(circle at 88% 78%, rgba(56,189,248,0.12), transparent 45%)",
        }}
      >
        <div aria-hidden="true" className="absolute inset-x-0 top-0 flex items-start justify-between px-3">
          {ICICLES.map((h, i) => (
            <span
              key={i}
              className="border-l-[3px] border-r-[3px] border-l-transparent border-r-transparent border-t-white/85 dark:border-t-cyan-100/25"
              style={{ width: 0, height: 0, borderTopWidth: h }}
            />
          ))}
        </div>

        {SPARKLES.map((s, i) => (
          <span
            key={i}
            aria-hidden="true"
            className="absolute h-[3px] w-[3px] rounded-full bg-white shadow-[0_0_6px_2px_rgba(255,255,255,0.85)] dark:bg-cyan-100 dark:shadow-[0_0_6px_2px_rgba(103,232,249,0.55)]"
            style={{
              top: s.top,
              left: s.left,
              animation: `ice-cave-sparkle-twinkle 3.2s ease-in-out ${s.delay} infinite`,
            }}
          />
        ))}

        <div
          aria-hidden="true"
          className="absolute -inset-y-10 -left-1/2 w-1/3 -rotate-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 ease-out group-hover:translate-x-[260%] dark:via-cyan-100/20"
        />

        <CrystalCluster />

        <div className="relative z-10 px-5 pb-5 pt-7">
          <div className="mb-2 font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-cyan-900/85 dark:text-cyan-200/55">
            {label}
          </div>
          <div className="flex items-baseline gap-1">
            <span className="bg-gradient-to-b from-slate-800 to-cyan-700 bg-clip-text text-[32px] font-bold leading-none text-transparent dark:from-white dark:to-cyan-200">
              {value}
            </span>
            {suffix ? (
              <span className="text-[14px] font-semibold text-cyan-900/80 dark:text-cyan-200/45">
                {suffix}
              </span>
            ) : null}
          </div>
          {trend !== undefined ? (
            <div
              className={[
                "mt-3 inline-flex items-center gap-1 px-2 py-0.5 font-mono text-[11px] font-bold",
                trend >= 0
                  ? "bg-cyan-500/15 text-cyan-800 dark:bg-cyan-400/15 dark:text-cyan-200"
                  : "bg-slate-500/15 text-slate-600 dark:bg-slate-400/15 dark:text-slate-300",
              ].join(" ")}
              style={{ clipPath: "polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%)" }}
            >
              <span aria-hidden="true">{trend >= 0 ? "▲" : "▼"}</span>
              {Math.abs(trend)}%
            </div>
          ) : null}
        </div>
      </div>
    </>
  );
}

import { IceCaveMetricTile } from "@/components/ice-cave-metric-tile";

export function StatsRow() {
  return (
    <div className="grid grid-cols-3 gap-5">
      <IceCaveMetricTile label="Active Users" value="8,412" trend={12.4} />
      <IceCaveMetricTile label="Avg. Response" value="184" suffix="ms" trend={-6.1} />
      <IceCaveMetricTile label="Uptime" value="99.98" suffix="%" />
    </div>
  );
}