"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { cn } from "@/lib/utils";
import { Minus, Plus } from "@phosphor-icons/react";
import { useAnimate } from "motion/react";
import { useState } from "react";
import NumberFlow from "@number-flow/react";
import { play } from "cuelume";

interface CounterProps {
  min?: number;
  max?: number;
  initial?: number;
  onChange?: (value: number) => void;
  step?: number;
  className?: string;
}

const Counter: React.FC<CounterProps> = ({
  min = 0,
  max = 20,
  initial = 0,
  onChange,
  step = 1,
  className = "",
}) => {
  const [num, setNum] = useState(initial);
  const [trend, setTrend] = useState<1 | -1 | 0>(0);
  const [scope, animate] = useAnimate();

  const handleShake = () => {
    animate(scope.current, { x: [0, 5, -5, 0] }, { duration: 0.2 });
  };

  const counter = (action: "decrease" | "increase") => {
    if (action === "decrease") {
      if (num <= min) return handleShake();
      const newValue = num - step;
      play("tick");
      setTrend(-1);
      onChange?.(newValue);
      setNum(newValue);
    } else if (action === "increase") {
      if (num >= max) return handleShake();
      const newValue = num + step;
      play("tick");
      setTrend(1);
      onChange?.(newValue);
      setNum(newValue);
    }
  };

  return (
    <div className={cn("flex w-full items-center justify-center bg-transparent p-8", className)}>
      <div
        ref={scope}
        className={cn(
          "flex items-center gap-3 rounded-[28px] px-4 py-3",
          "bg-gradient-to-b from-[#202020] to-[#191919]",
          "shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_1px_#ffffff35_inset,0_10px_10px_-9px_#00000070,0_20px_20px_-14px_#00000060,0_0px_6px_0px_#00000060]",
          "border border-white/[0.06]"
        )}
      >
        {/* minus: inset well -> popping button */}
        <div className="flex h-[64px] items-center rounded-full bg-[#0a0a0a] p-1.5 shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
          <BaseButton
            onClick={() => counter("decrease")}
            aria-label="Decrease"
            className={cn(
              "flex size-full aspect-square items-center justify-center rounded-full text-lg text-white/90",
              "bg-gradient-to-b from-[#202020] to-[#191919]",
              "shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_2px_#ffffff35_inset,0_6px_12px_-6px_#00000080,0_2px_4px_#00000060]",
              "active:scale-[0.97] transition-transform cursor-pointer",
              num <= min && "opacity-40 pointer-events-none"
            )}
          >
            <Minus weight="bold" />
          </BaseButton>
        </div>

        {/* center inset readout */}
        <div className="relative flex h-[64px] w-[88px] items-center justify-center overflow-hidden rounded-2xl bg-[#080808] shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
          <h3 className="relative flex h-12 w-16 items-center justify-center overflow-hidden text-[30px] font-semibold tracking-tight tabular-nums text-white drop-shadow-[0_1px_1px_#000000cc]">
            <NumberFlow value={num} trend={trend} format={{ notation: "compact" }} />
          </h3>
        </div>

        {/* plus: inset well -> popping button */}
        <div className="flex h-[64px] items-center rounded-full bg-[#0a0a0a] p-1.5 shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
          <BaseButton
            onClick={() => counter("increase")}
            aria-label="Increase"
            className={cn(
              "flex size-full aspect-square items-center justify-center rounded-full text-lg text-white/90",
              "bg-gradient-to-b from-[#202020] to-[#191919]",
              "shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_2px_#ffffff35_inset,0_6px_12px_-6px_#00000080,0_2px_4px_#00000060]",
              "active:scale-[0.97] transition-transform cursor-pointer",
              num >= max && "opacity-40 pointer-events-none"
            )}
          >
            <Plus weight="bold" />
          </BaseButton>
        </div>
      </div>
    </div>
  );
};

export default Counter;