/* global React */
/* Shared top nav for landing.jsx and pricing.jsx.
   Exposes Nav, NavUser, NavDropdown as window-scoped globals (no module system).
   Pre-loaded by index.html and pricing.html via <script type="text/babel">. */
const { useState, useEffect, useRef } = React;

const PRODUCT_ITEMS = [
  { label: '逐題詳解',      en: 'ARCHIVE',           href: '/archive.html' },
  { label: '實戰測驗',      en: 'PRACTICE · TIMED',  href: '/practice.html' },
  { label: '科別練習',      en: 'CATEGORY STUDY',    href: '/categories.html' },
  { label: '個人空間',      en: 'MY SPACE',          href: '/digest.html' },
  { label: '國考主題複習',  en: 'REVIEW · ATLAS',    href: '/national-exam-review.html' },
  { label: '個人化研究助手', en: 'PRO · COMING SOON', href: '/#features', disabled: true },
];

const RESOURCE_ITEMS = [
  { label: '系統介紹', en: 'INSIDE THE ARCHIVE', scrollTo: '[data-screen-label="03 Features"]' },
  { label: '自動分類', en: 'NEURAL CORE',        scrollTo: '[data-screen-label="04 Showcase"]' },
  { label: '常見問題', en: 'FAQ',                href: '/faq.html' },
];

const SOLUTION_ITEMS = [
  { label: '應屆國考生', en: 'EXAM CANDIDATES', scrollTo: '[data-screen-label="03 Features"]' },
  { label: '跨年度回顧', en: 'LONGITUDINAL',    scrollTo: '[data-screen-label="04 Showcase"]' },
  { label: '教學機構',   en: 'EDUCATORS · 聯絡', href: 'mailto:jovanauniverse@gmail.com' },
];

/* Signed-in nav cluster: avatar with sign-out popover + Dashboard CTA.
   Unchanged from the original inlined version in landing.jsx. */
function NavUser({ user }) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDown);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const signOut = async () => {
    try {
      await fetch('/api/auth/signout', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
      });
    } catch (e) {}
    window.location.replace('/');
  };

  const name = (typeof window !== 'undefined' && window.userDisplayName)
    ? window.userDisplayName(user)
    : (user.name || user.email || 'Guest');
  const email = user.email || '';
  const initial = (typeof window !== 'undefined' && window.userInitial)
    ? window.userInitial(user)
    : (name.trim().charAt(0) || 'U').toUpperCase();

  return (
    <div className="nav-user-cluster">
      <div className="nav-avatar" ref={wrapRef}>
        <button
          type="button"
          className="nav-avatar-btn"
          aria-haspopup="menu"
          aria-expanded={open ? 'true' : 'false'}
          aria-label="開啟使用者選單"
          title={email || name}
          onClick={() => setOpen((v) => !v)}
        >
          {user.picture
            ? <img src={user.picture} alt={name} referrerPolicy="no-referrer" />
            : <span className="nav-avatar-initial">{initial}</span>}
        </button>
        {open && (
          <div className="nav-avatar-pop" role="menu">
            <div className="nav-avatar-pop-head">
              {user.picture
                ? <img src={user.picture} alt="" referrerPolicy="no-referrer" />
                : <span className="nav-avatar-initial nav-avatar-initial--lg">{initial}</span>}
              <div className="nav-avatar-pop-meta">
                <div className="nav-avatar-pop-name">{name}</div>
                {email && <div className="nav-avatar-pop-email">{email}</div>}
              </div>
            </div>
            <a href="/settings.html" className="nav-avatar-pop-link" role="menuitem">
              <span aria-hidden="true">⚙</span> 設定 · Settings
            </a>
            <div className="nav-avatar-pop-divider" role="separator" />
            <button type="button" className="nav-avatar-pop-action" role="menuitem" onClick={signOut}>
              登出 · Sign out
            </button>
          </div>
        )}
      </div>
      <a className="nav-cta nav-cta--dashboard" href="/dashboard.html">
        <span className="dot"/>
        Dashboard →
      </a>
    </div>
  );
}

/* Center-nav dropdown popover. Supports three item shapes:
   - { href }            → normal navigation
   - { scrollTo }        → smooth-scroll to a CSS selector on the current page;
                           if not on /, navigate to / first (the home-page hop
                           uses sessionStorage so the destination can scroll
                           after load).
   - { disabled: true }  → click is suppressed; styled muted with aria-disabled. */
