/* TopBar + FilterBar + QuickAdd popover for MegaETH Marketing Calendar */

const { useState, useRef, useEffect } = React;
const U = window.mcalUtils;

// ─── Top bar ───
function TopBar({ view, setView, theme, setTheme, syncedAt, kind, openSettings, addEvent, today, user, signOut }) {
  return (
    <div className="topbar">
      <div className="brand">
        <img src="assets/logo.svg" alt="MEGAETH" className="brand-logo" />
        <div className="titletag">MARKETING CALENDAR</div>
      </div>

      <div className="tb-section grow"></div>

      <div className="tb-section">
        <div className="view-toggle">
          <button className={view === 'calendar' ? 'on' : ''} onClick={() => setView('calendar')}>
            <span className="vt-icon">◧</span><span className="vt-label">Calendar</span>
          </button>
          <button className={view === 'mytasks' ? 'on' : ''} onClick={() => setView('mytasks')}>
            <span className="vt-icon">★</span><span className="vt-label">My Tasks</span>
          </button>
          <button className={view === 'table' ? 'on' : ''} onClick={() => setView('table')}>
            <span className="vt-icon">≡</span><span className="vt-label">Table</span>
          </button>
        </div>
      </div>

      <div className="tb-section">
        <div className="synced" title={kind === 'shared' ? 'Live multi-user sync via window.storage' : 'Local-only fallback (window.storage not available)'}>
          <span className="pip"></span>
          <span>{syncedAt}</span>
        </div>
      </div>

      <div className="tb-section">
        <button className="iconbtn" title="Toggle theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
          {theme === 'dark' ? '☀' : '☾'}
        </button>
        <button className="iconbtn" title="Settings" onClick={openSettings}>⚙</button>
        <button className="iconbtn primary" title="New event (N)" onClick={() => addEvent(today)}>+</button>
        {user && <UserPill user={user} signOut={signOut} />}
      </div>
    </div>
  );
}

