"use client";

import { User } from "@/types/types";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { FiChevronRight } from "react-icons/fi";
import { IMAGE_BASE_URL } from "../main/BaseUrl";
import { useRouter } from "next/navigation";
import ChatHeaderMenu from "./ChatHeaderMenu";

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

  const isOnline = user?.last_online === "آنلاین";

  return (
    <header className="glass-panel gentle-transition sticky top-0 z-40 shrink-0 border-b border-white/20 px-2 py-2 sm:px-3 dark:border-white/5">
      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={() => router.back()}
          className="gentle-transition flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[#0095f6] active:scale-90"
          aria-label="بازگشت"
        >
          <FiChevronRight size={24} />
        </button>

        <Link
          href={`/users/${user?.user_name}`}
          className="gentle-transition flex min-w-0 flex-1 items-center gap-2 active:opacity-80"
        >
          {user?.profile_image && !user?.blocked_you ? (
            <Image
              width={40}
              height={40}
              alt=""
              src={IMAGE_BASE_URL + user.profile_image}
              className="h-10 w-10 shrink-0 rounded-full object-cover"
            />
          ) : (
            <div className="h-10 w-10 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-700" />
          )}
          <div className="min-w-0 flex-1 text-right">
            <span className="block truncate text-[15px] font-semibold">
              {user?.first_name} {user?.last_name}
            </span>
            <span className="truncate text-xs text-neutral-500">
              {isOnline ? (
                <span className="text-[#0095f6]">آنلاین</span>
              ) : (
                user?.last_online || user?.user_name
              )}
            </span>
          </div>
        </Link>

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

      <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>
  );
}

// framer-motion for search expand
import { AnimatePresence, motion } from "framer-motion";

export default ChatHeader;
