wtr/components/layout/app-shell.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { CloudSun, Droplets, Settings, TriangleAlert, WifiOff } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { isAppNavItemVisible } from "@/lib/app-sections";
import { NAV_ITEMS } from "@/lib/constants";
import { cn } from "@/lib/utils";
import { InstallPWAButton } from "@/components/ui/install-pwa-button";
import { useI18n } from "@/lib/i18n";
import { useWeatherStore } from "@/lib/store";

const iconsByHref: Record<string, LucideIcon> = {
  "/": CloudSun,
  "/warnings": TriangleAlert,
  "/hydro": Droplets,
  "/settings": Settings,
};

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { t } = useI18n();
  const appSections = useWeatherStore((state) => state.appSections);
  const visibleNavItems = NAV_ITEMS.filter((item) => isAppNavItemVisible(item.href, appSections));
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    const updateConnectionStatus = () => setIsOffline(!navigator.onLine);
    updateConnectionStatus();
    window.addEventListener("online", updateConnectionStatus);
    window.addEventListener("offline", updateConnectionStatus);
    return () => {
      window.removeEventListener("online", updateConnectionStatus);
      window.removeEventListener("offline", updateConnectionStatus);
    };
  }, []);

  return (
    <div className="min-h-screen overflow-x-hidden bg-background">
      <header className="app-header-safe sticky top-0 z-40 border-b border-border/70 bg-surface">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
          <Link
            href="/"
            className="text-2xl font-semibold tracking-[-0.09em] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
          >
            wtr<span className="text-accent">.</span>
          </Link>
          <nav aria-label={t("nav.main")} className="hidden items-center gap-1 md:flex">
            {visibleNavItems.map((item) => {
              const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "rounded-control px-4 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                    active ? "bg-foreground text-background shadow-soft" : "text-muted hover:bg-surface-muted/70",
                  )}
                >
                  {t(item.labelKey)}
                </Link>
              );
            })}
          </nav>
          <div className="flex items-center gap-2">
            <InstallPWAButton />
          </div>
        </div>
      </header>
      {isOffline && (
        <div className="border-b border-warning/25 bg-warning/10 px-4 py-2 text-sm font-medium text-warning sm:px-6 lg:px-8">
          <div className="mx-auto flex max-w-7xl items-center gap-2">
            <WifiOff className="size-4 shrink-0" aria-hidden="true" />
            <span>{t("offline.banner")}</span>
          </div>
        </div>
      )}
      <main className="app-main-safe mx-auto max-w-7xl px-4 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
      <nav
        aria-label={t("nav.mobile")}
        className="mobile-nav-safe fixed z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden"
      >
        {visibleNavItems.map((item) => {
          const Icon = iconsByHref[item.href] ?? CloudSun;
          const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex min-w-0 flex-1 flex-col items-center gap-1 rounded-card px-2 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                active ? "bg-foreground text-background" : "text-muted",
              )}
            >
              <Icon className="size-4" />
              <span className="max-w-full truncate">{t(item.labelKey)}</span>
            </Link>
          );
        })}
      </nav>
    </div>
  );
}