"use client";

import Image from "next/image";
import { Button as BaseButton } from "@base-ui/react/button";
import { CaretDown, Check } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";
import {
  MotionValue,
  animate,
  m,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
} from "motion/react";
import { useEffect, useRef, useState } from "react";

const MotionBaseButton = m.create(BaseButton as any);

const SCALE = 2.25;
const DISTANCE = 110;
const NUDGE = 40;
const SPRING = { mass: 0.1, stiffness: 170, damping: 12 };

interface AppConfig {
  name: string;
  src: string;
}

const APPS: AppConfig[] = [
  { name: "Weather", src: "/dock-icons/weather.png" },
  { name: "Codex", src: "/dock-icons/codex.png" },
  { name: "Ghostty", src: "/dock-icons/ghostty.png" },
  { name: "Arch", src: "/dock-icons/arch.png" },
  { name: "Music", src: "/dock-icons/music.png" },
];

const origins = ["center", "top", "bottom", "left", "right"] as const;
type Origin = (typeof origins)[number];

const originClass: Record<Origin, string> = {
  center: "origin-center",
  top: "origin-top",
  bottom: "origin-bottom",
  left: "origin-left",
  right: "origin-right",
};

export default function Dock() {
  const mouseLeft = useMotionValue(-Infinity);
  const mouseRight = useMotionValue(-Infinity);
  const left = useTransform(mouseLeft, [0, 40], [0, -40]);
  const right = useTransform(mouseRight, [0, 40], [0, -40]);
  const leftSpring = useSpring(left, SPRING);
  const rightSpring = useSpring(right, SPRING);
  const [origin, setOrigin] = useState<Origin>("center");

  return (
    <div className="flex h-full w-full min-h-[480px] flex-col items-center justify-center gap-3">
      {/* Dock */}
      <m.div
        onMouseMove={(e) => {
          const rect = e.currentTarget.getBoundingClientRect();
          mouseLeft.set(e.clientX - rect.left);
          mouseRight.set(rect.right - e.clientX);
        }}
        onMouseLeave={() => {
          mouseLeft.set(-Infinity);
          mouseRight.set(-Infinity);
        }}
        className="relative mx-auto hidden sm:block"
      >
        {/* Skeuomorphic raised shell tray */}
        <m.div
          className="absolute inset-0 rounded-[14px] bg-gradient-to-b from-[#202020] to-[#191919] shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_2px_#ffffff35_inset,0_10px_10px_-9px_#00000070,0_20px_20px_-14px_#00000060,0_0px_6px_0px_#00000060]"
          style={{
            left: leftSpring,
            right: rightSpring,
          }}
        />

        {/* App row — bare icons, tray hugs them on the 4px grid */}
        <div className="relative flex items-end gap-1.5 px-2 pt-1.5 pb-2">
          {APPS.map((app) => (
            <AppIcon
              key={app.name}
              app={app}
              mouseLeft={mouseLeft}
              origin={origin}
            />
          ))}
        </div>
      </m.div>

      {/* Origin selector dropdown */}
      <div className="relative hidden sm:block">
        <OriginSelect value={origin} onChange={setOrigin} />
      </div>

      {/* Mobile fallback */}
      <p className="text-center text-xs text-neutral-500 sm:hidden">
        View at 640px+ with a mouse to see the interaction.
      </p>
    </div>
  );
}

const SHELL_SHADOW = "0_1px_0.5px_#ffffff1a_inset,0_1px_2px_#ffffff35_inset,0_10px_10px_-9px_#00000070,0_20px_20px_-14px_#00000060,0_0px_6px_0px_#00000060";

