// inb-tab.jsx — Inbox root tab

const InboxTab = ({ lang = 'ru', privacyMode = false }) => {
  const t = window.INBOX_I18N[lang] || window.INBOX_I18N.ru;
  const [subTab, setSubTab] = React.useState('conversations');
  const [filter, setFilter] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const [sort, setSort] = React.useState('oldest');
  const [activeId, setActiveId] = React.useState('c01');
  const [composer, setComposer] = React.useState('');
  const [highlightId, setHighlightId] = React.useState(null);

  const visible = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    let list = window.INB.CONVERSATIONS.filter((c) => {
      if (filter === 'spam') return c.status === 'spam';
      if (c.status === 'spam') return false;
      if (filter === 'unread' && !c.unread) return false;
      if (filter === 'unassigned' && c.assignedTo) return false;
      if (filter === 'mine' && c.assignedTo !== 'Anna') return false;
      if (filter === 'flagged' && !c.flagged) return false;
      if (filter === 'bookings' && !c.booking) return false;
      if (q) {
        const hay = [c.guest.name, c.guest.handle, c.booking?.id, c.booking?.cabin, ...c.messages.map((m) => m.text)].join(' ').toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    });
    const priority = (c) => (c.flagged ? 200 : 0) + (c.unread ? 100 : 0) + Math.min(c.guest.ltv / 50, 80);
    list = [...list].sort((a, b) => {
      if (sort === 'newest') return b.lastInbound - a.lastInbound;
      if (sort === 'priority') return priority(b) - priority(a);
      if (sort === 'ltv') return b.guest.ltv - a.guest.ltv;
      return a.lastInbound - b.lastInbound;
    });
    return list;
  }, [filter, query, sort]);

  const active = visible.find((c) => c.id === activeId) || window.INB.CONVERSATIONS.find((c) => c.id === activeId);

  React.useEffect(() => {
    if (subTab === 'conversations' && visible.length && !visible.some((c) => c.id === activeId)) setActiveId(visible[0].id);
  }, [filter, query, sort, subTab]);

  const flashMessage = (id) => {
    setHighlightId(id);
    window.setTimeout(() => setHighlightId(null), 2000);
  };

  return (
    <div className="inb-page" data-screen-label="Inbox">
      <div className="inb-tabs">
        <button className={subTab === 'conversations' ? 'active' : ''} onClick={() => setSubTab('conversations')}>{t.tabs.conversations}</button>
        <button className={subTab === 'analytics' ? 'active' : ''} onClick={() => setSubTab('analytics')}>{t.tabs.analytics}</button>
      </div>

      {subTab === 'analytics' ? (
        <InbAnalytics lang={lang} />
      ) : (
        <div className="inb-shell">
          <InbConvList
            conversations={visible}
            activeId={activeId}
            onSelect={(id) => { setActiveId(id); setComposer(''); }}
            filter={filter}
            setFilter={setFilter}
            query={query}
            setQuery={setQuery}
            sort={sort}
            setSort={setSort}
            lang={lang}
            privacyMode={privacyMode}
          />
          <main className="inb-center">
            {active ? (
              <>
                <InbHeader conversation={active} lang={lang} privacyMode={privacyMode} />
                <InbThread conversation={active} lang={lang} privacyMode={privacyMode} highlightId={highlightId} />
                <InbComposer
                  conversation={active}
                  value={composer}
                  setValue={setComposer}
                  lang={lang}
                  onSend={(text) => alert(`(demo) Send: ${text}`)}
                />
              </>
            ) : <InbEmptyCenter lang={lang} />}
          </main>
          {active && (
            <InbContext
              conversation={active}
              lang={lang}
              privacyMode={privacyMode}
              composer={composer}
              onInsert={(text) => setComposer((prev) => prev ? `${prev}\n${text}` : text)}
              onHighlight={flashMessage}
            />
          )}
        </div>
      )}
    </div>
  );
};

window.InboxTab = InboxTab;