'use client';

import { useState } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import Wordmark from '@/components/Wordmark';
import NotificationBell from '@/components/NotificationBell';

const NAV_LINKS = [
  { label: 'Read', href: '/scan' },
  { label: 'Tracker', href: '/tracker' },
  { label: 'Ledger', href: '/ledger' },
  { label: 'Pricing', href: '/#pricing' },
  { label: 'Blog', href: '/blog' },
];

export default function Nav() {
  const { user, tier, scansRemaining, signOut } = useAuth();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 50,
        height: 64,
        borderBottom: '1px solid var(--border)',
        background: 'rgba(10, 10, 15, 0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
      }}
    >
      <div
        style={{
          maxWidth: 1280,
          margin: '0 auto',
          padding: '0 24px',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
        }}
      >
        <a
          href="/"
          style={{ color: 'var(--text-0)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10 }}
          aria-label="VYNDR — home"
        >
          <Wordmark size={22} />
          {/* Session 8 — beta tag. Tiny, glitch-styled, sits next to
              the wordmark so it reads as part of the brand rather than
              a banner. Renders on every page that mounts Nav. */}
          <span
            className="mono"
            aria-label="Beta"
            style={{
              fontSize: 9,
              fontWeight: 800,
              letterSpacing: '0.14em',
              padding: '2px 5px',
              color: 'var(--grade-a)',
              border: '1px solid var(--grade-a)',
              borderRadius: 3,
              textTransform: 'uppercase',
              opacity: 0.85,
              lineHeight: 1,
              position: 'relative',
              top: -2,
            }}
          >
            BETA
          </span>
        </a>

        <div className="nav-desktop" style={{ display: 'none', gap: 28, alignItems: 'center' }}>
          {NAV_LINKS.map((l) => (
            <a
              key={l.href}
              href={l.href}
              style={{
                fontSize: 14,
                color: 'var(--text-secondary)',
                textDecoration: 'none',
                transition: 'color 200ms ease',
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--text-primary)')}
              onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-secondary)')}
            >
              {l.label}
            </a>
          ))}

          {user ? (
            <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              {scansRemaining != null && tier === 'free' && (
                <span
                  className="mono"
                  style={{
                    fontSize: 12,
                    color: scansRemaining <= 1 ? 'var(--grade-c)' : 'var(--text-secondary)',
                  }}
                >
                  {scansRemaining}/5 reads · MO
                </span>
              )}
              <NotificationBell />
              <button
                onClick={() => setMenuOpen((o) => !o)}
                aria-haspopup="menu"
                aria-expanded={menuOpen}
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 999,
                  background: 'var(--bg-elevated)',
                  border: '1px solid var(--border-focus)',
                  color: 'var(--text-primary)',
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                  fontWeight: 600,
                }}
              >
                {user.email?.charAt(0).toUpperCase()}
              </button>
              {menuOpen && (
                <div
                  role="menu"
                  className="surface-elevated"
                  style={{
                    position: 'absolute',
                    right: 0,
                    top: 'calc(100% + 8px)',
                    minWidth: 220,
                    padding: 8,
                  }}
                >
                  <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)' }}>
                    <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>Signed in as</div>
                    <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                      {user.email}
                    </div>
                    <div className="mono" style={{ marginTop: 6, fontSize: 11, color: 'var(--grade-a)', textTransform: 'uppercase' }}>
                      {tier} tier
                    </div>
                  </div>
                  {tier === 'free' && (
                    <a
                      href="/#pricing"
                      role="menuitem"
                      style={{ display: 'block', padding: '10px 12px', fontSize: 13, color: 'var(--text-primary)', textDecoration: 'none' }}
                    >
                      Upgrade — $14.99/mo
                    </a>
                  )}
                  <button
                    onClick={() => {
                      void signOut();
                      setMenuOpen(false);
                    }}
                    role="menuitem"
                    style={{
                      width: '100%',
                      textAlign: 'left',
                      padding: '10px 12px',
                      background: 'transparent',
                      border: 'none',
                      color: 'var(--text-secondary)',
                      fontSize: 13,
                      cursor: 'pointer',
                      fontFamily: 'inherit',
                    }}
                  >
                    Log out
                  </button>
                </div>
              )}
            </div>
          ) : (
            <a href="/login" className="btn-primary" style={{ padding: '8px 16px', fontSize: 13 }}>
              Log In
            </a>
          )}
        </div>

        <button
          className="nav-mobile-toggle"
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((o) => !o)}
          style={{
            display: 'flex',
            background: 'transparent',
            border: '1px solid var(--border)',
            borderRadius: 8,
            padding: 8,
            color: 'var(--text-primary)',
            cursor: 'pointer',
          }}
        >
          {mobileOpen ? '×' : '≡'}
        </button>
      </div>

      {mobileOpen && (
        <div
          className="nav-mobile-panel"
          style={{
            borderTop: '1px solid var(--border)',
            background: 'var(--bg-primary)',
            padding: 16,
          }}
        >
          <div style={{ display: 'grid', gap: 4 }}>
            {NAV_LINKS.map((l) => (
              <a
                key={l.href}
                href={l.href}
                onClick={() => setMobileOpen(false)}
                style={{
                  padding: '12px 16px',
                  fontSize: 15,
                  color: 'var(--text-primary)',
                  textDecoration: 'none',
                  borderRadius: 8,
                }}
              >
                {l.label}
              </a>
            ))}
            {user ? (
              <button
                onClick={() => {
                  void signOut();
                  setMobileOpen(false);
                }}
                style={{
                  textAlign: 'left',
                  padding: '12px 16px',
                  fontSize: 15,
                  color: 'var(--text-secondary)',
                  background: 'transparent',
                  border: 'none',
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}
              >
                Log out
              </button>
            ) : (
              <a
                href="/login"
                className="btn-primary"
                style={{ marginTop: 8, padding: 12 }}
                onClick={() => setMobileOpen(false)}
              >
                Log In
              </a>
            )}
          </div>
        </div>
      )}

      <style jsx>{`
        @media (min-width: 768px) {
          :global(.nav-desktop) {
            display: flex !important;
          }
          :global(.nav-mobile-toggle) {
            display: none !important;
          }
          :global(.nav-mobile-panel) {
            display: none !important;
          }
        }
      `}</style>
    </nav>
  );
}