"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { Button } from "@/components/ui/button";
import { buttonVariants } from "@/components/ui/button-variants";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

import { PawPrint, X } from "@phosphor-icons/react";
import {
  AnimatePresence,
  MotionConfig,
  Transition,
  Variants,
  m,
} from "motion/react";
import { useState } from "react";

const TRANSITION: Transition = {
  type: "spring",
  bounce: 0.05,
  duration: 0.3,
};

type Item = {
  id: number;
  className: string;
};

const list: Item[] = [
  { className: "bg-red-500" },
  { className: "bg-orange-500" },
  { className: "bg-yellow-400" },
  { className: "bg-green-600" },
  { className: "bg-blue-600" },
  { className: "bg-purple-600" },
  { className: "bg-pink-500" },
  { className: "bg-teal-500" },
  { className: "bg-indigo-600" },
  { className: "bg-gray-500" },
  { className: "bg-lime-500" },
  { className: "bg-cyan-500" },
].map((i, idx) => ({
  ...i,
  id: idx + 1,
}));

const explosionSizes = [2, 4, 6, 8, 10, 12];

const bgVariants: Variants = {
  initial: {
    scale: 0.6,
  },
  animate: {
    scale: 1,
  },
};

function getRandomPositions(
  radius: number,
  count: number = 6,
): { x: number; y: number }[] {
  const positions: { x: number; y: number }[] = [];
  const centerX = radius;
  const centerY = radius;

  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2; // Random angle in radians
    const x = centerX + radius * Math.cos(angle);
    const y = centerY + radius * Math.sin(angle);
    positions.push({ x, y });
  }

  return positions;
}
const tapK8czh = {
  source: { type: "triangle" as OscillatorType, frequency: 1607.204848947442 },
  envelope: { attack: 0, decay: 0.010737538780617938, sustain: 0, release: 0.004 },
  gain: 0.688,
  filter: { type: "bandpass" as BiquadFilterType, frequency: 2018.0677442006424, Q: 3.712 },
};
const closeSound = {
  source: { type: "triangle" as OscillatorType, frequency: 900 },
  envelope: { attack: 0, decay: 0.012, sustain: 0, release: 0.006 },
  gain: 0.6,
  filter: { type: "bandpass" as BiquadFilterType, frequency: 1200, Q: 2.5 },
};
function playSound(def: typeof tapK8czh) {
  try {
    const ctx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
    const o = ctx.createOscillator();
    const g = ctx.createGain();
    const f = ctx.createBiquadFilter();
    o.type = def.source.type; o.frequency.value = def.source.frequency;
    f.type = def.filter.type; f.frequency.value = def.filter.frequency; f.Q.value = def.filter.Q;
    o.connect(f); f.connect(g); g.connect(ctx.destination);
    const t = ctx.currentTime;
    g.gain.setValueAtTime(0, t);
    g.gain.linearRampToValueAtTime(def.gain, t + def.envelope.attack);
    g.gain.exponentialRampToValueAtTime(0.001, t + def.envelope.attack + def.envelope.decay + def.envelope.release);
    o.start(t); o.stop(t + def.envelope.attack + def.envelope.decay + def.envelope.release + 0.02);
  } catch {}
}

const ProfileEdit = () => {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState<Item>(list[0]);
  const positions = getRandomPositions(128, explosionSizes.length);

  const toggleOpen = () => {
    const next = !open;
    playSound(next ? tapK8czh : closeSound);
    setOpen(next);
  };

  return (
    <MotionConfig transition={TRANSITION}>
      <AnimatePresence mode="popLayout" initial={false}>
        {open ? (
          <m.div
            layoutId="edit-profile-container"
            style={{ borderRadius: 12 }}
            className="bg-background border max-w-md w-full rounded-xl shadow-sm"
          >
            <div className="h-12 border-b flex items-center justify-between px-5">
              <m.span layoutId="edit-profile-text">Edit profile</m.span>
              <BaseButton
                onClick={toggleOpen}
                className="size-6 center hover:bg-muted rounded-full"
              >
                <X className="size-4" />
              </BaseButton>
            </div>
            <div className="p-10 flex flex-col gap-4">
              <div className="border rounded-md p-5 flex gap-10 overflow-hidden">
                <div className="size-32 relative">
                  <m.div
                    variants={bgVariants}
                    initial="initial"
                    animate="animate"
                    exit="initial"
                    key={active.id}
                    className={cn(
                      "size-32 bg-red-500 rounded-full center relative",
                      active.className,
                    )}
                  ></m.div>
                  <PawPrint className="size-10 inset-0 m-auto absolute text-white" />
                {Array.from({ length: explosionSizes.length }).map((_, idx) => (
                  <Explosion
                    key={idx}
                    size={explosionSizes[idx]}
                    color={active.className}
                    position={positions[idx]}
                  />
                ))}
              </div>
              <div className="flex-1 grid grid-cols-4 gap-1">
                {list.map((i, idx) => (
                  <button
                    onClick={() => setActive(list[idx])}
                    aria-label={`Select color ${idx + 1}`}
                    key={idx + i.id}
                    className={cn(
                      "size-7 bg-red-500 rounded-full cursor-pointer relative",
                      i.className,
                    )}
                  >
                    {active.id === i.id && (
                      <m.div
                        layoutId="edit-profile-active-color"
                        className="size-4 bg-white absolute inset-0 m-auto rounded-full center"
                      >
                        <m.div
                          className={cn(
                            active.className,
                            "size-2 rounded-full",
                          )}
                          layoutId="edit-profile-mid-circle"
                        />
                      </m.div>
                    )}
                  </button>
                ))}
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-muted-foreground/90">Account name</p>
              <Input className="bg-muted" />
            </div>
            <Button>Save</Button>
          </div>
        </m.div>
      ) : (
        <m.button
          onClick={toggleOpen}
          className={buttonVariants({
            className: "!bg-background !text-primary !border-2",
          })}
          layoutId="edit-profile-container"
          style={{ borderRadius: 8 }}
        >
          <m.span layoutId="edit-profile-text">Edit profile</m.span>
        </m.button>
      )}
      </AnimatePresence>
    </MotionConfig>
  );
};

const Explosion = ({
  size,
  color,
  position,
}: {
  size: number;
  color: string;
  position: { x: number; y: number };
}) => {
  return (
    <m.div
      className={cn(
        "absolute inset-0 m-auto rounded-full center bg-sky-800",
        color,
      )}
      layoutId="edit-profile-explosion"
      style={{ width: size, height: size, left: position.x, top: position.y }}
    />
  );
};

export default ProfileEdit;
Profile Editor
