// DEPLOY_CONFIG: {"triggers": [{"name": "cause_reached_goal_notify_creator_and_donors", "on": "cause.goal_reached", "collection": "causes", "actions": [{"type": "email", "to": "{{creator_email}}", "subject": "Your cause has reached its goal!", "body": "Congratulations! Your cause \"{{cause_name}}\" has reached its fundraising goal."}, {"type": "email", "to": "{{donor_emails}}", "subject": "A cause you supported has reached its goal", "body": "Great news! The cause \"{{cause_name}}\" you donated to has reached its fundraising goal."}]}]}
import { useEffect, useMemo, useRef, useState } from 'react';
import { useBroadcast, useCollection, generatePDF, playSound, renderChart } from '@deplixo/sdk';
import { CausesList } from './components/CausesList.jsx';
import { AddCause } from './components/AddCause.jsx';
import { DonationFeed } from './components/DonationFeed.jsx';
import { Stats } from './components/Stats.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('causes');
  const [donationTick, setDonationTick] = useState(0);
  const [lastDonationAt, setLastDonationAt] = useState(0);
  const [feedTick, setFeedTick] = useState(0);
  const soundCooldownRef = useRef(0);
  const chartsVersionRef = useRef(0);
  const chartCanvasRefs = useRef({ overTime: null, topCauses: null });
  const reportRefs = useRef({});

  const { items: causes = [], loading: causesLoading } = useCollection('causes', { personal: true });
  const { items: donations = [], loading: donationsLoading } = useCollection('donations', { personal: true });

  const tabs = useMemo(() => [
    { id: 'causes', label: 'Causes', icon: '💛' },
    { id: 'add', label: 'New Cause', icon: '＋' },
    { id: 'activity', label: 'Activity', icon: '📋' },
    { id: 'stats', label: 'Stats', icon: '📊' }
  ], []);

  const triggerDonationSound = (data = {}) => {
    const now = Date.now();
    if (now - soundCooldownRef.current < 350) return;
    soundCooldownRef.current = now;

    const amount = Number(data.amount ?? data.donationAmount ?? data.value ?? 0);
    if (amount >= 5) {
      playSound('@success');
    } else if (amount >= 3) {
      playSound('@ding');
    } else {
      playSound('@click');
    }

    setDonationTick(t => t + 1);
    setLastDonationAt(now);
    setFeedTick(t => t + 1);
  };

  const normalizeTime = (value) => {
    if (!value) return null;
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? null : date;
  };

  const donationAnalytics = useMemo(() => {
    const byDate = new Map();
    const byCause = new Map();

    donations.forEach((donation) => {
      const amount = Number(donation.amount ?? donation.donationAmount ?? donation.value ?? 0);
      const createdAt = normalizeTime(donation.createdAt ?? donation.created_at ?? donation.timestamp ?? donation.date);
      const causeId = String(donation.causeId ?? donation.cause_id ?? donation.cause ?? 'unknown');
      const causeName = donation.causeName ?? donation.causeTitle ?? donation.title ?? donation.cause ?? `Cause ${causeId}`;

      if (createdAt) {
        const key = createdAt.toISOString().slice(0, 10);
        byDate.set(key, (byDate.get(key) || 0) + amount);
      }

      const existing = byCause.get(causeId) || { label: causeName, value: 0 };
      byCause.set(causeId, { label: existing.label, value: existing.value + amount });
    });

    const timeSeries = Array.from(byDate.entries())
      .sort((a, b) => a[0].localeCompare(b[0]))
      .map(([label, value]) => ({ label, value }));

    const topCauses = Array.from(byCause.values())
      .sort((a, b) => b.value - a.value)
      .slice(0, 6);

    return { timeSeries, topCauses };
  }, [donations]);

  useEffect(() => {
    if (activeTab !== 'stats') return;

    const overTimeCanvas = chartCanvasRefs.current.overTime;
    const topCausesCanvas = chartCanvasRefs.current.topCauses;

    if (overTimeCanvas && donationAnalytics.timeSeries.length > 0) {
      renderChart(overTimeCanvas, {
        type: 'line',
        data: {
          labels: donationAnalytics.timeSeries.map(d => d.label),
          datasets: [{
            label: 'Donations over time',
            data: donationAnalytics.timeSeries.map(d => d.value)
          }]
        }
      });
    }

    if (topCausesCanvas && donationAnalytics.topCauses.length > 0) {
      renderChart(topCausesCanvas, {
        type: 'bar',
        data: {
          labels: donationAnalytics.topCauses.map(d => d.label),
          datasets: [{
            label: 'Top causes',
            data: donationAnalytics.topCauses.map(d => d.value)
          }]
        }
      });
    }

    chartsVersionRef.current += 1;
  }, [activeTab, donationAnalytics]);

  useBroadcast('donation-created', (data) => {
    triggerDonationSound(data);
  });

  useBroadcast('donation-feed-refresh', () => {
    setFeedTick(t => t + 1);
  });

  useEffect(() => {
    const originalWindow = typeof window !== 'undefined' ? window : null;
    if (!originalWindow) return;

    const existing = originalWindow.__MICROGIVE_DONATION_SOUND__;
    originalWindow.__MICROGIVE_DONATION_SOUND__ = (data) => {
      triggerDonationSound(data);
      if (typeof existing === 'function') existing(data);
    };

    return () => {
      if (originalWindow.__MICROGIVE_DONATION_SOUND__ === triggerDonationSound) {
        delete originalWindow.__MICROGIVE_DONATION_SOUND__;
      }
    };
  }, []);

  const buildCauseImpact = (cause) => {
    const causeId = String(cause?.id ?? cause?.causeId ?? cause?.cause_id ?? 'unknown');
    const causeName = cause?.title ?? cause?.name ?? cause?.causeName ?? `Cause ${causeId}`;
    const causeGoal = Number(cause?.goal ?? cause?.goalAmount ?? cause?.fundingGoal ?? 0);
    const causeRaised = Number(cause?.raised ?? cause?.raisedAmount ?? cause?.amountRaised ?? 0);

    const matchingDonations = donations.filter((donation) => {
      const donationCauseId = String(donation.causeId ?? donation.cause_id ?? donation.cause ?? 'unknown');
      const donationCauseName = donation.causeName ?? donation.causeTitle ?? donation.title ?? donation.cause ?? '';
      return donationCauseId === causeId || donationCauseName === causeName;
    });

    const totalDonated = matchingDonations.reduce((sum, donation) => sum + Number(donation.amount ?? donation.donationAmount ?? donation.value ?? 0), 0);
    const donationCount = matchingDonations.length;
    const uniqueDays = new Set();
    matchingDonations.forEach((donation) => {
      const date = normalizeTime(donation.createdAt ?? donation.created_at ?? donation.timestamp ?? donation.date);
      if (date) uniqueDays.add(date.toISOString().slice(0, 10));
    });

    const percentOfGoal = causeGoal > 0 ? Math.min(100, Math.round((causeRaised / causeGoal) * 100)) : 0;
    const funded = causeGoal > 0 ? causeRaised >= causeGoal : false;

    return {
      causeName,
      category: cause?.category ?? cause?.type ?? 'General',
      description: cause?.description ?? 'No description provided.',
      goal: causeGoal,
      raised: causeRaised,
      percentOfGoal,
      funded,
      totalDonated,
      donationCount,
      activeDays: uniqueDays.size,
      lastDonationAt: matchingDonations.length > 0 ? matchingDonations
        .map(d => normalizeTime(d.createdAt ?? d.created_at ?? d.timestamp ?? d.date))
        .filter(Boolean)
        .sort((a, b) => b - a)[0] : null
    };
  };

  const handleExportCausePdf = async (cause) => {
    const reportEl = reportRefs.current[String(cause?.id ?? cause?.causeId ?? cause?.cause_id ?? 'unknown')];
    if (!reportEl) return;
    await generatePDF(reportEl, {
      filename: `${String(cause?.title ?? cause?.name ?? 'impact-report').replace(/[^a-z0-9-_]+/gi, '-').toLowerCase()}.pdf`,
      margin: 10
    });
  };

  const statsView = (
    <Stats
      donations={donations}
      causes={causes}
      loading={donationsLoading || causesLoading}
      donationCharts={
        <div className="charts-row stats-charts-row">
          <div className="chart-container">
            <h3 className="chart-title">Donations over time</h3>
            {donationAnalytics.timeSeries.length > 0 ? (
              <canvas key={`over-time-${chartsVersionRef.current}`} ref={(el) => { chartCanvasRefs.current.overTime = el; }} />
            ) : (
              <div className="chart-empty">No donation history yet.</div>
            )}
          </div>
          <div className="chart-container">
            <h3 className="chart-title">Top causes</h3>
            {donationAnalytics.topCauses.length > 0 ? (
              <canvas key={`top-causes-${chartsVersionRef.current}`} ref={(el) => { chartCanvasRefs.current.topCauses = el; }} />
            ) : (
              <div className="chart-empty">No cause totals yet.</div>
            )}
          </div>
        </div>
      }
    />
  );

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          <h1 className="app-title">
            <span className="title-icon">🌱</span>
            MicroGive
          </h1>
          <p className="app-subtitle">Small donations, big impact</p>
        </div>
      </header>

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

      <main className="app-content">
        {activeTab === 'causes' && (
          <div>
            <CausesList donationTick={donationTick} lastDonationAt={lastDonationAt} />
            <section className="impact-reports-section">
              <div className="section-title-wrap">
                <h2 className="section-title">Impact reports</h2>
                <p className="section-desc">Generate a downloadable PDF summary for any cause.</p>
              </div>

              <div className="impact-report-list">
                {causesLoading ? (
                  <div className="stats-loading">
                    <div className="skeleton-row" />
                    <div className="skeleton-row" />
                  </div>
                ) : causes.length > 0 ? (
                  causes.map((cause) => {
                    const impact = buildCauseImpact(cause);
                    const causeKey = String(cause?.id ?? cause?.causeId ?? cause?.cause_id ?? 'unknown');
                    return (
                      <div key={causeKey} className="impact-report-card">
                        <div className="impact-report-header">
                          <div>
                            <h3 className="impact-report-title">{impact.causeName}</h3>
                            <p className="impact-report-meta">{impact.category} · {impact.donationCount} donations</p>
                          </div>
                          <button className="share-btn" onClick={() => handleExportCausePdf(cause)}>
                            Download PDF
                          </button>
                        </div>

                        <div className="impact-report-stats">
                          <div className="impact-report-stat">
                            <span className="impact-report-number">${impact.totalDonated.toFixed(2)}</span>
                            <span className="impact-report-label">Total donated</span>
                          </div>
                          <div className="impact-report-stat">
                            <span className="impact-report-number">{impact.percentOfGoal}%</span>
                            <span className="impact-report-label">Goal reached</span>
                          </div>
                          <div className="impact-report-stat">
                            <span className="impact-report-number">{impact.activeDays}</span>
                            <span className="impact-report-label">Active days</span>
                          </div>
                        </div>

                        <div className="pdf-report-container" ref={(el) => { reportRefs.current[causeKey] = el; }}>
                          <div className="pdf-report-header">
                            <h1>MicroGive Impact Report</h1>
                            <p>{impact.causeName}</p>
                          </div>
                          <div className="pdf-report-section">
                            <h2>Cause summary</h2>
                            <p>{impact.description}</p>
                          </div>
                          <div className="pdf-report-grid">
                            <div>
                              <strong>Category</strong>
                              <p>{impact.category}</p>
                            </div>
                            <div>
                              <strong>Goal</strong>
                              <p>${impact.goal.toFixed(2)}</p>
                            </div>
                            <div>
                              <strong>Raised</strong>
                              <p>${impact.raised.toFixed(2)}</p>
                            </div>
                            <div>
                              <strong>Donations</strong>
                              <p>{impact.donationCount}</p>
                            </div>
                            <div>
                              <strong>Active days</strong>
                              <p>{impact.activeDays}</p>
                            </div>
                            <div>
                              <strong>Status</strong>
                              <p>{impact.funded ? 'Funded' : 'In progress'}</p>
                            </div>
                          </div>
                          <div className="pdf-report-section">
                            <h2>Impact highlights</h2>
                            <ul>
                              <li>{impact.totalDonated.toFixed(2)} total donated through MicroGive.</li>
                              <li>{impact.percentOfGoal}% of the funding goal reached.</li>
                              <li>{impact.donationCount} micro-donations contributed to this cause.</li>
                            </ul>
                          </div>
                          <div className="pdf-report-footer">
                            <p>Generated by MicroGive</p>
                            <p>{impact.lastDonationAt ? impact.lastDonationAt.toLocaleString() : 'No donations yet'}</p>
                          </div>
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <div className="empty-state">
                    <span className="empty-icon">📄</span>
                    <h3>No causes yet</h3>
                    <p>Create a cause first, then export a PDF impact report from this section.</p>
                  </div>
                )}
              </div>
            </section>
          </div>
        )}
        {activeTab === 'add' && <AddCause onCreated={() => setActiveTab('causes')} />}
        {activeTab === 'activity' && <DonationFeed refreshTick={feedTick} />}
        {activeTab === 'stats' && statsView}
      </main>
    </div>
  );
}

export default App;


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