// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * Barre de navigation mobile commune Groupe KA (ka-ui/nav — KA Tabbar v1) :
 * Estimer · À vendre · Marché · Coût · Méthode, accent rouge signature, bilingue.
 * Estimer mène immédiatement à la recherche d'adresse (focus du champ héros) ;
 * À vendre ouvre les propriétés réellement en vente (atelier d'évaluation) ;
 * Coût ouvre l'atelier de la méthode du coût. Le flux « dernières ventes »
 * reste accessible depuis l'accueil (#ventes).
 */
"use client";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import KaTabbar from "../ka/KaTabbar";
import { useLang } from "./LangContext";

/** focus du champ d'adresse (réessaie le temps que l'accueil se monte) */
function focusAdresse(tries = 10) {
  const el = document.getElementById("vp-adresse") as HTMLInputElement | null;
  if (el) {
    el.scrollIntoView({ block: "center", behavior: "smooth" });
    el.focus({ preventScroll: true });
  } else if (tries > 0) {
    window.setTimeout(() => focusAdresse(tries - 1), 100);
  }
}

export default function MobileTabBar() {
  const path = usePathname();
  const { lang } = useLang();
  const fr = lang === "fr";
  const [hash, setHash] = useState("");

  useEffect(() => {
    const sync = () => setHash(window.location.hash);
    sync();
    window.addEventListener("hashchange", sync);
    return () => window.removeEventListener("hashchange", sync);
  }, [path]);

  const ventes = path === "/" && hash === "#ventes";
  return (
    <KaTabbar
      tabs={[
        {
          label: fr ? "Estimer" : "Estimate",
          icon: "target",
          to: "/",
          onClick: () => {
            setHash("");
            focusAdresse();
          },
          active: (path === "/" && !ventes) || path.startsWith("/estimation"),
        },
        {
          label: fr ? "À vendre" : "For sale",
          icon: "tag",
          to: "/a-vendre",
          active: path.startsWith("/a-vendre"),
        },
        {
          label: fr ? "Marché" : "Market",
          icon: "trendup",
          to: "/stats",
          active: path.startsWith("/stats") || path.startsWith("/municipalite"),
        },
        {
          label: fr ? "Coût" : "Cost",
          icon: "home",
          to: "/cout",
          active: path.startsWith("/cout"),
        },
        {
          label: fr ? "Méthode" : "Method",
          icon: "book",
          to: "/methodologie",
          active: path.startsWith("/methodologie"),
        },
      ]}
    />
  );
}