/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * NewsFeed — Main feed of news tips sorted by recency [components/NewsFeed.jsx]
 * TipCard — Individual tip card with upvote [components/NewsFeed.jsx]
 * AddTipModal — Modal for submitting new tips [components/AddTipModal.jsx]
 * EmptyState — Empty state when no tips exist [components/NewsFeed.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "tip_upvote_digest_threshold", "on": "collection.update", "collection": "tips", "actions": [{"type": "email", "to": "community_digest_recipients", "subject": "Trending tip: {{title}} reached 15+ upvotes", "body": "A tip in the community has reached 15 or more upvotes and is now ready for the digest.\n\nTitle: {{title}}\nAuthor: {{author_name}}\nUpvotes: {{upvote_count}}\nLink: {{url}}\n\nTip summary:\n{{summary}}\n\nPlease review and include this tip in the community digest."}]}], "cron": [{"name": "weekly_news_roundup_digest", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "news_roundup.generate"}}]}


import { useEffect } from 'react';
import { usePresence } from '@deplixo/sdk';
import { NewsFeed } from './components/NewsFeed.jsx';
import { AddTipModal } from './components/AddTipModal.jsx';

function ActiveMembersBar() {
  const { users, update } = usePresence({
    status: 'online',
    view: 'feed',
    area: 'community'
  });

  useEffect(() => {
    update({
      status: 'online',
      view: 'feed',
      area: 'community',
      lastSeen: Date.now()
    });
  }, [update]);

  return (
    <div className="active-members-bar" aria-live="polite">
      <div className="active-members-copy">
        <span className="active-members-label">Community online</span>
        <span className="active-members-count">{users.length} active now</span>
      </div>
      <div className="active-members-list">
        {users.length > 0 ? (
          users.map((u) => (
            <span key={u.id} className="active-member-pill" title={u.name}>
              <span className="active-member-dot" />
              <span className="active-member-name">{u.name}</span>
            </span>
          ))
        ) : (
          <span className="active-members-empty">Be the first to open the feed</span>
        )}
      </div>
    </div>
  );
}

function App() {
  const [showAddModal, setShowAddModal] = useState(false);

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          <div className="logo-group">
            <span className="logo-icon">🐝</span>
            <div>
              <h1 className="app-title">The Buzz Board</h1>
              <p className="app-subtitle">Neighborhood News Tips</p>
            </div>
          </div>
          <button className="btn-add" onClick={() => setShowAddModal(true)}>
            <span className="btn-add-icon">+</span>
            <span className="btn-add-text">New Tip</span>
          </button>
        </div>
      </header>

      <main className="main-content">
        <ActiveMembersBar />
        <NewsFeed />
      </main>

      {showAddModal && (
        <AddTipModal onClose={() => setShowAddModal(false)} />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);