// DEPLOY_CONFIG: {"triggers": [{"name": "Blocker Posted Alert", "on": "collection.add", "collection": "blockers", "actions": [{"type": "email", "to": "team.lead@company.com", "subject": "New blocker posted", "body": "A new blocker was posted:\n\n{{blocker_text}}"}]}]}
import { useState } from 'react';
import { useAuth, useCollection, useReactions, generatePDF } from '@deplixo/sdk';
import { Header } from './components/Header.jsx';
import { StandupBoard } from './components/StandupBoard.jsx';
import { StandupTimeline } from './components/StandupTimeline.jsx';

function ReactionBar({ targetId }) {
  const { counts, toggle, loading } = useReactions(targetId);
  const emojis = ['👍', '❤️', '🎉', '🔥', '👀'];

  if (loading) return null;

  return (
    <div className="reaction-bar">
      {emojis.map(emoji => (
        <button
          key={emoji}
          className="reaction-btn"
          onClick={() => toggle(emoji)}
          type="button"
          aria-label={`React with ${emoji}`}
        >
          {emoji} {counts[emoji] || ''}
        </button>
      ))}
    </div>
  );
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('board');

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

  if (!user) {
    return (
      <div className="login-screen">
        <div className="login-card">
          <div className="login-icon">📋</div>
          <h1 className="login-title">Daily Standup Board</h1>
          <p className="login-subtitle">Log your progress, share blockers, stay aligned as a team.</p>
          <button className="login-btn" onClick={login}>Sign In to Continue</button>
        </div>
      </div>
    );
  }

  // PROGRESS:sc_001:complete:Setting up authentication and navigation

  return (
    <div className="app-shell">
      <Header user={user} logout={logout} />
      <nav className="tab-bar">
        <button
          className={`tab-btn ${activeTab === 'board' ? 'active' : ''}`}
          onClick={() => setActiveTab('board')}
        >
          ✏️ My Standup
        </button>
        <button
          className={`tab-btn ${activeTab === 'timeline' ? 'active' : ''}`}
          onClick={() => setActiveTab('timeline')}
        >
          📅 Team Timeline
        </button>
      </nav>
      <main className="main-content">
        {activeTab === 'board' && (
          <div className="board-container">
            <StandupBoard user={user} />
            <WeeklySummaryPDFExport />
            <div className="reaction-cta-card">
              <div className="reaction-cta-title">Quick reactions</div>
              <p className="reaction-cta-text">Teammates can react to any standup entry with emoji feedback.</p>
            </div>
          </div>
        )}
        {activeTab === 'timeline' && <StandupTimeline currentUser={user} ReactionBar={ReactionBar} />}
      </main>
    </div>
  );
}


function WeeklySummaryPDFExport() {
  const summaryRef = useState(null)[0];
  const { items, loading } = useCollection('standups');
  const [exporting, setExporting] = useState(false);

  const groupedSummary = items.reduce((acc, item) => {
    if (!item) return acc;
    const author = item.authorName || item.userName || item.name || 'Team member';
    const dateValue = item.createdAt || item.date || item.updatedAt;
    const dateKey = dateValue ? new Date(dateValue).toLocaleDateString() : 'Unknown date';

    if (!acc[dateKey]) acc[dateKey] = [];
    acc[dateKey].push({
      author,
      yesterday: item.yesterday || item.progress || item.done || '',
      today: item.today || item.plans || item.next || '',
      blockers: item.blockers || item.blocker || ''
    });
    return acc;
  }, {});

  const handleExport = async () => {
    if (!summaryRef || exporting) return;
    setExporting(true);
    try {
      await generatePDF(summaryRef, {
        filename: 'weekly-standup-summary.pdf',
        margin: 10
      });
    } finally {
      setExporting(false);
    }
  };

  const summaryDates = Object.keys(groupedSummary).sort((a, b) => new Date(b) - new Date(a));

  return (
    <section className="weekly-summary-export-card">
      <div className="weekly-summary-export-header">
        <div>
          <h2 className="weekly-summary-title">Weekly standup summary</h2>
          <p className="weekly-summary-subtitle">
            Download a PDF of the week’s updates for sharing or archiving.
          </p>
        </div>
        <button
          className="weekly-summary-export-btn"
          onClick={handleExport}
          type="button"
          disabled={loading || exporting}
        >
          {exporting ? 'Preparing PDF…' : 'Download PDF'}
        </button>
      </div>

      <div className="weekly-summary-preview-note">
        {loading
          ? 'Loading weekly summary…'
          : `${summaryDates.length} day${summaryDates.length === 1 ? '' : 's'} included in the export.`}
      </div>

      <div ref={summaryRef} className="weekly-summary-pdf-content">
        <div className="weekly-summary-pdf-header">
          <h1>Weekly Standup Summary</h1>
          <p>Generated on {new Date().toLocaleDateString()}</p>
        </div>

        {summaryDates.length === 0 ? (
          <div className="weekly-summary-empty">No standup entries were found for this week.</div>
        ) : (
          summaryDates.map((date) => (
            <div key={date} className="weekly-summary-day-section">
              <h2>{date}</h2>
              {groupedSummary[date].map((entry, index) => (
                <div key={`${date}-${index}`} className="weekly-summary-entry">
                  <h3>{entry.author}</h3>
                  <p>
                    <strong>Yesterday:</strong> {entry.yesterday || '—'}
                  </p>
                  <p>
                    <strong>Today:</strong> {entry.today || '—'}
                  </p>
                  <p>
                    <strong>Blockers:</strong> {entry.blockers || 'None'}
                  </p>
                </div>
              ))}
            </div>
          ))
        )}
      </div>
    </section>
  );
}

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