// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useLang } from "./LangContext";

export interface Suggestion {
  id: string;
  adresse: string | null;
  apt: string | null;
  municipalite: string | null;
  typeProp: string;
}

export default function SearchBox({
  onPick,
  placeholder,
  variant = "default",
}: {
  /** Si fourni : appelé au choix d'une adresse (le champ se vide) au lieu de naviguer. */
  onPick?: (s: Suggestion) => void;
  placeholder?: string;
  /** « hero » : grand champ sur aplat encre (page d'accueil). */
  variant?: "default" | "hero";
}) {
  const { t, lang } = useLang();
  const fr = lang === "fr";
  const router = useRouter();
  const [q, setQ] = useState("");
  const [sugg, setSugg] = useState<Suggestion[]>([]);
  const [open, setOpen] = useState(false);
  const [searched, setSearched] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const input = useRef<HTMLInputElement>(null);

  const onChange = (value: string) => {
    setQ(value);
    if (timer.current) clearTimeout(timer.current);
    if (value.trim().length < 3) {
      setSugg([]);
      setSearched(false);
      return;
    }
    timer.current = setTimeout(async () => {
      const res = await fetch(`/api/search?q=${encodeURIComponent(value)}`);
      const data = (await res.json()) as { results: Suggestion[] };
      setSugg(data.results);
      setSearched(true);
      setOpen(true);
    }, 200);
  };

  const pick = (s: Suggestion) => {
    if (onPick) {
      onPick(s);
      setQ("");
      setSugg([]);
      setSearched(false);
    } else {
      router.push(`/estimation/${s.id}`);
    }
  };

  const hero = variant === "hero";

  return (
    <div className="relative w-full">
      <div className={hero ? "flex items-stretch gap-0" : undefined}>
        <input
          id={variant === "hero" ? "vp-adresse" : undefined}
          ref={input}
          value={q}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 200)}
          placeholder={
            placeholder ?? (hero ? (fr ? "ex. 861 route Elgin" : "e.g. 861 route Elgin") : t("searchPlaceholder"))
          }
          className={
            hero
              ? "min-h-[56px] w-full min-w-0 flex-1 border-0 border-b border-[rgba(245,243,238,0.45)] bg-transparent px-1 py-3 text-[16px] text-[var(--paper-on-ink)] outline-none transition-colors placeholder:text-[rgba(245,243,238,0.45)] focus:border-[var(--accent-bright)] sm:text-[19px]"
              : "vp-input text-base"
          }
          aria-label={placeholder ?? t("searchPlaceholder")}
        />
        {hero && (
          <button
            type="button"
            aria-label={fr ? "Estimer cette adresse" : "Estimate this address"}
            onMouseDown={(e) => {
              // mousedown : devance le blur de l'input (sinon le menu se ferme avant)
              e.preventDefault();
              if (sugg.length > 0) pick(sugg[0]);
              else input.current?.focus();
            }}
            className="vp-display -mb-px flex min-h-[56px] shrink-0 items-center gap-2 self-end bg-[var(--accent-bright)] px-4 text-[14px] font-bold text-ink transition-colors hover:bg-[#ff6b63] sm:px-7 sm:text-[15px]"
          >
            {fr ? "Estimer" : "Estimate"}
            <span aria-hidden="true">→</span>
          </button>
        )}
      </div>
      {open && sugg.length > 0 && (
        <ul
          className={`absolute z-[var(--z-dropdown,700)] mt-2 w-full overflow-hidden rounded-[2px] ${
            hero
              ? "border border-[rgba(245,243,238,0.25)] bg-[var(--ink-deep)] shadow-[0_14px_40px_rgba(0,0,0,0.5)]"
              : "border border-[var(--line-strong)] bg-surface shadow-[0_10px_30px_rgba(20,24,20,0.14)]"
          }`}
        >
          {sugg.map((s, i) => (
            <li
              key={s.id}
              className={
                hero
                  ? "border-b border-[rgba(245,243,238,0.1)] last:border-0"
                  : "border-b border-[rgba(20,24,20,0.08)] last:border-0"
              }
            >
              <button
                className={`flex w-full items-baseline justify-between gap-3 px-4 py-3 text-left transition-colors ${
                  hero ? "hover:bg-[rgba(245,243,238,0.08)]" : "hover:bg-surface-2"
                }`}
                onMouseDown={() => pick(s)}
              >
                <span className="flex min-w-0 items-baseline gap-2.5">
                  <span
                    className={`vp-mono shrink-0 text-[10px] ${
                      hero ? "text-[var(--accent-bright)]" : "text-accent"
                    }`}
                  >
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span
                    className={`vp-display truncate font-bold ${
                      hero ? "text-[var(--paper-on-ink)]" : ""
                    }`}
                  >
                    {s.adresse}
                    {s.apt ? ` app. ${s.apt}` : ""}
                  </span>
                </span>
                <span
                  className={`vp-mono shrink-0 text-[10.5px] uppercase tracking-[0.05em] ${
                    hero ? "text-[rgba(245,243,238,0.55)]" : "text-ink-3"
                  }`}
                >
                  {s.municipalite}
                </span>
              </button>
            </li>
          ))}
        </ul>
      )}
      {open && searched && sugg.length === 0 && q.trim().length >= 3 && (
        <div
          className={`vp-mono absolute z-[var(--z-dropdown,700)] mt-2 w-full rounded-[2px] px-4 py-3 text-[12px] uppercase tracking-[0.04em] ${
            hero
              ? "border border-[rgba(245,243,238,0.25)] bg-[var(--ink-deep)] text-[rgba(245,243,238,0.7)]"
              : "border border-[var(--line-strong)] bg-surface text-ink-2"
          }`}
        >
          {t("searchNoResult")}
        </div>
      )}
    </div>
  );
}