Ads Manager

/**
 * Live demo for ads/ui/ads-manager.
 *
 * Labs' AdsManager.tsx (main, 62ba4fc, 1760 lines, mounted at `/ads`) with its
 * four reads (`GET /api/ads/status`, `/api/ads/accounts`, `/api/ads/campaigns`,
 * `/api/ads/groups`, fired in parallel from `fetchData`) and its writes
 * (campaign create/toggle, OAuth connect, group save) replaced by props: the
 * page's own state variables — `loading`, `activeTab`, `connections`,
 * `campaigns`, `chartData`, `adGroups`, `toast` — plus the filter/search
 * state and the two embedded tabs' own state, each seeded from a prop and
 * then owned locally the same way subscription-manager's voucher input is
 * (AUTHORING.md "The exports"). Rendered inside the shell demo the way every
 * private page is (`Navigation.tsx` is a thin delegator to `AppShell`), on
 * `/ads` (`nav.tsx`'s "campaigns" domain, `paths: ['/ads']`).
 *
 * What is kept, byte-faithful to structure and copy: the header and its four
 * actions (Retargeting / Clients / Sync / New Campaign — the last three
 * inert, Gotchas), the client tabs row, the platform-connections card (all
 * four `PLATFORMS`, `PlatformConnectionCard`'s connected/not-connected
 * branches), the three-tab strip (Campaigns / Multiplatform / Insights), the
 * campaigns tab's four `MetricCard`s, the spend-by-platform chart, the
 * search/status/platform filters and the "Show Older" toggle, the campaign
 * list header and `CampaignRow` (status dot, platform badges, metrics
 * columns, hover actions), both of `filtered.length === 0`'s messages, the
 * bottom toast, the Multiplatform tab's setup list (`MultiplatformSetups.tsx`
 * — status badges, per-platform chips, the expandable rollup with its brief
 * summary, per-platform outcome cards and the "Retry failed platforms"
 * button), and the Insights tab (`InsightsPanel.tsx` — the Meta/Google
 * toggle, the level/date-range/breakdown selects, the totals strip and the
 * results table). All copy is the source's, English (the one surface in Labs
 * that ships English while the rest is de-CH, reproduced as measured).
 *
 * What is different, and why:
 *  - `useTheme()`'s `isDark` branches every className in the source. The
 *    demo packages' alchemy-ui is, per its own package.json, "a light-locked
 *    theme shim" — there is no dark mode to branch into here, and every
 *    capture in this kit's verify harness runs `colorScheme: light`
 *    (AUTHORING.md "Rules") — so each `isDark ? a : b` ternary is collapsed
 *    to its light-mode `b` and the theme prop is dropped from every
 *    sub-component.
 *  - `recharts`'s `<AreaChart>` (the 14-day spend-by-platform card) is not a
 *    demo package (AUTHORING.md "The exports" names the four runtime
 *    packages a demo may import from; charting is not one of them, the same
 *    boundary that drops framer-motion from subscription-manager's gauge).
 *    `SpendByPlatformChart` below redraws the same three stacked areas with
 *    hand-built `<svg>` `<path>`s over the same `chartData` shape, gradient
 *    fills included; it is a substitute for the library, not a simplification
 *    of what it shows.
 *  - `useNavigate()` (View campaign, `/ads/retargeting`) and the OAuth
 *    popup (`window.open` in `handleConnect`) have nothing to navigate to or
 *    pop up from inside a demo frame: "Retargeting", "Connect" and a campaign
 *    row's click-to-view are rendered with their real label, icon and
 *    disabled state but call nothing, the same convention
 *    admin-users-console's row actions and subscription-manager's
 *    change-tier buttons use for a source-driven action the demo cannot
 *    perform. Pause/Resume and the "..." row menu are likewise inert.
 *  - `CreateCampaignModal` (the 4-step "New Campaign" wizard behind the
 *    header's primary button — name/objective/budget, platform + auto-split,
 *    audience + creative, then a `dry_run` preview of `POST
 *    /api/ads/campaigns/setup`) and `AdGroupsModal` ("Clients" behind the
 *    header's Settings button) are page-local components, 490 and 180 lines
 *    of their own step/field state that open over the page rather than being
 *    part of it. Neither is mounted: both buttons that open them render with
 *    their real label and icon and do nothing, matching how
 *    subscription-manager leaves its own change-tier modal unmounted for the
 *    same reason. The wizard's actual surface, `POST /api/ads/campaigns/setup`,
 *    is the `ads/cross-platform-campaign-creation` backend recipe; its result
 *    is what the Multiplatform tab below lists.
 *  - Each precomputed date in `chartData` and every setup's `created_at` is a
 *    literal ISO string, not `new Date()` at module load: the frame has to
 *    render the same way on every build, and `toLocaleDateString('de-CH', …)`
 *    (used for a setup's created date) is replaced with a fixed UTC-getter
 *    formatter for the same reason subscription-manager's does.
 *  - The Insights tab's platform toggle swaps between two precomputed row
 *    sets (`metaRows` / `googleRows`) instead of calling `getMetaInsights` /
 *    `runGoogleReport`; the level/date-range/breakdown selects are real,
 *    controlled UI state, they just have nothing to re-fetch in a demo with
 *    no network (Invariants).
 *
 * Two things the source itself does that are worth knowing before reading
 * this file as a model (both real, both dated, neither invented for this
 * recipe — see Gotchas): the page's top-level `error` state is set in two
 * catch blocks and never once read in the JSX (no dead branch was added
 * here to compensate: the toast, which IS rendered, is this recipe's stand-in
 * for a visible error surface, hence the `error` demo state below uses it),
 * and `MetricCard` supports a `change` prop ("+12.3% vs prev period") that no
 * call site in the page ever passes — both are reproduced by omission, not
 * fixed.
 */
import React, { useState } from 'react';
import {
  Plus,
  Search,
  TrendingUp as ArrowUpRight,
  TrendingDown as ArrowDownRight,
  Pause,
  Play,
  MoreVertical as MoreHorizontal,
  Zap,
  TrendingUp,
  DollarSign,
  Target,
  RefreshCw,
  Settings,
  ChevronDown,
  ChevronRight,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Link2,
  BarChart3,
  Layers,
  Megaphone,
} from 'lucide-react';
import { defineStates } from '@prima-modules/demo';
import { Badge, Button, Card, Heading, Input, Spinner, Text } from '@prima-modules/alchemy-ui';
import { Shell, type ShellUser, type ShellWorkspace } from '../../../ui-design-system/ui/appshell-navigation/demo';
import { DOMAINS } from '../../../ui-design-system/ui/appshell-navigation/nav';

/* ---- types (AdsManager.tsx 69 to 191, adsService.ts 43 to 68 and 246 to 264) ------ */

type Platform = 'meta' | 'google' | 'linkedin' | 'microsoft';
type CampaignStatus = 'active' | 'paused' | 'draft' | 'completed' | 'error';
type Objective = 'awareness' | 'traffic' | 'leads' | 'conversions' | 'sales';

