AppShell.tsx

'use client';

import { useEffect, useState } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Link as TransitionLink } from '@/components/navigation/ViewTransitions';
import './navigation/library-navigation.css';
import { I18nProvider, useI18n } from '@/lib/i18n';
import { ThemeProvider, useTheme } from '@/lib/theme';
import { useAuthSession } from '@/lib/auth-session';
import { fetchAndSyncSettings } from '@/lib/sync-settings';
import LanguageSwitcher from '@/components/LanguageSwitcher';
import { APP_REPO_URL } from '@/lib/app-links';
import { Sun, Moon, Settings } from 'lucide-react';
import AppIcon from '@/components/AppIcon';

function Nav() {
  const { t } = useI18n();
  const { theme, toggleTheme } = useTheme();
  const [animateThemeIcon, setAnimateThemeIcon] = useState(false);
  const { session } = useAuthSession();
  const spotifyConnected = session?.spotify.connected === true;
  const isAdmin = session?.user?.isAdmin === true;
  const isLoggedIn = !!session?.user;
  const showAdmin = spotifyConnected && isAdmin;

  // Pending-queue count for the 管理 badge. null = unknown (no badge); the
  // count refreshes on mount/login and whenever the route changes, so leaving
  // the admin console updates the badge after queue changes.
  const [todoCount, setTodoCount] = useState<number | null>(null);
  const pathname = usePathname();
  useEffect(() => {
    if (!showAdmin) return;
    let cancelled = false;
    fetch('/api/admin/todo-count')
      .then((res) => (res.ok ? res.json() as Promise<{ count?: number }> : null))
      .then((data) => {
        if (!cancelled) setTodoCount(typeof data?.count === 'number' ? data.count : null);
      })
      .catch(() => {
        if (!cancelled) setTodoCount(null);
      });
    return () => {
      cancelled = true;
    };
  }, [showAdmin, pathname]);

  return (
    <nav className="app-topbar sticky top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/80 backdrop-blur-sm">
      <div className="mx-auto flex h-11 max-w-[860px] items-center px-4 sm:px-6">
        <Link href="/" aria-label={t('common.appName')} title={t('common.appName')} className="shrink-0 whitespace-nowrap text-sm font-bold tracking-tight text-[var(--primary)]">
          <AppIcon className="h-4 w-4 min-[390px]:hidden" aria-hidden="true" />
          <span className="hidden min-[390px]:inline">{t('common.appName')}</span>
        </Link>
        <span className="ml-2.5 hidden text-xs text-[var(--muted-foreground)] lg:inline">
          {t('common.appDesc')}
        </span>
        <div className="ml-3 flex shrink-0 items-center gap-0.5 sm:ml-5">
          {([
            { href: '/', label: t('home.navSongs'), active: pathname === '/' },
            { href: '/albums', label: t('home.navAlbums'), active: pathname === '/albums' },
            { href: '/artists', label: t('home.navArtists'), active: pathname.startsWith('/artists') },
          ] as const).map(({ href, label, active }) => (
            <TransitionLink key={href} href={href} aria-current={active ? 'page' : undefined}
              className={`whitespace-nowrap rounded-md px-2 py-1.5 text-xs font-medium transition-colors sm:px-2.5 ${active
                ? 'bg-[var(--accent)] text-[var(--foreground)]'
                : 'text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--foreground)]'}`}>
              {label}
            </TransitionLink>
          ))}
        </div>
        <div className="flex-1" />
        <div className="flex items-center gap-1 sm:gap-2">
          {showAdmin && (
            <Link
              href="/admin/todo"
              className="relative rounded-md px-2.5 sm:px-3 py-1.5 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--accent)]"
            >
              {t('admin.title')}
              {todoCount !== null && todoCount > 0 && (
                <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--destructive)] px-1 text-[10px] font-semibold leading-none text-[var(--destructive-foreground)]">
                  {todoCount > 99 ? '99+' : todoCount}
                </span>
              )}
            </Link>
          )}
          {isLoggedIn && (
            <Link
              href="/settings"
              className="rounded-md p-1.5 text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--accent)]"
              title={t('settings.title')}
              aria-label={t('settings.title')}
            >
              <Settings className="h-4 w-4" />
            </Link>
          )}
          <a
            href={APP_REPO_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="hidden rounded-md p-1.5 text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--accent)] sm:inline-flex"
            title="GitHub"
            aria-label="GitHub"
          >
            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12c0 5.3 3.4 9.8 8.2 11.4.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.3 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6C20.6 21.8 24 17.3 24 12c0-6.6-5.4-12-12-12z"/></svg>
          </a>
          <LanguageSwitcher />
          <button
            type="button"
            onClick={() => {
              setAnimateThemeIcon(true);
              toggleTheme();
            }}
            className="theme-toggle-button rounded-md p-1.5 text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--accent)]"
            title={theme === 'dark' ? t('common.lightMode') : t('common.darkMode')}
            aria-label={theme === 'dark' ? t('common.lightMode') : t('common.darkMode')}
          >
            {theme === 'dark' ? (
              <Moon className={`theme-toggle-icon h-4 w-4${animateThemeIcon ? ' theme-toggle-icon--moon' : ''}`} />
            ) : (
              <Sun className={`theme-toggle-icon h-4 w-4${animateThemeIcon ? ' theme-toggle-icon--sun' : ''}`} />
            )}
          </button>
        </div>
      </div>
    </nav>
  );
}

export default function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  // The share page owns its responsive gutters; avoid nesting the global page padding.
  const isSharePage = /^\/songs\/[^/]+\/share\/?$/.test(pathname || '');

  return (
    <ThemeProvider>
      <I18nProvider>
        <BootstrapSettingsSync />
        <Nav />
        <main className={isSharePage ? '' : 'mx-auto max-w-[860px] px-4 py-6 sm:px-6 sm:py-8'}>
          {children}
        </main>
      </I18nProvider>
    </ThemeProvider>
  );
}

/**
 * On boot (once an authenticated session is confirmed), pull the server-persisted
 * settings once and sync them into localStorage, applying theme/locale live. This
 * makes saved preferences take effect on the very first screen of a fresh device
 * or new session instead of only after visiting /settings (issue #124).
 */
function BootstrapSettingsSync() {
  const { session } = useAuthSession();
  const { setTheme } = useTheme();
  const { setLocale } = useI18n();

  useEffect(() => {
    if (!session?.user) return;
    void fetchAndSyncSettings({ setTheme, setLocale });
  }, [session?.user, setTheme, setLocale]);

  return null;
}