"use client";

import { User } from "@/types/types";
import Link from "next/link";
import { useState } from "react";
import { FiChevronRight } from "react-icons/fi";
import ProfileAvatar from "../main/ProfileAvatar";
import { useRouter } from "next/navigation";
import ChatHeaderMenu from "./ChatHeaderMenu";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";

export const chatHeaderCircleBtn = cn(
  "gentle-transition flex h-11 w-11 shrink-0 items-center justify-center rounded-full",
  "bg-white shadow-[0_2px_8px_rgba(0,0,0,0.1)]",
  "text-neutral-800 active:scale-90",
  "dark:bg-[#2c2c2e] dark:text-neutral-100 dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
);

export const chatHeaderInfoPill = cn(
  "gentle-transition flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full py-[5px] pr-[5px] pl-3",
  "bg-white shadow-[0_2px_8px_rgba(0,0,0,0.1)]",
  "active:scale-[0.98]",
  "dark:bg-[#2c2c2e] dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
);

function ChatHeader({
  user,
  searchQuery = "",
  onSearchChange,
  onBlockChange,
  onStartDeleteMode,
  deleteMode = false,
}: {
  user: User | undefined;
  searchQuery?: string;
  onSearchChange?: (q: string) => void;
  onBlockChange?: () => void;
  onStartDeleteMode?: () => void;
  deleteMode?: boolean;
}) {
  const router = useRouter();
  const [searchOpen, setSearchOpen] = useState(false);

  const isOnline = user?.last_online === "آنلاین";
  const displayName =
    [user?.first_name, user?.last_name].filter(Boolean).join(" ").trim() ||
    user?.user_name ||
    "";

  return (
    <header className="gentle-transition sticky top-0 z-40 shrink-0 px-2 pb-2 pt-[max(0.5rem,env(safe-area-inset-top))] sm:px-3">
      <div className="flex items-center justify-between gap-2">
        <button
          type="button"
          onClick={() => router.back()}
          className={chatHeaderCircleBtn}
          aria-label="بازگشت"
        >
          <FiChevronRight size={22} strokeWidth={2.5} />
        </button>

        <Link
          href={`/users/${user?.user_name}`}
          className={chatHeaderInfoPill}
        >
          {user?.profile_image && !user?.blocked_you ? (
            <ProfileAvatar
              src={user.profile_image}
              alt={user.user_name || ""}
              size="xs"
              rounded="full"
              className="h-[34px] w-[34px] shrink-0"
            />
          ) : (
            <div className="h-[34px] w-[34px] shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-600" />
          )}
          <div className="min-w-0 flex-1 text-right">
            <span className="block truncate text-[15px] font-semibold leading-tight text-neutral-900 dark:text-neutral-50">
              {displayName}
            </span>
            <span className="block truncate text-xs leading-tight text-neutral-500 dark:text-neutral-400">
              {isOnline ? (
                <span className="text-[#0095f6]">آنلاین</span>
              ) : (
                user?.user_name || user?.last_online || ""
              )}
            </span>
          </div>
        </Link>

        <ChatHeaderMenu
          user={user}
          searchOpen={searchOpen}
          onSearchToggle={setSearchOpen}
          onBlockChange={onBlockChange}
          onStartDeleteMode={onStartDeleteMode}
          buttonClassName={chatHeaderCircleBtn}
        />
      </div>

      {deleteMode && (
        <p className="mt-2 text-center text-xs font-medium text-neutral-500 dark:text-neutral-400">
          پیام‌های خود را برای حذف انتخاب کنید
        </p>
      )}

      <AnimatePresence>
        {searchOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden"
          >
            <input
              type="search"
              value={searchQuery}
              onChange={(e) => onSearchChange?.(e.target.value)}
              placeholder="جستجو در پیام‌ها…"
              className="glass-chat-input mt-2 w-full rounded-full px-4 py-2 text-sm outline-none"
            />
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}

export default ChatHeader;