interface PlatformConfig {
  id: Platform;
  name: string;
  color: string;
}

interface AdAccount {
  id: string;
  platform: Platform;
  name: string;
  account_id: string;
  currency: string;
  is_default: boolean;
  status: 'active' | 'disconnected' | 'error';
}

interface CampaignMetrics {
  spend: number;
  impressions: number;
  clicks: number;
  conversions: number;
  ctr: number;
  cpc: number;
  cpa: number;
  roas: number;
}

interface Campaign {
  id: string;
  name: string;
  objective: Objective;
  status: CampaignStatus;
  platforms: Platform[];
  metrics: CampaignMetrics;
  account_id?: string;
}

interface PlatformConnection {
  platform: Platform;
  connected: boolean;
  accounts: AdAccount[];
}

interface AdGroup {
  name: string;
  meta_account_id?: string;
  google_account_id?: string;
  linkedin_account_id?: string;
  microsoft_account_id?: string;
}

interface ChartPoint {
  date: string;
  meta: number;
  google: number;
  linkedin: number;
}

interface Toast {
  kind: 'success' | 'warning' | 'error';
  text: string;
}

/** adsService.ts 43 to 68 — a `POST /api/ads/campaigns/setup` outcome, one row per platform. */
interface SetupPlatformResult {
  platform: string;
  status: 'created' | 'failed' | 'skipped' | 'preview' | string;
  campaign_id?: string | null;
  reason?: string | null;
  error?: string | null;
  warnings?: string[];
}

interface CampaignSetupRecord {
  id: string;
  name: string;
  objective: string;
  status: 'created' | 'partial' | 'failed' | 'creating' | string;
  platform_results: SetupPlatformResult[];
  total_daily_budget: number;
  currency: string;
  brief: { audience?: { geo?: string[] }; creative?: { landing_url?: string } };
  created_at?: string | null;
}

interface AccountOption {
  id: string;
  name: string;
}

/** InsightsPanel.tsx's flattened row shape (Meta and Google reports normalized to one table). */
interface FlatRow {
  name: string;
  spend: number;
  impressions: number;
  clicks: number;
  conversions: number;
  ctr: number;
  cpc: number;
}

export interface Props {
  viewer: ShellUser;
  workspace: ShellWorkspace;
  /** The guard at line 1401: true renders only the shell and a centered `Spinner`, nothing else. */
  loading: boolean;
  activeTab: 'campaigns' | 'multiplatform' | 'insights';
  connections: PlatformConnection[];
  campaigns: Campaign[];
  chartData: ChartPoint[];
  /** Client tabs above the connections card; hidden entirely when empty (line 1446). */
  adGroups: AdGroup[];
  toast: Toast | null;
  /** Filters own their live value locally once mounted (same convention as the voucher input); these seed it. */
  initialSearchQuery?: string;
  initialStatusFilter?: CampaignStatus | 'all';
  initialPlatformFilter?: Platform | 'all';
  initialShowInactive?: boolean;
  initialActiveGroup?: string;
  /** Multiplatform tab (MultiplatformSetups.tsx). */
  setups: CampaignSetupRecord[];
  initialExpandedSetupId?: string | null;
  /** Insights tab (InsightsPanel.tsx). */
  metaAccounts: AccountOption[];
  googleAccounts: AccountOption[];
  metaRows: FlatRow[];
  googleRows: FlatRow[];
}

/* ---- constants (AdsManager.tsx 129 to 174, adsService.ts 104 to 264) -------------- */

const PLATFORMS: Record<Platform, PlatformConfig> = {
  meta: { id: 'meta', name: 'Meta', color: '#1877F2' },
  google: { id: 'google', name: 'Google', color: '#4285F4' },
  linkedin: { id: 'linkedin', name: 'LinkedIn', color: '#0A66C2' },
  microsoft: { id: 'microsoft', name: 'Microsoft', color: '#00A4EF' },
};
const PLATFORM_ICON: Record<Platform, string> = { meta: 'M', google: 'G', linkedin: 'in', microsoft: 'M' };

const OBJECTIVES: Record<Objective, { label: string }> = {
  awareness: { label: 'Awareness' },
  traffic: { label: 'Traffic' },
  leads: { label: 'Leads' },
  conversions: { label: 'Conversions' },
  sales: { label: 'Sales' },
};

const META_DATE_PRESETS = ['today', 'yesterday', 'last_7d', 'last_14d', 'last_28d', 'last_30d', 'last_90d'] as const;
const META_BREAKDOWNS = ['age', 'gender', 'country', 'region', 'publisher_platform'] as const;
const GOOGLE_LEVELS = ['campaign', 'ad_group', 'keyword', 'search_term'] as const;
const GOOGLE_DATE_RANGES = ['TODAY', 'LAST_7_DAYS', 'LAST_14_DAYS', 'LAST_30_DAYS', 'LAST_MONTH'] as const;

/** Fixed UTC-getter formatter: `toLocaleDateString('de-CH', ...)` depends on the runtime's ICU data,
 * the same reason subscription-manager's `formatDate` replaces it (its header comment). */
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function formatDay(iso: string): string {
  const d = new Date(iso);
  return `${d.getUTCDate()}. ${MONTHS[d.getUTCMonth()]}`;
}

/* ---- sample data ----------------------------------------------------------------- */

const viewer: ShellUser = { name: 'Nora Isler', email: '[email protected]', isAdmin: true };
const workspace: ShellWorkspace = { id: 'ws_2', name: 'Studio Nordlicht', slug: 'studio-nordlicht' };

const emptyMetrics: CampaignMetrics = { spend: 0, impressions: 0, clicks: 0, conversions: 0, ctr: 0, cpc: 0, cpa: 0, roas: 0 };

const connectedAccounts: Record<Platform, AdAccount[]> = {
  meta: [
    { id: 'demo-meta-9001', platform: 'meta', name: 'Nordlicht — Prospecting', account_id: 'demo-meta-9001', currency: 'CHF', is_default: true, status: 'active' },
    { id: 'demo-meta-9002', platform: 'meta', name: 'Bergkristall Uhren — Retarget', account_id: 'demo-meta-9002', currency: 'CHF', is_default: false, status: 'active' },
  ],
  google: [
    { id: 'demo-google-4001', platform: 'google', name: 'Nordlicht — Search', account_id: 'demo-google-4001', currency: 'CHF', is_default: true, status: 'active' },
  ],
  linkedin: [],
  microsoft: [],
};

const connectedConnections: PlatformConnection[] = [
  { platform: 'meta', connected: true, accounts: connectedAccounts.meta },
  { platform: 'google', connected: true, accounts: connectedAccounts.google },
  { platform: 'linkedin', connected: false, accounts: [] },
  { platform: 'microsoft', connected: false, accounts: [] },
];

const disconnectedConnections: PlatformConnection[] = [
  { platform: 'meta', connected: false, accounts: [] },
  { platform: 'google', connected: false, accounts: [] },
  { platform: 'linkedin', connected: false, accounts: [] },
  { platform: 'microsoft', connected: false, accounts: [] },
];

