/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * EventCreator — Create new potluck event [components/EventCreator.jsx]
 * EventView — View event details and dish signup [components/EventView.jsx]
 * DishForm — Form to add a dish [components/DishForm.jsx]
 * DishList — Display all dishes with categories [components/DishList.jsx]
 * CoveragePanel — Show what's covered and needed [components/CoveragePanel.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "signup_email_confirmation", "on": "collection.add", "collection": "signups", "actions": [{"type": "email", "to": "{{email}}", "subject": "Confirm your signup", "body": "Thanks for signing up! Please confirm your email address to complete your registration."}]}]}


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

function App() {
  const { items: events, loading, add, update, remove } = useCollection("potluck-events", { personal: true });
  const { user: identityUser, loading: identityLoading } = useIdentity();
  const [activeEventId, setActiveEventId] = useState(null);
  const [view, setView] = useState("list");

  const activeEvent = events.find(e => e.id === activeEventId);

  const presenceName = identityUser?.name || "Guest";
  const presenceAvatar = identityUser?.avatar || "";
  const presence = usePresence({
    name: presenceName,
    avatar: presenceAvatar,
    status: view === "event" && activeEventId ? `Viewing event ${activeEventId}` : "Browsing events"
  });

  const activeEventViewers = presence.users.filter((person) => person.status === `Viewing event ${activeEventId}`);

  const handleCreateEvent = async (eventData) => {
    const newEvent = await add(eventData);
    setActiveEventId(newEvent.id);
    setView("event");
  };

  const handleBack = () => {
    setActiveEventId(null);
    setView("list");
  };

  if (loading || identityLoading) {
    return (
      <div className="loading-screen">
        <div className="loading-spinner"></div>
        <p>Loading your potlucks...</p>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-inner">
          <h1 className="app-title">🍽️ Potluck Planner</h1>
          {view === "event" && (
            <button className="btn-back" onClick={handleBack}>← All Events</button>
          )}
        </div>
      </header>
      <main className="app-main">
        {view === "list" && (
          <EventCreator
            events={events}
            onCreateEvent={handleCreateEvent}
            onSelectEvent={(id) => { setActiveEventId(id); setView("event"); }}
            onDeleteEvent={remove}
          />
        )}
        {view === "event" && activeEvent && (
          <EventView
            event={activeEvent}
            onUpdateEvent={(data) => update(activeEventId, data)}
            viewers={activeEventViewers}
          />
        )}
      </main>
    </div>
  );
}


export function SignupStatus({ signup }) {
  const isConfirmed = Boolean(signup?.email_confirmed || signup?.confirmed || signup?.status === 'confirmed');

  return (
    <div>
      {isConfirmed ? (
        <span style={{ color: 'green' }}>Email confirmed</span>
      ) : (
        <span style={{ color: 'orange' }}>Confirmation email sent — awaiting confirmation</span>
      )}
    </div>
  );
}

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