/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * FeedbackBoard — Main board displaying feature requests sorted by votes [components/FeedbackBoard.jsx]
 * SubmitRequest — Modal form for submitting new feature requests [components/SubmitRequest.jsx]
 * RequestCard — Individual feature request card with upvote [components/RequestCard.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "feature_request_10_upvotes_email_board_owner", "on": "collection.update", "collection": "feature_requests", "actions": [{"type": "email", "to": "{{board_owner_email}}", "subject": "Feature request reached 10 upvotes", "body": "A feature request titled \"{{title}}\" has reached 10 or more upvotes."}]}]}


import { useState, useEffect, useMemo } from 'react';
import { useAuth, usePresence } from '@deplixo/sdk';
import { FeedbackBoard } from './components/FeedbackBoard.jsx';
import { SubmitRequest } from './components/SubmitRequest.jsx';

function App() {
  const { user, loading, logout } = useAuth();
  const [showSubmit, setShowSubmit] = useState(false);

  const presenceUserData = useMemo(() => {
    if (!user) return null;
    return {
      id: user.id,
      name: user.name,
      avatar: user.avatar,
      email: user.email,
      view: 'feature-requests-board',
    };
  }, [user]);

  const { users: presentUsers, update: updatePresence } = usePresence(presenceUserData);

  useEffect(() => {
    if (!user || !updatePresence) return;
    updatePresence({
      id: user.id,
      name: user.name,
      avatar: user.avatar,
      email: user.email,
      view: 'feature-requests-board',
    });
  }, [user, updatePresence]);

  const viewerCount = presentUsers?.length || 0;

  if (loading) return <div className="app-loading">Signing in...</div>;
  if (!user) return <div className="app-loading">Please sign in to continue.</div>;

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <div className="header-left">
            <span className="header-icon">✦</span>
            <div>
              <h1 className="header-title">Feature Requests</h1>
              <p className="header-subtitle">Share ideas, vote on what matters most</p>
              <p className="viewer-count" title="Users currently viewing this board">
                <span className="viewer-dot" aria-hidden="true" />
                {viewerCount} {viewerCount === 1 ? 'viewer' : 'viewers'} online
              </p>
            </div>
          </div>

          <div className="header-actions">
            <div className="user-badge" title={user.email || user.name}>
              {user.avatar ? (
                <img className="user-avatar" src={user.avatar} alt={user.name} />
              ) : (
                <span className="user-avatar user-avatar-fallback">{user.name?.charAt(0)?.toUpperCase() || 'U'}</span>
              )}
              <span className="user-name">{user.name}</span>
            </div>
            <button className="btn-secondary" onClick={logout} type="button">
              Sign Out
            </button>
            <button className="btn-submit" onClick={() => setShowSubmit(true)} type="button">
              <span className="btn-icon">+</span>
              New Request
            </button>
          </div>
        </div>
      </header>

      <main className="main-content">
        <FeedbackBoard currentUser={user} isOwner={true} />
      </main>

      {showSubmit && <SubmitRequest onClose={() => setShowSubmit(false)} currentUser={user} />}
    </div>
  );
}

export { App };

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