// DEPLOY_CONFIG: {"triggers": [{"name": "voting_closed_results_email", "on": "collection.update", "collection": "votes", "actions": [{"type": "email", "to": "{{participant.email}}", "subject": "Voting closed: results and winner", "body": "Hi {{participant.name}},\n\nVoting has closed. Here are the results:\n\nWinner: {{results.winner}}\n\nVote breakdown:\n{{results.breakdown}}\n\nSummary:\n{{results.summary}}\n\nThanks for participating!"}]}]}
import { useState } from 'react';
import { useAuth, usePresence } from '@deplixo/sdk';
import { ContestList } from './components/ContestList.jsx';
import { ContestDetail } from './components/ContestDetail.jsx';
import { CreateContest } from './components/CreateContest.jsx';

// PROGRESS:sc_001:complete:Setting up the photo contest platform
function App() {
  const { user, loading, login, logout } = useAuth();
  const [view, setView] = useState('list');
  const [selectedContestId, setSelectedContestId] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);

  usePresence(
    user
      ? {
          id: user.id,
          name: user.name,
          avatar: user.avatar,
          role: isAdmin ? 'admin' : 'user',
          view,
        }
      : null
  );

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-pulse"></div>
        <p>Loading Photo Contest...</p>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="loading-screen auth-screen">
        <div className="auth-card">
          <div className="auth-hero">📸</div>
          <h1 className="auth-title">Photo Contest</h1>
          <p className="auth-copy">Sign in with Google to upload photos, vote, and join the contest experience.</p>
          <button className="btn-primary auth-login-btn" onClick={login}>
            Sign in with Google
          </button>
        </div>
      </div>
    );
  }

  const navigateToContest = (contestId) => {
    setSelectedContestId(contestId);
    setView('detail');
  };

  const navigateBack = () => {
    setSelectedContestId(null);
    setView('list');
  };

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          {view !== 'list' && (
            <button className="back-btn" onClick={navigateBack}>← Back</button>
          )}
          <h1 className="app-title">📸 Photo Contest</h1>
        </div>
        <div className="header-right">
          <label className="admin-toggle">
            <input type="checkbox" checked={isAdmin} onChange={(e) => setIsAdmin(e.target.checked)} />
            <span className="toggle-label">Admin</span>
          </label>
          <span className="user-badge">{user?.name}</span>
          <button className="btn-secondary sign-out-btn" onClick={logout}>
            Sign out
          </button>
        </div>
      </header>
      <main className="app-main">
        {view === 'list' && (
          <ContestList
            isAdmin={isAdmin}
            onSelectContest={navigateToContest}
            onCreateNew={() => setView('create')}
            currentUser={user}
          />
        )}
        {view === 'create' && (
          <CreateContest onBack={navigateBack} currentUser={user} />
        )}
        {view === 'detail' && selectedContestId && (
          <ContestDetail
            contestId={selectedContestId}
            isAdmin={isAdmin}
            userId={user?.id}
            userName={user?.name}
            userAvatar={user?.avatar}
            isAuthenticated={!!user}
          />
        )}
      </main>
    </div>
  );
}

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