// DEPLOY_CONFIG: {"triggers": [{"name": "reaction_notification_on_post_reaction", "on": "collection.add", "collection": "reactions", "actions": [{"type": "event", "event_type": "create_reaction_notification", "payload": {"reaction_id": "{{id}}", "post_id": "{{post_id}}", "reactor_id": "{{user_id}}", "reaction_type": "{{type}}"}}]}]}
import { useState } from 'react';
import { useAuth, usePresence } from '@deplixo/sdk';
import { Feed } from './components/Feed.jsx';
import { ComposeModal } from './components/ComposeModal.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [showCompose, setShowCompose] = useState(false);
  const [activeTag, setActiveTag] = useState(null);

  const { users: onlineUsers } = usePresence({ status: 'online' });

  usePresence(
    user
      ? {
          id: user.id,
          name: user.name,
          email: user.email,
          avatar: user.avatar,
          status: 'online',
        }
      : null
  );

  if (loading) {
    return <div className="auth-gate">Signing in...</div>;
  }

  if (!user) {
    return (
      <div className="auth-gate auth-gate-guest">
        <div className="auth-gate-card">
          <div className="logo-group auth-gate-logo">
            <span className="logo-icon">◆</span>
            <h1 className="logo-text">Claypost</h1>
          </div>
          <p className="tagline auth-gate-tagline">Micro thoughts, beautifully shared</p>
          <p className="auth-gate-copy">Sign in with Google to post, react, and connect with your audience.</p>
          <button className="btn-post auth-gate-button" onClick={login}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  const visibleOnlineUsers = onlineUsers?.filter((u) => u?.id) || [];
  const onlineCount = visibleOnlineUsers.length;

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          <div className="header-top-row">
            <div className="logo-group">
              <span className="logo-icon">◆</span>
              <h1 className="logo-text">Claypost</h1>
            </div>
            <div className="user-chip">
              {user.avatar ? <img className="user-avatar" src={user.avatar} alt={user.name} /> : <span className="user-avatar-placeholder">{user.name?.[0] || 'U'}</span>}
              <span className="user-name">{user.name}</span>
              <button className="user-logout" onClick={logout}>Sign out</button>
            </div>
          </div>
          <p className="tagline">Micro thoughts, beautifully shared</p>
          <div className="presence-indicator" aria-live="polite">
            <span className="presence-dot" />
            <span className="presence-text">
              {onlineCount} online{onlineCount === 1 ? ' user' : ' users'}
            </span>
            <div className="presence-avatars" aria-label="Online users">
              {visibleOnlineUsers.slice(0, 5).map((onlineUser) => (
                <span
                  key={onlineUser.id}
                  className="presence-avatar"
                  title={onlineUser.name}
                  aria-label={onlineUser.name}
                >
                  {onlineUser.avatar ? (
                    <img src={onlineUser.avatar} alt={onlineUser.name} />
                  ) : (
                    <span>{onlineUser.name?.[0] || 'U'}</span>
                  )}
                </span>
              ))}
            </div>
          </div>
        </div>
      </header>

      {activeTag && (
        <div className="tag-filter-bar">
          <span className="tag-filter-label">Filtering by</span>
          <span className="tag-filter-value">#{activeTag}</span>
          <button className="tag-filter-clear" onClick={() => setActiveTag(null)}>✕ Clear</button>
        </div>
      )}

      <main className="main-content">
        <Feed activeTag={activeTag} onTagClick={setActiveTag} currentUser={user} />
      </main>

      <button className="fab-compose" onClick={() => setShowCompose(true)} aria-label="New post">
        <span className="fab-icon">✦</span>
      </button>

      {showCompose && (
        <ComposeModal
          onClose={() => setShowCompose(false)}
        />
      )}
    </div>
  );
}

export default App;

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