/* @component-map
 * App — Main container, role switching, layout shell [app.jsx]
 * HostView — Host creates/manages polls [components/HostView.jsx]
 * RespondentView — Respondents vote on polls [components/RespondentView.jsx]
 * PollCreator — Form to create new polls [components/PollCreator.jsx]
 * PollResults — Real-time bar chart results [components/PollResults.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [], "triggers": [{"name": "poll_auto_close_and_email_results", "on": "collection.add", "collection": "poll_responses", "actions": [{"type": "event", "event_type": "poll.check_threshold_and_export"}]}, {"name": "poll_email_host_results_on_threshold", "on": "event", "event_type": "poll.threshold_reached", "actions": [{"type": "email", "to": "{{poll.host_email}}", "subject": "Your poll has reached 100 responses", "body": "Your poll has reached the 100-response threshold and has been auto-closed. The results export is ready, including CSV data with timestamps for every response.\n\nCSV link: {{poll.csv_url}}\n\nCSV content:\n{{poll.csv_content}}\n\nPoll ID: {{poll.id}}\nResponses: {{poll.response_count}}"}]}]}


import { useEffect, useMemo, useState } from 'react';
import { useIdentity, useCollection, usePresence } from '@deplixo/sdk';
import { HostView } from './components/HostView.jsx';
import { RespondentView } from './components/RespondentView.jsx';

function App() {
  const { user, loading } = useIdentity();
  const [role, setRole] = useState(null);

  const respondentIdentity = useMemo(() => {
    if (!user) return null;
    return {
      id: user.id,
      name: user.name,
      role: 'respondent'
    };
  }, [user]);

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

  if (!role) {
    return (
      <div className="role-screen">
        <div className="role-card">
          <div className="logo-icon">📊</div>
          <h1>Live Polls</h1>
          <p className="subtitle">Real-time polling with instant results</p>
          <p className="welcome-name">Welcome, {user.name}</p>
          <div className="role-buttons">
            <button className="role-btn host-btn" onClick={() => setRole('host')}>
              <span className="role-icon">🎙️</span>
              <span className="role-label">Host</span>
              <span className="role-desc">Create & manage polls</span>
            </button>
            <button className="role-btn respond-btn" onClick={() => setRole('respondent')}>
              <span className="role-icon">✋</span>
              <span className="role-label">Vote</span>
              <span className="role-desc">Respond to live polls</span>
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="header-logo">📊</span>
          <h1>Live Polls</h1>
        </div>
        <div className="header-right">
          <span className="user-badge">{user.name}</span>
          <button className="switch-btn" onClick={() => setRole(null)}>Switch Role</button>
        </div>
      </header>
      <main className="app-main">
        {role === 'host' ? <HostView userId={user.id} /> : <RespondentView userId={user.id} userName={user.name} respondentIdentity={respondentIdentity} />}
      </main>
    </div>
  );
}

export default function RootApp() {
  return <App />;
}

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