// ─── Signed-in user pill + sign-out menu ───
function UserPill({ user, signOut }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);
  const initials = (user.name || user.email || '?')
    .split(/\s+|@/)
    .filter(Boolean)
    .slice(0, 2)
    .map(s => s[0].toUpperCase())
    .join('');
  return (
    <div className="user-pill-wrap" ref={ref}>
      <button className="user-pill" onClick={() => setOpen(o => !o)} title={user.email}>
        {user.picture
          ? <img src={user.picture} alt="" referrerPolicy="no-referrer" />
          : <span className="user-initials">{initials}</span>}
      </button>
      {open && (
        <div className="popover user-pop">
          <div className="user-pop-head">
            <div className="user-pop-name">{user.name || user.email.split('@')[0]}</div>
            <div className="user-pop-email">{user.email}</div>
          </div>
          <div className="po-divider"></div>
          <div className="po-item" onClick={() => { setOpen(false); signOut(); }}>
            <span className="swatch" style={{ background: 'var(--danger, #E25C5C)' }}></span>
            <span style={{ flex: 1 }}>Sign out</span>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Sub-tabs (Month ▾ / Channels / Timeline / Kanban) ───
function SubTabs({ mode, setMode, counts }) {
  // The three calendar-grid granularities (Month, 2 Weeks, Week) collapse
  // into a single picker anchored at the leftmost "Month" slot — Month is
  // the default (see app.jsx initial mode) and the shorter ranges drop down
  // beneath it. The remaining views stay as direct bar tabs.
  const gridViews = [
    { id: 'month',     label: 'Month' },
    { id: 'fortnight', label: '2 Weeks' },
    { id: 'week',      label: 'Week' },
  ];
  const barTabs = [
    { id: 'lanes',    label: 'Channels' },
    { id: 'timeline', label: 'Timeline' },
    { id: 'kanban',   label: 'Kanban' },
  ];

  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  const cnt = id => (counts && counts[id] != null
    ? <span className="count">· {counts[id]}</span> : null);

  // The trigger reflects whichever grid view is active; when the active mode
  // is a non-grid view (Channels/Timeline/Kanban) it falls back to "Month"
  // and drops the active underline.
  const activeGrid = gridViews.find(t => t.id === mode);
  const trigger = activeGrid || gridViews[0];

  return (
    <div className="subtabs">
      <div className="subtab-dd" ref={ref}>
        <button
          data-mode={trigger.id}
          className={'subtab-dd-trigger' + (activeGrid ? ' on' : '')}
          onClick={() => {
            // Coming from another view (Channels/Timeline/Kanban): act like a
            // plain tab — switch into the grid view, don't pop the menu. The
            // dropdown only opens once you're already inside a grid view.
            if (activeGrid) setOpen(o => !o);
            else { setMode(trigger.id); setOpen(false); }
          }}
          aria-haspopup="true"
          aria-expanded={open}
        >
          {trigger.label}{activeGrid ? cnt(trigger.id) : null}
          <span className="dd-caret">▾</span>
        </button>
        {open && (
          <div className="popover fade-in subtab-pop">
            {gridViews.map(t => (
              <div
                key={t.id}
                className={'po-item' + (mode === t.id ? ' on' : '')}
                onClick={() => { setMode(t.id); setOpen(false); }}
              >
                <span className="po-label">{t.label}</span>
                {counts && counts[t.id] != null ? <span className="po-count">{counts[t.id]}</span> : null}
              </div>
            ))}
          </div>
        )}
      </div>
      {barTabs.map(t => (
        <button key={t.id} data-mode={t.id} className={mode === t.id ? 'on' : ''} onClick={() => setMode(t.id)}>
          {t.label}{cnt(t.id)}
        </button>
      ))}
    </div>
  );
}

// ─── Filter chip with multi-select popover ───
function FilterChip({ label, type, options, selected, setSelected, onEditOptions }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  let list = options[type] || [];
  // Owner filter respects the GTM Team subset (same rule as the
  // detail-panel owner pickers and @mention dropdown). Anything
  // currently selected stays visible so it remains togglable.
  if (type === 'owners') {
    const gtmTeam = (options && options.gtmTeam) || [];
    if (gtmTeam.length > 0) {
      list = list.filter(o => gtmTeam.includes(o.id) || selected.has(o.id));
    }
  }
  const active = selected.size > 0;
  const toggle = id => {
    const next = new Set(selected);
    if (next.has(id)) next.delete(id); else next.add(id);
    setSelected(next);
  };
  const labelText = active
    ? (selected.size === 1 ? list.find(x => x.id === [...selected][0])?.name : `${selected.size} selected`)
    : 'All';

  return (
    <div className="fc-wrap" style={{ position: 'relative' }} ref={ref}>
      <button className={'chip' + (active ? ' active' : '')} onClick={() => setOpen(o => !o)}>
        <span className="key">{label}</span>
        <span className="val">{labelText}</span>
        <span className="caret">▼</span>
        {active && (
          <span className="x" onClick={e => { e.stopPropagation(); setSelected(new Set()); }}>×</span>
        )}
      </button>
      {open && (
        <div className="popover fade-in">
          {list.map(opt => (
            <div key={opt.id} className={'po-item' + (selected.has(opt.id) ? ' on' : '')} onClick={() => toggle(opt.id)}>
              {opt.color
                ? <span className="swatch" style={{ background: opt.color }}></span>
                : <span className="swatch" style={{ background: 'transparent', borderStyle: 'dashed' }}></span>}
              <span style={{ flex: 1 }}>{opt.name}</span>
              <span className="check">{selected.has(opt.id) ? '✓' : ''}</span>
            </div>
          ))}
          {active && (
            <>
              <div className="po-divider"></div>
              <div className="po-clear" onClick={() => setSelected(new Set())}>Clear all</div>
            </>
          )}
          {onEditOptions && (
            <>
              <div className="po-divider"></div>
              <a className="po-edit-link" onClick={() => { setOpen(false); onEditOptions(type); }}>
                Edit options →
              </a>
            </>
          )}
        </div>
      )}
    </div>
  );
}

window.mcalChrome = { TopBar, SubTabs, FilterChip };