Borealis Card

"use client";

import { type CSSProperties, type ReactNode, useEffect, useRef } from "react";
import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, Vector2, Vector3, WebGLRenderer } from "three";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  BorealisBlur — WebGL aurora field                                    */
/* ------------------------------------------------------------------ */

interface AuroraLayer {
  color: string;
  speed: number;
  intensity: number;
}
interface SkyLayer {
  color: string;
  blend: number;
}

/** One cool-blue family only — the aurora never turns rainbow. */
const DEFAULT_LAYERS: AuroraLayer[] = [
  { color: "#22d3ee", speed: 0.35, intensity: 0.7 },
  { color: "#3b82f6", speed: 0.18, intensity: 0.65 },
  { color: "#60a5fa", speed: 0.12, intensity: 0.4 },
  { color: "#1d4ed8", speed: 0.08, intensity: 0.22 },
];
const DEFAULT_SKY: SkyLayer[] = [
  { color: "#020617", blend: 0.52 },
  { color: "#0f172a", blend: 0.78 },
];

/** Hex or named colour → normalized [r, g, b]; falls back to white. */
function hexToRgb(color: string): [number, number, number] {
  if (color.startsWith("#")) {
    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
    return m
      ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255]
      : [1, 1, 1];
  }
  if (typeof document === "undefined") return [1, 1, 1];
  const el = document.createElement("span");
  el.style.color = color;
  document.body.appendChild(el);
  const rgb = getComputedStyle(el).color.match(/\d+(\.\d+)?/g);
  el.remove();
  if (!rgb || rgb.length < 3) return [1, 1, 1];
  return [Number(rgb[0]) / 255, Number(rgb[1]) / 255, Number(rgb[2]) / 255];
}

const VERTEX_SHADER = `
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;

const FRAGMENT_SHADER = `
precision highp float;
varying vec2 vUv;
uniform float u_time;
uniform vec2 u_resolution;
uniform float u_speed;
uniform vec3 u_layer1Color;
uniform float u_layer1Speed;
uniform float u_layer1Intensity;
uniform vec3 u_layer2Color;
uniform float u_layer2Speed;
uniform float u_layer2Intensity;
uniform vec3 u_layer3Color;
uniform float u_layer3Speed;
uniform float u_layer3Intensity;
uniform vec3 u_layer4Color;
uniform float u_layer4Speed;
uniform float u_layer4Intensity;
uniform float u_noiseScale;
uniform float u_movementX;
uniform float u_movementY;
uniform float u_verticalFade;
uniform float u_bloomIntensity;
uniform vec3 u_skyColor1;
uniform vec3 u_skyColor2;
uniform float u_skyBlend1;
uniform float u_skyBlend2;
uniform float u_brightness;
uniform float u_saturation;
uniform float u_opacity;

float hashNoise(float n) { return fract(sin(n) * 43758.5453123); }

float noise2d(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(
    mix(hashNoise(i.x + hashNoise(i.y)), hashNoise(i.x + 1.0 + hashNoise(i.y)), u.x),
    mix(hashNoise(i.x + hashNoise(i.y + 1.0)), hashNoise(i.x + 1.0 + hashNoise(i.y + 1.0)), u.x),
    u.y
  );
}

vec3 aurora(vec2 uv, float layerSpeed, float intensity, vec3 color, float aspect) {
  float time = u_time * u_speed * layerSpeed;
  vec2 scaled = vec2(uv.x * aspect, uv.y) * u_noiseScale;
  vec2 point = scaled + time * vec2(u_movementX, u_movementY);
  float n = noise2d(point + noise2d(color.xy + point + time));
  float alpha = n - uv.y * u_verticalFade;
  return color * alpha * intensity * u_bloomIntensity;
}

vec3 saturateColor(vec3 color, float saturation) {
  float gray = dot(color, vec3(0.299, 0.587, 0.114));
  return mix(vec3(gray), color, saturation);
}

