import React, { useState, useEffect } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("donpay-campaigns") const [activeView, setActiveView] = useState("list") const [selectedCampaignId, setSelectedCampaignId] = useState(null) const { docs: campaigns } = useLiveQuery("type", { key: "campaign", descending: true }) const createNewCampaign = () => { const newId = `campaign-${Date.now()}` setSelectedCampaignId(newId) setActiveView("edit") } const viewCampaign = (id) => { setSelectedCampaignId(id) setActiveView("view") } const editCampaign = (id) => { setSelectedCampaignId(id) setActiveView("edit") } return (

💝

DonPay

{activeView === "list" && ( )} {activeView === "edit" && ( setActiveView("list")} onSave={() => setActiveView("list")} /> )} {activeView === "view" && selectedCampaignId && ( editCampaign(selectedCampaignId)} onBack={() => setActiveView("list")} /> )}

) } function CampaignList({ campaigns, onView, onEdit }) { if (campaigns.length === 0) { return (

🎯

No Campaigns Yet

Create your first donation campaign to get started!

) } return (

{campaigns.map(campaign => ( ))}

) } function CampaignCard({ campaign, onView, onEdit }) { const progress = campaign.goalAmount ? (campaign.raisedAmount || 0) / campaign.goalAmount * 100 : 0 const cappedProgress = Math.min(progress, 100) const [logoUrl, setLogoUrl] = useState(null) useEffect(() => { async function loadLogo() { if (campaign._files && campaign._files.logo) { try { const file = await campaign._files.logo.file() const url = URL.createObjectURL(file) setLogoUrl(url) return () => URL.revokeObjectURL(url) } catch (e) { console.error("Error loading logo:", e) } } } loadLogo() }, [campaign]) return (

{logoUrl && (

)}

{campaign.campaignName || "Untitled Campaign"}

{campaign.causeDescription || "No description"}

${(campaign.raisedAmount || 0).toFixed(2)} Goal: ${(campaign.goalAmount || 0).toFixed(2)}

{cappedProgress.toFixed(0)}% Funded

) } function CampaignEditor({ campaignId, database, onCancel, onSave }) { const { useDocument } = useFireproof("donpay-campaigns") const { doc, merge, save } = useDocument({ _id: campaignId, type: "campaign", campaignName: "", causeDescription: "", goalAmount: 1000, raisedAmount: 0, minimumDonation: 1.00, processingFeePercent: 1.5, _files: {}, themeColor: "#0f172a", paymentMethods: { applePay: true, googlePay: true, coinbase: false, paypal: true, creditCard: true }, notifications: { ownerAlerts: true, donorReceipts: true, reportingEnabled: true }, socialMedia: { enabled: false, autoPost: false, platforms: { facebook: false, twitter: false, linkedin: false, instagram: false }, customMessage: "" }, createdAt: Date.now(), updatedAt: Date.now() }) const [generatingDescription, setGeneratingDescription] = useState(false) const [descriptionPrompt, setDescriptionPrompt] = useState("") const [logoPreview, setLogoPreview] = useState(null) const [generatingSocialPost, setGeneratingSocialPost] = useState(false) useEffect(() => { async function loadLogoPreview() { if (doc._files && doc._files.logo) { try { const file = await doc._files.logo.file() const url = URL.createObjectURL(file) setLogoPreview(url) return () => URL.revokeObjectURL(url) } catch (e) { console.error("Error loading logo preview:", e) } } } loadLogoPreview() }, [doc._files]) const handleLogoUpload = (e) => { const file = e.target.files[0] if (file) { merge({ _files: { ...doc._files, logo: file } }) } } const generateDescription = async () => { if (!descriptionPrompt.trim()) return setGeneratingDescription(true) try { const result = await callAI( `Create an empathetic and compelling donation campaign description based on this cause: "${descriptionPrompt}". Make it heartfelt, clear about the impact, and motivating. Keep it under 200 words.`, { model: "openai/gpt-4o-mini" } ) merge({ causeDescription: result }) setDescriptionPrompt("") } catch (error) { console.error("Error generating description:", error) } finally { setGeneratingDescription(false) } } const generateSocialPost = async () => { if (!doc.campaignName || !doc.causeDescription) return setGeneratingSocialPost(true) try { const result = await callAI( `Create a compelling social media post for this fundraising campaign: Campaign: ${doc.campaignName} Description: ${doc.causeDescription} Goal: $${doc.goalAmount} Create an engaging post that: - Captures attention in the first line - Explains the cause briefly - Includes a clear call-to-action - Uses emojis appropriately - Is under 280 characters for Twitter compatibility - Ends with relevant hashtags Make it emotional, urgent, and shareable.`, { model: "openai/gpt-4o-mini" } ) merge({ socialMedia: { ...doc.socialMedia, customMessage: result } }) } catch (error) { console.error("Error generating social post:", error) } finally { setGeneratingSocialPost(false) } } const handleSave = async () => { await save() onSave() } return (

{doc.campaignName ? "Edit Campaign" : "Create New Campaign"}

Campaign Name merge({ campaignName: e.target.value })} className="w-full px-4 py-3 border-[4px] border-[#0f172a] font-bold focus:outline-none" placeholder="Enter campaign name" />

Campaign Logo

{logoPreview ? (

Click to change logo

) : (

📸

Click to upload logo

PNG, JPG, or GIF (max 5MB)

)}

AI-Assisted Cause Description

Describe your cause briefly

setDescriptionPrompt(e.target.value)}
                className="w-full px-4 py-3 border-[4px] border-[#0f172a] font-medium focus:outline-none min-h-[80px]"
                placeholder="e.g., Building a community center for underprivileged youth"
              />
            </div>
            <button
              onClick={generateDescription}
              disabled={generatingDescription || !descriptionPrompt.trim()}
              className="px-6 py-3 bg-[#0f172a] text-[#ffffff] font-bold border-[4px] border-[#0f172a] disabled:opacity-50 disabled:cursor-not-allowed transition-transform"
              style={{ boxShadow: '6px 6px 0 #64748b' }}
            >
              {generatingDescription ? "Generating..." : "✨ Generate Description with AI"}
            </button>
          </div>
        </div>

