"use client";

import { Activity, Globe2, LineChart, Radio, Search } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cx } from "@/lib/format";
import { useSearch } from "./search-dialog";

const TABS = [
  { href: "/markets", label: "Markets", icon: LineChart, match: /^\/(markets|stocks|etfs|indices|crypto|forex|rates|commodities|instruments|compare)/ },
  { href: "/live", label: "Live", icon: Radio, match: /^\/live/ },
  { href: "#search", label: "Search", icon: Search, match: /^\/search/ },
  { href: "/events", label: "Events", icon: Activity, match: /^\/(events|halts|filings)/ },
  { href: "/exchanges", label: "World", icon: Globe2, match: /^\/(exchanges|countries)/ },
];

export function MobileTabBar() {
  const path = usePathname();
  const { open } = useSearch();
  return (
    <nav aria-label="Mobile" className="fixed inset-x-0 bottom-0 z-[100] border-t border-rule bg-surface/95 pb-[env(safe-area-inset-bottom,0px)] backdrop-blur lg:hidden">
      <ul className="grid h-[var(--tabbar-h)] grid-cols-5">
        {TABS.map((t) => {
          const active = t.match.test(path);
          const cls = cx("flex h-full flex-col items-center justify-center gap-0.5 text-[10.5px]", active ? "text-accent" : "text-ink-3");
          const Icon = t.icon;
          return (
            <li key={t.href}>
              {t.href === "#search" ? (
                <button type="button" onClick={open} className={cx(cls, "w-full")}>
                  <Icon size={19} />
                  {t.label}
                </button>
              ) : (
                <Link href={t.href} className={cls}>
                  <Icon size={19} />
                  {t.label}
                </Link>
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}