import { useState, useMemo, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useAuth } from '../../contexts/AuthContext';
import { AppLayout } from '../../components/layout/AppLayout';
import { LoadingSpinner } from '../../components/ui/LoadingSpinner';
import {
facebookAdsApi,
type FacebookAdsCampaign,
type FacebookAdsMetric,
type FacebookAdsAnalytics,
} from '../../api/facebookAds';
import {
BarChart3,
TrendingUp,
TrendingDown,
AlertTriangle,
AlertCircle,
CheckCircle2,
Eye,
MousePointerClick,
Target,
DollarSign,
RefreshCw,
Search,
Filter,
X,
Calendar,
ArrowUpRight,
ArrowDownRight,
Activity,
Monitor,
Zap,
} from 'lucide-react';
// ─── Helpers ──────────────────────────────────────────────────────────────
function formatCurrency(value: number | null): string {
if (value == null) return '—';
if (Math.abs(value) >= 1_000_000) return `$${(value / 1_000_000).toFixed(1)}M`;
if (Math.abs(value) >= 1_000) return `$${(value / 1_000).toFixed(1)}K`;
return `$${value.toFixed(2)}`;
}
function formatNumber(value: number | null): string {
if (value == null) return '—';
if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
return value.toLocaleString();
}
function formatPercent(value: number | null): string {
if (value == null) return '—';
return `${(value * 100).toFixed(2)}%`;
}
function statusColor(status: string): string {
const map: Record<string, string> = {
ACTIVE: 'bg-emerald-100 text-emerald-700',
PAUSED: 'bg-amber-100 text-amber-700',
DELETED: 'bg-gray-100 text-gray-500',
};
return map[status] || 'bg-gray-100 text-gray-600';
}
function statusLabel(status: string): string {
return status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
}
function timeAgo(dateStr: string | null | undefined): string {
if (!dateStr) return '—';
const now = Date.now();
const then = new Date(dateStr).getTime();
const diff = Math.abs(now - then);
const days = Math.floor(diff / 86400000);
if (days === 0) return 'today';
if (days === 1) return 'yesterday';
if (days < 30) return `${days}d ago`;
return new Date(dateStr).toLocaleDateString();
}
function channelLabel(channel: string): string {
const map: Record<string, string> = {
FACEBOOK: 'Facebook',
INSTAGRAM: 'Instagram',
AUDIENCE_NETWORK: 'Audience Network',
MESSENGER: 'Messenger',
WHATSAPP: 'WhatsApp',
};
return map[channel] || channel;
}
// ─── Tab Types ────────────────────────────────────────────────────────────
type TabKey = 'overview' | 'campaigns' | 'metrics' | 'trends';
// ─── Overview Tab ─────────────────────────────────────────────────────────
function OverviewTab({ analytics }: { analytics: FacebookAdsAnalytics }) {
const stats = [
{ label: 'Active Campaigns', value: analytics.active_campaigns, icon: Monitor, color: 'text-emerald-600 bg-emerald-50' },
{ label: 'Spend (30d)', value: formatCurrency(analytics.total_spend_30d), icon: DollarSign, color: 'text-blue-600 bg-blue-50' },
{ label: 'Impressions (30d)', value: formatNumber(analytics.total_impressions_30d), icon: Eye, color: 'text-violet-600 bg-violet-50' },
{ label: 'Clicks (30d)', value: formatNumber(analytics.total_clicks_30d), icon: MousePointerClick, color: 'text-cyan-600 bg-cyan-50' },
{ label: 'Conversions', value: analytics.total_conversions_30d.toFixed(0), icon: Target, color: 'text-emerald-600 bg-emerald-50' },
{ label: 'Avg CTR', value: formatPercent(analytics.avg_ctr), icon: TrendingUp, color: 'text-green-600 bg-green-50' },
{ label: 'Avg CPC', value: formatCurrency(analytics.avg_cpc), icon: DollarSign, color: 'text-amber-600 bg-amber-50' },
{ label: 'Avg CPA', value: formatCurrency(analytics.avg_cpa), icon: TrendingDown, color: 'text-red-600 bg-red-50' },
{ label: 'ROAS', value: analytics.total_roas ? `${analytics.total_roas.toFixed(2)}x` : '—', icon: Zap, color: 'text-indigo-600 bg-indigo-50' },
];
return (
<div className="space-y-6">
{/* Stats Grid */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
{stats.map((stat) => (
<div key={stat.label} className="rounded-xl border border-surface-200 bg-white p-4">
<div className={`inline-flex rounded-lg p-2 mb-2 ${stat.color}`}>
<stat.icon className="h-4 w-4" />
</div>
<p className="text-xs text-surface-500">{stat.label}</p>
<p className="text-lg font-bold text-surface-900 mt-0.5">{stat.value}</p>
</div>
))}
</div>
{/* Spend Timeline */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Spend</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Last 30 days</span>
<span className="font-semibold text-blue-600">{formatCurrency(analytics.total_spend_30d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Last 90 days</span>
<span className="font-semibold text-blue-600">{formatCurrency(analytics.total_spend_90d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Year to date</span>
<span className="font-semibold text-blue-600">{formatCurrency(analytics.total_spend_ytd)}</span>
</div>
</div>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Performance</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Impressions (30d)</span>
<span className="font-semibold text-violet-600">{formatNumber(analytics.total_impressions_30d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Clicks (30d)</span>
<span className="font-semibold text-cyan-600">{formatNumber(analytics.total_clicks_30d)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-surface-600">Conversions (30d)</span>
<span className="font-semibold text-emerald-600">{analytics.total_conversions_30d.toFixed(0)}</span>
</div>
</div>
</div>
</div>
{/* Campaigns by Status */}
{analytics.campaigns_by_status && analytics.campaigns_by_status.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Campaigns by Status</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
{analytics.campaigns_by_status.map((item) => (
<div key={item.status} className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500 capitalize">{item.status}</p>
<p className="text-lg font-bold text-surface-900">{item.count}</p>
<p className="text-xs text-surface-400">Budget: {formatCurrency(item.total_budget)}</p>
</div>
))}
</div>
</div>
)}
{/* Campaigns by Channel */}
{analytics.campaigns_by_channel && analytics.campaigns_by_channel.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Campaigns by Channel</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
{analytics.campaigns_by_channel.map((item) => (
<div key={item.channel_type} className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">{channelLabel(item.channel_type)}</p>
<p className="text-lg font-bold text-surface-900">{item.count}</p>
<p className="text-xs text-surface-400">Spend: {formatCurrency(item.total_spend)}</p>
</div>
))}
</div>
</div>
)}
{/* Top Campaigns */}
{analytics.top_campaigns && analytics.top_campaigns.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Top Campaigns</h3>
<div className="space-y-2">
{analytics.top_campaigns.map((campaign) => (
<div key={campaign.external_id} className="flex justify-between items-center py-2 border-b border-surface-100 last:border-0">
<div>
<p className="text-sm font-medium text-surface-900">{campaign.name}</p>
<p className="text-xs text-surface-400">
{campaign.clicks} clicks · {campaign.conversions?.toFixed(0) || 0} conversions
</p>
</div>
<div className="flex items-center gap-3">
<span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(campaign.status)}`}>
{statusLabel(campaign.status)}
</span>
<span className="font-semibold text-blue-600">{formatCurrency(campaign.spend)}</span>
</div>
</div>
))}
</div>
</div>
)}
</div>
);
}
// ─── Campaigns Tab ────────────────────────────────────────────────────────
function CampaignsTab({ companyId }: { companyId: string }) {
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [selectedCampaign, setSelectedCampaign] = useState<FacebookAdsCampaign | null>(null);
const { data, isLoading } = useQuery({
queryKey: ['facebook-ads-campaigns', companyId, search, statusFilter],
queryFn: () =>
facebookAdsApi.getCampaigns(companyId, {
search: search || undefined,
status: statusFilter || undefined,
}),
staleTime: 60_000,
});
const campaigns = data?.data?.items || [];
return (
<div>
{/* Filters */}
<div className="flex flex-wrap items-center gap-3 mb-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-surface-400" />
<input
type="text"
placeholder="Search campaigns..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-lg border border-surface-300 bg-white pl-10 pr-3 py-2 text-sm outline-none focus:border-brand-500"
/>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500"
>
<option value="">All Statuses</option>
<option value="ACTIVE">Active</option>
<option value="PAUSED">Paused</option>
<option value="DELETED">Deleted</option>
</select>
</div>
{/* Table */}
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<div className="overflow-x-auto rounded-xl border border-surface-200">
<table className="w-full text-sm">
<thead>
<tr className="bg-surface-50">
<th className="text-left px-4 py-3 font-medium text-surface-500">Campaign</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Status</th>
<th className="text-left px-4 py-3 font-medium text-surface-500">Channel</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Budget</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Spend</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Clicks</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Conversions</th>
</tr>
</thead>
<tbody>
{campaigns.length === 0 ? (
<tr><td colSpan={7} className="text-center py-8 text-surface-400">No campaigns found</td></tr>
) : (
campaigns.map((campaign) => (
<tr
key={campaign.id}
onClick={() => setSelectedCampaign(campaign)}
className="border-t border-surface-100 hover:bg-surface-50 cursor-pointer"
>
<td className="px-4 py-3 font-medium text-surface-900">{campaign.name}</td>
<td className="px-4 py-3">
<span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(campaign.status)}`}>
{statusLabel(campaign.status)}
</span>
</td>
<td className="px-4 py-3 text-surface-500">{channelLabel(campaign.channel_type)}</td>
<td className="px-4 py-3 text-right font-medium">{formatCurrency(campaign.budget)}</td>
<td className="px-4 py-3 text-right font-medium text-blue-600">{formatCurrency(campaign.total_spend)}</td>
<td className="px-4 py-3 text-right text-surface-600">{formatNumber(campaign.total_clicks)}</td>
<td className="px-4 py-3 text-right text-emerald-600 font-medium">{campaign.total_conversions.toFixed(0)}</td>
</tr>
))
)}
</tbody>
</table>
</div>
)}
{/* Detail Panel */}
{selectedCampaign && (
<div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
<div className="absolute inset-0 bg-black/30" onClick={() => setSelectedCampaign(null)} />
<div className="relative z-10 flex h-full w-full max-w-lg flex-col overflow-y-auto bg-white shadow-xl border-l border-surface-200">
<div className="flex items-center justify-between border-b border-surface-200 px-6 py-4">
<div>
<h2 className="text-lg font-semibold text-surface-900">{selectedCampaign.name}</h2>
<p className="text-sm text-surface-500">{channelLabel(selectedCampaign.channel_type)} · {selectedCampaign.budget_type} budget</p>
</div>
<button
onClick={() => setSelectedCampaign(null)}
className="rounded-lg p-2 text-surface-400 hover:bg-surface-100 min-h-[44px] min-w-[44px] flex items-center justify-center"
>
<X className="h-5 w-5" />
</button>
</div>
<div className="grid grid-cols-2 gap-3 border-b border-surface-200 px-6 py-4">
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Status</p>
<span className={`inline-block mt-1 rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(selectedCampaign.status)}`}>
{statusLabel(selectedCampaign.status)}
</span>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Budget</p>
<p className="text-lg font-bold text-surface-900">{formatCurrency(selectedCampaign.budget)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Total Spend</p>
<p className="text-lg font-bold text-blue-600">{formatCurrency(selectedCampaign.total_spend)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Conversions</p>
<p className="text-lg font-bold text-emerald-600">{selectedCampaign.total_conversions.toFixed(0)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Clicks</p>
<p className="text-sm font-medium">{formatNumber(selectedCampaign.total_clicks)}</p>
</div>
<div className="rounded-lg bg-surface-50 p-3">
<p className="text-xs text-surface-500">Channel</p>
<p className="text-sm font-medium">{channelLabel(selectedCampaign.channel_type)}</p>
</div>
</div>
{selectedCampaign.start_date && (
<div className="border-b border-surface-200 px-6 py-4">
<p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-2">Dates</p>
<div className="space-y-1 text-sm text-surface-600">
<div className="flex justify-between"><span>Start</span><span>{timeAgo(selectedCampaign.start_date)}</span></div>
{selectedCampaign.end_date && <div className="flex justify-between"><span>End</span><span>{timeAgo(selectedCampaign.end_date)}</span></div>}
</div>
</div>
)}
<div className="px-6 py-4">
<p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-2">Updated</p>
<p className="text-sm text-surface-600">{timeAgo(selectedCampaign.updated_at)}</p>
</div>
</div>
</div>
)}
</div>
);
}
// ─── Metrics Tab ──────────────────────────────────────────────────────────
function MetricsTab({ companyId }: { companyId: string }) {
const [campaignFilter, setCampaignFilter] = useState('');
const { data, isLoading } = useQuery({
queryKey: ['facebook-ads-metrics', companyId, campaignFilter],
queryFn: () =>
facebookAdsApi.getMetrics(companyId, {
campaign_id: campaignFilter || undefined,
per_page: 100,
}),
staleTime: 60_000,
});
const metrics = data?.data?.items || [];
return (
<div>
<div className="flex flex-wrap items-center gap-3 mb-4">
<select
value={campaignFilter}
onChange={(e) => setCampaignFilter(e.target.value)}
className="rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500"
>
<option value="">All Campaigns</option>
</select>
</div>
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<div className="overflow-x-auto rounded-xl border border-surface-200">
<table className="w-full text-sm">
<thead>
<tr className="bg-surface-50">
<th className="text-left px-4 py-3 font-medium text-surface-500">Date</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Spend</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Impressions</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Clicks</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">CTR</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">CPC</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">Conversions</th>
<th className="text-right px-4 py-3 font-medium text-surface-500">ROAS</th>
</tr>
</thead>
<tbody>
{metrics.length === 0 ? (
<tr><td colSpan={8} className="text-center py-8 text-surface-400">No metrics found</td></tr>
) : (
metrics.map((metric) => (
<tr key={metric.id} className="border-t border-surface-100 hover:bg-surface-50">
<td className="px-4 py-3 text-surface-600">{timeAgo(metric.metric_date)}</td>
<td className="px-4 py-3 text-right font-medium text-blue-600">{formatCurrency(metric.spend)}</td>
<td className="px-4 py-3 text-right text-surface-600">{formatNumber(metric.impressions)}</td>
<td className="px-4 py-3 text-right text-surface-600">{formatNumber(metric.clicks)}</td>
<td className="px-4 py-3 text-right text-surface-500">{formatPercent(metric.ctr)}</td>
<td className="px-4 py-3 text-right text-surface-500">{formatCurrency(metric.cpc)}</td>
<td className="px-4 py-3 text-right text-emerald-600 font-medium">{metric.conversions.toFixed(0)}</td>
<td className="px-4 py-3 text-right text-surface-500">{metric.roas ? `${metric.roas.toFixed(2)}x` : '—'}</td>
</tr>
))
)}
</tbody>
</table>
</div>
)}
</div>
);
}
// ─── Trends Tab ───────────────────────────────────────────────────────────
function TrendsTab({ companyId }: { companyId: string }) {
const { data, isLoading } = useQuery({
queryKey: ['facebook-ads-analytics', companyId],
queryFn: () => facebookAdsApi.getAnalytics(companyId),
staleTime: 60_000,
});
const analytics = data?.data;
const trend = analytics?.daily_spend_trend || [];
const maxSpend = useMemo(() => Math.max(...trend.map((t) => t.spend || 0), 1), [trend]);
return (
<div className="space-y-6">
{isLoading ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : (
<>
{/* Spend Trend Bars */}
{trend.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Daily Spend Trend</h3>
<div className="space-y-2">
{trend.slice(-30).map((day) => {
const pct = (day.spend / maxSpend) * 100;
return (
<div key={day.date} className="flex items-center gap-3">
<span className="text-xs text-surface-400 w-16 flex-shrink-0">{new Date(day.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
<div className="flex-1 bg-surface-100 rounded-full h-6 overflow-hidden">
<div
className="h-full bg-[#1877F2] rounded-full flex items-center justify-end pr-2 transition-all"
style={{ width: `${Math.max(pct, 2)}%` }}
>
{pct > 15 && (
<span className="text-xs text-white font-medium">{formatCurrency(day.spend)}</span>
)}
</div>
</div>
{pct <= 15 && <span className="text-xs text-surface-500">{formatCurrency(day.spend)}</span>}
</div>
);
})}
</div>
</div>
)}
{/* Conversions Trend */}
{trend.length > 0 && (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<h3 className="text-sm font-medium text-surface-500 mb-4">Daily Conversions Trend</h3>
<div className="space-y-2">
{trend.slice(-30).map((day) => {
const maxConv = Math.max(...trend.map((t) => t.conversions || 0), 1);
const pct = (day.conversions / maxConv) * 100;
return (
<div key={day.date} className="flex items-center gap-3">
<span className="text-xs text-surface-400 w-16 flex-shrink-0">{new Date(day.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
<div className="flex-1 bg-surface-100 rounded-full h-6 overflow-hidden">
<div
className="h-full bg-emerald-500 rounded-full flex items-center justify-end pr-2 transition-all"
style={{ width: `${Math.max(pct, 2)}%` }}
>
{pct > 15 && (
<span className="text-xs text-white font-medium">{day.conversions.toFixed(0)}</span>
)}
</div>
</div>
{pct <= 15 && <span className="text-xs text-surface-500">{day.conversions.toFixed(0)}</span>}
</div>
);
})}
</div>
</div>
)}
{/* Summary Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="rounded-xl border border-surface-200 bg-white p-4">
<p className="text-xs text-surface-500">Total Spend</p>
<p className="text-lg font-bold text-blue-600">{formatCurrency(analytics?.total_spend_30d)}</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-4">
<p className="text-xs text-surface-500">Avg Daily Spend</p>
<p className="text-lg font-bold text-blue-600">
{trend.length > 0 ? formatCurrency(analytics?.total_spend_30d / trend.length) : '—'}
</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-4">
<p className="text-xs text-surface-500">Total Conversions</p>
<p className="text-lg font-bold text-emerald-600">{analytics?.total_conversions_30d?.toFixed(0) || '0'}</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-4">
<p className="text-xs text-surface-500">ROAS</p>
<p className="text-lg font-bold text-indigo-600">{analytics?.total_roas ? `${analytics.total_roas.toFixed(2)}x` : '—'}</p>
</div>
</div>
</>
)}
</div>
);
}
// ─── Main Page ────────────────────────────────────────────────────────────
export function FacebookAdsPage() {
const { user } = useAuth();
const [activeTab, setActiveTab] = useState<TabKey>('overview');
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
const queryClient = useQueryClient();
const companyId = user?.tenantId ? String(user.tenantId) : '';
useEffect(() => {
if (toast) {
const timer = setTimeout(() => setToast(null), 4000);
return () => clearTimeout(timer);
}
}, [toast]);
const { data: analyticsData, isLoading: analyticsLoading } = useQuery({
queryKey: ['facebook-ads-analytics', companyId],
queryFn: () => facebookAdsApi.getAnalytics(companyId),
staleTime: 120_000,
});
const syncMutation = useMutation({
mutationFn: () => facebookAdsApi.sync(companyId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['facebook-ads'] });
setToast({ message: 'Facebook Ads synced successfully', type: 'success' });
},
onError: (err: unknown) => {
const message = (err as { response?: { data?: { error?: string } } })?.response?.data?.error || 'Facebook Ads sync failed';
setToast({ message, type: 'error' });
},
});
const tabs: { key: TabKey; label: string; icon: React.FC }[] = [
{ key: 'overview', label: 'Overview', icon: BarChart3 },
{ key: 'campaigns', label: 'Campaigns', icon: Monitor },
{ key: 'metrics', label: 'Metrics', icon: Activity },
{ key: 'trends', label: 'Trends', icon: TrendingUp },
];
return (
<AppLayout>
{/* Toast */}
{toast && (
<div className="fixed top-4 right-4 z-[70] flex items-center gap-2 rounded-lg bg-surface-900 px-4 py-3 text-sm text-white shadow-lg">
{toast.type === 'success' ? (
<CheckCircle2 className="h-4 w-4 text-green-400" />
) : (
<AlertCircle className="h-4 w-4 text-red-400" />
)}
{toast.message}
</div>
)}
<div className="space-y-6">
{/* Header */}
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-surface-900">Facebook Ads</h1>
<p className="text-sm text-surface-500 mt-1">Meta Ads Manager — campaigns, metrics, and ROAS</p>
</div>
<button
onClick={() => syncMutation.mutate()}
disabled={syncMutation.isPending}
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#1877F2] text-white text-sm font-medium hover:bg-[#166fe5] disabled:opacity-50 disabled:cursor-not-allowed"
>
<RefreshCw className={`h-4 w-4 ${syncMutation.isPending ? 'animate-spin' : ''}`} />
{syncMutation.isPending ? 'Syncing...' : 'Sync Now'}
</button>
</div>
{/* Tabs */}
<div className="flex gap-1 border-b border-surface-200">
{tabs.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === tab.key
? 'border-[#1877F2] text-[#1877F2]'
: 'border-transparent text-surface-500 hover:text-surface-700'
}`}
>
<tab.icon className="h-4 w-4" />
{tab.label}
</button>
))}
</div>
{/* Tab Content */}
{analyticsLoading && activeTab === 'overview' ? (
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : activeTab === 'overview' && analyticsData?.data ? (
<OverviewTab analytics={analyticsData.data} />
) : activeTab === 'campaigns' ? (
<CampaignsTab companyId={companyId} />
) : activeTab === 'metrics' ? (
<MetricsTab companyId={companyId} />
) : activeTab === 'trends' ? (
<TrendsTab companyId={companyId} />
) : null}
</div>
</AppLayout>
);
}