"use client";

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

type WindLabel = "XS" | "M" | "L";

const WIND_PRESETS: Record<
  WindLabel,
  {
    billow: string;
    displacementScale: string;
    freq: string;
    shutterGap: number;
    shutterHeight: number;
  }
> = {
  XS: {
    freq: "0.005 0.003;0.008 0.006;0.006 0.004;0.005 0.003",
    displacementScale: "30;38;45;38;30",
    billow: "perspective(400px) rotateX(0deg) rotateY(0deg) scale(1);perspective(400px) rotateX(0.6deg) rotateY(1deg) scale(1.01);perspective(400px) rotateX(-2deg) rotateY(-1deg) scale(0.98);perspective(400px) rotateX(0.6deg) rotateY(-0.5deg) scale(1.02);perspective(400px) rotateX(0deg) rotateY(0deg) scale(1)",
    shutterGap: 60,
    shutterHeight: 40,
  },
  M: {
    freq: "0.005 0.003;0.01 0.009;0.008 0.004;0.005 0.003",
    displacementScale: "45;55;75;55;45",
    billow: "perspective(400px) rotateX(0deg) rotateY(0deg) scale(1);perspective(400px) rotateX(1deg) rotateY(2deg) scale(1.02);perspective(400px) rotateX(-4deg) rotateY(-2deg) scale(0.97);perspective(400px) rotateX(1deg) rotateY(-1deg) scale(1.04);perspective(400px) rotateX(0deg) rotateY(0deg) scale(1)",
    shutterGap: 50,
    shutterHeight: 44,
  },
  L: {
    freq: "0.006 0.004;0.014 0.012;0.01 0.006;0.006 0.004",
    displacementScale: "60;80;110;80;60",
    billow: "perspective(400px) rotateX(0deg) rotateY(0deg) scale(1);perspective(400px) rotateX(2deg) rotateY(3deg) scale(1.04);perspective(400px) rotateX(-6deg) rotateY(-3deg) scale(0.94);perspective(400px) rotateX(2deg) rotateY(-2deg) scale(1.06);perspective(400px) rotateX(0deg) rotateY(0deg) scale(1)",
    shutterGap: 40,
    shutterHeight: 48,
  },
};

const SHUTTER_COUNT = 18;

function Shutters({ gap, height }: { gap: number; height: number }) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-end",
        gap,
        transition: "gap 1s cubic-bezier(0.455, 0.19, 0, 0.985)",
      }}
    >
      {Array.from({ length: SHUTTER_COUNT }, (_, i) => (
        <div
          key={i}
          style={{
            width: "100%",
            height,
            backgroundColor: "var(--dapple-shadow)",
            transition:
              "height 1s cubic-bezier(0.455, 0.19, 0, 0.985)",
          }}
        />
      ))}
    </div>
  );
}

function VerticalBars() {
  return (
    <div
      style={{
        position: "absolute",
        top: 0,
        height: "100%",
        width: "100%",
        display: "flex",
        justifyContent: "space-around",
      }}
    >
      <div
        style={{
          width: 5,
          height: "100%",
          backgroundColor: "var(--dapple-shadow)",
        }}
      />
      <div
        style={{
          width: 5,
          height: "100%",
          backgroundColor: "var(--dapple-shadow)",
        }}
      />
    </div>
  );
}

function ProgressiveBlur() {
  const layers: Array<{
    blur: number;
    stop1: string;
    stop2: string;
  }> = [
    { blur: 6, stop1: "0%", stop2: "0%" },
    { blur: 12, stop1: "40%", stop2: "80%" },
    { blur: 48, stop1: "40%", stop2: "70%" },
    { blur: 96, stop1: "70%", stop2: "80%" },
  ];

  return (
    <div style={{ position: "absolute", height: "100%", width: "100%" }}>
      {layers.map(({ blur, stop1, stop2 }, i) => (
        <div
          key={i}
          style={{
            position: "absolute",
            height: "100%",
            width: "100%",
            inset: 0,
            backdropFilter: `blur(${blur}px)`,
            WebkitBackdropFilter: `blur(${blur}px)`,
            maskImage: `linear-gradient(252deg, transparent, transparent ${stop1}, black ${stop2}, black)`,
            WebkitMaskImage: `linear-gradient(252deg, transparent, transparent ${stop1}, black ${stop2}, black)`,
          }}
        />
      ))}
    </div>
  );
}

