helix-engage/src/pages/campaigns.tsx

import { useMemo, useState } from 'react';
import { Link } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPenToSquare, faFileImport } from '@fortawesome/pro-duotone-svg-icons';

import { Tabs, TabList, Tab, TabPanel } from '@/components/application/tabs/tabs';
import { CampaignCard } from '@/components/campaigns/campaign-card';
import { CampaignEditSlideout } from '@/components/campaigns/campaign-edit-slideout';
import { LeadImportWizard } from '@/components/campaigns/lead-import-wizard';
import { Button } from '@/components/base/buttons/button';
import { useCampaigns } from '@/hooks/use-campaigns';
import { useLeads } from '@/hooks/use-leads';
import { useData } from '@/providers/data-provider';
import { formatCurrency } from '@/lib/format';
import type { Campaign, CampaignStatus } from '@/types/entities';

type TabConfig = {
    id: string;
    label: string;
    status: CampaignStatus | undefined;
};

const tabs: TabConfig[] = [
    { id: 'all', label: 'All', status: undefined },
    { id: 'active', label: 'Active', status: 'ACTIVE' },
    { id: 'paused', label: 'Paused', status: 'PAUSED' },
    { id: 'completed', label: 'Completed', status: 'COMPLETED' },
    { id: 'draft', label: 'Drafts', status: 'DRAFT' },
];

export const CampaignsPage = () => {
    const [activeTab, setActiveTab] = useState<string>('all');
    const [editCampaign, setEditCampaign] = useState<Campaign | null>(null);
    const [importOpen, setImportOpen] = useState(false);

    const { refresh } = useData();
    const selectedTab = tabs.find((t) => t.id === activeTab) ?? tabs[0];
    const { campaigns, ads } = useCampaigns({ status: selectedTab.status });
    const { campaigns: allCampaigns } = useCampaigns();
    const { leads } = useLeads();

    const activeCount = allCampaigns.filter((c) => c.campaignStatus === 'ACTIVE').length;
    const totalSpent = allCampaigns.reduce((sum, c) => sum + (c.amountSpent?.amountMicros ?? 0), 0);

    const subtitle = `${allCampaigns.length} campaigns \u00b7 ${activeCount} active \u00b7 ${formatCurrency(totalSpent)} total spend`;

    // Index leads by campaignId for fast per-campaign lookups
    const leadsByCampaign = useMemo(() => {
        const map = new Map<string, typeof leads>();
        for (const lead of leads) {
            if (lead.campaignId) {
                const existing = map.get(lead.campaignId);
                if (existing) {
                    existing.push(lead);
                } else {
                    map.set(lead.campaignId, [lead]);
                }
            }
        }
        return map;
    }, [leads]);

    // Index ads by campaignId
    const adsByCampaign = useMemo(() => {
        const map = new Map<string, typeof ads>();
        for (const ad of ads) {
            if (ad.campaignId) {
                const existing = map.get(ad.campaignId);
                if (existing) {
                    existing.push(ad);
                } else {
                    map.set(ad.campaignId, [ad]);
                }
            }
        }
        return map;
    }, [ads]);

    // Tab badges
    const tabBadges: Record<string, number> = useMemo(() => ({
        all: allCampaigns.length,
        active: allCampaigns.filter((c) => c.campaignStatus === 'ACTIVE').length,
        paused: allCampaigns.filter((c) => c.campaignStatus === 'PAUSED').length,
        completed: allCampaigns.filter((c) => c.campaignStatus === 'COMPLETED').length,
        draft: allCampaigns.filter((c) => c.campaignStatus === 'DRAFT').length,
    }), [allCampaigns]);

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <header className="flex h-14 items-center justify-between border-b border-secondary bg-primary px-6">
                <div className="flex flex-col justify-center">
                    <h1 className="text-lg font-bold text-primary">Campaigns</h1>
                    <p className="text-xs text-tertiary">{subtitle}</p>
                </div>
                <Button
                    size="sm"
                    color="primary"
                    iconLeading={({ className }: { className?: string }) => (
                        <FontAwesomeIcon icon={faFileImport} className={className} />
                    )}
                    onClick={() => setImportOpen(true)}
                >
                    Import Leads
                </Button>
            </header>
            <div className="flex-1 overflow-y-auto p-7 space-y-5">
                <Tabs selectedKey={activeTab} onSelectionChange={(key) => setActiveTab(String(key))}>
                    <TabList
                        type="underline"
                        size="sm"
                        items={tabs.map((tab) => ({
                            id: tab.id,
                            label: tab.label,
                            badge: tabBadges[tab.id] > 0 ? tabBadges[tab.id] : undefined,
                        }))}
                    >
                        {(item) => (
                            <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />
                        )}
                    </TabList>

                    {tabs.map((tab) => (
                        <TabPanel key={tab.id} id={tab.id}>
                            <div className="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-2">
                                {campaigns.map((campaign) => (
                                    <div key={campaign.id} className="relative">
                                        <Link to={`/campaigns/${campaign.id}`} className="no-underline">
                                            <CampaignCard
                                                campaign={campaign}
                                                ads={adsByCampaign.get(campaign.id) ?? []}
                                                leads={leadsByCampaign.get(campaign.id) ?? []}
                                            />
                                        </Link>
                                        <div className="absolute bottom-4 right-4 z-10">
                                            <Button
                                                size="sm"
                                                color="secondary"
                                                iconLeading={({ className }: { className?: string }) => (
                                                    <FontAwesomeIcon icon={faPenToSquare} className={className} />
                                                )}
                                                onClick={(e: React.MouseEvent) => {
                                                    e.preventDefault();
                                                    e.stopPropagation();
                                                    setEditCampaign(campaign);
                                                }}
                                                aria-label={`Edit ${campaign.campaignName ?? 'campaign'}`}
                                            />
                                        </div>
                                    </div>
                                ))}
                                {campaigns.length === 0 && (
                                    <p className="col-span-full py-12 text-center text-sm text-tertiary">
                                        No campaigns match this filter.
                                    </p>
                                )}
                            </div>
                        </TabPanel>
                    ))}
                </Tabs>
            </div>

            {editCampaign && (
                <CampaignEditSlideout
                    isOpen={!!editCampaign}
                    onOpenChange={(open) => { if (!open) setEditCampaign(null); }}
                    campaign={editCampaign}
                    onSaved={refresh}
                />
            )}

            <LeadImportWizard isOpen={importOpen} onOpenChange={setImportOpen} />
        </div>
    );
};