"use client";

import Image from "next/image";
import { Button as BaseButton } from "@base-ui/react/button";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

import { CaretRight, ChatText, PlusCircle, X } from "@phosphor-icons/react";

import { AnimatePresence, m, type Variants } from "motion/react";
import { useState } from "react";

type User = {
  id: string;
  name: string;
  email: string;
  avatar: string;
  add?: boolean;
};

type UserWithAdd = User | { add: boolean };

const avatar = (n: number) => `https://i.pravatar.cc/150?img=${n}`;

const defaultUser: UserWithAdd[] = [
  { id: "1", name: "John Doe", email: "john.doe@example.com", avatar: avatar(12) },
  { id: "2", name: "Jane Doe", email: "jane.doe@example.com", avatar: avatar(5) },
  { add: true },
];

const POOL = [
  { name: "Alex Rivera", email: "alex.rivera@example.com", avatar: avatar(15) },
  { name: "Mia Chen", email: "mia.chen@example.com", avatar: avatar(47) },
  { name: "Sam Carter", email: "sam.carter@example.com", avatar: avatar(33) },
  { name: "Leo Park", email: "leo.park@example.com", avatar: avatar(68) },
  { name: "Nora Blake", email: "nora.blake@example.com", avatar: avatar(24) },
  { name: "Owen Diaz", email: "owen.diaz@example.com", avatar: avatar(51) },
];

const textVariant: Variants = {
  initial: { opacity: 0, filter: "blur(4px)" },
  animate: { opacity: 1, filter: "blur(0px)" },
  exit: { opacity: 0, filter: "blur(4px)" },
};

const spring = { type: "spring" as const, stiffness: 500, damping: 35, mass: 0.8 };
const gentleSpring = { type: "spring" as const, stiffness: 300, damping: 28, mass: 0.9 };

