import { useState, useRef, useEffect } from "react";
import { Search } from "lucide-react";

// ----------------------
// Main Component
// ----------------------
const HeaderSearch = () => {
  // ----------------------
  // State & Refs
  // ----------------------
  // Desktop-only state/refs (mobile search is always open)
  const [isOpen, setIsOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  // ----------------------
  // Auto-focus desktop input when search opens
  // ----------------------
  useEffect(() => {
    if (isOpen && inputRef.current) inputRef.current.focus();
  }, [isOpen]);

  // ----------------------
  // Close desktop search on outside click
  // ----------------------
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (!inputRef.current) return;
      const form = inputRef.current.closest("form");
      if (form && !form.contains(e.target as Node)) setIsOpen(false);
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // ----------------------
  // Keyboard Shortcut: Cmd/Ctrl + K opens search
  // ----------------------
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
      const isShortcut =
        (isMac && e.metaKey && e.key === "k") ||
        (!isMac && e.ctrlKey && e.key === "k");
      if (isShortcut) {
        e.preventDefault();
        setIsOpen(true);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  // ----------------------
  // Render Component
  // ----------------------
  return (
    <div className="ml-auto flex items-center mr-4 relative w-full md:w-auto">
      {/* =========================================================
          MOBILE SEARCH BAR
          - Always open
          - Full width
          - Visible only on small screens (<md)
          ========================================================= */}
      <form
        action="/search"
        method="GET"
        className="flex md:hidden w-full items-center rounded-full px-3 py-2 bg-white text-byu-navy ring-2 ring-gray-300 border border-byu-navy"
        aria-label="Site search"
      >
        <input
          type="text"
          name="q"
          placeholder="Search"
          className="bg-transparent outline-none text-sm font-medium w-full ml-2 placeholder-gray-500"
        />
        <button
          type="submit"
          className="text-byu-navy hover:text-gray-800"
          aria-label="Submit search"
        >
          <Search className="w-5 h-5" aria-hidden="true" />
        </button>
      </form>

      {/* =========================================================
          DESKTOP SEARCH BAR
          - Toggleable open/close
          - Hidden on mobile (<md)
          - Animated width transition
          ========================================================= */}
      <form
        action="/search"
        method="GET"
        className={`hidden md:flex items-center rounded-full px-3 py-2 transition-all duration-300 ease-in-out overflow-hidden bg-white text-gray-500 ${
          isOpen ? "w-50" : "w-10 justify-center"
        }`}
        aria-label="Site search"
      >
        {/* 
          INPUT FIELD:
          - Fades and expands in when open
          - Invisible and width=0 when closed
          
          WIDTH TUNING:
          - Adjust "w-[200px]" in the parent for the expanded width.
          - You can also tweak transition speed via `duration-300`.
        */}
        <input
          ref={inputRef}
          type="text"
          name="q"
          placeholder="Search"
          className={`bg-transparent outline-none text-sm font-medium transition-opacity duration-200 ${
            isOpen
              ? "opacity-100 w-full ml-2 text-gray-800 placeholder-gray-400"
              : "opacity-0 w-0"
          }`}
        />

        {/* 
          SEARCH ICON BUTTON:
          - Acts as toggle when closed
          - Submits form when open

          ANIMATION TIPS:
          - Add slight rotation or color transition: e.g. `transition-transform duration-200 hover:scale-110`
        */}
        <button
          type={isOpen ? "submit" : "button"}
          className="text-gray-600 hover:text-gray-800 transition-colors duration-150"
          onClick={(e) => {
            if (!isOpen) {
              e.preventDefault();
              setIsOpen(true);
            }
          }}
          aria-label={isOpen ? "Submit search" : "Open search"}
        >
          <Search className="w-5 h-5" aria-hidden="true" />
        </button>
      </form>
    </div>
  );
};

// ----------------------
// Export Component
// ----------------------
export default HeaderSearch;