"use client";

import { useEffect, useRef, useState, useCallback, useId } from "react";

// ---------------------------------------------------------------------------
// Procedural maps — generate edge-weighted displacement and specular assets
// that better match the authored-map workflow described in the reference article.
// ---------------------------------------------------------------------------

/** Compute surface height for a pill (stadium) shape at (px, py) with given half-dims. */
function pillHeight(
  px: number,
  py: number,
  halfW: number,
  halfH: number,
  radius: number
): number {
  // Pill = rectangle with semicircle caps on short sides
  const capCenterOffset = halfW - radius;
  let dx: number, dy: number;

  if (px < -capCenterOffset) {
    dx = px + capCenterOffset;
    dy = py;
    const d = Math.sqrt(dx * dx + dy * dy);
    return d >= radius ? 0 : Math.sqrt(radius * radius - d * d) / radius;
  } else if (px > capCenterOffset) {
    dx = px - capCenterOffset;
    dy = py;
    const d = Math.sqrt(dx * dx + dy * dy);
    return d >= radius ? 0 : Math.sqrt(radius * radius - d * d) / radius;
  } else {
    // Rectangular middle — height is dome along Y
    const d = Math.abs(py);
    return d >= halfH ? 0 : Math.sqrt(radius * radius - d * d) / radius;
  }
}

function clamp(value: number, min: number, max: number): number {
  return Math.min(max, Math.max(min, value));
}

function smoothstep(edge0: number, edge1: number, x: number): number {
  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
  return t * t * (3 - 2 * t);
}

function generateDisplacementMap(
  width: number,
  height: number
): string {
  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext("2d")!;
  const imgData = ctx.createImageData(width, height);
  const data = imgData.data;

  const halfW = width / 2;
  const halfH = height / 2;
  const radius = halfH;

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const px = x - halfW;
      const py = y - halfH;
      const h = pillHeight(px, py, halfW, halfH, radius);

      if (h <= 0.001) {
        const idx = (y * width + x) * 4;
        data[idx] = 128;
        data[idx + 1] = 128;
        data[idx + 2] = 128;
        data[idx + 3] = 255;
        continue;
      }

      const nx = px / Math.max(halfW, 1);
      const ny = py / Math.max(halfH, 1);
      const edgeWeight = smoothstep(0.06, 0.94, 1 - h);
      const shoulderBias = smoothstep(0.18, 0.92, 1 - Math.abs(ny) * 0.85);
      const rippleX =
        Math.sin((nx + 0.92) * Math.PI * 1.2) * 0.18 +
        Math.sin((ny - 0.28) * Math.PI * 2.3) * 0.08;
      const rippleY =
        Math.cos((ny - 0.16) * Math.PI * 1.45) * 0.14 -
        Math.sin((nx - 0.18) * Math.PI * 1.9) * 0.06;
      const lensX = -nx * 0.82 + ny * 0.22;
      const lensY = -ny * 0.98 - nx * 0.14;
      const intensity = edgeWeight * (0.16 + shoulderBias * 0.17);
      const dispX = clamp((lensX + rippleX) * intensity, -0.48, 0.48);
      const dispY = clamp((lensY + rippleY) * intensity, -0.48, 0.48);

      const idx = (y * width + x) * 4;
      data[idx] = Math.round(clamp(128 + dispX * 127, 0, 255));
      data[idx + 1] = Math.round(clamp(128 + dispY * 127, 0, 255));
      data[idx + 2] = 128;
      data[idx + 3] = 255;
    }
  }

  ctx.putImageData(imgData, 0, 0);
  return canvas.toDataURL("image/png");
}

// ---------------------------------------------------------------------------
// Specular highlight generator — bright top rim and directional shoulder glow.
// ---------------------------------------------------------------------------

