// Tablet — overflow menu (the "..." in the tab strip).
// Safari/Arc-style popover with grouped sections, keyboard shortcuts, and a
// distinct "New private tab" entry that routes to the incognito window.

function TMoreMenu({ anchorRect, onClose, onAction, privateMode = false }) {
  // Position popover below the anchor, right-aligned
  const w = 280;
  const top = (anchorRect ? anchorRect.bottom + 6 : 64);
  const left = (anchorRect ? Math.max(8, anchorRect.right - w) : 64);
  const sw = (d) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{d}</svg>;

  const sections = [
    {
      items: [
        { id: 'new-tab',         icon: MIc.plus({ s: 14 }),   label: 'New tab',          short: '⌘ T' },
        { id: 'new-private',     icon: <IcMask s={14}/>,      label: 'New private tab',  short: '⇧⌘ N', accent: PRIV_ACCENT_2 },
        { id: 'new-window',      icon: sw(<><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></>), label: 'New window', short: '⌘ N' },
        { id: 'reopen',          icon: sw(<><path d="M3 3v6h6"/><path d="M3.5 9A9 9 0 1 1 6 18.7"/></>), label: 'Reopen closed tab',  short: '⇧⌘ T' },
      ],
    },
    {
      items: [
        { id: 'find',            icon: MIc.search({ s: 14 }), label: 'Find in page…',   short: '⌘ F' },
        { id: 'reader',          icon: sw(<path d="M4 6h16M4 10h12M4 14h16M4 18h10"/>), label: 'Show Reader View', short: '⇧⌘ R' },
        { id: 'translate',       icon: sw(<><path d="M3 5h12M9 3v2M12 17l3-5 3 5M12.5 21h7M13.5 14h5"/><path d="M5 9c0 4 3 6 6 6"/><path d="M11 9c0 4-3 8-8 8"/></>), label: 'Translate page' },
        { id: 'request-desktop', icon: sw(<><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M8 22h8"/><path d="M12 18v4"/></>), label: 'Request desktop site' },
        { id: 'pin-tab',         icon: sw(<><path d="m12 17 .01 4"/><path d="M9.85 13H3l3-5h12l3 5h-6.85"/><path d="M6 8 9 3h6l3 5"/></>), label: 'Pin tab' },
        { id: 'pip',             icon: sw(<><rect x="3" y="4" width="18" height="14" rx="2"/><rect x="11" y="9" width="9" height="7" rx="1"/></>), label: 'Picture-in-picture' },
        { id: 'mute-tab',        icon: sw(<><path d="m9 9-5 4v-4-4l5 4"/><path d="m23 9-6 6"/><path d="m17 9 6 6"/></>), label: 'Mute tab' },
        { id: 'page-info',       icon: sw(<><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M12 8v.01"/><path d="M11 12h1v4h1"/></>), label: 'Page info' },
        { id: 'zoom',            icon: sw(<><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4M8 11h6M11 8v6"/></>), label: 'Zoom',         right: '100%' },
      ],
    },
    {
      items: [
        { id: 'history',      icon: sw(<><path d="M3 12a9 9 0 1 0 3-6.7L3 9"/><path d="M3 3v6h6"/><path d="M12 7v5l3 2"/></>), label: 'History',      short: '⌘ Y', disabled: privateMode, disabledHint: 'not saved here' },
        { id: 'bookmarks',    icon: sw(<path d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16l7-4z"/>), label: 'Bookmarks',  short: '⌘ B' },
        { id: 'downloads',    icon: sw(<><path d="M12 3v12M6 11l6 6 6-6M5 21h14"/></>), label: 'Downloads',  short: '⌥⌘ L' },
        { id: 'passwords',    icon: sw(<><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>), label: 'Passwords' },
        { id: 'reading-list', icon: sw(<><path d="M3 3h12a3 3 0 0 1 3 3v15"/><path d="M3 21V3"/><path d="M9 8h6M9 12h6"/></>), label: 'Reading list' },
      ],
    },
    {
      items: [
        { id: 'share',     icon: sw(<><path d="M4 12v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6"/><path d="m16 6-4-4-4 4"/><path d="M12 2v14"/></>), label: 'Share page…' },
        { id: 'send-peer', icon: MIc.chat({ s: 14 }), label: 'Send to a peer…', disabled: privateMode, disabledHint: 'unavailable in private' },
        { id: 'save-pdf',  icon: sw(<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></>), label: 'Save as PDF' },
        { id: 'print',     icon: sw(<><path d="M6 9V3h12v6"/><rect x="3" y="9" width="18" height="9" rx="2"/><path d="M6 14h12v7H6z"/></>), label: 'Print…', short: '⌘ P' },
      ],
    },
    {
      items: [
        { id: 'clear',    icon: sw(<><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>), label: 'Clear browsing data…' },
        { id: 'privacy-review', icon: sw(<><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/><path d="m9 12 2 2 4-4"/></>), label: 'Privacy review…' },
        { id: 'permissions',    icon: sw(<><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/></>), label: 'Site permissions…' },
        { id: 'help',     icon: sw(<><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></>), label: 'Help & feedback' },
        { id: 'credits',  icon: sw(<><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/></>), label: 'About & credits' },
        { id: 'settings', icon: MIc.settings({ s: 14 }), label: 'Settings…',     short: '⌘ ,' },
      ],
    },
  ];

  // Theme: light glassy popover in default; violet-tinted in private
  const surface = privateMode ? PRIV_SURFACE : M_SURFACE;
  const border  = privateMode ? PRIV_BORDER : M_BORDER;
  const fg      = privateMode ? PRIV_FG : M_FG;
  const fgMuted = privateMode ? PRIV_FG_MUTED : M_FG_MUTED;
  const fgDim   = privateMode ? PRIV_FG_DIM : M_FG_DIM;
  const hover   = privateMode ? 'rgba(167,139,250,0.12)' : 'var(--m-tint)';

  return (
    <>
      {/* invisible click-catcher — fixed so it covers the iframe regardless of transforms */}
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0, zIndex: 1000, background: 'transparent',
      }}/>
      <div style={{
        position: 'fixed', top, left, width: w, zIndex: 1001,
        background: 'var(--glass)', backdropFilter: 'blur(var(--glass-blur)) saturate(1.5)', WebkitBackdropFilter: 'blur(var(--glass-blur)) saturate(1.5)',
        border: '1px solid ' + border,
        borderRadius: 14,
        boxShadow: 'inset 0 1px 0 var(--glass-highlight), 0 24px 60px -10px rgba(0,0,0,0.5)',
        padding: '6px 0', color: fg,
        animation: 'tmFade 160ms ease',
      }}>
        <style>{`@keyframes tmFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }`}</style>
        {sections.map((sec, si) => (
          <React.Fragment key={si}>
            {si > 0 && <div style={{ height: 1, margin: '4px 8px', background: privateMode ? PRIV_BORDER_SOFT : M_BORDER_SOFT }}/>}
            {sec.items.map(it => (
              <button
                key={it.id}
                onClick={() => { if (!it.disabled) { onAction && onAction(it.id); onClose(); } }}
                disabled={it.disabled}
                onMouseEnter={(e) => { if (!it.disabled) e.currentTarget.style.background = hover; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                  padding: '8px 14px', background: 'transparent', border: 0,
                  color: it.disabled ? fgDim : fg, cursor: it.disabled ? 'default' : 'pointer',
                  textAlign: 'left', fontFamily: 'inherit', fontSize: 13,
                  opacity: it.disabled ? 0.55 : 1,
                }}>
                <span style={{ color: it.accent || (it.disabled ? fgDim : fgMuted), display: 'grid', placeItems: 'center', width: 16, flexShrink: 0 }}>{it.icon}</span>
                <span style={{ flex: 1, fontWeight: 500 }}>{it.label}</span>
                {it.right && <span style={{ fontSize: 11, color: fgDim, fontFamily: 'JetBrains Mono, monospace' }}>{it.right}</span>}
                {it.disabledHint && <span style={{ fontSize: 10, color: fgDim, fontFamily: 'JetBrains Mono, monospace' }}>{it.disabledHint}</span>}
                {it.short && !it.right && <span style={{ fontSize: 10.5, color: fgDim, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.02em' }}>{it.short}</span>}
              </button>
            ))}
          </React.Fragment>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { TMoreMenu });