function OriginSelect({
  value,
  onChange,
}: {
  value: Origin;
  onChange: (v: Origin) => void;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  return (
    <div ref={ref} className="relative">
      {/* Trigger */}
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className={cn(
          "flex h-8 cursor-pointer items-center justify-between gap-3 rounded-md px-3",
          "bg-gradient-to-b from-[#202020] to-[#191919] text-[13px] font-medium text-neutral-100",
          "outline-none transition-[box-shadow,transform,background]",
          "hover:from-[#242424] hover:to-[#1c1c1c] active:scale-[0.97]",
          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#5E6AD2]",
        )}
        style={{ boxShadow: SHELL_SHADOW.replaceAll("_", " ") }}
        aria-haspopup="listbox"
        aria-expanded={open}
      >
        <span className="capitalize">{value}</span>
        <m.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={reduce ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 30, mass: 0.6 }}
          className="flex"
        >
          <CaretDown className="size-3.5 opacity-60" />
        </m.span>
      </button>

      {/* Popup */}
      <m.div
        initial={false}
        animate={open ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.95, y: -4 }}
        transition={reduce ? { duration: 0 } : { duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
        style={{
          pointerEvents: open ? "auto" : "none",
          boxShadow: SHELL_SHADOW.replaceAll("_", " "),
        }}
        className="absolute top-[calc(100%+6px)] left-1/2 z-50 min-w-full -translate-x-1/2 origin-top rounded-md bg-gradient-to-b from-[#202020] to-[#191919]"
        role="listbox"
        aria-label="Magnification origin"
      >
        <div className="p-1">
          {origins.map((o) => (
            <button
              key={o}
              type="button"
              role="option"
              aria-selected={value === o}
              onClick={() => { onChange(o); setOpen(false); }}
              className={cn(
                "flex w-full cursor-default items-center justify-between gap-2 rounded-md px-2 py-1.5",
                "text-[13px] capitalize text-neutral-100 outline-none select-none",
                "transition-all duration-100",
                o === value
                  ? "bg-[#161616] font-medium shadow-[0_0.5px_0_#ffffff40_inset,0_-0.5px_0_#ffffff25_inset,0_2px_6px_#00000090_inset]"
                  : "hover:bg-[#161616] hover:shadow-[0_0.5px_0_#ffffff40_inset,0_-0.5px_0_#ffffff25_inset,0_2px_6px_#00000090_inset]",
              )}
            >
              {o}
              {o === value && <Check className="size-3.5" />}
            </button>
          ))}
        </div>
      </m.div>
    </div>
  );
}

function AppIcon({
  app,
  mouseLeft,
  origin,
}: {
  app: AppConfig;
  mouseLeft: MotionValue;
  origin: Origin;
}) {
  const ref = useRef<HTMLButtonElement>(null);
  const prefersReducedMotion = useReducedMotion();

  const distance = useTransform(() => {
    const bounds = ref.current
      ? { x: ref.current.offsetLeft, width: ref.current.offsetWidth }
      : { x: 0, width: 0 };
    return mouseLeft.get() - bounds.x - bounds.width / 2;
  });

  const scale = useTransform(
    distance,
    [-DISTANCE, 0, DISTANCE],
    prefersReducedMotion ? [1, 1, 1] : [1, SCALE, 1],
  );
  const x = useTransform(() => {
    if (prefersReducedMotion) return 0;
    const d = distance.get();
    if (d === -Infinity) return 0;
    if (d < -DISTANCE || d > DISTANCE) return Math.sign(d) * -1 * NUDGE;
    return (-d / DISTANCE) * NUDGE * scale.get();
  });

  const scaleSpring = useSpring(scale, SPRING);
  const xSpring = useSpring(x, SPRING);
  const y = useMotionValue(0);

  return (
    <MotionBaseButton
      ref={ref}
      style={{ x: xSpring, scale: scaleSpring, y }}
      onClick={() => {
        if (prefersReducedMotion) return;
        animate(y, [0, -40, 0], {
          repeat: 2,
          ease: [
            [0, 0, 0.2, 1],
            [0.8, 0, 1, 1],
          ],
          duration: 0.7,
        });
      }}
      className={cn(
        "group relative aspect-square w-12 shrink-0 rounded-[14px] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#5E6AD2]",
        originClass[origin],
      )}
      aria-label={app.name}
    >
      <DockAppIcon app={app} />
    </MotionBaseButton>
  );
}

function DockAppIcon({ app }: { app: AppConfig }) {
  return (
    <Image
      src={app.src}
      alt={app.name}
      width={48}
      height={48}
      draggable={false}
      className="absolute inset-0 h-full w-full select-none object-contain transition-[filter] duration-200 [@media(hover:hover)]:group-hover:brightness-110"
    />
  );
}
macOS Dock