function generateSpecularMap(width: number, height: number): string {
  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext("2d")!;
  const imgData = ctx.createImageData(width, height);
  const data = imgData.data;

  const halfW = width / 2;
  const halfH = height / 2;
  const radius = halfH;

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const px = x - halfW;
      const py = y - halfH;
      const h = pillHeight(px, py, halfW, halfH, radius);
      const idx = (y * width + x) * 4;

      if (h <= 0.001) {
        data[idx] = data[idx + 1] = data[idx + 2] = 0;
        data[idx + 3] = 0;
        continue;
      }

      const nx = px / Math.max(halfW, 1);
      const ny = py / Math.max(halfH, 1);
      const edge = smoothstep(0.54, 0.98, 1 - h);
      const directional = clamp(1.04 + -nx * 0.46 + -ny * 0.82, 0, 1.35);
      const topArc =
        Math.exp(-((ny + 0.54) ** 2) * 24) *
        smoothstep(0.08, 0.76, 1 - Math.abs(nx) * 0.9);
      const shoulder =
        Math.exp(-((nx + 0.68) ** 2) * 12 - ((ny + 0.24) ** 2) * 10) * 0.48;
      const alpha = clamp(edge * directional * 0.72 + topArc * 0.48 + shoulder, 0, 1);

      data[idx] = 255;
      data[idx + 1] = 255;
      data[idx + 2] = 255;
      data[idx + 3] = Math.round(alpha * 255);
    }
  }

  ctx.putImageData(imgData, 0, 0);
  return canvas.toDataURL("image/png");
}

// ---------------------------------------------------------------------------
// Draggable hook
// ---------------------------------------------------------------------------

function useDraggable() {
  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const isDraggingRef = useRef(false);
  const offset = useRef({ x: 0, y: 0 });
  const posRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });

  useEffect(() => {
    if (pos) posRef.current = pos;
  }, [pos]);

  const center = useCallback((x: number, y: number) => {
    setPos({ x, y });
  }, []);

  const onPointerDown = useCallback((e: React.PointerEvent) => {
    isDraggingRef.current = true;
    setIsDragging(true);
    offset.current = {
      x: e.clientX - posRef.current.x,
      y: e.clientY - posRef.current.y,
    };
    (e.target as HTMLElement).setPointerCapture(e.pointerId);
  }, []);

  const onPointerMove = useCallback((e: React.PointerEvent) => {
    if (!isDraggingRef.current) return;
    setPos({
      x: e.clientX - offset.current.x,
      y: e.clientY - offset.current.y,
    });
  }, []);

  const onPointerUp = useCallback(() => {
    isDraggingRef.current = false;
    setIsDragging(false);
  }, []);

  return { pos, center, isDragging, onPointerDown, onPointerMove, onPointerUp };
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

const PILL_W = 320;
const PILL_H = 120;
const FILTER_ID = "liquid-glass-displace";