<div>
          <label className="block text-sm font-bold text-[#0f172a] mb-2">Cause Description</label>
          <textarea
            value={doc.causeDescription}
            onChange={(e) => merge({ causeDescription: e.target.value })}
            className="w-full px-4 py-3 border-[4px] border-[#0f172a] font-medium focus:outline-none min-h-[120px]"
            placeholder="Describe your cause with empathy and clarity..."
          />
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-bold text-[#0f172a] mb-2">Goal Amount ($)</label>
            <input
              type="number"
              min="1"
              step="0.01"
              value={doc.goalAmount}
              onChange={(e) => merge({ goalAmount: parseFloat(e.target.value) || 0 })}
              className="w-full px-4 py-3 border-[4px] border-[#0f172a] font-bold focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-bold text-[#0f172a] mb-2">Minimum Donation ($)</label>
            <input
              type="number"
              min="1.00"
              step="0.01"
              value={doc.minimumDonation}
              onChange={(e) => merge({ minimumDonation: parseFloat(e.target.value) || 1.00 })}
              className="w-full px-4 py-3 border-[4px] border-[#0f172a] font-bold focus:outline-none"
            />
          </div>
        </div>

<div className="bg-[#cbd5e1] border-[4px] border-[#0f172a] p-6">
          <div className="flex items-start gap-3">
            <div className="text-2xl">ℹ️</div>
            <div>
              <h4 className="font-bold text-[#0f172a] mb-1">Low Processing Fee</h4>
              <p className="text-sm text-[#0f172a] font-medium">
                DonPay charges only <strong>1.5% processing fee</strong> - significantly lower than industry standard rates of 2.9% - 5%. 
                This means more of every donation goes directly to your cause.
              </p>
            </div>
          </div>
        </div>

<div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-6">
          <h3 className="text-lg font-bold text-[#0f172a] mb-4">Payment Methods</h3>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {[
              { key: "applePay", label: "Apple Pay", icon: "🍎" },
              { key: "googlePay", label: "Google Pay", icon: "🔷" },
              { key: "paypal", label: "PayPal", icon: "💙" },
              { key: "creditCard", label: "Credit Card", icon: "💳" },
              { key: "coinbase", label: "Coinbase", icon: "🪙" }
            ].map(method => (
              <label key={method.key} className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={doc.paymentMethods[method.key]}
                  onChange={(e) => merge({ 
                    paymentMethods: { ...doc.paymentMethods, [method.key]: e.target.checked }
                  })}
                  className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
                />
                <span className="font-bold text-[#0f172a] text-sm">{method.icon} {method.label}</span>
              </label>
            ))}
          </div>
        </div>

<div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-bold text-[#0f172a]">Social Media Auto-Post</h3>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={doc.socialMedia.enabled}
                onChange={(e) => merge({ 
                  socialMedia: { ...doc.socialMedia, enabled: e.target.checked }
                })}
                className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
              />
              <span className="font-bold text-[#0f172a]">Enable</span>
            </label>
          </div>

{doc.socialMedia.enabled && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-3">
                {[
                  { key: "facebook", label: "Facebook", icon: "📘" },
                  { key: "twitter", label: "Twitter", icon: "🐦" },
                  { key: "linkedin", label: "LinkedIn", icon: "💼" },
                  { key: "instagram", label: "Instagram", icon: "📷" }
                ].map(platform => (
                  <label key={platform.key} className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={doc.socialMedia.platforms[platform.key]}
                      onChange={(e) => merge({ 
                        socialMedia: { 
                          ...doc.socialMedia, 
                          platforms: { 
                            ...doc.socialMedia.platforms, 
                            [platform.key]: e.target.checked 
                          }
                        }
                      })}
                      className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
                    />
                    <span className="font-bold text-[#0f172a] text-sm">{platform.icon} {platform.label}</span>
                  </label>
                ))}
              </div>

<div>
                <div className="flex items-center justify-between mb-2">
                  <label className="block text-sm font-bold text-[#0f172a]">Social Media Message</label>
                  <button
                    onClick={generateSocialPost}
                    disabled={generatingSocialPost || !doc.campaignName || !doc.causeDescription}
                    className="px-4 py-2 bg-[#0f172a] text-[#ffffff] text-xs font-bold border-[4px] border-[#0f172a] disabled:opacity-50 disabled:cursor-not-allowed"
                    style={{ boxShadow: '4px 4px 0 #64748b' }}
                  >
                    {generatingSocialPost ? "Generating..." : "✨ AI Generate"}
                  </button>
                </div>
                <textarea
                  value={doc.socialMedia.customMessage}
                  onChange={(e) => merge({ 
                    socialMedia: { ...doc.socialMedia, customMessage: e.target.value }
                  })}
                  className="w-full px-4 py-3 border-[4px] border-[#0f172a] font-medium focus:outline-none min-h-[100px]"
                  placeholder="Your campaign will be automatically shared to selected platforms..."
                />
                <p className="text-xs text-[#64748b] font-bold mt-1">
                  Characters: {doc.socialMedia.customMessage.length} / 280 (Twitter limit)
                </p>
              </div>

<label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={doc.socialMedia.autoPost}
                  onChange={(e) => merge({ 
                    socialMedia: { ...doc.socialMedia, autoPost: e.target.checked }
                  })}
                  className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
                />
                <span className="font-bold text-[#0f172a]">📢 Auto-post when campaign launches</span>
              </label>
            </div>
          )}
        </div>

<div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-6">
          <h3 className="text-lg font-bold text-[#0f172a] mb-4">Notifications & Reporting</h3>
          <div className="space-y-3">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={doc.notifications.ownerAlerts}
                onChange={(e) => merge({ 
                  notifications: { ...doc.notifications, ownerAlerts: e.target.checked }
                })}
                className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
              />
              <span className="font-bold text-[#0f172a]">🔔 Owner transaction alerts</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={doc.notifications.donorReceipts}
                onChange={(e) => merge({ 
                  notifications: { ...doc.notifications, donorReceipts: e.target.checked }
                })}
                className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
              />
              <span className="font-bold text-[#0f172a]">📧 Send donor receipts</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={doc.notifications.reportingEnabled}
                onChange={(e) => merge({ 
                  notifications: { ...doc.notifications, reportingEnabled: e.target.checked }
                })}
                className="w-6 h-6 border-[4px] border-[#0f172a] accent-[#0f172a]"
              />
              <span className="font-bold text-[#0f172a]">📊 Enable detailed reporting</span>
            </label>
          </div>
        </div>

<div className="flex gap-4 pt-4">
          <button
            onClick={onCancel}
            className="px-6 py-3 bg-[#ffffff] text-[#0f172a] font-bold border-[4px] border-[#0f172a] transition-transform"
            style={{ boxShadow: '6px 6px 0 #64748b' }}
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={!doc.campaignName || !doc.causeDescription}
            className="flex-1 px-6 py-3 bg-[#0f172a] text-[#ffffff] font-bold border-[4px] border-[#0f172a] disabled:opacity-50 disabled:cursor-not-allowed transition-transform"
            style={{ boxShadow: '6px 6px 0 #64748b' }}
          >
            Save Campaign
          </button>
        </div>
      </div>
    </div>
  )
}