function WindControls({
  onChange,
  value,
}: {
  onChange: (v: WindLabel) => void;
  value: WindLabel;
}) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "0.5rem",
        fontFamily: "var(--font-mono)",
        fontSize: "0.75rem",
        color: "#1f1c18",
        letterSpacing: "-0.03em",
      }}
    >
      <span style={{ fontSize: "0.9rem" }}>Wind:</span>
      {(["XS", "M", "L"] as const).map((label) => {
        const active = value === label;
        return (
          <label
            key={label}
            style={{
              width: "1.6rem",
              height: "1.6rem",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              borderRadius: "999px",
              cursor: "pointer",
              border: active
                ? "0.8px solid #111"
                : "0.8px solid transparent",
            }}
          >
            <input
              type="radio"
              name="dappled-wind-ii"
              value={label}
              checked={active}
              onChange={() => onChange(label)}
              style={{ display: "none" }}
            />
            {label}
          </label>
        );
      })}
    </div>
  );
}

export default function DappledLightII() {
  const [wind, setWind] = useState<WindLabel>("XS");
  const preset = WIND_PRESETS[wind];
  const filterId = useId();
  const styleRef = useRef<HTMLStyleElement | null>(null);

  const billowName = `dapple-billow-${filterId.replace(/:/g, "")}`;

  const setStyleEl = useCallback(
    (el: HTMLStyleElement | null) => {
      styleRef.current = el;
    },
    [],
  );

  return (
    <div
      style={
        {
          "--dapple-bg": "#fffdfa",
          "--dapple-shadow": "#1a1917",
          "--dapple-bounce": "#f5d7a6",
          width: "min(100%, 500px)",
          minWidth: 280,
          display: "flex",
          flexDirection: "column",
          gap: 12,
        } as React.CSSProperties
      }
    >
      {/* Keyframes for leaf billow */}
      <style
        ref={setStyleEl}
        dangerouslySetInnerHTML={{
          __html: `
@keyframes ${billowName} {
  0%   { transform: ${preset.billow.split(";")[0]}; }
  25%  { transform: ${preset.billow.split(";")[1]}; }
  50%  { transform: ${preset.billow.split(";")[2]}; }
  75%  { transform: ${preset.billow.split(";")[3]}; }
  100% { transform: ${preset.billow.split(";")[4]}; }
}`,
        }}
      />

      <div
        style={{
          position: "relative",
          width: "100%",
          aspectRatio: "500 / 307",
          backgroundColor: "var(--dapple-bg)",
          borderRadius: 2,
          overflow: "hidden",
        }}
      >
        {/* Warm glow from upper-right */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(309deg, var(--dapple-bounce), var(--dapple-bounce) 20%, transparent)",
            opacity: 0.45,
            pointerEvents: "none",
          }}
        />

        {/* Bounce light from bottom */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(355deg, var(--dapple-bounce) 0%, transparent 30%, transparent 100%)",
            opacity: 0.4,
            pointerEvents: "none",
          }}
        />

        {/* Perspective shadow layer */}
        <div
          style={{
            position: "absolute",
            top: "-30%",
            right: 0,
            width: "80%",
            height: "130%",
            opacity: 0.07,
            transformOrigin: "top right",
            transformStyle: "preserve-3d",
            transform:
              "matrix3d(0.75,-0.0625,0,0.0008, 0,1,0,0, 0,0,1,0, 0,0,0,1)",
            pointerEvents: "none",
          }}
        >
          {/* SVG wind filter */}
          <svg
            style={{
              width: 0,
              height: 0,
              position: "absolute",
            }}
          >
            <defs>
              <filter
                id={filterId}
                x="-20%"
                y="-20%"
                width="140%"
                height="140%"
              >
                <feTurbulence
                  type="fractalNoise"
                  numOctaves={2}
                  seed={1}
                >
                  <animate
                    attributeName="baseFrequency"
                    dur="16s"
                    keyTimes="0;0.33;0.66;1"
                    values={preset.freq}
                    repeatCount="indefinite"
                  />
                </feTurbulence>
                <feDisplacementMap in="SourceGraphic">
                  <animate
                    attributeName="scale"
                    dur="20s"
                    keyTimes="0;0.25;0.5;0.75;1"
                    values={preset.displacementScale}
                    repeatCount="indefinite"
                  />
                </feDisplacementMap>
              </filter>
            </defs>
          </svg>

          {/* Leaves image with wind distortion */}
          <div
            style={{
              position: "absolute",
              bottom: -20,
              right: -700,
              width: 1600,
              height: 1400,
              backgroundImage:
                "url(/background/sunlit-leaves.png)",
              backgroundSize: "cover",
              backgroundRepeat: "no-repeat",
              filter: `url(#${filterId})`,
              animation: `${billowName} 8s ease-in-out infinite`,
            }}
          />

          {/* Blind shutters */}
          <div style={{ position: "relative", width: "100%" }}>
            <Shutters
              gap={preset.shutterGap}
              height={preset.shutterHeight}
            />
            <VerticalBars />
          </div>
        </div>

        {/* Progressive blur */}
        <ProgressiveBlur />
      </div>

      <WindControls value={wind} onChange={setWind} />
    </div>
  );
}
Dappled Light II