const sampleCampaigns: Campaign[] = [
  {
    id: 'camp-1', name: 'Alpin Feinkost — Frühling Launch', objective: 'leads', status: 'active',
    platforms: ['meta'], account_id: 'demo-meta-9002',
    metrics: { spend: 1240.5, impressions: 184200, clicks: 2210, conversions: 64, ctr: 1.2, cpc: 0.56, cpa: 19.38, roas: 2.4 },
  },
  {
    id: 'camp-2', name: 'Bergkristall — Retargeting Q3', objective: 'conversions', status: 'paused',
    platforms: ['meta'], account_id: 'demo-meta-9001',
    metrics: { spend: 860.0, impressions: 96500, clicks: 1180, conversions: 31, ctr: 1.22, cpc: 0.73, cpa: 27.74, roas: 1.6 },
  },
  {
    id: 'camp-3', name: 'Nordlicht Search Brand', objective: 'traffic', status: 'active',
    platforms: ['google'], account_id: 'demo-google-4001',
    metrics: { spend: 410.2, impressions: 38900, clicks: 1640, conversions: 12, ctr: 4.22, cpc: 0.25, cpa: 34.18, roas: 0.9 },
  },
  {
    id: 'camp-4', name: 'Alpin Feinkost — Search Non-Brand', objective: 'sales', status: 'draft',
    platforms: ['google'], account_id: 'demo-google-4001',
    metrics: emptyMetrics,
  },
  {
    id: 'camp-5', name: 'Bergkristall — Awareness Reel', objective: 'awareness', status: 'active',
    platforms: ['meta', 'google'], account_id: 'demo-meta-9001',
    metrics: { spend: 2115.8, impressions: 512300, clicks: 3980, conversions: 22, ctr: 0.78, cpc: 0.53, cpa: 96.17, roas: 0.7 },
  },
  {
    id: 'camp-6', name: 'Nordlicht Autumn Wrap-up', objective: 'awareness', status: 'completed',
    platforms: ['google'], account_id: 'demo-google-4001',
    metrics: { spend: 340.0, impressions: 61200, clicks: 890, conversions: 9, ctr: 1.45, cpc: 0.38, cpa: 37.78, roas: 1.1 },
  },
];

const sampleChart: ChartPoint[] = [
  { date: '2026-08-30', meta: 210, google: 90, linkedin: 0 },
  { date: '2026-08-31', meta: 195, google: 85, linkedin: 0 },
  { date: '2026-09-01', meta: 240, google: 110, linkedin: 0 },
  { date: '2026-09-02', meta: 260, google: 95, linkedin: 0 },
  { date: '2026-09-03', meta: 175, google: 130, linkedin: 0 },
  { date: '2026-09-04', meta: 205, google: 120, linkedin: 0 },
  { date: '2026-09-05', meta: 230, google: 100, linkedin: 0 },
  { date: '2026-09-06', meta: 250, google: 140, linkedin: 0 },
  { date: '2026-09-07', meta: 190, google: 115, linkedin: 0 },
  { date: '2026-09-08', meta: 220, google: 105, linkedin: 0 },
  { date: '2026-09-09', meta: 265, google: 150, linkedin: 0 },
  { date: '2026-09-10', meta: 245, google: 125, linkedin: 0 },
  { date: '2026-09-11', meta: 200, google: 95, linkedin: 0 },
  { date: '2026-09-12', meta: 235, google: 135, linkedin: 0 },
];

const sampleAdGroups: AdGroup[] = [
  { name: 'Alpin Feinkost', meta_account_id: 'demo-meta-9002', google_account_id: 'demo-google-4001' },
  { name: 'Bergkristall Uhren', meta_account_id: 'demo-meta-9001', google_account_id: 'demo-google-4001' },
];

const sampleSetups: CampaignSetupRecord[] = [
  {
    id: 'setup-1', name: 'Alpin Feinkost — Frühling Launch', objective: 'leads', status: 'created',
    platform_results: [
      { platform: 'meta', status: 'created', campaign_id: 'demo-meta-campaign-771' },
      { platform: 'google', status: 'created', campaign_id: 'demo-google-campaign-338' },
    ],
    total_daily_budget: 120, currency: 'CHF', created_at: '2026-09-08T09:12:00Z',
    brief: { audience: { geo: ['CH', 'DE'] }, creative: { landing_url: 'https://example.com/fruhling' } },
  },
  {
    id: 'setup-2', name: 'Bergkristall — Retargeting Q3', objective: 'conversions', status: 'partial',
    platform_results: [
      { platform: 'meta', status: 'created', campaign_id: 'demo-meta-campaign-772' },
      { platform: 'linkedin', status: 'failed', error: 'Ad account not connected', warnings: [] },
    ],
    total_daily_budget: 80, currency: 'CHF', created_at: '2026-09-05T14:40:00Z',
    brief: { audience: { geo: ['CH'] }, creative: { landing_url: 'https://example.com/retarget' } },
  },
  {
    id: 'setup-3', name: 'Nordlicht Autumn Wrap-up', objective: 'awareness', status: 'failed',
    platform_results: [
      { platform: 'google', status: 'failed', error: 'Daily budget below platform minimum', warnings: [] },
    ],
    total_daily_budget: 20, currency: 'CHF', created_at: '2026-09-01T08:00:00Z',
    brief: { audience: { geo: ['CH', 'AT'] }, creative: { landing_url: 'https://example.com/autumn' } },
  },
];

const metaAccountOptions: AccountOption[] = connectedAccounts.meta.map((a) => ({ id: a.account_id, name: a.name }));
const googleAccountOptions: AccountOption[] = connectedAccounts.google.map((a) => ({ id: a.account_id, name: a.name }));

const sampleMetaRows: FlatRow[] = [
  { name: 'Alpin Feinkost — Frühling Launch', spend: 1240.5, impressions: 184200, clicks: 2210, conversions: 64, ctr: 1.2, cpc: 0.56 },
  { name: 'Bergkristall — Retargeting Q3', spend: 860.0, impressions: 96500, clicks: 1180, conversions: 31, ctr: 1.22, cpc: 0.73 },
  { name: 'Bergkristall — Awareness Reel', spend: 2115.8, impressions: 512300, clicks: 3980, conversions: 22, ctr: 0.78, cpc: 0.53 },
];

const sampleGoogleRows: FlatRow[] = [
  { name: 'Nordlicht Search Brand', spend: 410.2, impressions: 38900, clicks: 1640, conversions: 12, ctr: 4.22, cpc: 0.25 },
  { name: 'Nordlicht Autumn Wrap-up', spend: 340.0, impressions: 61200, clicks: 890, conversions: 9, ctr: 1.45, cpc: 0.38 },
];