function CampaignView({ campaignId, database, onEdit, onBack }) {
  const { useLiveQuery } = useFireproof("donpay-campaigns")
  const [campaign, setCampaign] = useState(null)
  const [activeTab, setActiveTab] = useState("overview")
  const [shareMethod, setShareMethod] = useState(null)
  const [logoUrl, setLogoUrl] = useState(null)
  const [showSocialPreview, setShowSocialPreview] = useState(false)

useEffect(() => {
    database.get(campaignId).then(setCampaign).catch(() => setCampaign(null))
  }, [campaignId, database])

useEffect(() => {
    async function loadLogo() {
      if (campaign && campaign._files && campaign._files.logo) {
        try {
          const file = await campaign._files.logo.file()
          const url = URL.createObjectURL(file)
          setLogoUrl(url)
          return () => URL.revokeObjectURL(url)
        } catch (e) {
          console.error("Error loading logo:", e)
        }
      }
    }
    loadLogo()
  }, [campaign])

const { docs: donations } = useLiveQuery(
    (doc) => doc.type === "donation" && doc.campaignId === campaignId ? doc.createdAt : null,
    { descending: true }
  )

const { docs: engagements } = useLiveQuery(
    (doc) => doc.type === "engagement" && doc.campaignId === campaignId ? doc.timestamp : null,
    { descending: true }
  )

const { docs: socialPosts } = useLiveQuery(
    (doc) => doc.type === "socialPost" && doc.campaignId === campaignId ? doc.postedAt : null,
    { descending: true }
  )

if (!campaign) {
    return <div className="text-center py-12 text-[#64748b] font-bold">Loading...</div>
  }

const progress = campaign.goalAmount ? (campaign.raisedAmount || 0) / campaign.goalAmount * 100 : 0
  const cappedProgress = Math.min(progress, 100)

const donationLink = `https://donpay.com/${campaignId}`

const completedDonations = donations.filter(d => d.status === "completed")
  const incompleteDonations = donations.filter(d => d.status === "incomplete")
  
  const donorFrequency = {}
  completedDonations.forEach(d => {
    donorFrequency[d.donorEmail] = (donorFrequency[d.donorEmail] || 0) + 1
  })
  const frequentDonors = Object.entries(donorFrequency)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 5)