const UserStacked = () => {
  const [users, setUsers] = useState<UserWithAdd[]>(defaultUser);
  const [active, setActive] = useState(false);
  const realUsers = users.filter((user): user is User => !user.add);

  const addUser = () => {
    setUsers((prev) => {
      const real = prev.filter((u): u is User => !u.add);
      const next = POOL[real.length % POOL.length];
      const newUser: User = {
        id: `u-${real.length + 1}-${next.name}`,
        name: next.name,
        email: next.email,
        avatar: next.avatar,
      };
      return [...real, newUser, { add: true }];
    });
    setActive(true);
  };

  const removeUser = (id: string) => {
    setUsers((prev) => prev.filter((u) => !("id" in u) || u.id !== id));
  };

  return (
    <div className="full flex justify-center p-10 select-none">
      <div className="flex w-full max-w-md flex-col gap-3 text-muted-foreground">
        <BaseButton
          type="button"
          className="flex items-center justify-between rounded-xl px-3 py-2.5 transition-colors duration-150 hover:bg-muted/30"
          onClick={() => setActive((prev) => !prev)}
        >
          <span className="flex items-center gap-3">
            <span className="flex -space-x-2">
              <AnimatePresence initial={false} mode="popLayout">
                {realUsers.slice(0, 4).map((user) => (
                  <m.img
                    key={user.id}
                    layout
                    initial={{ opacity: 0, scale: 0.4 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.4 }}
                    transition={spring}
                    src={user.avatar}
                    alt=""
                    draggable={false}
                    className="size-6 shrink-0 rounded-full object-cover ring-2 ring-background outline outline-1 -outline-offset-1 outline-white/10"
                  />
                ))}
              </AnimatePresence>
              {realUsers.length === 0 && (
                <span className="size-6 rounded-full bg-muted ring-2 ring-background" />
              )}
            </span>
            <span className="font-medium text-foreground">People</span>
            <m.span
              key={realUsers.length}
              initial={{ scale: 0.6, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              className="flex size-5 items-center justify-center rounded-full bg-muted text-xs tabular-nums"
            >
              {realUsers.length}
            </m.span>
          </span>
          <span className="flex items-center gap-2">
            <AnimatePresence mode="popLayout" initial={false}>
              {active ? (
                <m.span variants={textVariant} initial="initial" animate="animate" exit="exit" key="open" className="text-sm">
                  Hide
                </m.span>
              ) : (
                <m.span variants={textVariant} initial="initial" animate="animate" exit="exit" key="closed" className="text-sm">
                  Show All
                </m.span>
              )}
            </AnimatePresence>
            <m.span
              animate={{ rotate: active ? 90 : 0 }}
              transition={{ type: "spring", stiffness: 500, damping: 30 }}
            >
              <CaretRight className="size-4" />
            </m.span>
          </span>
        </BaseButton>

        <AnimatePresence mode="wait" initial={false}>
          {active ? (
            <m.div
              key="list"
              initial={{ opacity: 0, scaleY: 0 }}
              animate={{ opacity: 1, scaleY: 1 }}
              exit={{ opacity: 0, scaleY: 0 }}
              transition={{ ...gentleSpring, opacity: { duration: 0.15 } }}
              style={{ transformOrigin: "top" }}
              className="overflow-hidden"
            >
              <UnStack users={users} onAdd={addUser} onRemove={removeUser} />
            </m.div>
          ) : (
            <m.div
              key="stack"
              initial={{ opacity: 0, scaleY: 0 }}
              animate={{ opacity: 1, scaleY: 1 }}
              exit={{ opacity: 0, scaleY: 0 }}
              transition={{ ...gentleSpring, opacity: { duration: 0.15 } }}
              style={{ transformOrigin: "top" }}
              className="overflow-hidden"
            >
              <Stack users={users} onAdd={addUser} onExpand={() => setActive(true)} />
            </m.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

const UnStack = ({
  users,
  onAdd,
  onRemove,
}: {
  users: UserWithAdd[];
  onAdd: () => void;
  onRemove: (id: string) => void;
}) => {
  return (
    <div className="flex flex-col gap-1.5">
      <AnimatePresence initial={false} mode="popLayout">
        {users.map((user, index) => (
          <UserCard
            key={"id" in user ? user.id : "add"}
            user={user}
            index={index}
            stack={false}
            length={users.length}
            onAdd={onAdd}
            onRemove={onRemove}
          />
        ))}
      </AnimatePresence>
    </div>
  );
};

const UserCard = ({
  user,
  stack,
  index,
  length,
  onAdd,
  onRemove,
}: {
  user: UserWithAdd;
  stack?: boolean;
  index: number;
  length: number;
  onAdd: () => void;
  onRemove: (id: string) => void;
}) => {
  const isRealUser = "id" in user;
  const isFront = index === 0;

  if (stack) {
    const depth = Math.min(index, 3);
    if (depth > 3) return null;
    return (
      <m.div
        layoutId={isRealUser ? `user-${user.id}` : "add-user"}
        initial={{ opacity: 0, y: 20 }}
        animate={{
          opacity: [1, 0.7, 0.4, 0.2][depth],
          y: 0,
          scale: 1 - depth * 0.04,
        }}
        exit={{
          opacity: 0,
          scale: 0.92,
          transition: { duration: 0.15, ease: [0.4, 0, 1, 1] },
        }}
        style={{
          top: depth * 8,
          zIndex: length - index,
          transformOrigin: "top center",
        }}
        transition={spring}
        className={cn(
          "absolute inset-x-0 mx-auto flex items-center gap-2 rounded-xl border border-border/40 bg-card p-2.5 shadow-sm",
          isFront && "border-border/60 shadow-md shadow-black/10",
        )}
      >
        {isFront && isRealUser ? (
          <>
            <Image
              src={user.avatar}
              alt=""
              width={28}
              height={28}
              className="size-7 shrink-0 rounded-full object-cover outline outline-1 -outline-offset-1 outline-white/10"
              draggable={false}
            />
            <span className="truncate text-sm text-foreground">{user.name}</span>
          </>
        ) : (
          <div className="h-7 w-full" />
        )}
      </m.div>
    );
  }

  return (
    <m.div
      layoutId={isRealUser ? `user-${user.id}` : "add-user"}
      initial={{ opacity: 0, y: 12, scale: 0.97 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{
        opacity: 0,
        scale: 0.95,
        transition: { duration: 0.15, ease: [0.4, 0, 1, 1] },
      }}
      transition={spring}
      className={cn(
        "flex items-center justify-between gap-2 rounded-xl border border-border/50 p-2.5",
        isRealUser ? "bg-card" : "bg-muted/50",
      )}
    >
      {isRealUser ? (
        <>
          <div className="flex min-w-0 items-center gap-2.5">
            <Image
              src={user.avatar}
              alt=""
              width={28}
              height={28}
              className="size-7 shrink-0 rounded-full object-cover outline outline-1 -outline-offset-1 outline-white/10"
              draggable={false}
            />
            <span className="truncate text-sm text-foreground">{user.name}</span>
          </div>
          <div className="flex shrink-0 items-center gap-0.5">
            <Button size="icon" variant="ghost" className="size-7 text-muted-foreground/60 hover:text-foreground">
              <ChatText className="!size-3.5" />
            </Button>
            <Button
              size="icon"
              variant="ghost"
              aria-label={`Remove ${user.name}`}
              onClick={() => onRemove(user.id)}
              className="size-7 text-muted-foreground/60 hover:bg-red-500/10 hover:text-red-400"
            >
              <X className="!size-3.5" />
            </Button>
          </div>
        </>
      ) : (
        <BaseButton
          type="button"
          onClick={onAdd}
          className="flex w-full items-center justify-center gap-2 rounded-lg py-1 text-sm text-muted-foreground/60 transition-colors duration-150 hover:text-foreground"
        >
          <PlusCircle className="size-4" />
          <span>Add User</span>
        </BaseButton>
      )}
    </m.div>
  );
};

const Stack = ({
  users,
  onAdd,
  onExpand,
}: {
  users: UserWithAdd[];
  onAdd: () => void;
  onExpand: () => void;
}) => {
  const realCount = users.filter((u) => "id" in u).length;
  const visibleCards = users.slice(0, Math.min(users.length, 4));
  const peekHeight = 44 + Math.min(visibleCards.length - 1, 3) * 8;

  return (
    <button
      type="button"
      onClick={onExpand}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onExpand();
        }
      }}
      aria-label={`Expand people list — ${realCount} users`}
      className="relative cursor-pointer transition-transform duration-200 active:scale-[0.985] w-full text-left"
      style={{ height: peekHeight }}
    >
      {visibleCards.map((user, index) => (
        <UserCard
          key={"id" in user ? user.id : "add"}
          user={user}
          stack={true}
          index={index}
          length={visibleCards.length}
          onAdd={onAdd}
          onRemove={() => {}}
        />
      ))}
    </button>
  );
};

export default UserStacked;
Avatar List
