import { Link, useRouterState } from "@tanstack/react-router";
import { Heart, Home, ShoppingBasket } from "lucide-react";
import { useEffect, useState, type ReactNode } from "react";
import { cn, bnNum } from "@/lib/utils";
import { useKitchen } from "@/lib/store";

export function useMounted() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted;
}

export function Shell({ children }: { children: ReactNode }) {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  if (pathname.startsWith("/cook/")) return <>{children}</>;

  return (
    <div className="min-h-dvh bg-bg text-ink">
      <Header />
      <main className="mx-auto w-full max-w-5xl px-4 pb-28 pt-4 md:px-6 md:pb-12">
        {children}
      </main>
      <BottomNav />
    </div>
  );
}

function Wordmark() {
  return (
    <Link to="/" className="flex items-baseline gap-2 text-ink">
      <span className="font-display text-2xl font-semibold tracking-tight">হেঁশেল</span>
      <span className="hidden text-xs tracking-[0.18em] text-muted uppercase sm:inline">
        Heshel
      </span>
    </Link>
  );
}

function Header() {
  const mounted = useMounted();
  const count = useKitchen((s) => s.bazaar.filter((x) => !x.checked).length);

  return (
    <header className="sticky top-0 z-30 border-b border-line/80 bg-bg/90 backdrop-blur-md">
      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4 md:h-16 md:px-6">
        <Wordmark />
        <div className="flex items-center gap-1">
          <nav className="mr-1 hidden items-center gap-1 md:flex" aria-label="মূল">
            <Link
              to="/"
              className="inline-flex h-11 items-center rounded-[var(--radius-md)] px-3 text-sm text-ink-soft hover:bg-bg-warm hover:text-ink"
            >
              হোম
            </Link>
            <Link
              to="/favorites"
              className="inline-flex h-11 items-center rounded-[var(--radius-md)] px-3 text-sm text-ink-soft hover:bg-bg-warm hover:text-ink"
            >
              পছন্দ
            </Link>
            <Link
              to="/list"
              className="inline-flex h-11 items-center rounded-[var(--radius-md)] px-3 text-sm text-ink-soft hover:bg-bg-warm hover:text-ink"
            >
              বাজার
            </Link>
          </nav>
          <Link
            to="/list"
            className="relative inline-flex size-11 items-center justify-center rounded-[var(--radius-md)] text-ink-soft hover:bg-bg-warm hover:text-ink md:hidden"
            aria-label="বাজারের তালিকা"
          >
            <ShoppingBasket className="size-5" />
            {mounted && count > 0 ? (
              <span className="absolute top-1.5 right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-medium text-accent-fg tabular-nums">
                {bnNum(count)}
              </span>
            ) : null}
          </Link>
        </div>
      </div>
    </header>
  );
}

const NAV = [
  { to: "/", label: "হোম", icon: Home, exact: true },
  { to: "/favorites", label: "পছন্দ", icon: Heart, exact: false },
  { to: "/list", label: "বাজার", icon: ShoppingBasket, exact: false },
] as const;

function BottomNav() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });

  return (
    <nav
      className="fixed inset-x-0 bottom-0 z-30 border-t border-line bg-surface/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden"
      aria-label="মূল নেভিগেশন"
    >
      <ul className="mx-auto grid max-w-lg grid-cols-3">
        {NAV.map((item) => {
          const active = item.exact ? pathname === item.to : pathname.startsWith(item.to);
          const Icon = item.icon;
          return (
            <li key={item.to}>
              <Link
                to={item.to}
                className={cn(
                  "flex h-14 flex-col items-center justify-center gap-0.5 text-[11px] font-medium",
                  active ? "text-accent" : "text-muted",
                )}
              >
                <Icon className="size-5" strokeWidth={active ? 2.2 : 1.8} />
                {item.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}