const topDonors = [...completedDonations]
    .sort((a, b) => b.amount - a.amount)
    .slice(0, 5)

const processingFee = campaign.processingFeePercent || 1.5

const handleSocialPost = async (platform) => {
    const postDoc = {
      type: "socialPost",
      campaignId: campaign._id,
      platform: platform,
      message: campaign.socialMedia?.customMessage || `Check out my fundraising campaign: ${campaign.campaignName}! ${donationLink}`,
      postedAt: Date.now(),
      status: "posted"
    }
    await database.put(postDoc)
    alert(`Posted to ${platform}! (Demo mode - in production this would actually post to the platform)`)
  }

return (
    <div className="space-y-6">
      <div className="bg-[#ffffff] border-[6px] border-[#0f172a] overflow-hidden" style={{ boxShadow: '12px 12px 0 #64748b' }}>
        {logoUrl && (
          <div className="h-48 bg-[#cbd5e1] border-b-[6px] border-[#0f172a] flex items-center justify-center">
            <img src={logoUrl} alt="Campaign logo" className="max-h-full max-w-full object-contain" />
          </div>
        )}
        <div className="p-8">
          <div className="flex flex-col sm:flex-row justify-between items-start gap-4 mb-6">
            <div>
              <h2 className="text-3xl font-black text-[#0f172a] mb-2">{campaign.campaignName}</h2>
              <p className="text-[#64748b] font-medium">{campaign.causeDescription}</p>
            </div>
            <button
              onClick={onEdit}
              className="px-6 py-3 bg-[#0f172a] text-[#ffffff] font-bold border-[4px] border-[#0f172a] transition-transform whitespace-nowrap"
              style={{ boxShadow: '6px 6px 0 #64748b' }}
            >
              Edit Campaign
            </button>
          </div>

<div className="mb-6">
            <div className="flex justify-between text-lg font-bold mb-3">
              <span className="text-[#0f172a]">${(campaign.raisedAmount || 0).toFixed(2)} raised</span>
              <span className="text-[#64748b]">Goal: ${campaign.goalAmount.toFixed(2)}</span>
            </div>
            <div className="h-12 bg-[#cbd5e1] border-[6px] border-[#0f172a] relative overflow-hidden">
              <div 
                className="h-full bg-[#0f172a] transition-all duration-500 flex items-center justify-center"
                style={{ width: `${cappedProgress}%` }}
              >
                {cappedProgress > 20 && (
                  <span className="text-[#ffffff] font-black text-sm">{cappedProgress.toFixed(0)}%</span>
                )}
              </div>
            </div>
            <div className="flex justify-between items-center mt-2">
              <span className="text-xs font-bold text-[#64748b]">Processing Fee: {processingFee}%</span>
              <span className="text-xs font-bold text-[#64748b]">Industry standard: 2.9%-5%</span>
            </div>
          </div>

{campaign.socialMedia?.enabled && (
            <div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-6 mb-6">
              <h3 className="text-lg font-bold text-[#0f172a] mb-3">Social Media Sharing</h3>
              
              <button
                onClick={() => setShowSocialPreview(!showSocialPreview)}
                className="mb-4 px-4 py-2 bg-[#ffffff] text-[#0f172a] font-bold border-[4px] border-[#0f172a]"
                style={{ boxShadow: '4px 4px 0 #64748b' }}
              >
                {showSocialPreview ? "Hide" : "Show"} Post Preview
              </button>

{showSocialPreview && campaign.socialMedia?.customMessage && (
                <div className="bg-[#ffffff] border-[4px] border-[#0f172a] p-4 mb-4">
                  <p className="text-sm font-medium text-[#0f172a] whitespace-pre-wrap">{campaign.socialMedia.customMessage}</p>
                </div>
              )}

<div className="flex flex-wrap gap-3">
                {Object.entries(campaign.socialMedia?.platforms || {})
                  .filter(([_, enabled]) => enabled)
                  .map(([platform]) => {
                    const icons = {
                      facebook: "📘",
                      twitter: "🐦",
                      linkedin: "💼",
                      instagram: "📷"
                    }
                    return (
                      <button
                        key={platform}
                        onClick={() => handleSocialPost(platform)}
                        className="px-4 py-2 bg-[#0f172a] text-[#ffffff] font-bold border-[4px] border-[#0f172a] transition-transform"
                        style={{ boxShadow: '4px 4px 0 #64748b' }}
                      >
                        {icons[platform]} Post to {platform.charAt(0).toUpperCase() + platform.slice(1)}
                      </button>
                    )
                  })}
              </div>

{socialPosts.length > 0 && (
                <div className="mt-4">
                  <h4 className="text-sm font-bold text-[#0f172a] mb-2">Recent Posts</h4>
                  <div className="space-y-2">
                    {socialPosts.slice(0, 5).map(post => (
                      <div key={post._id} className="bg-[#ffffff] border-[4px] border-[#0f172a] p-3 flex justify-between items-center">
                        <span className="font-bold text-[#0f172a]">{post.platform}</span>
                        <span className="text-xs text-[#64748b]">{new Date(post.postedAt).toLocaleString()}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

<div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-6 mb-6">
            <h3 className="text-lg font-bold text-[#0f172a] mb-3">Share Campaign</h3>
            <div className="flex flex-wrap gap-3 mb-4">
              {["Email", "Text", "Link", "QR Code"].map(method => (
                <button
                  key={method}
                  onClick={() => setShareMethod(method)}
                  className={`px-4 py-2 font-bold border-[4px] border-[#0f172a] transition-transform ${
                    shareMethod === method ? "bg-[#0f172a] text-[#ffffff]" : "bg-[#ffffff] text-[#0f172a]"
                  }`}
                  style={{ boxShadow: '4px 4px 0 #64748b' }}
                >
                  {method}
                </button>
              ))}
            </div>
            {shareMethod && (
              <div className="bg-[#ffffff] border-[4px] border-[#0f172a] p-4">
                {shareMethod === "Link" && (
                  <div>
                    <input
                      type="text"
                      value={donationLink}
                      readOnly
                      className="w-full px-4 py-2 border-[4px] border-[#0f172a] font-mono text-sm"
                    />
                    <button
                      onClick={() => navigator.clipboard.writeText(donationLink)}
                      className="mt-2 px-4 py-2 bg-[#0f172a] text-[#ffffff] font-bold border-[4px] border-[#0f172a]"
                    >
                      📋 Copy Link
                    </button>
                  </div>
                )}
                {shareMethod === "QR Code" && (
                  <div className="text-center">
                    <img 
                      src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(donationLink)}`}
                      alt="QR Code"
                      className="mx-auto border-[4px] border-[#0f172a]"
                    />
                    <p className="mt-2 text-sm font-bold text-[#64748b]">Scan to donate</p>
                  </div>
                )}
                {shareMethod === "Email" && (
                  <p className="text-[#64748b] font-medium break-all">mailto:?subject={encodeURIComponent(campaign.campaignName)}&body={encodeURIComponent(donationLink)}</p>
                )}
                {shareMethod === "Text" && (
                  <p className="text-[#64748b] font-medium break-all">sms:?body={encodeURIComponent(`Support ${campaign.campaignName}: ${donationLink}`)}</p>
                )}
              </div>
            )}
          </div>

<div className="border-t-[6px] border-[#0f172a] pt-6">
            <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
              {["overview", "donations", "analytics", "engagements", "social"].map(tab => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`px-6 py-3 font-bold border-[4px] border-[#0f172a] whitespace-nowrap transition-transform ${
                    activeTab === tab ? "bg-[#0f172a] text-[#ffffff]" : "bg-[#ffffff] text-[#0f172a]"
                  }`}
                  style={{ boxShadow: '4px 4px 0 #64748b' }}
                >
                  {tab.charAt(0).toUpperCase() + tab.slice(1)}
                </button>
              ))}
            </div>

{activeTab === "overview" && (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <StatCard label="Total Donations" value={completedDonations.length} />
                <StatCard label="Total Raised" value={`$${(campaign.raisedAmount || 0).toFixed(2)}`} />
                <StatCard label="Avg Donation" value={`$${completedDonations.length > 0 ? ((campaign.raisedAmount || 0) / completedDonations.length).toFixed(2) : '0.00'}`} />
              </div>
            )}

{activeTab === "donations" && (
              <div className="space-y-4">
                <h3 className="text-xl font-bold text-[#0f172a] mb-4">Recent Donations</h3>
                {completedDonations.length === 0 ? (
                  <p className="text-[#64748b] font-medium">No donations yet</p>
                ) : (
                  completedDonations.slice(0, 10).map(donation => {
                    const processingAmount = (donation.amount * processingFee / 100).toFixed(2)
                    const netAmount = (donation.amount - processingAmount).toFixed(2)
                    return (
                      <div key={donation._id} className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-4">
                        <div className="flex flex-col sm:flex-row justify-between items-start gap-2">
                          <div>
                            <p className="font-bold text-[#0f172a]">{donation.donorEmail}</p>
                            <p className="text-sm text-[#64748b]">{new Date(donation.createdAt).toLocaleString()}</p>
                          </div>
                          <div className="text-right">
                            <p className="text-2xl font-black text-[#0f172a]">${donation.amount.toFixed(2)}</p>
                            <p className="text-xs font-bold text-[#64748b]">Fee ({processingFee}%): ${processingAmount}</p>
                            <p className="text-xs font-bold text-[#0f172a]">Net: ${netAmount}</p>
                          </div>
                        </div>
                      </div>
                    )
                  })
                )}
              </div>
            )}

{activeTab === "analytics" && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-xl font-bold text-[#0f172a] mb-4">Top Donors</h3>
                  {topDonors.length === 0 ? (
                    <p className="text-[#64748b] font-medium">No donations yet</p>
                  ) : (
                    <div className="space-y-2">
                      {topDonors.map((donation, idx) => (
                        <div key={donation._id} className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                          <div className="flex items-center gap-3">
                            <span className="text-2xl font-black text-[#0f172a]">#{idx + 1}</span>
                            <span className="font-bold text-[#0f172a] break-all">{donation.donorEmail}</span>
                          </div>
                          <span className="text-xl font-black text-[#0f172a]">${donation.amount.toFixed(2)}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

<div>
                  <h3 className="text-xl font-bold text-[#0f172a] mb-4">Most Frequent Donors</h3>
                  {frequentDonors.length === 0 ? (
                    <p className="text-[#64748b] font-medium">No donations yet</p>
                  ) : (
                    <div className="space-y-2">
                      {frequentDonors.map(([email, count], idx) => (
                        <div key={email} className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                          <div className="flex items-center gap-3">
                            <span className="text-2xl font-black text-[#0f172a]">#{idx + 1}</span>
                            <span className="font-bold text-[#0f172a] break-all">{email}</span>
                          </div>
                          <span className="text-xl font-black text-[#0f172a]">{count} donations</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

<div>
                  <h3 className="text-xl font-bold text-[#0f172a] mb-4">Incomplete Transactions</h3>
                  <StatCard label="Abandoned Carts" value={incompleteDonations.length} />
                </div>
              </div>
            )}

{activeTab === "engagements" && (
              <div className="space-y-4">
                <h3 className="text-xl font-bold text-[#0f172a] mb-4">Page Views & Interactions</h3>
                {engagements.length === 0 ? (
                  <p className="text-[#64748b] font-medium">No engagement data yet</p>
                ) : (
                  <div className="space-y-2">
                    {engagements.slice(0, 20).map(engagement => (
                      <div key={engagement._id} className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-3 flex flex-col sm:flex-row justify-between gap-2">
                        <span className="font-bold text-[#0f172a]">{engagement.action}</span>
                        <span className="text-sm text-[#64748b]">{new Date(engagement.timestamp).toLocaleString()}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

{activeTab === "social" && (
              <div className="space-y-4">
                <h3 className="text-xl font-bold text-[#0f172a] mb-4">Social Media Activity</h3>
                {socialPosts.length === 0 ? (
                  <div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-8 text-center">
                    <div className="text-5xl mb-3">📱</div>
                    <p className="text-[#64748b] font-medium">No social posts yet</p>
                    <p className="text-sm text-[#64748b] mt-2">Enable Social Media Auto-Post in campaign settings</p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {socialPosts.map(post => (
                      <div key={post._id} className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-4">
                        <div className="flex flex-col sm:flex-row justify-between items-start gap-2 mb-2">
                          <span className="font-bold text-[#0f172a]">{post.platform.charAt(0).toUpperCase() + post.platform.slice(1)}</span>
                          <span className="text-sm text-[#64748b]">{new Date(post.postedAt).toLocaleString()}</span>
                        </div>
                        <p className="text-sm text-[#0f172a] font-medium">{post.message}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>

<button
        onClick={onBack}
        className="px-6 py-3 bg-[#ffffff] text-[#0f172a] font-bold border-[4px] border-[#0f172a] transition-transform"
        style={{ boxShadow: '6px 6px 0 #64748b' }}
      >
        ← Back to Campaigns
      </button>
    </div>
  )
}

function StatCard({ label, value }) {
  return (
    <div className="bg-[#f1f5f9] border-[4px] border-[#0f172a] p-6" style={{ boxShadow: '6px 6px 0 #64748b' }}>
      <p className="text-sm font-bold text-[#64748b] mb-2">{label}</p>
      <p className="text-3xl font-black text-[#0f172a]">{value}</p>
    </div>
  )
}</article></body></html>