/* @component-map
 * App — Main container, view routing [app.jsx]
 * EventCreator — Create new events with details and cover image [components/EventCreator.jsx]
 * EventDashboard — List of created events with stats [components/EventDashboard.jsx]
 * EventView — Public event page with RSVP form and guest list [components/EventView.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [], "triggers": [{"name": "close-rsvps-at-capacity", "on": "collection.update", "collection": "events", "actions": [{"type": "email", "to": "{{event.organizer_email}}", "subject": "RSVPs closed for {{event.name}}", "body": "The event \"{{event.name}}\" has reached capacity ({{event.capacity}}). RSVPs have been automatically closed."}]}]}


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

function App() {
  const [view, setView] = useState('dashboard');
  const [selectedEventId, setSelectedEventId] = useState(null);
  const { items: events, loading, add, update, remove } = useCollection('events', { personal: true });
  const { items: rsvps, add: addRsvp, remove: removeRsvp } = useCollection('rsvps', { personal: true });

  const handleCreateEvent = async (eventData) => {
    const result = await add({ ...eventData, createdAt: new Date().toISOString() });
    setSelectedEventId(result.id);
    setView('event-view');
  };

  const handleViewEvent = (eventId) => {
    setSelectedEventId(eventId);
    setView('event-view');
  };

  const buildEventLink = (event) => {
    if (!event) return '';
    const baseUrl = window.location.origin + window.location.pathname;
    return `${baseUrl}?event=${event.id}`;
  };

  const handleAddRsvp = async (rsvpData) => {
    const result = await addRsvp(rsvpData);
    const event = events.find(e => e.id === rsvpData.eventId);

    if (event && rsvpData.email) {
      const eventLink = buildEventLink(event);
      const qrLink = event.qrCodeUrl || event.qrLink || '';
      const details = [
        event.date ? `<p><strong>Date:</strong> ${event.date}</p>` : '',
        event.time ? `<p><strong>Time:</strong> ${event.time}</p>` : '',
        event.location ? `<p><strong>Location:</strong> ${event.location}</p>` : '',
        event.description ? `<p><strong>Details:</strong> ${event.description}</p>` : '',
      ].join('');

      const qrSection = qrLink
        ? `<p><strong>QR Code Link:</strong> <a href="${qrLink}">${qrLink}</a></p>`
        : '';

      await sendEmail({
        to: rsvpData.email,
        subject: `You're confirmed for ${event.title}`,
        html: `
          <h1>RSVP Confirmation</h1>
          <p>Hi ${rsvpData.name || 'there'},</p>
          <p>Thanks for RSVPing to <strong>${event.title}</strong>. You're confirmed!</p>
          ${details}
          <p><strong>Event Link:</strong> <a href="${eventLink}">${eventLink}</a></p>
          ${qrSection}
          <p>We look forward to seeing you there.</p>
        `,
      });
    }

    return result;
  };

  const handleDeleteEvent = async (eventId) => {
    await remove(eventId);
    const eventRsvps = rsvps.filter(r => r.value.eventId === eventId);
    for (const r of eventRsvps) await removeRsvp(r.id);
    if (selectedEventId === eventId) setView('dashboard');
  };

  const getEventRsvps = (eventId) => rsvps.filter(r => r.value.eventId === eventId);

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

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <h1 className="logo" onClick={() => setView('dashboard')}>✦ Eventify</h1>
          <nav className="header-nav">
            <button className={`nav-btn ${view === 'dashboard' ? 'active' : ''}`} onClick={() => setView('dashboard')}>My Events</button>
            <button className={`nav-btn ${view === 'create' ? 'active' : ''}`} onClick={() => setView('create')}>+ Create Event</button>
          </nav>
        </div>
      </header>
      <main className="main-content">
        {view === 'dashboard' && <EventDashboard events={events} rsvps={rsvps} onView={handleViewEvent} onDelete={handleDeleteEvent} onCreate={() => setView('create')} />}
        {view === 'create' && <EventCreator onCreate={handleCreateEvent} onCancel={() => setView('dashboard')} />}
        {view === 'event-view' && selectedEventId && <EventView event={events.find(e => e.id === selectedEventId)} rsvps={getEventRsvps(selectedEventId)} onAddRsvp={handleAddRsvp} onRemoveRsvp={removeRsvp} onBack={() => setView('dashboard')} />}
      </main>
    </div>
  );
}

// PROGRESS:sc_001:complete:Setting up event management system
ReactDOM.createRoot(document.getElementById('root')).render(<App />);