"use client";

import { User } from "@/types/types";
import Link from "next/link";
import { useState } from "react";
import ChatBoldIcon from "./ChatBoldIcon";
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(
  "chat-header-glass gentle-transition flex h-11 w-11 shrink-0 items-center justify-center rounded-full",
  "text-neutral-800 active:scale-90",
  "dark:text-neutral-100"
);

export const chatHeaderInfoPill = cn(
  "chat-header-glass gentle-transition flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full py-[5px] pr-[5px] pl-3",
  "active:scale-[0.98]"
);

function ChatHeader({
  user,
  searchQuery = "",
  onSearchChange,
  onBlockChange,
  onStartDeleteMode,
  deleteMode = false,
}: {
  user: User | undefined;
  searchQuery?: string;
  onSearchChange?: (q: string) => void;
  onBlockChange?: (blocked: boolean) => 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="pointer-events-none fixed left-0 right-0 top-0 z-[100] bg-transparent px-2 pb-2 pt-[max(0.5rem,env(safe-area-inset-top))] sm:px-3">
      <div
        dir="rtl"
        className="pointer-events-auto mx-auto flex max-w-lg items-center gap-2"
      >
        <button
          type="button"
          onClick={() => router.back()}
          className={chatHeaderCircleBtn}
          aria-label="بازگشت"
        >
          <ChatBoldIcon name="back" size={22} className="text-current" />
        </button>

        <Link
          href={`/users/${user?.user_name}`}
          dir="ltr"
          className={chatHeaderInfoPill}
        >
          <span
            className={cn(
              "chat-header-status-dot shrink-0",
              isOnline
                ? "chat-header-status-dot--online"
                : "chat-header-status-dot--offline"
            )}
            title={isOnline ? "آنلاین" : "آفلاین"}
            aria-hidden
          />
          <div dir="rtl" 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-[#22c55e]">آنلاین</span>
              ) : (
                user?.last_online || user?.user_name || "آفلاین"
              )}
            </span>
          </div>
          {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" />
          )}
        </Link>

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

      {deleteMode && (
        <p className="pointer-events-auto mx-auto mt-2 max-w-lg 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="pointer-events-auto mx-auto max-w-lg 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;