const base: Props = {
  viewer,
  workspace,
  loading: false,
  activeTab: 'campaigns',
  connections: connectedConnections,
  campaigns: sampleCampaigns,
  chartData: sampleChart,
  adGroups: sampleAdGroups,
  toast: null,
  initialSearchQuery: '',
  initialStatusFilter: 'all',
  initialPlatformFilter: 'all',
  initialShowInactive: false,
  initialActiveGroup: 'all',
  setups: sampleSetups,
  initialExpandedSetupId: null,
  metaAccounts: metaAccountOptions,
  googleAccounts: googleAccountOptions,
  metaRows: sampleMetaRows,
  googleRows: sampleGoogleRows,
};

export const states = defineStates<Props>({
  'default': {
    label: 'Campaigns tab, two platforms connected: connection cards, the spend chart, a filterable table of six campaigns',
    props: base, height: 1700, viewport: 1440,
  },
  'loading': {
    label: 'First fetch: the shell renders, the body is one centered spinner (line 1401 to 1409)',
    props: { ...base, loading: true, connections: disconnectedConnections, campaigns: [], adGroups: [] },
    height: 520, viewport: 1440,
  },
  'empty': {
    label: 'Connected, campaigns exist, but the search text matches none: "No campaigns match your filters."',
    props: { ...base, initialSearchQuery: 'holiday bundle' },
    height: 1000, viewport: 1440,
  },
  'disconnected': {
    label: 'Fresh workspace: all four platforms show "Not connected", no clients, "No campaigns yet. Create your first one!"',
    props: { ...base, connections: disconnectedConnections, campaigns: [], adGroups: [] },
    height: 900, viewport: 1440,
  },
  'error': {
    label: 'A campaign-setup submission came back partial: the bottom toast is the only place the page surfaces an error (Gotchas)',
    props: {
      ...base,
      toast: { kind: 'error', text: 'Campaign setup failed: linkedin: Ad account not connected; google: budget exceeds daily cap' },
    },
    height: 1700, viewport: 1440,
  },
  'multiplatform-tab': {
    label: 'Multiplatform tab: three setups, the partial one expanded into its per-platform rollup with "Retry failed platforms"',
    props: { ...base, activeTab: 'multiplatform', initialExpandedSetupId: 'setup-2' },
    height: 1000, viewport: 1440,
  },
  'insights-tab': {
    label: 'Insights tab: Meta selected, campaign-level rows for the two connected ad accounts, totals strip and results table',
    props: { ...base, activeTab: 'insights' },
    height: 900, viewport: 1440,
  },
});

/* ---- small components (AdsManager.tsx 197 to 435) --------------------------------- */

function PlatformBadge({ platform, size = 'sm' }: { platform: Platform; size?: 'sm' | 'md' }) {
  const config = PLATFORMS[platform];
  const sizeClasses = size === 'sm' ? 'w-5 h-5 text-[10px]' : 'w-7 h-7 text-xs';
  return (
    <div
      className={`${sizeClasses} rounded-md flex items-center justify-center font-bold text-white flex-shrink-0`}
      style={{ backgroundColor: config.color }}
      title={config.name}
    >
      {PLATFORM_ICON[platform]}
    </div>
  );
}

function MetricCard({
  label, value, prefix = '', suffix = '', icon: Icon,
}: { label: string; value: string | number; prefix?: string; suffix?: string; icon: React.ComponentType<any> }) {
  return (
    <Card padding="sm" className="bg-white border-stone-200">
      <div className="flex items-start justify-between">
        <div>
          <Text size="xs" className="text-stone-500">{label}</Text>
          <div className="mt-1 flex items-baseline gap-1">
            <Text size="xs" className="text-stone-500">{prefix}</Text>
            <Heading level={3} className="!text-2xl">{value}</Heading>
            <Text size="xs" className="text-stone-500">{suffix}</Text>
          </div>
        </div>
        <div className="p-2 rounded-lg bg-[#6844C4]/10">
          <Icon className="w-4 h-4 text-[#6844C4]" />
        </div>
      </div>
      {/* `change` (the +/-% row, ArrowUpRight/ArrowDownRight) is supported but never
          passed by any call site in the source (line 1533 to 1536) — reproduced by omission. */}
    </Card>
  );
}

function PlatformConnectionCard({ platform, connection }: { platform: Platform; connection?: PlatformConnection }) {
  const config = PLATFORMS[platform];
  const connected = connection?.connected ?? false;
  const accountCount = connection?.accounts?.length ?? 0;
  return (
    <div className={`flex items-center gap-3 px-3 py-2.5 rounded-xl ${connected ? 'bg-white border border-stone-200' : 'bg-stone-50 border border-stone-100'}`}>
      <PlatformBadge platform={platform} size="md" />
      <div className="flex-1 min-w-0">
        <Text size="sm" weight="medium">{config.name}</Text>
        <Text size="xs" className="text-stone-500">
          {connected ? `${accountCount} account${accountCount !== 1 ? 's' : ''}` : 'Not connected'}
        </Text>
      </div>
      {connected ? (
        <div className="flex items-center gap-1.5">
          <div className="w-2 h-2 rounded-full bg-emerald-500" />
          <button className="p-1.5 rounded-lg hover:bg-stone-100 text-stone-500">
            <Settings className="w-3.5 h-3.5" />
          </button>
        </div>
      ) : (
        <Button size="sm" variant="outline">
          <Link2 className="w-3.5 h-3.5" />
          Connect
        </Button>
      )}
    </div>
  );
}

const STATUS_DOT: Record<CampaignStatus, string> = {
  active: 'bg-emerald-500', paused: 'bg-amber-500', draft: 'bg-stone-400', completed: 'bg-blue-500', error: 'bg-red-500',
};
const STATUS_BADGE: Record<CampaignStatus, 'success' | 'warning' | 'default' | 'info' | 'error'> = {
  active: 'success', paused: 'warning', draft: 'default', completed: 'info', error: 'error',
};