function NavDropdown({ label, items }) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDown);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const isOnLanding = () => {
    const p = window.location.pathname;
    return p === '/' || p.endsWith('/index.html') || p === '';
  };

  const handleClick = (item) => (e) => {
    if (item.disabled) {
      e.preventDefault();
      return;
    }
    if (item.scrollTo) {
      e.preventDefault();
      if (!isOnLanding()) {
        try {
          window.sessionStorage.setItem('jvn_nav_scroll', item.scrollTo);
        } catch (err) {}
        window.location.href = '/';
        return;
      }
      const el = document.querySelector(item.scrollTo);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    setOpen(false);
  };

  return (
    <div className="nav-dropdown" ref={wrapRef}>
      <button
        type="button"
        className="nav-dropdown-btn"
        aria-haspopup="menu"
        aria-expanded={open ? 'true' : 'false'}
        onClick={() => setOpen((v) => !v)}
      >
        {label}
        <span className="nav-dropdown-caret" aria-hidden>▾</span>
      </button>
      {open && (
        <div className="nav-pop" role="menu">
          {items.map((it) => (
            <a
              key={it.label}
              className="nav-pop-item"
              href={it.href || '#'}
              role="menuitem"
              aria-disabled={it.disabled ? 'true' : undefined}
              onClick={handleClick(it)}
            >
              <div className="nav-pop-item-title">{it.label}</div>
              <div className="nav-pop-item-en">{it.en}</div>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

/* Pick up a deferred scrollTo target stashed by NavDropdown when the click
   happened on a non-landing page. Runs once on landing's first paint. */
function useDeferredNavScroll() {
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const target = (() => {
      try { return window.sessionStorage.getItem('jvn_nav_scroll'); } catch (e) { return null; }
    })();
    if (!target) return;
    try { window.sessionStorage.removeItem('jvn_nav_scroll'); } catch (e) {}
    // Defer until layout settles (reveal animations + IntersectionObserver
    // are observed in landing.jsx's authState effect chain).
    window.setTimeout(() => {
      const el = document.querySelector(target);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 250);
  }, []);
}

function Nav({ user, onSignIn, onAioniosToggle }) {
  const [scrolled, setScrolled] = useState(false);
  const [hasUnread, setHasUnread] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useDeferredNavScroll();

  const pricingActive = window.location.pathname.endsWith('/pricing.html');
  const changelogActive = window.location.pathname.endsWith('/changelog.html');

  // Ask the shared badge helper whether there is an unread entry; if the
  // user is already on /changelog.html the page itself marks the latest
  // entry as seen on mount, so we suppress the dot there preemptively.
  useEffect(() => {
    if (changelogActive) return;
    const api = window.JvnChangelog;
    if (!api || typeof api.checkUnread !== 'function') return;
    let cancelled = false;
    api.checkUnread().then((res) => {
      if (!cancelled && res && res.hasUnread) setHasUnread(true);
    }).catch(() => {});
    return () => { cancelled = true; };
  }, [changelogActive]);

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-brand">
        <img src="assets/landing/logo.png?v=1" alt="Jovana Medical" className="nav-logo-img" width="44" height="44" />
        <div>
          <div className="nav-name">Jovana <em>Medical</em></div>
          <div className="nav-meta" style={{ marginLeft: 0 }}>ARCHIVE</div>
        </div>
      </div>
      <div className="nav-links">
        <NavDropdown label="產品"     items={PRODUCT_ITEMS} />
        <NavDropdown label="資源"     items={RESOURCE_ITEMS} />
        <NavDropdown label="解決方案" items={SOLUTION_ITEMS} />
        <a className="nav-flat" href="/pricing.html" aria-current={pricingActive ? 'page' : undefined}>定價</a>
        <a className="nav-flat" href="mailto:jovanauniverse@gmail.com">關於</a>
        <a className="nav-flat nav-flat--changelog"
           href="/changelog.html"
           aria-current={changelogActive ? 'page' : undefined}>
          更新
          {hasUnread && <span className="nav-unread-dot" aria-label="有新更新" />}
        </a>
      </div>
      <div className="nav-right" style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
        {onAioniosToggle && (
          <button
            type="button"
            className="nav-aionios"
            onClick={onAioniosToggle}
            title="Switch to the Aionios preview"
          >
            <span className="nav-aionios-icon" aria-hidden="true" />
            <span className="nav-aionios-label">Aionios</span>
          </button>
        )}
        {user ? (
          <NavUser user={user} />
        ) : (
          <button className="nav-cta" onClick={onSignIn}>
            <span className="dot"/>
            Sign In
          </button>
        )}
      </div>
    </nav>
  );
}

window.Nav = Nav;
window.NavUser = NavUser;
window.NavDropdown = NavDropdown;