void main() {
  vec2 uv = vUv;
  float aspect = u_resolution.x / u_resolution.y;
  vec3 color = vec3(0.0);
  color += aurora(uv, u_layer1Speed, u_layer1Intensity, u_layer1Color, aspect);
  color += aurora(uv, u_layer2Speed, u_layer2Intensity, u_layer2Color, aspect);
  color += aurora(uv, u_layer3Speed, u_layer3Intensity, u_layer3Color, aspect);
  color += aurora(uv, u_layer4Speed, u_layer4Intensity, u_layer4Color, aspect);
  color += u_skyColor2 * (1.0 - smoothstep(u_skyBlend1, 1.0, uv.y));
  color += u_skyColor1 * (1.0 - smoothstep(0.0, u_skyBlend2, uv.y));
  color = saturateColor(color, u_saturation) * u_brightness;
  gl_FragColor = vec4(color, u_opacity);
}
`;

interface BorealisBlurProps {
  speed?: number;
  layers?: AuroraLayer[];
  skyLayers?: SkyLayer[];
  className?: string;
  style?: CSSProperties;
}

/**
 * A GPU aurora field: four cool-blue noise layers drift over a navy sky in a
 * fragment shader, rendered imperatively on a full-quad orthographic three.js
 * scene (no react-three-fiber, so it never clobbers the global JSX types). It
 * mounts client-side only and is purely decorative.
 * @param {AuroraLayer[]} layers - Aurora colour bands [Optional, default: blue set]
 */
function BorealisBlur({
  speed = 1.1,
  layers = DEFAULT_LAYERS,
  skyLayers = DEFAULT_SKY,
  className,
  style,
}: BorealisBlurProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const canvas = document.createElement("canvas");
    canvas.className = "pointer-events-none absolute inset-0 h-full w-full";
    container.appendChild(canvas);

    let renderer: WebGLRenderer;
    try {
      renderer = new WebGLRenderer({
        canvas,
        alpha: true,
        antialias: true,
        powerPreference: "high-performance",
      });
    } catch {
      canvas.remove();
      return;
    }
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));

    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    const scene = new Scene();
    const l = layers.length ? layers : DEFAULT_LAYERS;
    const s = skyLayers.length ? skyLayers : DEFAULT_SKY;

    const material = new ShaderMaterial({
      transparent: true,
      vertexShader: VERTEX_SHADER,
      fragmentShader: FRAGMENT_SHADER,
      uniforms: {
        u_time: { value: 0 },
        u_resolution: { value: new Vector2(1, 1) },
        u_speed: { value: speed },
        u_layer1Color: { value: new Vector3(...hexToRgb((l[0] ?? DEFAULT_LAYERS[0]).color)) },
        u_layer1Speed: { value: (l[0] ?? DEFAULT_LAYERS[0]).speed },
        u_layer1Intensity: { value: (l[0] ?? DEFAULT_LAYERS[0]).intensity },
        u_layer2Color: { value: new Vector3(...hexToRgb((l[1] ?? DEFAULT_LAYERS[1]).color)) },
        u_layer2Speed: { value: (l[1] ?? DEFAULT_LAYERS[1]).speed },
        u_layer2Intensity: { value: (l[1] ?? DEFAULT_LAYERS[1]).intensity },
        u_layer3Color: { value: new Vector3(...hexToRgb((l[2] ?? DEFAULT_LAYERS[2]).color)) },
        u_layer3Speed: { value: (l[2] ?? DEFAULT_LAYERS[2]).speed },
        u_layer3Intensity: { value: (l[2] ?? DEFAULT_LAYERS[2]).intensity },
        u_layer4Color: { value: new Vector3(...hexToRgb((l[3] ?? DEFAULT_LAYERS[3]).color)) },
        u_layer4Speed: { value: (l[3] ?? DEFAULT_LAYERS[3]).speed },
        u_layer4Intensity: { value: (l[3] ?? DEFAULT_LAYERS[3]).intensity },
        u_noiseScale: { value: 3.2 },
        u_movementX: { value: -1.4 },
        u_movementY: { value: -2.6 },
        u_verticalFade: { value: 0.5 },
        u_bloomIntensity: { value: 1.9 },
        u_skyColor1: { value: new Vector3(...hexToRgb(s[0].color)) },
        u_skyColor2: { value: new Vector3(...hexToRgb(s[1].color)) },
        u_skyBlend1: { value: s[1].blend },
        u_skyBlend2: { value: s[0].blend },
        u_brightness: { value: 0.92 },
        u_saturation: { value: 1.12 },
        u_opacity: { value: 1 },
      },
    });
    const mesh = new Mesh(new PlaneGeometry(2, 2), material);
    scene.add(mesh);

    const resize = () => {
      const { clientWidth: w, clientHeight: h } = container;
      renderer.setSize(w, h, false);
      material.uniforms.u_resolution.value.set(w, h);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(container);

    let raf = 0;
    let visible = true;
    const io = new IntersectionObserver(
      ([entry]) => {
        visible = entry.isIntersecting;
      },
      { threshold: 0 },
    );
    io.observe(container);

    const start = performance.now();
    const render = () => {
      if (visible) {
        material.uniforms.u_time.value = (performance.now() - start) / 1000;
        renderer.render(scene, camera);
      }
      raf = requestAnimationFrame(render);
    };
    raf = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
      io.disconnect();
      mesh.geometry.dispose();
      material.dispose();
      renderer.dispose();
      canvas.remove();
    };
  }, [speed, layers, skyLayers]);

  return (
    <div
      ref={containerRef}
      className={cn("relative overflow-hidden", className)}
      style={style}
      aria-hidden="true"
    />
  );
}

/* ------------------------------------------------------------------ */
/*  BorealisCard                                                         */
/* ------------------------------------------------------------------ */

interface BorealisCardProps {
  header?: ReactNode;
  children?: ReactNode;
  /** Header min-height in px [Optional, default: 224] */
  headerHeight?: number;
  className?: string;
}

const CARD_VARS = {
  "--borealis-card-shade-1": "color-mix(in srgb, #3b82f6 18%, transparent)",
  "--borealis-card-shade-2": "color-mix(in srgb, #3b82f6 40%, transparent)",
  "--borealis-card-shade-3": "color-mix(in srgb, #070b16 84%, transparent)",
  "--borealis-card-shade-4": "color-mix(in srgb, #070b16 100%, transparent)",
  "--borealis-card-glow-1": "color-mix(in srgb, #3b82f6 42%, transparent)",
  "--borealis-card-glow-2": "color-mix(in srgb, #60a5fa 32%, transparent)",
} as CSSProperties;

/**
 * A dark card lit from below by a live aurora: the WebGL field sits behind a
 * radial glow and a shade gradient, with the content floating above on a navy
 * base. The header reserves height so the aurora reads before any copy loads.
 * @param {ReactNode} header - Top region over the aurora [Optional]
 * @param {ReactNode} children - Body content [Optional]
 */
export function BorealisCard({ header, children, headerHeight = 224, className }: BorealisCardProps) {
  return (
    <div className="relative w-full">
      <div
        className={cn(
          "relative isolate overflow-hidden rounded-[28px] border border-white/10 bg-[#070b16] text-white shadow-[0_28px_80px_-44px_rgba(0,0,0,0.8)]",
          className,
        )}
        style={CARD_VARS}
      >
        <div className="pointer-events-none absolute inset-0 overflow-hidden">
          <BorealisBlur className="absolute -left-[34%] bottom-[-18%] h-[82%] w-[128%] origin-bottom-left rotate-[-18deg] scale-[1.24] opacity-95 blur-[14px]" />
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_84%,var(--borealis-card-glow-1),transparent_20%),radial-gradient(circle_at_36%_68%,var(--borealis-card-glow-2),transparent_24%),linear-gradient(118deg,var(--borealis-card-shade-1)_0%,var(--borealis-card-shade-2)_28%,var(--borealis-card-shade-3)_58%,var(--borealis-card-shade-4)_100%)]" />
          <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[#070b16]/95 to-transparent" />
        </div>

        <div className="relative z-10">
          {header ? (
            <div className="relative z-10 p-8 pb-0" style={{ minHeight: headerHeight }}>
              {header}
            </div>
          ) : null}
          {children ? <div className="relative z-10">{children}</div> : null}
        </div>

        <div className="pointer-events-none absolute inset-0 rounded-[28px] ring-1 ring-inset ring-white/10" />
      </div>
    </div>
  );
}