export default function LiquidGlass() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [maps, setMaps] = useState<{
    displacement: string;
    specular: string;
  } | null>(null);
  const [supportsSvgBackdrop, setSupportsSvgBackdrop] = useState(true);
  const [isHovered, setIsHovered] = useState(false);

  const { pos, center, isDragging, onPointerDown, onPointerMove, onPointerUp } = useDraggable();

  // Center the pill after mount
  useEffect(() => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    center((rect.width - PILL_W) / 2, (rect.height - PILL_H) / 2);
  }, [center]);

  // Generate displacement + specular maps once
  useEffect(() => {
    const scale = Math.min(window.devicePixelRatio, 2);
    const w = Math.round(PILL_W * scale);
    const h = Math.round(PILL_H * scale);
    const dataUrl = generateDisplacementMap(w, h);
    const specUrl = generateSpecularMap(w, h);

    const frame = window.requestAnimationFrame(() => {
      setMaps({ displacement: dataUrl, specular: specUrl });
    });

    return () => window.cancelAnimationFrame(frame);
  }, []);

  // Chromium browsers currently support SVG filters inside backdrop-filter.
  useEffect(() => {
    const ua = navigator.userAgent;
    const chromiumBased = /Chrome|Chromium|CriOS|Edg|OPR|Brave/i.test(ua) && !/Firefox/i.test(ua);

    const frame = window.requestAnimationFrame(() => {
      setSupportsSvgBackdrop(chromiumBased);
    });

    return () => window.cancelAnimationFrame(frame);
  }, []);

  const filterId = `${FILTER_ID}-${useId().replace(/:/g, "")}`;
  const visualState = isDragging ? "active" : isHovered ? "hover" : "idle";
  const filterScale = visualState === "active" ? 44 : visualState === "hover" ? 38 : 32;
  const sourceBlur = visualState === "active" ? 1.55 : visualState === "hover" ? 1.3 : 1.05;
  const filterBackdrop = supportsSvgBackdrop
    ? `url(#${filterId}) blur(${visualState === "active" ? 8 : 6}px) saturate(${visualState === "active" ? 1.55 : 1.42}) brightness(${visualState === "active" ? 1.18 : 1.12})`
    : "blur(18px) saturate(1.35) brightness(1.08)";

  const ready = maps && pos;

  return (
    <div
      ref={containerRef}
      className="relative h-[560px] w-full overflow-hidden rounded-[20px] md:h-[590px]"
      style={{ background: "#0a0a0a" }}
    >
      {!ready && (
        <div className="absolute inset-0 z-50 flex items-center justify-center">
          <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white/70" />
        </div>
      )}
      {ready && (<>
      {/* Browser support banner */}
      <div
        className="absolute left-0 right-0 top-0 z-30 flex items-center justify-center gap-2 px-4 py-2"
        style={{
          background: supportsSvgBackdrop
            ? "rgba(34,197,94,0.08)"
            : "rgba(234,179,8,0.1)",
          borderBottom: supportsSvgBackdrop
            ? "1px solid rgba(34,197,94,0.15)"
            : "1px solid rgba(234,179,8,0.2)",
          backdropFilter: "blur(12px)",
        }}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={supportsSvgBackdrop ? "#22c55e" : "#eab308"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          {supportsSvgBackdrop ? (
            <>
              <circle cx="12" cy="12" r="10" />
              <path d="M9 12l2 2 4-4" />
            </>
          ) : (
            <>
              <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
              <line x1="12" y1="9" x2="12" y2="13" />
              <line x1="12" y1="17" x2="12.01" y2="17" />
            </>
          )}
        </svg>
        <span
          style={{
            fontSize: 11,
            fontWeight: 500,
            letterSpacing: "0.02em",
            color: supportsSvgBackdrop ? "rgba(34,197,94,0.85)" : "rgba(234,179,8,0.85)",
          }}
        >
          {supportsSvgBackdrop
            ? "Chromium browser detected — refraction, saturation, and rim blend active"
            : "Fallback mode — layered blur and highlights only, no SVG backdrop refraction"}
        </span>
      </div>

      {/* Background image */}
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: "url('/background/1.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />

      {/* Subtle vignette */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.3) 100%)",
        }}
      />

      {/* SVG filter definition */}
      <svg
        width="0"
        height="0"
        style={{ position: "absolute" }}
        colorInterpolationFilters="sRGB"
      >
        <defs>
          <filter
            id={filterId}
            x="-10%"
            y="-10%"
            width="120%"
            height="120%"
          >
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation={sourceBlur}
              result="blurredSource"
            />
            <feImage
              href={maps.displacement}
              result="displacementMap"
              x="0"
              y="0"
              width={PILL_W}
              height={PILL_H}
              preserveAspectRatio="none"
            />
            <feDisplacementMap
              in="blurredSource"
              in2="displacementMap"
              scale={filterScale}
              xChannelSelector="R"
              yChannelSelector="G"
              result="displaced"
            />
            <feColorMatrix
              in="displaced"
              type="saturate"
              values="1.9"
              result="displacedSaturated"
            />
            <feImage
              href={maps.specular}
              result="specularMap"
              x="0"
              y="0"
              width={PILL_W}
              height={PILL_H}
              preserveAspectRatio="none"
            />
            <feGaussianBlur
              in="specularMap"
              stdDeviation={visualState === "active" ? 1.5 : 1.15}
              result="specularSoftened"
            />
            <feComposite
              in="displacedSaturated"
              in2="specularSoftened"
              operator="in"
              result="specularMasked"
            />
            <feBlend
              in="specularMasked"
              in2="displaced"
              mode="screen"
            />
          </filter>
        </defs>
      </svg>

      {/* Draggable pill */}
      <div
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onPointerEnter={() => setIsHovered(true)}
        onPointerLeave={() => setIsHovered(false)}
        style={{
          position: "absolute",
          left: pos.x,
          top: pos.y,
          width: PILL_W,
          height: PILL_H,
          cursor: "grab",
          zIndex: 20,
          touchAction: "none",
          userSelect: "none",
          transform: `scale(${visualState === "active" ? 0.985 : visualState === "hover" ? 1.012 : 1})`,
          transition: "transform 220ms cubic-bezier(0.19, 1, 0.22, 1)",
        }}
      >
        {/* Glass body — refraction layer */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: PILL_H / 2,
            overflow: "hidden",
            backdropFilter: filterBackdrop,
            WebkitBackdropFilter: filterBackdrop,
            background: supportsSvgBackdrop
              ? "rgba(255,255,255,0.04)"
              : "linear-gradient(135deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.08) 100%)",
          }}
        >
          {/* Tinted overlay */}
          <div
            style={{
              position: "absolute",
              inset: 0,
              background:
                "linear-gradient(140deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 18%, rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.12) 100%)",
              borderRadius: PILL_H / 2,
            }}
          />
          <div
            style={{
              position: "absolute",
              inset: 0,
              borderRadius: PILL_H / 2,
              background:
                "radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 28%, transparent 56%), radial-gradient(85% 70% at 76% 84%, rgba(255,255,255,0.12) 0%, transparent 55%)",
              opacity: visualState === "active" ? 0.96 : 0.8,
              pointerEvents: "none",
            }}
          />
        </div>

        {/* Specular highlight layer */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: PILL_H / 2,
            backgroundImage: `url(${maps.specular})`,
            backgroundSize: "100% 100%",
            opacity: visualState === "active" ? 0.82 : 0.68,
            pointerEvents: "none",
            mixBlendMode: "screen",
            filter: `blur(${visualState === "active" ? 0.4 : 0}px)`,
          }}
        />

        {/* Border */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: PILL_H / 2,
            border: "1px solid rgba(255,255,255,0.26)",
            boxShadow:
              "inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -18px 28px rgba(255,255,255,0.05), 0 24px 60px rgba(0,0,0,0.22)",
            pointerEvents: "none",
          }}
        />

        {/* Inner highlight arc */}
        <div
          style={{
            position: "absolute",
            top: 1,
            left: "15%",
            right: "15%",
            height: "40%",
            borderRadius: "50%",
            background:
              "linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 52%, transparent 100%)",
            pointerEvents: "none",
            opacity: visualState === "active" ? 0.92 : 0.78,
          }}
        />

        {/* Label */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 8,
            pointerEvents: "none",
          }}
        >
          <span
            style={{
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: "0.06em",
              color: "rgba(255,255,255,0.76)",
              textTransform: "uppercase",
              textShadow: "0 1px 6px rgba(0,0,0,0.34)",
            }}
          >
            Liquid Glass
          </span>
          <span
            style={{
              fontSize: 10,
              color: "rgba(255,255,255,0.42)",
            }}
          >
            drag me
          </span>
        </div>
      </div>

      {/* Bottom attribution */}
      <div
        className="absolute bottom-3 left-0 right-0 z-10 flex justify-center"
      >
        <span
          style={{
            fontSize: 10,
            color: "rgba(255,255,255,0.3)",
            letterSpacing: "0.04em",
          }}
        >
          SVG displacement + specular composite  |  edge-weighted procedural maps
        </span>
      </div>
      </>)}
    </div>
  );
}