/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * GroupSetup — Create group and add participants [components/GroupSetup.jsx]
 * Assignments — Draw names and reveal assignments [components/Assignments.jsx]
 * Wishlists — Manage wishlists for participants [components/Wishlists.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "notify_organizer_when_all_gifts_purchased", "on": "collection.update", "collection": "gifts", "actions": [{"type": "email", "to": "{{organizer_email}}", "subject": "All gifts have been purchased", "body": "All gifts in the registry have now been marked as purchased. Please check the app for the latest updates."}]}]}


import { useEffect, useMemo, useState } from 'react';
import { useAuth, useCollection, sendEmail } from '@deplixo/sdk';
import { GroupSetup } from './components/GroupSetup.jsx';
import { Assignments } from './components/Assignments.jsx';
import { Wishlists } from './components/Wishlists.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('group');
  const [now, setNow] = useState(Date.now());
  const participants = useCollection('participants', { personal: true });
  const assignments = useCollection('assignments', { personal: true });
  const wishlists = useCollection('wishlists', { personal: true });
  const budgetTracker = useCollection('budgetTracker', { personal: true });
  const groupSettings = useCollection('groupSettings', { personal: true });

  const participantsItems = participants.items || [];
  const assignmentsItems = assignments.items || [];
  const budgetItems = budgetTracker.items || [];
  const groupSettingsItems = groupSettings.items || [];

  const [emailStatus, setEmailStatus] = useState({
    sending: false,
    sentCount: 0,
    total: 0,
    errors: [],
    success: false,
  });

  useEffect(() => {
    const timer = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(timer);
  }, []);

  const tabs = [
    { id: 'group', label: '🎄 Group', icon: '👥' },
    { id: 'assignments', label: '🎁 Draw', icon: '🎲' },
    { id: 'wishlists', label: '📝 Wishlists', icon: '⭐' },
    { id: 'budget', label: '💰 Budget', icon: '📊' },
  ];

  const budgetByParticipantId = useMemo(() => {
    return budgetItems.reduce((map, entry) => {
      map[entry.participantId] = entry;
      return map;
    }, {});
  }, [budgetItems]);

  const participantById = useMemo(() => {
    return participantsItems.reduce((map, participant) => {
      map[participant.id] = participant;
      return map;
    }, {});
  }, [participantsItems]);

  const assignmentRecipients = useMemo(() => {
    return assignmentsItems
      .map(assignment => {
        const giver = participantById[assignment.giverId];
        const receiver = participantById[assignment.receiverId];
        return giver && receiver ? { assignment, giver, receiver } : null;
      })
      .filter(Boolean);
  }, [assignmentsItems, participantById]);

  const giftExchangeDate = useMemo(() => {
    const candidates = [
      groupSettingsItems[0]?.giftExchangeDate,
      groupSettingsItems[0]?.exchangeDate,
      groupSettingsItems[0]?.date,
    ].filter(Boolean);

    const rawValue = candidates[0];
    if (!rawValue) return null;

    const parsed = new Date(rawValue);
    return Number.isNaN(parsed.getTime()) ? null : parsed;
  }, [groupSettingsItems]);

  const countdown = useMemo(() => {
    if (!giftExchangeDate) return null;

    const diff = giftExchangeDate.getTime() - now;
    const totalSeconds = Math.max(0, Math.floor(diff / 1000));
    const days = Math.floor(totalSeconds / 86400);
    const hours = Math.floor((totalSeconds % 86400) / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    return {
      isPast: diff <= 0,
      days,
      hours,
      minutes,
      seconds,
      display: diff <= 0
        ? '🎉 Gift exchange day is here!'
        : `${days}d ${hours}h ${minutes}m ${seconds}s`,
    };
  }, [giftExchangeDate, now]);

  const upsertBudgetRecord = async (participantId, updates) => {
    const existing = budgetByParticipantId[participantId];
    if (existing?.id) {
      await budgetTracker.update(existing.id, {
        ...existing,
        ...updates,
        participantId,
      });
    } else {
      await budgetTracker.add({
        participantId,
        purchased: false,
        amount: '',
        ...updates,
      });
    }
  };

  const sendAssignmentEmails = async () => {
    setEmailStatus({ sending: true, sentCount: 0, total: assignmentRecipients.length, errors: [], success: false });

    const errors = [];
    let sentCount = 0;

    for (const item of assignmentRecipients) {
      const recipientEmail = item.giver.email || item.giver?.emailAddress || '';
      if (!recipientEmail) {
        errors.push(`Missing email for ${item.giver.name || 'a participant'}`);
        continue;
      }

      try {
        await sendEmail({
          to: recipientEmail,
          subject: 'Your Secret Santa assignment',
          html: `<h1>Hi ${item.giver.name || 'there'}!</h1><p>Your Secret Santa recipient is <strong>${item.receiver.name || 'someone'}</strong>.</p><p>Happy gifting! 🎁</p>`,
        });
        sentCount += 1;
        setEmailStatus(prev => ({ ...prev, sentCount }));
      } catch (error) {
        errors.push(`${item.giver.name || recipientEmail}: ${error?.message || 'Failed to send email'}`);
      }
    }

    setEmailStatus({
      sending: false,
      sentCount,
      total: assignmentRecipients.length,
      errors,
      success: errors.length === 0 && sentCount > 0,
    });
  };

  if (loading) {
    return (
      <div className="app-shell auth-shell">
        <header className="app-header">
          <div className="header-content">
            <span className="header-icon">🎅</span>
            <h1 className="header-title">Secret Santa</h1>
            <p className="header-subtitle">Gift exchange made magical</p>
          </div>
        </header>
        <main className="app-main auth-main">
          <div className="auth-card">
            <div className="spinner auth-spinner" />
            <p>Signing in...</p>
          </div>
        </main>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <header className="app-header">
          <div className="header-content">
            <span className="header-icon">🎅</span>
            <h1 className="header-title">Secret Santa</h1>
            <p className="header-subtitle">Gift exchange made magical</p>
          </div>
        </header>
        <main className="app-main auth-main">
          <div className="auth-card">
            <h2 className="auth-title">Sign in to continue</h2>
            <p className="auth-copy">
              Sign in with Google to manage your Secret Santa group and privately view your own assignment.
            </p>
            <button className="btn btn-primary auth-btn" onClick={login}>
              Continue with Google
            </button>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <span className="header-icon">🎅</span>
          <h1 className="header-title">Secret Santa</h1>
          <p className="header-subtitle">Gift exchange made magical</p>
          <div className="auth-userbar">
            {user.avatar ? (
              <img className="auth-avatar" src={user.avatar} alt={user.name} />
            ) : (
              <span className="auth-avatar fallback">{user.name?.[0] || 'U'}</span>
            )}
            <div className="auth-userinfo">
              <span className="auth-username">{user.name}</span>
              <span className="auth-useremail">{user.email}</span>
            </div>
            <button className="btn btn-ghost btn-small auth-logout" onClick={logout}>
              Sign Out
            </button>
          </div>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {giftExchangeDate && (
          <section className="countdown-banner" aria-label="Gift exchange countdown">
            <div>
              <p className="countdown-label">Gift exchange date</p>
              <strong className="countdown-date">{giftExchangeDate.toLocaleString()}</strong>
            </div>
            <div className="countdown-time">
              <span className={`countdown-value ${countdown?.isPast ? 'past' : ''}`}>{countdown?.display}</span>
              <span className="countdown-caption">
                {countdown?.isPast ? 'Time to exchange gifts!' : 'Remaining'}
              </span>
            </div>
          </section>
        )}

        {activeTab === 'group' && (
          <GroupSetup participants={participants} />
        )}
        {activeTab === 'assignments' && (
          <Assignments participants={participants} assignments={assignments} currentUser={user} />
        )}
        {activeTab === 'wishlists' && (
          <Wishlists participants={participants} wishlists={wishlists} currentUser={user} />
        )}
        {activeTab === 'budget' && (
          <section className="budget-section">
            <div className="section-header">
              <h2>Budget Tracker</h2>
              <span className="badge">{participantsItems.length} people</span>
            </div>

            <div className="info-banner success budget-summary">
              <p>
                Track whether each gift has been purchased and log the amount spent for every participant.
              </p>
            </div>

            {participantsItems.length === 0 ? (
              <div className="empty-state">
                <span className="empty-icon">🎁</span>
                <h3 className="empty-title">No participants yet</h3>
                <p className="empty-desc">Add your group first, then come back here to track spending.</p>
              </div>
            ) : (
              <ul className="budget-list">
                {participantsItems.map(participant => {
                  const record = budgetByParticipantId[participant.id] || {};
                  const purchased = !!record.purchased;
                  const amountValue = record.amount ?? '';

                  return (
                    <li key={participant.id} className="budget-card">
                      <div className="budget-card-top">
                        <div className="budget-participant">
                          <div className="participant-avatar budget-avatar">
                            {(participant.name || 'U')[0]?.toUpperCase()}
                          </div>
                          <div className="participant-info">
                            <span className="participant-name">{participant.name}</span>
                            <span className="participant-email">
                              {participant.email || 'No email added'}
                            </span>
                          </div>
                        </div>
                        <span className={`budget-status ${purchased ? 'purchased' : 'pending'}`}>
                          {purchased ? 'Purchased' : 'Not purchased'}
                        </span>
                      </div>

                      <div className="budget-controls">
                        <label className="budget-toggle">
                          <input
                            type="checkbox"
                            checked={purchased}
                            onChange={e => upsertBudgetRecord(participant.id, {
                              purchased: e.target.checked,
                              amount: amountValue,
                            })}
                          />
                          <span>Mark as purchased</span>
                        </label>

                        <div className="budget-amount-row">
                          <label htmlFor={`budget-amount-${participant.id}`}>Purchased amount</label>
                          <input
                            id={`budget-amount-${participant.id}`}
                            className="input-field input-sm budget-amount-input"
                            type="number"
                            min="0"
                            step="0.01"
                            placeholder="0.00"
                            value={amountValue}
                            onChange={e => upsertBudgetRecord(participant.id, {
                              purchased,
                              amount: e.target.value,
                            })}
                          />
                        </div>
                      </div>
                    </li>
                  );
                })}
              </ul>
            )}
          </section>
        )}

        {activeTab === 'assignments' && (
          <section className="assignment-email-section">
            <div className="section-header">
              <h2>Assignment Emails</h2>
              <span className="badge">{assignmentRecipients.length} ready</span>
            </div>

            <div className="info-banner success">
              <p>Send each revealed assignment by email. Every participant with an email address will receive their recipient privately.</p>
            </div>

            <div className="assignment-email-actions">
              <button
                className="btn btn-primary"
                onClick={sendAssignmentEmails}
                disabled={emailStatus.sending || assignmentRecipients.length === 0}
              >
                {emailStatus.sending ? 'Sending emails...' : 'Send assignment emails'}
              </button>
              <span className="assignment-email-summary">
                {emailStatus.sentCount}/{emailStatus.total} sent
              </span>
            </div>

            {emailStatus.success && (
              <div className="info-banner success">
                <p>All assignment emails were sent successfully.</p>
              </div>
            )}

            {emailStatus.errors.length > 0 && (
              <div className="info-banner error">
                <p>Some emails could not be sent:</p>
                <ul className="status-list">
                  {emailStatus.errors.map((error, index) => (
                    <li key={`${error}-${index}`}>{error}</li>
                  ))}
                </ul>
              </div>
            )}
          </section>
        )}
      </main>

      <footer className="app-footer">
        <p>🎄 Happy Holidays! 🎄</p>
      </footer>
    </div>
  );
}

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