import { useEffect, useMemo, useRef, useState } from 'react';
import { useCollection, exportCSV, renderChart, share } from '@deplixo/sdk';
import { ProgressBar } from './components/ProgressBar.jsx';
import { Stats } from './components/Stats.jsx';
import { DonationForm } from './components/DonationForm.jsx';
import { DonorWall } from './components/DonorWall.jsx';

const FUNDRAISING_GOAL = 10000;

function App() {
  const { items, loading, add } = useCollection('donations', { personal: true });
  const [showForm, setShowForm] = useState(false);
  const [activeTab, setActiveTab] = useState('overview');
  const [shareOpen, setShareOpen] = useState(false);
  const [copyStatus, setCopyStatus] = useState('idle');

  const totalRaised = items.reduce((sum, item) => sum + (Number(item.value.amount) || 0), 0);
  const percentage = Math.min((totalRaised / FUNDRAISING_GOAL) * 100, 100);

  const campaignUrl = useMemo(() => {
    if (typeof window === 'undefined') return '';
    return window.location.href;
  }, []);

  const shareText = useMemo(() => {
    return `Support our fundraising campaign! Every contribution helps us reach our goal. ${campaignUrl}`;
  }, [campaignUrl]);

  const handleDonate = async (donation) => {
    await add({
      name: donation.name,
      amount: Number(donation.amount),
      message: donation.message || '',
      date: new Date().toISOString()
    });
    setShowForm(false);
  };

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(campaignUrl);
      setCopyStatus('copied');
      setTimeout(() => setCopyStatus('idle'), 2000);
    } catch (error) {
      setCopyStatus('failed');
      setTimeout(() => setCopyStatus('idle'), 2000);
    }
  };

  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'Donation Tracker Campaign',
          text: shareText,
          url: campaignUrl
        });
        setShareOpen(false);
      } catch (error) {
        // User cancelled or share failed; keep menu open for other options.
      }
    }
  };

  const handleExportCSV = () => {
    exportCSV(
      items.map((i) => i.value),
      {
        filename: 'donations.csv',
        columns: ['name', 'amount', 'message', 'date']
      }
    );
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-icon">🔥</div>
        <h1 className="app-title">Donation Tracker</h1>
        <p className="app-subtitle">Every contribution fuels the fire</p>
      </header>

      <main className="app-main">
        <ProgressBar percentage={percentage} totalRaised={totalRaised} goal={FUNDRAISING_GOAL} loading={loading} />
        <Stats totalRaised={totalRaised} goal={FUNDRAISING_GOAL} donorCount={items.length} loading={loading} />

        <div className="campaign-share-card" aria-label="Share this campaign">
          <div className="campaign-share-copy">
            <h2 className="campaign-share-title">Share the campaign</h2>
            <p className="campaign-share-subtitle">Copy the link or use a share option to invite more supporters.</p>
          </div>
          <div className="campaign-share-actions">
            <button className="share-btn share-btn-primary" onClick={() => setShareOpen((open) => !open)}>
              Share / Copy Link
            </button>
            <button className="share-btn share-btn-secondary" onClick={handleCopyLink}>
              {copyStatus === 'copied' ? 'Link Copied' : copyStatus === 'failed' ? 'Copy Failed' : 'Copy Link'}
            </button>
            <button className="share-btn share-btn-secondary" onClick={handleExportCSV} disabled={items.length === 0}>
              Export CSV
            </button>
          </div>
          {shareOpen && (
            <div className="share-options" role="menu" aria-label="Campaign share options">
              {navigator.share && (
                <button className="share-option-btn" onClick={handleNativeShare} role="menuitem">
                  Share on device
                </button>
              )}
              <button
                className="share-option-btn"
                onClick={async () => {
                  await navigator.clipboard.writeText(campaignUrl);
                  setCopyStatus('copied');
                  setTimeout(() => setCopyStatus('idle'), 2000);
                }}
                role="menuitem"
              >
                Copy campaign link
              </button>
              <a
                className="share-option-btn share-option-link"
                href={`mailto:?subject=${encodeURIComponent('Support our fundraising campaign')}&body=${encodeURIComponent(shareText)}`}
              >
                Share by email
              </a>
              <a
                className="share-option-btn share-option-link"
                href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`}
                target="_blank"
                rel="noreferrer"
              >
                Share on X
              </a>
            </div>
          )}
        </div>

        <div className="tab-nav" role="tablist" aria-label="Donation dashboard sections">
          <button
            className={`tab-btn ${activeTab === 'overview' ? 'active' : ''}`}
            onClick={() => setActiveTab('overview')}
            role="tab"
            aria-selected={activeTab === 'overview'}
          >
            Overview
          </button>
          <button
            className={`tab-btn ${activeTab === 'charts' ? 'active' : ''}`}
            onClick={() => setActiveTab('charts')}
            role="tab"
            aria-selected={activeTab === 'charts'}
          >
            Charts
          </button>
          <button
            className={`tab-btn ${activeTab === 'donors' ? 'active' : ''}`}
            onClick={() => setActiveTab('donors')}
            role="tab"
            aria-selected={activeTab === 'donors'}
          >
            Donors
          </button>
        </div>

        <button className="donate-btn" onClick={() => setShowForm(true)}>
          <span className="donate-btn-icon">+</span> Add Donation
        </button>

        {showForm && <DonationForm onSubmit={handleDonate} onClose={() => setShowForm(false)} />}

        {activeTab === 'overview' && (
          <div className="tab-panel">
            <DonorWall items={items} loading={loading} />
          </div>
        )}

        {activeTab === 'charts' && (
          <div className="tab-panel">
            <FundraisingCharts items={items} loading={loading} />
          </div>
        )}

        {activeTab === 'donors' && (
          <div className="tab-panel">
            <DonorWall items={items} loading={loading} />
          </div>
        )}
      </main>

      <footer className="app-footer">
        <p>Thank you for your generosity 🧡</p>
      </footer>
    </div>
  );
}

function FundraisingCharts({ items, loading }) {
  const lineData = [];
  const dailyTotals = {};

  items.forEach((item) => {
    const rawDate = item && item.value ? item.value.date : null;
    const amount = Number(item && item.value ? item.value.amount : 0) || 0;
    const dateKey = rawDate ? new Date(rawDate).toISOString().slice(0, 10) : null;
    if (!dateKey) return;
    dailyTotals[dateKey] = (dailyTotals[dateKey] || 0) + amount;
  });

  Object.keys(dailyTotals)
    .sort()
    .forEach((dateKey) => {
      lineData.push({ label: dateKey, value: dailyTotals[dateKey] });
    });

  const donorTotals = {};
  items.forEach((item) => {
    const donorName = item && item.value ? item.value.name || 'Anonymous' : 'Anonymous';
    const amount = Number(item && item.value ? item.value.amount : 0) || 0;
    donorTotals[donorName] = (donorTotals[donorName] || 0) + amount;
  });

  const topDonors = Object.keys(donorTotals)
    .map((name) => ({ label: name, value: donorTotals[name] }))
    .sort((a, b) => b.value - a.value)
    .slice(0, 5);

  return (
    <div className="charts-grid">
      <section className="chart-card">
        <div className="chart-header">
          <h2 className="chart-title">Donations Over Time</h2>
          <p className="chart-subtitle">Daily totals update automatically as new donations arrive.</p>
        </div>
        {loading ? (
          <div className="chart-loading">Loading chart data...</div>
        ) : lineData.length > 0 ? (
          <SalesChart data={lineData} />
        ) : (
          <div className="chart-empty">No donation history yet.</div>
        )}
      </section>

      <section className="chart-card">
        <div className="chart-header">
          <h2 className="chart-title">Top Donors</h2>
          <p className="chart-subtitle">Ranked by total contribution amount.</p>
        </div>
        {loading ? (
          <div className="chart-loading">Loading chart data...</div>
        ) : topDonors.length > 0 ? (
          <SalesChart data={topDonors} />
        ) : (
          <div className="chart-empty">No donors to display yet.</div>
        )}
      </section>
    </div>
  );
}

function SalesChart({ data }) {
  const canvasRef = useRef(null);
  const chartType = data && data.length > 0 && data[0] && typeof data[0].label === 'string' && data[0].label.length === 10 ? 'line' : 'bar';

  useEffect(() => {
    if (canvasRef.current && data.length > 0) {
      renderChart(canvasRef.current, {
        type: chartType,
        data: {
          labels: data.map((d) => d.label),
          datasets: [{ label: chartType === 'line' ? 'Donations' : 'Top Donors', data: data.map((d) => d.value) }]
        }
      });
    }
  }, [data, chartType]);

  return <canvas ref={canvasRef} />;
}

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