function CampaignRow({ campaign }: { campaign: Campaign }) {
  return (
    <div className="group flex items-center gap-4 px-4 py-3 rounded-xl cursor-pointer border border-transparent hover:bg-stone-50 hover:border-stone-200">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <div className={`w-2 h-2 rounded-full flex-shrink-0 ${STATUS_DOT[campaign.status]}`} />
          <Text size="sm" weight="medium" className="truncate">{campaign.name}</Text>
          <Badge variant={STATUS_BADGE[campaign.status]} size="sm">{campaign.status}</Badge>
        </div>
        <div className="flex items-center gap-1.5 mt-1 ml-4">
          {campaign.platforms.map((p) => <PlatformBadge key={p} platform={p} />)}
          <Text size="xs" className="ml-1 text-stone-400">{OBJECTIVES[campaign.objective]?.label}</Text>
        </div>
      </div>
      <div className="hidden lg:flex items-center gap-6">
        <div className="text-right w-20">
          <Text size="xs" className="text-stone-400">Spend</Text>
          <Text size="sm" weight="medium">CHF {campaign.metrics.spend.toLocaleString()}</Text>
        </div>
        <div className="text-right w-20">
          <Text size="xs" className="text-stone-400">Clicks</Text>
          <Text size="sm" weight="medium">{campaign.metrics.clicks.toLocaleString()}</Text>
        </div>
        <div className="text-right w-16">
          <Text size="xs" className="text-stone-400">CTR</Text>
          <Text size="sm" weight="medium">{campaign.metrics.ctr.toFixed(2)}%</Text>
        </div>
        <div className="text-right w-16">
          <Text size="xs" className="text-stone-400">Conv.</Text>
          <Text size="sm" weight="medium">{campaign.metrics.conversions}</Text>
        </div>
        <div className="text-right w-20">
          <Text size="xs" className="text-stone-400">ROAS</Text>
          <Text size="sm" weight="medium" className={campaign.metrics.roas >= 2 ? 'text-emerald-500' : campaign.metrics.roas >= 1 ? 'text-amber-500' : 'text-red-400'}>
            {campaign.metrics.roas.toFixed(1)}x
          </Text>
        </div>
      </div>
      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
        <button className="p-1.5 rounded-lg hover:bg-stone-200 text-stone-500" title={campaign.status === 'active' ? 'Pause' : 'Resume'}>
          {campaign.status === 'active' ? <Pause className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
        </button>
        <button className="p-1.5 rounded-lg hover:bg-stone-200 text-stone-500">
          <MoreHorizontal className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  );
}

/** Substitute for recharts' `<AreaChart>` (header comment): the same three stacked,
 * gradient-filled areas over `chartData`, hand-built as one inline `<svg>`. */
function SpendByPlatformChart({ data }: { data: ChartPoint[] }) {
  const width = 100;
  const height = 40;
  const maxY = Math.max(1, ...data.map((d) => d.meta + d.google + d.linkedin));
  const stepX = data.length > 1 ? width / (data.length - 1) : width;

  const areaPath = (key: 'meta' | 'google' | 'linkedin', stackBelow: (d: ChartPoint) => number) => {
    const top = data.map((d, i) => {
      const y = height - ((stackBelow(d) + d[key]) / maxY) * height;
      return `${i === 0 ? 'M' : 'L'} ${i * stepX} ${y}`;
    });
    const bottom = [...data].reverse().map((d, i) => {
      const y = height - (stackBelow(d) / maxY) * height;
      const x = (data.length - 1 - i) * stepX;
      return `L ${x} ${y}`;
    });
    return `${top.join(' ')} ${bottom.join(' ')} Z`;
  };

  return (
    <div className="h-[200px]">
      <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" className="w-full h-full" role="img" aria-label="Spend by platform, 14 days">
        <path d={areaPath('meta', () => 0)} fill={PLATFORMS.meta.color} fillOpacity={0.25} stroke={PLATFORMS.meta.color} strokeWidth={0.4} vectorEffect="non-scaling-stroke" />
        <path d={areaPath('google', (d) => d.meta)} fill={PLATFORMS.google.color} fillOpacity={0.25} stroke={PLATFORMS.google.color} strokeWidth={0.4} vectorEffect="non-scaling-stroke" />
        <path d={areaPath('linkedin', (d) => d.meta + d.google)} fill={PLATFORMS.linkedin.color} fillOpacity={0.25} stroke={PLATFORMS.linkedin.color} strokeWidth={0.4} vectorEffect="non-scaling-stroke" />
      </svg>
      <div className="flex justify-between mt-1">
        <Text size="xs" className="text-stone-400">{formatDay(data[0]?.date ?? '2026-01-01')}</Text>
        <Text size="xs" className="text-stone-400">{formatDay(data[data.length - 1]?.date ?? '2026-01-01')}</Text>
      </div>
    </div>
  );
}

/* ---- Multiplatform tab (MultiplatformSetups.tsx) ----------------------------------- */

function statusVariant(status: string): 'success' | 'warning' | 'error' | 'default' | 'info' {
  if (status === 'created') return 'success';
  if (status === 'partial') return 'warning';
  if (status === 'failed') return 'error';
  if (status === 'creating') return 'info';
  return 'default';
}

function PlatformChip({ result }: { result: SetupPlatformResult }) {
  const color = PLATFORMS[result.platform as Platform]?.color || '#78716c';
  const ok = result.status === 'created';
  const failed = result.status === 'failed';
  return (
    <span
      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-lg text-xs border ${ok ? 'border-emerald-200 bg-emerald-50' : failed ? 'border-red-200 bg-red-50' : 'border-stone-200 bg-stone-50'}`}
      title={result.error || result.reason || result.status}
    >
      <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
      <span className="capitalize">{result.platform}</span>
      {ok ? <CheckCircle className="w-3 h-3 text-emerald-500" /> : failed ? <XCircle className="w-3 h-3 text-red-500" /> : <AlertTriangle className="w-3 h-3 text-amber-500" />}
    </span>
  );
}

function SetupRollup({ setup, onRetried }: { setup: CampaignSetupRecord; onRetried: () => void }) {
  const [retrying, setRetrying] = useState(false);
  const canRetry = setup.status === 'partial' || setup.status === 'failed';
  const audience = setup.brief.audience || {};
  const creative = setup.brief.creative || {};
  return (
    <div className="space-y-3">
      <div className="p-3 rounded-xl grid grid-cols-2 md:grid-cols-4 gap-3 bg-stone-50">
        <div>
          <Text size="xs" className="text-stone-400">Objective</Text>
          <Text size="sm" weight="medium" className="capitalize">{setup.objective}</Text>
        </div>
        <div>
          <Text size="xs" className="text-stone-400">Daily Budget</Text>
          <Text size="sm" weight="medium">{setup.currency} {setup.total_daily_budget.toLocaleString()}</Text>
        </div>
        <div>
          <Text size="xs" className="text-stone-400">Countries</Text>
          <Text size="sm" weight="medium">{(audience.geo || []).join(', ') || '—'}</Text>
        </div>
        <div>
          <Text size="xs" className="text-stone-400">Landing URL</Text>
          <Text size="sm" weight="medium" className="truncate">{creative.landing_url || '—'}</Text>
        </div>
      </div>
      <div className="space-y-2">
        {setup.platform_results.map((r) => (
          <div key={r.platform} className="p-3 rounded-xl border border-stone-200 bg-white">
            <div className="flex items-center gap-2">
              <span className="w-5 h-5 rounded-md flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style={{ backgroundColor: PLATFORMS[r.platform as Platform]?.color || '#78716c' }}>
                {r.platform === 'linkedin' ? 'in' : r.platform.charAt(0).toUpperCase()}
              </span>
              <Text size="sm" weight="medium" className="capitalize flex-1">{r.platform}</Text>
              <Badge variant={r.status === 'created' ? 'success' : r.status === 'failed' ? 'error' : 'warning'} size="sm">{r.status}</Badge>
            </div>
            {r.campaign_id && <Text size="xs" className="mt-1.5 block font-mono text-stone-500">Campaign ID: {r.campaign_id}</Text>}
            {(r.error || r.reason) && <Text size="xs" className="mt-1.5 block text-red-500">{r.error || r.reason}</Text>}
            {(r.warnings || []).map((w, i) => (
              <div key={i} className="mt-1.5 flex items-start gap-1.5">
                <AlertTriangle className="w-3 h-3 text-amber-500 flex-shrink-0 mt-0.5" />
                <Text size="xs" className="text-amber-700">{w}</Text>
              </div>
            ))}
          </div>
        ))}
      </div>
      {canRetry && (
        <div className="flex justify-end">
          <Button variant="outline" size="sm" loading={retrying} onClick={() => { setRetrying(true); setTimeout(() => { setRetrying(false); onRetried(); }, 400); }}>
            <RefreshCw className="w-3.5 h-3.5" />
            Retry failed platforms
          </Button>
        </div>
      )}
    </div>
  );
}

function MultiplatformTab({ setups, initialExpandedSetupId }: { setups: CampaignSetupRecord[]; initialExpandedSetupId?: string | null }) {
  const [expanded, setExpanded] = useState<string | null>(initialExpandedSetupId ?? null);
  return (
    <Card padding="sm" className="bg-white border-stone-200">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Layers className="w-4 h-4 text-[#6844C4]" />
          <Text size="sm" weight="medium">Multiplatform Campaigns</Text>
          <Text size="xs" className="text-stone-400">{setups.length} setup{setups.length !== 1 ? 's' : ''}</Text>
        </div>
        <Button variant="ghost" size="sm"><RefreshCw className="w-3.5 h-3.5" /></Button>
      </div>
      {setups.length === 0 ? (
        <div className="py-12 text-center">
          <Layers className="w-8 h-8 mx-auto mb-3 text-stone-300" />
          <Text size="sm" className="text-stone-400">No multiplatform setups yet. Use "New Campaign" to create one brief that runs everywhere.</Text>
        </div>
      ) : (
        <div className="space-y-1">
          {setups.map((setup) => {
            const isOpen = expanded === setup.id;
            return (
              <div key={setup.id}>
                <div
                  className={`group flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer border border-transparent hover:bg-stone-50 hover:border-stone-200 ${isOpen ? 'bg-stone-50' : ''}`}
                  onClick={() => setExpanded(isOpen ? null : setup.id)}
                >
                  {isOpen ? <ChevronDown className="w-4 h-4 flex-shrink-0 text-stone-500" /> : <ChevronRight className="w-4 h-4 flex-shrink-0 text-stone-500" />}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <Text size="sm" weight="medium" className="truncate">{setup.name}</Text>
                      <Badge variant={statusVariant(setup.status)} size="sm">{setup.status}</Badge>
                    </div>
                    <div className="flex items-center gap-1.5 mt-1 flex-wrap">
                      {setup.platform_results.map((r) => <PlatformChip key={r.platform} result={r} />)}
                    </div>
                  </div>
                  <div className="hidden md:block text-right">
                    <Text size="xs" className="text-stone-400">Budget</Text>
                    <Text size="sm" weight="medium">{setup.currency} {setup.total_daily_budget.toLocaleString()}/day</Text>
                  </div>
                  <div className="hidden md:block text-right w-24">
                    <Text size="xs" className="text-stone-400">Created</Text>
                    <Text size="sm" weight="medium">{setup.created_at ? formatDay(setup.created_at) : '—'}</Text>
                  </div>
                </div>
                {isOpen && (
                  <div className="ml-11 mr-4 mb-3 mt-1">
                    <SetupRollup setup={setup} onRetried={() => {}} />
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
}

/* ---- Insights tab (InsightsPanel.tsx) ---------------------------------------------- */

const selectClass = 'px-3 py-2 rounded-xl text-sm border transition-colors bg-white border-stone-200 text-zinc-900';

function InsightsTab({ metaAccounts, googleAccounts, metaRows, googleRows }: { metaAccounts: AccountOption[]; googleAccounts: AccountOption[]; metaRows: FlatRow[]; googleRows: FlatRow[] }) {
  const metaConnected = metaAccounts.length > 0;
  const googleConnected = googleAccounts.length > 0;
  const [platform, setPlatform] = useState<'meta' | 'google'>(metaConnected || !googleConnected ? 'meta' : 'google');
  const [level, setLevel] = useState<string>('campaign');
  const [preset, setPreset] = useState<string>(META_DATE_PRESETS[5]);
  const [breakdown, setBreakdown] = useState('');
  const [googleLevel, setGoogleLevel] = useState<(typeof GOOGLE_LEVELS)[number]>('campaign');
  const [googleRange, setGoogleRange] = useState<(typeof GOOGLE_DATE_RANGES)[number]>('LAST_30_DAYS');

  const accounts = platform === 'meta' ? metaAccounts : googleAccounts;
  const rows = platform === 'meta' ? metaRows : googleRows;
  const sorted = [...rows].sort((a, b) => b.spend - a.spend);
  const totals = rows.reduce((acc, r) => ({ spend: acc.spend + r.spend, impressions: acc.impressions + r.impressions, clicks: acc.clicks + r.clicks, conversions: acc.conversions + r.conversions }), { spend: 0, impressions: 0, clicks: 0, conversions: 0 });

  if (!metaConnected && !googleConnected) {
    return (
      <Card padding="sm" className="bg-white border-stone-200">
        <div className="py-12 text-center">
          <BarChart3 className="w-8 h-8 mx-auto mb-3 text-stone-300" />
          <Text size="sm" className="text-stone-400">Connect Meta or Google above to run insight reports.</Text>
        </div>
      </Card>
    );
  }

  return (
    <Card padding="sm" className="bg-white border-stone-200">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <BarChart3 className="w-4 h-4 text-[#6844C4]" />
          <Text size="sm" weight="medium">Insights</Text>
        </div>
        <Button variant="ghost" size="sm"><RefreshCw className="w-3.5 h-3.5" /></Button>
      </div>

      <div className="flex flex-wrap items-center gap-2 mb-4">
        <div className="flex rounded-xl border overflow-hidden border-stone-200">
          {(['meta', 'google'] as const).map((p) => {
            const disabled = p === 'meta' ? !metaConnected : !googleConnected;
            return (
              <button
                key={p}
                disabled={disabled}
                onClick={() => setPlatform(p)}
                className={`px-3 py-2 text-sm font-medium transition-colors ${platform === p ? 'bg-[#6844C4] text-white' : disabled ? 'text-stone-300' : 'text-stone-500 hover:bg-stone-50'}`}
              >
                {p === 'meta' ? 'Meta' : 'Google'}
              </button>
            );
          })}
        </div>
        <select value={accounts[0]?.id ?? ''} onChange={() => {}} className={selectClass}>
          {accounts.length === 0 && <option value="">No accounts</option>}
          {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
        </select>
        {platform === 'meta' ? (
          <>
            <select value={level} onChange={(e) => setLevel(e.target.value)} className={selectClass}>
              <option value="campaign">By campaign</option>
              <option value="adset">By ad set</option>
              <option value="account">Account total</option>
            </select>
            <select value={preset} onChange={(e) => setPreset(e.target.value)} className={selectClass}>
              {META_DATE_PRESETS.map((p) => <option key={p} value={p}>{p.replace(/_/g, ' ')}</option>)}
            </select>
            <select value={breakdown} onChange={(e) => setBreakdown(e.target.value)} className={selectClass}>
              <option value="">No breakdown</option>
              {META_BREAKDOWNS.map((b) => <option key={b} value={b}>{b.replace(/_/g, ' ')}</option>)}
            </select>
          </>
        ) : (
          <>
            <select value={googleLevel} onChange={(e) => setGoogleLevel(e.target.value as any)} className={selectClass}>
              {GOOGLE_LEVELS.map((l) => <option key={l} value={l}>By {l.replace(/_/g, ' ')}</option>)}
            </select>
            <select value={googleRange} onChange={(e) => setGoogleRange(e.target.value as any)} className={selectClass}>
              {GOOGLE_DATE_RANGES.map((r) => <option key={r} value={r}>{r.replace(/_/g, ' ').toLowerCase()}</option>)}
            </select>
          </>
        )}
        <Button variant="primary" size="sm" disabled={!accounts[0]}>Run</Button>
      </div>

      {rows.length > 0 && (
        <div className="mb-4 p-3 rounded-xl grid grid-cols-2 md:grid-cols-4 gap-3 bg-stone-50">
          <div><Text size="xs" className="text-stone-400">Spend</Text><Text size="sm" weight="medium">CHF {totals.spend.toLocaleString('de-CH', { maximumFractionDigits: 2 })}</Text></div>
          <div><Text size="xs" className="text-stone-400">Impressions</Text><Text size="sm" weight="medium">{totals.impressions.toLocaleString()}</Text></div>
          <div><Text size="xs" className="text-stone-400">Clicks</Text><Text size="sm" weight="medium">{totals.clicks.toLocaleString()}</Text></div>
          <div><Text size="xs" className="text-stone-400">Conversions</Text><Text size="sm" weight="medium">{totals.conversions.toLocaleString('de-CH', { maximumFractionDigits: 1 })}</Text></div>
        </div>
      )}

      {sorted.length > 0 ? (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-stone-400">
                <th className="text-left font-medium px-3 py-2 text-xs">Name</th>
                <th className="text-right font-medium px-3 py-2 text-xs">Spend</th>
                <th className="text-right font-medium px-3 py-2 text-xs">Impr.</th>
                <th className="text-right font-medium px-3 py-2 text-xs">Clicks</th>
                <th className="text-right font-medium px-3 py-2 text-xs">CTR</th>
                <th className="text-right font-medium px-3 py-2 text-xs">CPC</th>
                <th className="text-right font-medium px-3 py-2 text-xs">Conv.</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map((r, i) => (
                <tr key={i} className="border-t border-stone-100 hover:bg-stone-50">
                  <td className="px-3 py-2 max-w-[280px] truncate">{r.name}</td>
                  <td className="px-3 py-2 text-right whitespace-nowrap">CHF {r.spend.toLocaleString('de-CH', { maximumFractionDigits: 2 })}</td>
                  <td className="px-3 py-2 text-right">{r.impressions.toLocaleString()}</td>
                  <td className="px-3 py-2 text-right">{r.clicks.toLocaleString()}</td>
                  <td className="px-3 py-2 text-right">{r.ctr.toFixed(2)}%</td>
                  <td className="px-3 py-2 text-right">{r.cpc.toFixed(2)}</td>
                  <td className="px-3 py-2 text-right">{r.conversions.toLocaleString('de-CH', { maximumFractionDigits: 1 })}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="py-12 text-center"><Text size="sm" className="text-stone-400">No data for this selection.</Text></div>
      )}
    </Card>
  );
}

/* ---- the page (AdsManager.tsx 1168 to 1760) ---------------------------------------- */

function AdsHub({
  loading, activeTab, connections, campaigns, chartData, adGroups, toast,
  initialSearchQuery = '', initialStatusFilter = 'all', initialPlatformFilter = 'all', initialShowInactive = false, initialActiveGroup = 'all',
  setups, initialExpandedSetupId, metaAccounts, googleAccounts, metaRows, googleRows,
}: Omit<Props, 'viewer' | 'workspace'>) {
  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
  const [statusFilter, setStatusFilter] = useState(initialStatusFilter);
  const [platformFilter, setPlatformFilter] = useState(initialPlatformFilter);
  const [showInactive, setShowInactive] = useState(initialShowInactive);
  const [activeGroup, setActiveGroup] = useState(initialActiveGroup);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Spinner size="lg" />
      </div>
    );
  }

  const totalSpend = campaigns.reduce((sum, c) => sum + c.metrics.spend, 0);
  const totalConversions = campaigns.reduce((sum, c) => sum + c.metrics.conversions, 0);
  const avgCPA = totalConversions > 0 ? totalSpend / totalConversions : 0;
  const roasCampaigns = campaigns.filter((c) => c.metrics.roas > 0);
  const avgROAS = roasCampaigns.reduce((sum, c) => sum + c.metrics.roas, 0) / Math.max(1, roasCampaigns.length);

  const filtered = campaigns.filter((c) => {
    if (searchQuery && !c.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    if (statusFilter !== 'all' && c.status !== statusFilter) return false;
    if (platformFilter !== 'all' && !c.platforms.includes(platformFilter)) return false;
    if (activeGroup !== 'all') {
      const group = adGroups.find((g) => g.name === activeGroup);
      if (group) {
        if (!c.account_id) return true;
        const groupAccountIds = [group.meta_account_id, group.google_account_id, group.linkedin_account_id, group.microsoft_account_id].filter(Boolean);
        if (!groupAccountIds.includes(c.account_id)) return false;
      }
    }
    return true;
  });

  return (
    <div className="p-4 md:p-6 max-w-[1400px] mx-auto space-y-6">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <Heading level={2} className="flex items-center gap-2">
            <Megaphone className="w-6 h-6 text-[#6844C4]" />
            Ads
          </Heading>
          <Text size="sm" className="text-stone-500">Create once, run everywhere. Manage campaigns across all platforms.</Text>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm"><Target className="w-3.5 h-3.5" />Retargeting</Button>
          <Button variant="outline" size="sm"><Settings className="w-3.5 h-3.5" />Clients</Button>
          <Button variant="outline" size="sm"><RefreshCw className="w-3.5 h-3.5" />Sync</Button>
          <Button variant="primary"><Plus className="w-4 h-4" />New Campaign</Button>
        </div>
      </div>

      {/* Client tabs */}
      {adGroups.length > 0 && (
        <div className="flex items-center gap-1 overflow-x-auto pb-1">
          <button
            onClick={() => setActiveGroup('all')}
            className={`px-4 py-2 rounded-2xl text-sm font-medium whitespace-nowrap transition-colors ${activeGroup === 'all' ? 'bg-[#6844C4] text-white' : 'bg-stone-100 text-stone-600 hover:bg-stone-200'}`}
          >
            All Clients
          </button>
          {adGroups.map((group) => (
            <button
              key={group.name}
              onClick={() => setActiveGroup(group.name)}
              className={`px-4 py-2 rounded-2xl text-sm font-medium whitespace-nowrap transition-colors ${activeGroup === group.name ? 'bg-[#6844C4] text-white' : 'bg-stone-100 text-stone-600 hover:bg-stone-200'}`}
            >
              {group.name}
            </button>
          ))}
        </div>
      )}

      {/* Platform connections */}
      <Card padding="sm" className="bg-white border-stone-200">
        <div className="flex items-center justify-between mb-3">
          <Text size="sm" weight="medium">Platforms</Text>
          <Text size="xs" className="text-stone-400">{connections.filter((c) => c.connected).length} of {connections.length} connected</Text>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {(Object.keys(PLATFORMS) as Platform[]).map((p) => (
            <PlatformConnectionCard key={p} platform={p} connection={connections.find((c) => c.platform === p)} />
          ))}
        </div>
      </Card>

      {/* View tabs */}
      <div className="flex items-center gap-1 border-b border-stone-200">
        {([{ id: 'campaigns', label: 'Campaigns', icon: Megaphone }, { id: 'multiplatform', label: 'Multiplatform', icon: Layers }, { id: 'insights', label: 'Insights', icon: BarChart3 }] as const).map((tab) => (
          <div
            key={tab.id}
            className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px ${activeTab === tab.id ? 'border-[#6844C4] text-[#6844C4]' : 'border-transparent text-stone-500'}`}
          >
            <tab.icon className="w-3.5 h-3.5" />
            {tab.label}
          </div>
        ))}
      </div>

      {activeTab === 'campaigns' && (
        <>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <MetricCard label="Total Spend" value={totalSpend.toLocaleString()} prefix="CHF" icon={DollarSign} />
            <MetricCard label="Conversions" value={totalConversions} icon={Target} />
            <MetricCard label="Avg. CPA" value={avgCPA.toFixed(2)} prefix="CHF" icon={TrendingUp} />
            <MetricCard label="Avg. ROAS" value={avgROAS.toFixed(1)} suffix="x" icon={Zap} />
          </div>

          <Card padding="sm" className="bg-white border-stone-200">
            <div className="flex items-center justify-between mb-4">
              <Text size="sm" weight="medium">Spend by Platform (14 days)</Text>
              <div className="flex items-center gap-3">
                {(['meta', 'google', 'linkedin'] as Platform[]).map((p) => (
                  <div key={p} className="flex items-center gap-1.5">
                    <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: PLATFORMS[p].color }} />
                    <Text size="xs" className="text-stone-500">{PLATFORMS[p].name}</Text>
                  </div>
                ))}
              </div>
            </div>
            <SpendByPlatformChart data={chartData} />
          </Card>

          <Card padding="sm" className="bg-white border-stone-200">
            <div className="flex flex-col md:flex-row md:items-center gap-3 mb-4">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-stone-400" />
                <Input value={searchQuery} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)} placeholder="Search campaigns..." className="pl-10" />
              </div>
              <div className="flex items-center gap-2">
                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value as any)} className={selectClass}>
                  <option value="all">All Status</option>
                  <option value="active">Active</option>
                  <option value="paused">Paused</option>
                  <option value="draft">Draft</option>
                  <option value="completed">Completed</option>
                </select>
                <select value={platformFilter} onChange={(e) => setPlatformFilter(e.target.value as any)} className={selectClass}>
                  <option value="all">All Platforms</option>
                  {Object.entries(PLATFORMS).map(([key, config]) => <option key={key} value={key}>{config.name}</option>)}
                </select>
                <button
                  onClick={() => setShowInactive(!showInactive)}
                  className={`px-3 py-2 rounded-xl text-sm border transition-colors whitespace-nowrap ${showInactive ? 'bg-[#6844C4]/10 border-[#6844C4]/20 text-[#6844C4]' : 'bg-white border-stone-200 text-stone-500'}`}
                >
                  {showInactive ? 'Hide Older' : 'Show Older'}
                </button>
              </div>
            </div>

            <div className="hidden lg:flex items-center gap-4 px-4 py-2 mb-1 text-stone-400">
              <Text size="xs" weight="medium" className="flex-1">Campaign</Text>
              <Text size="xs" weight="medium" className="text-right w-20">Spend</Text>
              <Text size="xs" weight="medium" className="text-right w-20">Clicks</Text>
              <Text size="xs" weight="medium" className="text-right w-16">CTR</Text>
              <Text size="xs" weight="medium" className="text-right w-16">Conv.</Text>
              <Text size="xs" weight="medium" className="text-right w-20">ROAS</Text>
              <div className="w-16" />
            </div>

            <div className="space-y-1">
              {filtered.length === 0 ? (
                <div className="py-12 text-center">
                  <Megaphone className="w-8 h-8 mx-auto mb-3 text-stone-300" />
                  <Text size="sm" className="text-stone-400">
                    {searchQuery || statusFilter !== 'all' || platformFilter !== 'all' ? 'No campaigns match your filters.' : 'No campaigns yet. Create your first one!'}
                  </Text>
                </div>
              ) : (
                filtered.map((campaign) => <CampaignRow key={campaign.id} campaign={campaign} />)
              )}
            </div>
          </Card>
        </>
      )}

      {activeTab === 'multiplatform' && <MultiplatformTab setups={setups} initialExpandedSetupId={initialExpandedSetupId} />}

      {activeTab === 'insights' && (
        <InsightsTab metaAccounts={metaAccounts} googleAccounts={googleAccounts} metaRows={metaRows} googleRows={googleRows} />
      )}

      {toast && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[60] max-w-xl w-[calc(100%-2rem)]">
          <div className={`px-4 py-3 rounded-xl shadow-2xl border flex items-start gap-2 bg-white ${toast.kind === 'success' ? 'bg-emerald-50 border-emerald-200' : toast.kind === 'warning' ? 'bg-amber-50 border-amber-200' : 'bg-red-50 border-red-200'}`}>
            {toast.kind === 'success' ? <CheckCircle className="w-4 h-4 text-emerald-500 flex-shrink-0 mt-0.5" /> : toast.kind === 'warning' ? <AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" /> : <XCircle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />}
            <Text size="xs" className="flex-1">{toast.text}</Text>
            <span className="opacity-50 text-xs">✕</span>
          </div>
        </div>
      )}
    </div>
  );
}

export default function Demo({ viewer: v, workspace: ws, galleryMode, ...page }: Props & { galleryMode?: boolean }) {
  return (
    <Shell domains={DOMAINS} user={v} workspaces={[ws]} currentWorkspaceId={ws.id} activePath="/ads" hasTour={false} hideChrome={galleryMode}>
      <AdsHub {...page} />
    </Shell>
  );
}