// DEPLOY_CONFIG: {"cron": [{"name": "weekly_new_posts_digest", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "send_weekly_new_posts_digest"}}], "triggers": [{"name": "feature_post_on_20_reactions", "on": "collection.update", "collection": "posts", "actions": [{"type": "event", "event_type": "feature_post_top"}]}, {"name": "notify_user_on_reply_to_post", "on": "collection.add", "collection": "replies", "actions": [{"type": "event", "event_type": "send_reply_notification"}]}]}
import { useState } from 'react';
import { useAuth, usePresence, useReactions, share } from '@deplixo/sdk';
import { BulletinBoard } from './components/BulletinBoard.jsx';
import { CreatePost } from './components/CreatePost.jsx';

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

  return (
    <div className="online-users" aria-label="Online community members">
      <span className="online-users-label">{users.length} online</span>
      <div className="online-users-list">
        {users.map((u) => (
          <span key={u.id} className="online-user-dot" title={u.name}>
            {u.name}
          </span>
        ))}
      </div>
    </div>
  );
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [showCreate, setShowCreate] = useState(false);
  const [activeCategory, setActiveCategory] = useState('all');

  const handleCreateClick = () => {
    if (!user) {
      login('google');
      return;
    }
    setShowCreate(true);
  };

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

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          <div className="header-brand">
            <span className="brand-icon">📌</span>
            <div>
              <h1 className="brand-title">Community Board</h1>
              <p className="brand-sub">Your neighborhood bulletin board</p>
            </div>
          </div>

          <div className="header-actions">
            <OnlineUsers />
            {user ? (
              <>
                <div className="user-chip" title={user.email || user.name}>
                  {user.avatar ? (
                    <img className="user-avatar" src={user.avatar} alt={user.name || 'User'} />
                  ) : (
                    <span className="user-avatar-fallback">{(user.name || 'U').charAt(0)}</span>
                  )}
                  <span className="user-name">user.name</span>
                </div>
                <button className="btn-auth btn-logout" onClick={logout}>
                  Sign Out
                </button>
              </>
            ) : (
              <button className="btn-auth btn-google" onClick={() => login('google')}>
                <span className="btn-icon">G</span>
                <span className="btn-label">Sign in with Google</span>
              </button>
            )}
            <button
              className="btn-create"
              onClick={handleCreateClick}
              aria-label={user ? 'Create a new post' : 'Sign in with Google to create a post'}
            >
              <span className="btn-icon">+</span>
              <span className="btn-label">New Post</span>
            </button>
          </div>
        </div>
      </header>

      <main className="main-content">
        <BulletinBoard
          activeCategory={activeCategory}
          setActiveCategory={setActiveCategory}
          canCreate={!!user}
          onRequireAuth={() => login('google')}
        />
      </main>

      {showCreate && user && <CreatePost onClose={() => setShowCreate(false)} />}
    </div>
  );
}


function ShareButton({ post, className = '', onShared }) {
  const [sharing, setSharing] = useState(false);
  const [message, setMessage] = useState('');

  const title = post?.title || 'Community Board post';
  const description = post?.content || post?.body || '';
  const postUrl =
    post?.url ||
    post?.link ||
    (typeof window !== 'undefined'
      ? `${window.location.origin}${window.location.pathname}#post-${post?.id}`
      : '');

  const handleShare = async () => {
    if (!postUrl) return;

    setSharing(true);
    setMessage('');

    try {
      const shareData = {
        title,
        text: description ? `${title}\n\n${description}` : title,
        url: postUrl,
      };

      if (typeof navigator !== 'undefined' && navigator.share) {
        await navigator.share(shareData);
        setMessage('Shared');
        if (onShared) onShared('shared');
        return;
      }

      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(postUrl);
        setMessage('Link copied');
        if (onShared) onShared('copied');
        return;
      }

      setMessage('Copy the link from your browser');
    } catch (error) {
      try {
        if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
          await navigator.clipboard.writeText(postUrl);
          setMessage('Link copied');
          if (onShared) onShared('copied');
          return;
        }
      } catch (copyError) {
        setMessage('Sharing unavailable');
      }
    } finally {
      setSharing(false);
    }
  };

  return (
    <div className={`share-control ${className}`.trim()}>
      <button
        type="button"
        className="btn-share"
        onClick={handleShare}
        disabled={sharing || !postUrl}
        aria-label={`Share ${title}`}
      >
        <span className="btn-icon">↗</span>
        <span className="btn-label">Share</span>
      </button>
      {message ? (
        <span className="share-feedback" role="status" aria-live="polite">
          {message}
        </span>
      ) : null}
    </div>
  );
}


function ReactionBar({ targetId }) {
  const { counts, toggle, loading } = useReactions(targetId);
  const emojis = ['👍', '❤️', '🎉', '🔥', '👀'];

  if (loading) return null;

  return (
    <div className="reaction-bar">
      {emojis.map((emoji) => (
        <button key={emoji} className="reaction-btn" onClick={() => toggle(emoji)}>
          {emoji} {counts[emoji] || ''}
        </button>
      ))}
    </div>
  );
}


function FeaturedPosts({ posts = [] }) {
  const featuredPosts = (posts || []).filter((post) => {
    const reactionTotal = post?.reactionCount ?? post?.reactions ?? post?.reaction_count ?? 0;
    return Number(reactionTotal) >= 20;
  });

  if (!featuredPosts.length) return null;

  return (
    <section className="featured-posts" aria-label="Featured posts">
      <div className="featured-posts-header">
        <h2 className="featured-posts-title">Featured Posts</h2>
        <p className="featured-posts-subtitle">Posts with 20+ reactions appear here first</p>
      </div>
      <div className="featured-posts-list">
        {featuredPosts.map((post) => (
          <article key={post.id} className="featured-post-card" id={`post-${post.id}`}>
            <div className="featured-post-badge">Featured</div>
            <h3 className="featured-post-title">{post.title}</h3>
            <p className="featured-post-preview">{post.content || post.body || ''}</p>
            <ReactionBar targetId={post.id} />
            <div className="featured-post-actions">
              <ShareButton post={post} />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

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