Favicon Search Input

"use client";

import { useEffect, useRef, useState, type Ref } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Global as Globe, Magnifer as MagnifyingGlass, CloseCircle as X } from "@solar-icons/react";

import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  Types & helpers                                                    */
/* ------------------------------------------------------------------ */

export interface FaviconSearchInputProps {
  /** Controlled value. Leave undefined for uncontrolled use. [Optional] */
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  /** Fires on Enter with the raw value and the parsed domain. [Optional] */
  onSearch?: (value: string, domain: string | null) => void;
  placeholder?: string;
  /** Show the clear button while there is text. [Optional, default: true] */
  clearable?: boolean;
  /** Requested favicon resolution. [Optional, default: 64] */
  faviconSize?: 16 | 32 | 64 | 128;
  /** Debounce before resolving the domain, in ms. [Optional, default: 350] */
  debounce?: number;
  ref?: Ref<HTMLInputElement>;
  className?: string;
  inputClassName?: string;
}

/** Pulls a bare hostname out of free-form input, or null if it isn't one yet. */
export function extractDomain(input: string): string | null {
  if (!input.trim()) return null;
  try {
    const raw = input.includes("://") ? input : `https://${input}`;
    const host = new URL(raw).hostname.replace(/^www\./, "");
    return host.includes(".") && host.split(".").every(Boolean) ? host : null;
  } catch {
    const cleaned = input.trim().replace(/^www\./, "");
    return cleaned.includes(".") && cleaned.split(".").every(Boolean)
      ? cleaned
      : null;
  }
}

export function getFaviconUrl(domain: string, size = 64): string {
  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=${size}`;
}

/* ------------------------------------------------------------------ */
/*  FaviconSearchInput                                                 */
/* ------------------------------------------------------------------ */

const ICON_SPRING = { type: "spring" as const, stiffness: 400, damping: 28 };

/**
 * A URL input whose leading search icon morphs into the site's favicon
 * once the typed text resolves to a domain. The favicon is preloaded off
 * screen so the swap only plays after a successful load, a globe stands
 * in while it resolves, and everything springs through AnimatePresence.
 * Works controlled or uncontrolled.
 * @param {string} value - Controlled value [Optional]
 * @param {Function} onSearch - Enter handler (value, domain) [Optional]
 * @param {number} debounce - Domain resolve delay in ms [Optional, default: 350]
 */
export function FaviconSearchInput({
  value: controlledValue,
  defaultValue = "",
  onChange,
  onSearch,
  placeholder = "Enter a website URL",
  clearable = true,
  faviconSize = 64,
  debounce = 350,
  ref,
  className,
  inputClassName,
}: FaviconSearchInputProps) {
  const isControlled = controlledValue !== undefined;
  const [internalValue, setInternalValue] = useState(defaultValue);
  const value = isControlled ? controlledValue : internalValue;

  const [domain, setDomain] = useState<string | null>(null);
  const [faviconReady, setFaviconReady] = useState(false);
  const [faviconError, setFaviconError] = useState(false);
  const prevDomainRef = useRef<string | null>(null);

  useEffect(() => {
    const id = setTimeout(() => {
      const next = extractDomain(value);
      if (next !== prevDomainRef.current) {
        prevDomainRef.current = next;
        setFaviconReady(false);
        setFaviconError(false);
        setDomain(next);
      }
    }, debounce);
    return () => clearTimeout(id);
  }, [value, debounce]);

  const setValue = (next: string) => {
    if (!isControlled) setInternalValue(next);
    onChange?.(next);
  };

  const handleClear = () => {
    setValue("");
    setDomain(null);
    setFaviconReady(false);
    setFaviconError(false);
    prevDomainRef.current = null;
  };

  const showFavicon = domain && faviconReady && !faviconError;

  return (
    <div className={cn("group relative flex w-full max-w-md items-center", className)}>
      <div className="pointer-events-none absolute left-3.5 flex size-5 items-center justify-center">
        <AnimatePresence mode="wait">
          {showFavicon ? (
            <motion.img
              key={`favicon-${domain}`}
              src={getFaviconUrl(domain, faviconSize)}
              alt=""
              width={20}
              height={20}
              className="size-5 rounded-sm object-contain"
              initial={{ opacity: 0, scale: 0.5, filter: "blur(4px)" }}
              animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
              exit={{ opacity: 0, scale: 0.5, filter: "blur(4px)" }}
              transition={ICON_SPRING}
            />
          ) : (
            <motion.span
              key="search-icon"
              initial={{ opacity: 0, scale: 0.7 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.7 }}
              transition={ICON_SPRING}
              className="flex items-center justify-center text-zinc-400 dark:text-zinc-500"
            >
              {domain && !faviconError ? (
                <Globe weight="Bold" className="size-[18px]" />
              ) : (
                <MagnifyingGlass weight="Bold" className="size-[18px]" />
              )}
            </motion.span>
          )}
        </AnimatePresence>

        {/* Off-screen preload — the visible favicon only mounts after this loads. */}
        {domain && !faviconReady && !faviconError && (
          <img
            src={getFaviconUrl(domain, faviconSize)}
            alt=""
            aria-hidden="true"
            className="sr-only absolute"
            onLoad={() => setFaviconReady(true)}
            onError={() => setFaviconError(true)}
          />
        )}
      </div>

      <input
        ref={ref}
        type="text"
        inputMode="url"
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="none"
        spellCheck={false}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter") onSearch?.(value, domain);
        }}
        placeholder={placeholder}
        aria-label="Website URL"
        className={cn(
          "flex w-full rounded-xl border border-zinc-200 bg-white py-2.5 pl-10 pr-10",
          "text-sm text-zinc-900 placeholder:text-zinc-400",
          "outline-none transition-shadow duration-200",
          "hover:border-zinc-300 focus-visible:ring-2 focus-visible:ring-sky-500/70 focus-visible:ring-offset-2",
          "focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950",
          "dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100",
          "dark:placeholder:text-zinc-500 dark:hover:border-zinc-700",
          inputClassName,
        )}
      />

      <AnimatePresence>
        {clearable && value.length > 0 && (
          <motion.button
            type="button"
            onClick={handleClear}
            initial={{ opacity: 0, scale: 0.7 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.7 }}
            transition={ICON_SPRING}
            className={cn(
              "absolute right-3 flex size-5 items-center justify-center rounded-full font-medium",
              "text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700",
              "active:scale-[0.94] dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
            )}
            aria-label="Clear input"
          >
            <X weight="Bold" className="size-3.5" />
          </motion.button>
        )}
      </AnimatePresence>
    </div>
  );
}