"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { MagnifyingGlass, Plus, User, X } from "@phosphor-icons/react";
import { AnimatePresence, m, MotionConfig, Transition, Variants } from "motion/react";
import { useState } from "react";

const initialUsers = [
  { image: null, username: "Ava" },
  { image: null, username: "Liam" },
  { image: null, username: "Sofia" },
  { image: null, username: "Noah" },
  { image: null, username: "Maya" },
  { image: null, username: "Ethan" },
  { image: null, username: "Zara" },
  { image: null, username: "Leo" },
  { image: null, username: "Nina" },
  { image: null, username: "Omar" },
];

const preSelectedUsers: string[] = ["Ava", "Liam"];

const TRANSITION: Transition = { duration: 0.3, ease: "easeInOut" };
const searchUser: Variants = {
  hidden: {
    opacity: 0,
    scale: 0.98,
    filter: "blur(6px)",
    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] as const },
  },
  animate: {
    opacity: 1,
    scale: 1,
    filter: "blur(0px)",
    transition: { duration: 0.22, ease: [0.19, 1, 0.22, 1] as const },
  },
};
const counterVariants = {
  initial: { y: 8, opacity: 0 },
  animate: { y: 0, opacity: 1 },
  exit: { y: -8, opacity: 0 },
};

export default function UserSearch() {
  const [value, setValue] = useState("");
  const [users, setUsers] = useState(() => initialUsers.filter((u) => !preSelectedUsers.includes(u.username)));
  const [selectedUsers, setSelectedUsers] = useState(() => initialUsers.filter((u) => preSelectedUsers.includes(u.username)));

  const toggleUserSelection = (user: { username: string }) => {
    const isSelected = selectedUsers.some((u) => u.username === user.username);
    if (isSelected) {
      setSelectedUsers((prev) => prev.filter((u) => u.username !== user.username));
      setUsers((prev) => [...prev, { ...user, image: null }]);
    } else {
      setUsers((prev) => prev.filter((u) => u.username !== user.username));
      setSelectedUsers((prev) => [...prev, { ...user, image: null }]);
      setValue("");
    }
  };

  const filteredUsers = value.length > 0 ? users.filter((u) => u.username.toLowerCase().includes(value.toLowerCase())) : [];
  const active = filteredUsers.length > 0;

  return (
    <MotionConfig transition={TRANSITION}>
      <div className="flex min-h-[420px] w-full items-center justify-center p-6">
        {/* Raised shell */}
        <m.div
          layout
          transition={{ layout: { duration: 0.2, ease: [0.32, 0.72, 0, 1] as const } }}
          style={{ borderRadius: 28 }}
          className="flex w-full max-w-md flex-col gap-3 bg-gradient-to-b from-[#202020] to-[#191919] p-3 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]"
        >
          {/* Inset search well */}
          <m.div
            layoutId="nothing-search-container"
            className="flex h-[52px] w-full items-center gap-2 rounded-full bg-[#0f0f0f] px-2 shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]"
          >
            <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#202020] to-[#191919] shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_1px_#ffffff35_inset,0_4px_8px_-4px_#00000080]">
              <MagnifyingGlass className="size-4 text-white/70" weight="bold" />
            </span>
            <input
              className="h-full flex-1 bg-transparent text-sm text-white placeholder:text-white/30 outline-none"
              placeholder="Search and add users..."
              onChange={(e) => setValue(e.target.value)}
              value={value}
            />
            <button
              onClick={() => setValue("")}
              className="flex size-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#202020] to-[#191919] shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_1px_#ffffff35_inset,0_4px_8px_-4px_#00000080] active:scale-[0.97] transition-transform"
              aria-label="Clear search"
            >
              <X className="size-3.5 text-white/60" weight="bold" />
            </button>
          </m.div>

          {/* Search Results — popping chips in inset trench */}
          <AnimatePresence initial={false} mode="popLayout">
            {active && (
              <m.div
                initial="hidden" animate="animate" exit="hidden" variants={searchUser}
                className="px-1"
              >
                <div className="flex flex-wrap gap-2">
                  {filteredUsers.map((user) => (
                    <m.div
                      key={user.username}
                      layoutId={`search-result-${user.username}`}
                      onClick={() => toggleUserSelection(user)}
                      className="group flex cursor-pointer items-center gap-2 rounded-full bg-gradient-to-b from-[#202020] to-[#191919] py-1 pl-1 pr-3 shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_1px_#ffffff35_inset,0_6px_10px_-6px_#00000070] active:scale-[0.97] transition-transform"
                    >
                      <span className="flex size-6 items-center justify-center rounded-full bg-[#0f0f0f] shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
                        <User className="size-3 text-white/50" weight="fill" />
                      </span>
                      <span className="text-xs font-medium tracking-wide text-white/80">{user.username}</span>
                      <span className="flex size-5 items-center justify-center rounded-full bg-white/10 group-hover:bg-white/15 transition-colors">
                        <Plus className="size-3 text-white/60 group-hover:text-white/90 transition-colors" weight="bold" />
                      </span>
                    </m.div>
                  ))}
                </div>
              </m.div>
            )}
          </AnimatePresence>

          {/* Selected — inset trench */}
          <div className="rounded-2xl bg-[#0f0f0f] p-3 shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
            <p className="mb-2 text-xs font-medium tracking-widest text-white/40 uppercase">
              Recipient added:{" "}
              <m.span
                key={selectedUsers.length}
                variants={counterVariants} initial="initial" animate="animate" exit="exit"
                transition={{ duration: 0.2 }} className="inline-block tabular-nums text-white/80"
              >
                {selectedUsers.length}
              </m.span>
            </p>
            <div className="flex flex-wrap gap-2">
              <AnimatePresence mode="popLayout">
                {selectedUsers.map((user) => (
                  <m.div
                    key={user.username}
                    layoutId={`selected-user-${user.username}`}
                    initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.9, opacity: 0 }}
                    className="flex items-center gap-2 rounded-full bg-gradient-to-b from-[#202020] to-[#191919] py-1 pl-1 pr-1 shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_1px_#ffffff35_inset,0_6px_10px_-6px_#00000070]"
                  >
                    <span className="flex size-6 items-center justify-center rounded-full bg-[#0f0f0f] shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
                      <User className="size-3 text-white/50" weight="fill" />
                    </span>
                    <span className="text-xs font-medium text-white/80">{user.username}</span>
                    <BaseButton
                      onClick={() => toggleUserSelection(user)}
                      className="flex size-6 items-center justify-center rounded-full bg-white/5 hover:bg-white/10 active:scale-90 transition-all"
                    >
                      <X className="size-3 text-white/60" weight="bold" />
                    </BaseButton>
                  </m.div>
                ))}
              </AnimatePresence>
              {selectedUsers.length === 0 && <span className="text-xs text-white/25">No recipients yet — search above</span>}
            </div>
          </div>
        </m.div>
      </div>
    </MotionConfig>
  );
}
User Search
