/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * ChallengeTracker — Daily challenge grid with check-off [components/ChallengeTracker.jsx]
 * Leaderboard — Group leaderboard of completion percentages [components/Leaderboard.jsx]
 * ChallengeSetup — Admin view to define daily challenges [components/ChallengeSetup.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "30_day_completion_certificate", "on": "collection.update", "collection": "users", "actions": [{"type": "event", "event_type": "group.notify", "payload": {"message": "A user has completed all 30 days of the challenge."}}, {"type": "email", "to": "{{user.email}}", "subject": "Congratulations on completing all 30 days!", "body": "Attached is your PDF certificate of completion."}]}]}

import { useState, useEffect, useMemo, useRef } from 'react';
import { useAuth, usePresence, useCollection, useAI, sendEmail, generatePDF } from '@deplixo/sdk';
import { ChallengeTracker } from './components/ChallengeTracker.jsx';
import { Leaderboard } from './components/Leaderboard.jsx';
import { ChallengeSetup } from './components/ChallengeSetup.jsx';

function App() {
  const [tab, setTab] = useState('challenge');
  const [certificateStatus, setCertificateStatus] = useState('idle');
  const [certificateMessage, setCertificateMessage] = useState('');
  const certificateRef = useRef(null);
  const { user, loading, logout } = useAuth();
  const { items: challengeItems, add: addChallenge, update: updateChallenge, loading: challengesLoading } = useCollection('daily_challenges', { personal: false });
  const { items: settingsItems, add: addSetting, update: updateSetting, loading: settingsLoading } = useCollection('challenge_settings', { personal: false });
  const { items: completionItems } = useCollection('challenge_completions', { personal: true });
  const { generate: generateAI } = useAI();

  const selectedLevel = settingsItems?.[0]?.selectedLevel || 'intermediate';
  const challengePack = challengeItems || [];
  const completions = completionItems || [];
  const completedCount = completions.filter((item) => item.completed).length;
  const completionPercent = Math.round((completedCount / 30) * 100);
  const isComplete = completedCount >= 30;
  const hasChallenges = challengePack.length > 0;

  useEffect(() => {
    if (!user) return;
    if (!settingsItems || settingsItems.length === 0) {
      addSetting({
        selectedLevel: 'intermediate',
        updatedBy: user.id,
        updatedByName: user.name,
        updatedAt: Date.now(),
      });
    }
  }, [user, settingsItems, addSetting]);

  useEffect(() => {
    if (!user || !hasChallenges) return;
    const needsLevelSync = challengePack.some((item) => !item.fitnessLevel || !item.variation || !item.aiGenerated);
    if (!needsLevelSync) return;
    challengePack.forEach((item) => {
      if (!item.fitnessLevel || !item.variation || !item.aiGenerated) {
        updateChallenge(item.id, {
          fitnessLevel: item.fitnessLevel || selectedLevel,
          variation: item.variation || 'intermediate',
          aiGenerated: true,
        });
      }
    });
  }, [user, hasChallenges, challengePack, selectedLevel, updateChallenge]);

  const ensureDailyChallenges = async (level) => {
    if (hasChallenges) return;
    const prompt = `Create 30 daily fitness challenge entries for a 30-day group challenge. Return a concise JSON array. Each item must include day (1-30), title, emoji, category, and three personalized variations for beginner, intermediate, and advanced fitness levels. Make the challenges safe, motivating, and varied. Focus on bodyweight, mobility, core, cardio, strength, and recovery.`;
    const result = await generateAI(prompt);
    let parsed = [];
    try {
      const jsonMatch = String(result || '').match(/\[[\s\S]*\]/);
      parsed = JSON.parse(jsonMatch ? jsonMatch[0] : result);
    } catch (e) {
      parsed = [];
    }

    const fallback = Array.from({ length: 30 }, (_, index) => ({
      day: index + 1,
      title: `Daily challenge ${index + 1}`,
      emoji: '🔥',
      category: 'core',
      beginner: '10 min easy movement',
      intermediate: '15 min mixed workout',
      advanced: '25 min performance workout',
    }));

    const normalized = (Array.isArray(parsed) && parsed.length ? parsed : fallback).slice(0, 30).map((item, index) => ({
      day: item.day || index + 1,
      title: item.title || `Daily challenge ${index + 1}`,
      emoji: item.emoji || '🔥',
      category: item.category || 'core',
      fitnessLevel: level,
      beginner: item.beginner || item.variations?.beginner || '10 min easy movement',
      intermediate: item.intermediate || item.variations?.intermediate || '15 min mixed workout',
      advanced: item.advanced || item.variations?.advanced || '25 min performance workout',
      variation: level,
      aiGenerated: true,
      updatedAt: Date.now(),
    }));

    for (const challenge of normalized) {
      await addChallenge(challenge);
    }
  };

  useEffect(() => {
    if (!user || challengesLoading || settingsLoading) return;
    if (!hasChallenges) {
      ensureDailyChallenges(selectedLevel);
    }
  }, [user, challengesLoading, settingsLoading, hasChallenges, selectedLevel]);

  const buildCertificateHTML = () => `
    <div style="width: 100%; padding: 48px; box-sizing: border-box; font-family: Arial, sans-serif; color: #1D3557; background: linear-gradient(135deg, #F8F9FA, #FFFFFF); border: 10px solid #E63946; border-radius: 24px;">
      <div style="text-align: center; border: 2px solid #F77F00; border-radius: 18px; padding: 36px 28px;">
        <div style="font-size: 56px; margin-bottom: 16px;">🏅</div>
        <div style="font-size: 18px; letter-spacing: 3px; text-transform: uppercase; color: #E63946; font-weight: 700; margin-bottom: 8px;">Certificate of Completion</div>
        <h1 style="font-family: Georgia, serif; font-size: 42px; margin: 8px 0 18px; color: #1D3557;">30-Day Challenge</h1>
        <p style="font-size: 18px; line-height: 1.6; margin: 0 auto 22px; max-width: 720px; color: #212529;">
          This certifies that <strong>${user?.name || 'Participant'}</strong> has successfully completed all <strong>30 days</strong> of the fitness challenge.
        </p>
        <div style="display: inline-block; padding: 10px 18px; border-radius: 999px; background: #D8F3DC; color: #2D6A4F; font-weight: 700; margin-bottom: 26px;">
          Level completed: ${selectedLevel}
        </div>
        <div style="display: flex; justify-content: space-between; gap: 24px; margin-top: 28px; text-align: left;">
          <div style="flex: 1; border-top: 1px solid #ADB5BD; padding-top: 10px; font-size: 14px; color: #6C757D;">
            Participant
          </div>
          <div style="flex: 1; border-top: 1px solid #ADB5BD; padding-top: 10px; font-size: 14px; color: #6C757D; text-align: right;">
            Date: ${new Date().toLocaleDateString()}
          </div>
        </div>
      </div>
    </div>
  `;

  const generateCertificate = async () => {
    if (!certificateRef.current || !isComplete) return null;
    const filename = `30-day-challenge-certificate-${(user?.name || 'participant').toLowerCase().replace(/[^a-z0-9]+/g, '-')}.pdf`;
    await generatePDF(certificateRef.current, { filename, margin: 10 });
    return filename;
  };

  const handleCertificateDownload = async () => {
    try {
      setCertificateStatus('loading');
      setCertificateMessage('Generating your certificate...');
      await generateCertificate();
      setCertificateStatus('success');
      setCertificateMessage('Certificate downloaded successfully.');
    } catch (error) {
      setCertificateStatus('error');
      setCertificateMessage('Could not generate the certificate right now.');
    }
  };

  const handleEmailCertificate = async () => {
    try {
      setCertificateStatus('loading');
      setCertificateMessage('Generating certificate and preparing email...');
      const filename = await generateCertificate();
      await sendEmail({
        to: user.email,
        subject: 'Congratulations on completing all 30 days!',
        html: `<h1>Congratulations, ${user?.name || 'Participant'}!</h1><p>Attached is your PDF certificate of completion: <strong>${filename || '30-day-challenge-certificate.pdf'}</strong>.</p>`,
        attachments: certificateRef.current ? [{ name: filename || 'certificate.pdf', node: certificateRef.current }] : undefined,
      });
      setCertificateStatus('success');
      setCertificateMessage('Certificate emailed successfully.');
    } catch (error) {
      setCertificateStatus('error');
      setCertificateMessage('Could not email the certificate right now.');
    }
  };

  // Real-time presence for authenticated users only.
  // This broadcasts the current participant identity so today’s challenge can show active users.
  const presencePayload = user
    ? {
        id: user.id,
        name: user.name,
        email: user.email,
        avatar: user.avatar,
        tab,
        activity: 'challenge',
        fitnessLevel: selectedLevel,
        updatedAt: Date.now(),
      }
    : null;

  usePresence(presencePayload);

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

  if (!user) {
    return (
      <div className="loading-screen auth-gate">
        <div className="auth-card">
          <div className="brand auth-brand">
            <span className="brand-icon">🔥</span>
            <div>
              <h1 className="brand-title">30-Day Challenge</h1>
              <p className="brand-sub">Sign in with Google to join the group</p>
            </div>
          </div>
          <p className="auth-copy">
            Your completed days, presence, reactions, and fitness level are tied to your signed-in participant identity.
          </p>
          <button className="btn-primary auth-login-btn" onClick={() => {}}>
            Continue with Google
          </button>
          <p className="auth-note">You'll be redirected to Deplixo login for Google OAuth sign-in.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="brand">
            <span className="brand-icon">🔥</span>
            <div>
              <h1 className="brand-title">30-Day Challenge</h1>
              <p className="brand-sub">Welcome, {user.name} • Level: {selectedLevel}</p>
            </div>
          </div>
          <button className="btn-secondary btn-sm sign-out-btn" onClick={logout}>
            Sign Out
          </button>
        </div>
      </header>

      <nav className="tab-nav">
        <button className={`tab-btn ${tab === 'challenge' ? 'active' : ''}`} onClick={() => setTab('challenge')}>
          <span className="tab-icon">📋</span> My Progress
        </button>
        <button className={`tab-btn ${tab === 'leaderboard' ? 'active' : ''}`} onClick={() => setTab('leaderboard')}>
          <span className="tab-icon">🏆</span> Leaderboard
        </button>
        <button className={`tab-btn ${tab === 'setup' ? 'active' : ''}`} onClick={() => setTab('setup')}>
          <span className="tab-icon">⚙️</span> Challenges
        </button>
      </nav>

      <main className="main-content">
        {tab === 'challenge' && (
          <>
            <div className="certificate-panel">
              <div className="certificate-panel-header">
                <div>
                  <h2>Completion Certificate</h2>
                  <p>Download and email your completion certificate once you finish all 30 days.</p>
                </div>
                <span className={`certificate-status ${certificateStatus}`}>{isComplete ? 'Complete' : `${completionPercent}% done`}</span>
              </div>
              <div className="certificate-actions">
                <button className="btn-primary" onClick={handleCertificateDownload} disabled={!isComplete || certificateStatus === 'loading'}>
                  Download PDF Certificate
                </button>
                <button className="btn-secondary" onClick={handleEmailCertificate} disabled={!isComplete || certificateStatus === 'loading'}>
                  Email Certificate
                </button>
              </div>
              {certificateMessage ? <p className="certificate-message">{certificateMessage}</p> : null}
            </div>
            <div ref={certificateRef} className="certificate-print">
              {buildCertificateHTML()}
            </div>
            <ChallengeTracker userId={user.id} userName={user.name} fitnessLevel={selectedLevel} />
          </>
        )}
        {tab === 'leaderboard' && <Leaderboard currentUserId={user.id} />}
        {tab === 'setup' && (
          <ChallengeSetup
            fitnessLevel={selectedLevel}
            onFitnessLevelChange={async (nextLevel) => {
              const current = settingsItems?.[0];
              if (current) {
                await updateSetting(current.id, { selectedLevel: nextLevel, updatedBy: user.id, updatedByName: user.name, updatedAt: Date.now() });
              } else {
                await addSetting({ selectedLevel: nextLevel, updatedBy: user.id, updatedByName: user.name, updatedAt: Date.now() });
              }
              challengePack.forEach((item) => {
                if (item.id) {
                  updateChallenge(item.id, {
                    fitnessLevel: nextLevel,
                    variation: nextLevel,
                    updatedAt: Date.now(),
                  });
                }
              });
            }}
          />
        )}
      </main>
    </div>
  );
}

// PROGRESS:sc_001:complete:Setting up the fitness challenge shell

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