/**
 * Live demo for analytics-tracking/ui/tracking-dashboard.
 *
 * Labs' TrackingDashboard.tsx (main, 62ba4fc, 1517 lines) with its five
 * independent reads (`/api/scribe/config`, `/api/scribe/stats` +
 * `/api/scribe/insights/dashboard` run together but caught separately,
 * `/api/scribe/timeseries`, `/api/scribe/sessions`, `/api/scribe/campaigns`,
 * `/api/scribe/landing-pages`) replaced by props: `loading` for the page's
 * first-fetch gate, `trackingSiteId` for the config read, `stats` /
 * `insights` for the two reads the dashboard's own `Promise.all` runs
 * together (`insights` alone can be `null` while `stats` is populated,
 * because `fetchStats` catches the insights call on its own,
 * `.catch(() => ({ data: null }))`, line 305 — reproduced below as the
 * `error` state), and `timeseries` / `sessions` / `sessionsTotal` /
 * `campaigns` / `landingPages` for the four reads that run independently of
 * `fetchStats` and of each other. `activeTab` seeds a local `useState` the
 * same way `subscription-manager`'s demo seeds its voucher input, since the
 * source drives the tab with a `useEffect` this demo cannot run
 * (`if (stats.totals.events === 0) setActiveTab('setup')`, line 382 to 386;
 * `if (statsRes.data.totals.events > 0 && activeTab === 'setup')
 * setActiveTab('data')`, line 313 to 315); the prop is what that effect
 * would have produced for each state's numbers, computed by hand once
 * rather than run live.
 *
 * What is kept byte-faithful: the header and its date-range dropdown, the
 * four-tab bar and each tab's unread badge, the Data tab's five metric
 * cards (with the exact `insights ?? stats` fallback chain per card, line
 * 716 to 764), the time-series/hourly/daily/traffic-source card headers and
 * their exact empty-state guards, the campaigns and landing-pages tables
 * (including the landing-page row's proportional background bar, line
 * 1158 to 1160), the sessions list and its expand/collapse row with a
 * session's events, the Insights tab's four metric cards, recommendations
 * list, conversion funnel, engagement distribution and device breakdown,
 * and the Setup tab's three feature cards, site-ID card, install
 * code block and JavaScript API examples. All copy is the source's, German
 * (de-CH).
 *
 * What is different, and why:
 *   - `recharts` (`AreaChart`, `BarChart`, `PieChart`, line 39 to 53) is not
 *     one of the four packages a demo may import from (AUTHORING.md "The
 *     exports"), and the gate's esbuild bundle only externalizes react,
 *     react-dom, react-router-dom and lucide-react
 *     (tooling/verify/render-smoke.mjs), so bundling it would fail to
 *     resolve. `MiniAreaChart`, `MiniBarChart` and `MiniDonutChart` below
 *     are a from-scratch inline-SVG rebuild, following the same convention
 *     bookkeeping/ui/bookkeeping-financial-dashboard's demo already
 *     establishes for its own two recharts widgets: same gridline and axis
 *     tones, same three series colors on the area chart (`#6844C4` sessions,
 *     `#3b82f6` page views, `#22c55e` contacts) and the same channel color
 *     table (`CHANNEL_COLORS`, kept verbatim). Neither chart's hover
 *     `Tooltip` (line 808, 841, 863, 901) is rendered; a static
 *     server-rendered frame has no hover to show it on.
 *   - `ScribeExplore` (`components/scribe/ScribeExplore.tsx`, 166 lines) and
 *     the three components it composes (`ScribeQueryBuilder.tsx`, 339
 *     lines; `QueryResultsPanel.tsx`, 280 lines; `FunnelBuilder.tsx`, 346
 *     lines — 965 lines together, none of them part of the four packages a
 *     demo may import from) are not ported line for line. `Explore` below
 *     rebuilds `ScribeExplore`'s own shell byte-faithfully (the schema
 *     loading spinner, the schema-error retry card, the Abfrage/Funnel
 *     mode toggle, line 84 to 139 of that file) and, once the schema is
 *     ready, a condensed but structurally real query panel (entity select,
 *     the schema's own filter fields, a date-range select, a Run button,
 *     a results table) rather than the source's full filter-row builder
 *     and its separate funnel-step editor. No shipped state below selects
 *     `activeTab: 'explore'` (none of the five states differ by tab
 *     selection, and `data` is the real default), so this simplification is
 *     never exercised by the render-smoke gate; it exists so the tab is not
 *     simply missing. Documented, not hidden.
 *   - `useNavigate` (line 2, 243) is dropped: "Einstellungen" (both call
 *     sites), the empty-state "Zur Installation" button (line 700, which
 *     really calls `setActiveTab('setup')` and is kept wired, since that is
 *     local state, not navigation) and the Setup tab's "Konfigurieren"
 *     button render with their real label and icon but the two that would
 *     leave the page do nothing, the same convention
 *     billing-credits/ui/subscription-manager's demo uses for its
 *     modal-opening buttons.
 *   - `navigator.clipboard.writeText` (`copyCode`, line 410 to 414) and the
 *     session-events fetch a row's expand triggers (`fetchSessionEvents`,
 *     line 335 to 343) are real event handlers kept as-is; neither runs
 *     during a static render (`renderToString` never fires an `onClick`),
 *     and no top-level code touches `window` or `document`
 *     (AUTHORING.md "The exports"). One session (`sessionExpandedId`) is
 *     pre-expanded by prop in `default` so the events list itself renders in
 *     at least one frame without simulating a click.
 *   - `toLocaleString('de-CH', …)` (`formatTimestamp`, `formatRelativeTime`,
 *     `formatChartDate`, `ChartTooltip`, four call sites) is replaced with
 *     the same fixed UTC-getter formatting
 *     billing-credits/ui/subscription-manager's demo uses for its dates, for
 *     the same reason: a server-rendered locale string can read differently
 *     once the identical markup hydrates in the browser.
 *   - `apiBaseUrl` (`import.meta.env.VITE_API_URL`, line 267) is a fixed
 *     fictional origin (`https://api.example-labs.test`); `trackingSiteId`
 *     and every session/campaign/contact value below are invented, not
 *     copied from any real workspace (AUTHORING.md house rules).
 *
 * What the source itself never renders, reproduced as measured, not fixed
 * (Gotchas): `TrackingStats.event_counts`, `.page_views`, `.recent_events`
 * and `.recent_contacts` (line 78 to 95) are fetched and typed but no JSX
 * anywhere reads them; `deleteContact` (line 416 to 427) is declared and
 * never called from any button; `pixelIds` (line 252, populated by
 * `fetchTrackingConfig`, line 279 to 285) is set and never read again, a
 * leftover from the client-side Meta/Google/LinkedIn/Bing pixel removal the
 * comment above `pixelAttrs` documents (line 429 to 433, itself always an
 * empty string); `DashboardInsights.top_pages` (line 124 to 127) is typed
 * and fetched but no JSX reads it either. All four are typed on the props
 * below for shape-fidelity and left genuinely empty in the sample data
 * rather than populated for a card that will never show them.
 */
import React, { useState } from 'react';
import {
  Activity,
  AlertTriangle,
  BarChart2,
  Calendar,
  Check,
  CheckCircle,
  ChevronDown,
  ChevronRight,
  Clock,
  Code,
  Copy,
  Database,
  ExternalLink,
  Eye,
  Globe,
  Info,
  Lightbulb,
  Mail,
  Megaphone,
  Monitor,
  MousePointer,
  PieChart as PieChartIcon,
  RefreshCw,
  Search,
  Settings,
  Shield,
  Smartphone,
  Tablet,
  Target,
  Timer,
  TrendingDown,
  TrendingUp,
  Users,
} from 'lucide-react';
import { defineStates } from '@prima-modules/demo';
import { AZSymbol, Badge, Button, Card, Divider, Heading, 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';

/* ---- shapes (TrackingDashboard.tsx lines 72 to 236, unchanged) ---------- */

export interface TrackingStats {
  totals: { visitors: number; contacts: number; events: number };
  /** Fetched and typed; no JSX in the source reads any of these four (Gotchas). */
  event_counts: Record<string, number>;
  page_views: Record<string, number>;
  recent_events: Array<{ event: string; email: string | null; anonymous_id: string; event_data: Record<string, any>; context: Record<string, any>; site_id: string; timestamp: string }>;
  recent_contacts: Array<{ email: string; first_seen: string; properties: Record<string, any>; event_count: number }>;
}

export interface DashboardInsights {
  summary: {
    total_sessions: number; unique_visitors: number; identified_contacts: number;
    total_events: number; page_views: number; form_submissions: number;
    identification_rate: number; avg_events_per_session: number;
    avg_session_duration: number; avg_session_duration_formatted: string; bounce_rate: number;
  };
  traffic_sources: {
    sources: Array<{ source: string; medium: string; label: string; sessions: number; channel: string }>;
    channels: Array<{ channel: string; sessions: number }>;
  };
  /** Typed and fetched; no JSX in the source reads it (Gotchas). */
  top_pages: Array<{ page: string; views: number }>;
  engagement_distribution: { counts: { high: number; medium: number; low: number }; percentages: { high: number; medium: number; low: number } };
  conversion_funnel: { stages: Array<{ name: string; count: number; percentage: number }> };
  device_breakdown: { counts: { mobile: number; tablet: number; desktop: number }; percentages: { mobile: number; tablet: number; desktop: number } };
  trends: { current_period: number; previous_period: number; change_percent: number; trend: 'up' | 'down' | 'stable' };
  insights: Array<{ type: 'success' | 'warning' | 'info'; title: string; message: string; metric?: number; action?: string }>;
}

export interface TimeSeriesData {
  series: Array<{ date: string; events: number; sessions: number; page_views: number; contacts: number }>;
  hourly: Array<{ hour: number; label: string; count: number }>;
  daily: Array<{ dow: number; label: string; count: number }>;
  granularity: string;
  days: number;
}

export interface SessionItem {
  id: string; anonymous_id: string; source_label: string; landing_page: string | null;
  pages_viewed: number; duration_seconds: number; duration_formatted: string;
  status: 'identified' | 'anonymous'; contact_email: string | null; utm_campaign: string | null;
  has_gclid: boolean; has_fbclid: boolean; has_li_fat_id: boolean;
  first_seen: string; last_seen: string;
}

export interface SessionEvent {
  event_type: string; page_path: string | null; page_title: string | null;
  event_data: Record<string, any>; created_at: string;
}

export interface CampaignItem {
  campaign: string; sessions: number; unique_visitors: number; identified_contacts: number;
  conversion_rate: number; bounce_rate: number;
  has_gclid_count: number; has_fbclid_count: number; has_li_fat_id_count: number;
}

export interface LandingPageItem {
  landing_page: string; sessions: number; bounce_rate: number;
  avg_duration_seconds: number; avg_duration_formatted: string; identified_count: number;
}

export type DateRange = 1 | 7 | 14 | 30 | 90;

export interface Props {
  /** The signed-in tenant, for the shell's account row. */
  viewer: ShellUser;
  workspace: ShellWorkspace;
  /** Seeds the local tab state the source's two effects would otherwise drive (line 313 to 315, 382 to 386). */
  activeTab: 'data' | 'setup' | 'insights' | 'explore';
  /** The first fetch in flight (line 249, 318 to 321): a single spinner card in the Data tab, tabs already on screen. */
  loading?: boolean;
  refreshing?: boolean;
  /** '' when `/api/scribe/config` never returned a `site_id` (line 251, 276 to 277) — not just "still loading" (Gotchas). */
  trackingSiteId?: string;
  dateRange?: DateRange;
  /** Null only while `loading`; a genuinely empty workspace still gets a `totals.events === 0` object, not null (Application logic). */
  stats: TrackingStats | null;
  /** Independently nullable: `fetchStats`'s own `.catch(() => ({ data: null }))` on this one call (line 305, `error` state). */
  insights: DashboardInsights | null;
  timeseries: TimeSeriesData | null;
  sessions?: SessionItem[];
  sessionsTotal?: number;
  sessionsPage?: number;
  /** Pre-resolved so the expanded row renders without simulating `fetchSessionEvents`'s click-triggered fetch. */
  sessionExpandedId?: string | null;
  sessionEventsById?: Record<string, SessionEvent[]>;
  campaigns?: CampaignItem[];
  landingPages?: LandingPageItem[];
}

/* ---- sample data (fictional; house rules, AUTHORING.md) ----------------- */

const viewer: ShellUser = { name: 'Jonas Frei', email: 'jonas@example.com', isAdmin: false };
const workspace: ShellWorkspace = { id: 'ws_2', name: 'Studio Lindenhof', slug: 'studio-lindenhof' };

const DATE_RANGES: { label: string; value: DateRange }[] = [
  { label: 'Heute', value: 1 },
  { label: '7 Tage', value: 7 },
  { label: '14 Tage', value: 14 },
  { label: '30 Tage', value: 30 },
  { label: '90 Tage', value: 90 },
];

const CHANNEL_COLORS: Record<string, string> = {
  Direct: '#6844C4',
  Organic: '#22c55e',
  Paid: '#f59e0b',
  Social: '#3b82f6',
  Email: '#ec4899',
  Referral: '#8b5cf6',
};

const emptyStats: TrackingStats = {
  totals: { visitors: 0, contacts: 0, events: 0 },
  event_counts: {}, page_views: {}, recent_events: [], recent_contacts: [],
};

const populatedStats: TrackingStats = {
  totals: { visitors: 842, contacts: 96, events: 5310 },
  event_counts: {}, page_views: {}, recent_events: [], recent_contacts: [],
};

const populatedInsights: DashboardInsights = {
  summary: {
    total_sessions: 1024, unique_visitors: 842, identified_contacts: 96,
    total_events: 5310, page_views: 3120, form_submissions: 58,
    identification_rate: 11.4, avg_events_per_session: 5.2,
    avg_session_duration: 142, avg_session_duration_formatted: '2m 22s', bounce_rate: 38.6,
  },
  traffic_sources: {
    sources: [
      { source: 'google', medium: 'organic', label: 'google / organic', sessions: 356, channel: 'Organic' },
      { source: '(direct)', medium: '(none)', label: '(direct) / (none)', sessions: 240, channel: 'Direct' },
      { source: 'google', medium: 'cpc', label: 'google / cpc', sessions: 188, channel: 'Paid' },
      { source: 'linkedin', medium: 'social', label: 'linkedin / social', sessions: 140, channel: 'Social' },
      { source: 'newsletter', medium: 'email', label: 'newsletter / email', sessions: 100, channel: 'Email' },
    ],
    channels: [
      { channel: 'Organic', sessions: 356 },
      { channel: 'Direct', sessions: 240 },
      { channel: 'Paid', sessions: 188 },
      { channel: 'Social', sessions: 140 },
      { channel: 'Email', sessions: 100 },
    ],
  },
  top_pages: [],
  engagement_distribution: { counts: { high: 312, medium: 498, low: 214 }, percentages: { high: 30, medium: 49, low: 21 } },
  conversion_funnel: {
    stages: [
      { name: 'Besucher', count: 842, percentage: 100 },
      { name: 'Seite angesehen (2+)', count: 511, percentage: 61 },
      { name: 'Formular gestartet', count: 140, percentage: 17 },
      { name: 'Formular abgeschickt', count: 96, percentage: 11 },
    ],
  },
  device_breakdown: { counts: { mobile: 460, tablet: 84, desktop: 480 }, percentages: { mobile: 45, tablet: 8, desktop: 47 } },
  trends: { current_period: 1024, previous_period: 861, change_percent: 18.9, trend: 'up' },
  insights: [
    { type: 'success', title: 'Formular-Rate steigt', message: 'Die Formular-Absendungen sind diese Woche um 24% gestiegen, vor allem über die Landing Page /webinar.', metric: 24, action: 'Kampagne mit mehr Budget verlängern' },
    { type: 'warning', title: 'Hohe Bounce Rate auf /preise', message: 'Fast zwei Drittel der Besucher verlassen /preise ohne weitere Interaktion.', metric: 64 },
    { type: 'info', title: 'Mobile überholt Desktop', message: 'Mobile Sessions liegen jetzt bei 45%, ein neuer Höchststand für diesen Workspace.' },
  ],
};

const timeseries7d: TimeSeriesData = {
  granularity: 'day', days: 7,
  series: [
    { date: '2026-09-06T00:00:00Z', sessions: 118, page_views: 340, contacts: 9, events: 560 },
    { date: '2026-09-07T00:00:00Z', sessions: 132, page_views: 372, contacts: 11, events: 601 },
    { date: '2026-09-08T00:00:00Z', sessions: 96, page_views: 260, contacts: 6, events: 420 },
    { date: '2026-09-09T00:00:00Z', sessions: 151, page_views: 410, contacts: 14, events: 688 },
    { date: '2026-09-10T00:00:00Z', sessions: 163, page_views: 455, contacts: 18, events: 742 },
    { date: '2026-09-11T00:00:00Z', sessions: 140, page_views: 398, contacts: 15, events: 655 },
    { date: '2026-09-12T00:00:00Z', sessions: 224, page_views: 601, contacts: 23, events: 980 },
  ],
  hourly: Array.from({ length: 24 }, (_, h) => ({
    hour: h, label: String(h).padStart(2, '0'),
    count: h < 6 ? 4 : h < 9 ? 40 : h < 12 ? 95 : h < 14 ? 120 : h < 18 ? 150 : h < 21 ? 88 : 22,
  })),
  daily: [
    { dow: 1, label: 'Mo', count: 210 }, { dow: 2, label: 'Di', count: 244 }, { dow: 3, label: 'Mi', count: 198 },
    { dow: 4, label: 'Do', count: 266 }, { dow: 5, label: 'Fr', count: 302 }, { dow: 6, label: 'Sa', count: 140 },
    { dow: 0, label: 'So', count: 96 },
  ],
};

const sampleSessions: SessionItem[] = [
  { id: 'sess_1', anonymous_id: 'anon_1', source_label: 'google / organic', landing_page: '/wissen/website-tracking-dsgvo', pages_viewed: 4, duration_seconds: 212, duration_formatted: '3m 32s', status: 'identified', contact_email: 'anna.berger@example.com', utm_campaign: null, has_gclid: false, has_fbclid: false, has_li_fat_id: false, first_seen: '2026-09-12T07:40:00Z', last_seen: '2026-09-12T07:43:32Z' },
  { id: 'sess_2', anonymous_id: 'anon_2', source_label: 'linkedin / social', landing_page: '/preise', pages_viewed: 1, duration_seconds: 18, duration_formatted: '18s', status: 'anonymous', contact_email: null, utm_campaign: 'launch-q3', has_gclid: false, has_fbclid: false, has_li_fat_id: true, first_seen: '2026-09-12T06:55:00Z', last_seen: '2026-09-12T06:55:18Z' },
  { id: 'sess_3', anonymous_id: 'anon_3', source_label: 'google / cpc', landing_page: '/webinar', pages_viewed: 6, duration_seconds: 401, duration_formatted: '6m 41s', status: 'identified', contact_email: 'marc.huber@example.com', utm_campaign: 'webinar-herbst', has_gclid: true, has_fbclid: false, has_li_fat_id: false, first_seen: '2026-09-11T18:10:00Z', last_seen: '2026-09-11T18:16:41Z' },
  { id: 'sess_4', anonymous_id: 'anon_4', source_label: '(direct) / (none)', landing_page: '/', pages_viewed: 2, duration_seconds: 64, duration_formatted: '1m 4s', status: 'anonymous', contact_email: null, utm_campaign: null, has_gclid: false, has_fbclid: false, has_li_fat_id: false, first_seen: '2026-09-11T14:02:00Z', last_seen: '2026-09-11T14:03:04Z' },
];

const sampleSessionEvents: Record<string, SessionEvent[]> = {
  sess_1: [
    { event_type: 'page_view', page_path: '/wissen/website-tracking-dsgvo', page_title: 'Website-Tracking und DSGVO', event_data: {}, created_at: '2026-09-12T07:40:00Z' },
    { event_type: 'page_view', page_path: '/wissen/scribe-vs-ga4', page_title: 'Scribe vs. GA4', event_data: {}, created_at: '2026-09-12T07:41:20Z' },
    { event_type: 'form_submitted', page_path: '/wissen/scribe-vs-ga4', page_title: null, event_data: { form_id: 'newsletter' }, created_at: '2026-09-12T07:42:50Z' },
    { event_type: 'button_clicked', page_path: '/wissen/scribe-vs-ga4', page_title: null, event_data: { button_id: 'cta-demo' }, created_at: '2026-09-12T07:43:10Z' },
  ],
};

const sampleCampaigns: CampaignItem[] = [
  { campaign: 'webinar-herbst', sessions: 214, unique_visitors: 198, identified_contacts: 31, conversion_rate: 14.5, bounce_rate: 29.4, has_gclid_count: 140, has_fbclid_count: 0, has_li_fat_id_count: 0 },
  { campaign: 'launch-q3', sessions: 166, unique_visitors: 150, identified_contacts: 9, conversion_rate: 5.4, bounce_rate: 61.2, has_gclid_count: 0, has_fbclid_count: 0, has_li_fat_id_count: 166 },
  { campaign: 'retargeting-preise', sessions: 88, unique_visitors: 80, identified_contacts: 3, conversion_rate: 0, bounce_rate: 74.9, has_gclid_count: 0, has_fbclid_count: 88, has_li_fat_id_count: 0 },
];

const sampleLandingPages: LandingPageItem[] = [
  { landing_page: '/webinar', sessions: 214, bounce_rate: 29.4, avg_duration_seconds: 268, avg_duration_formatted: '4m 28s', identified_count: 31 },
  { landing_page: '/', sessions: 198, bounce_rate: 44.1, avg_duration_seconds: 96, avg_duration_formatted: '1m 36s', identified_count: 12 },
  { landing_page: '/preise', sessions: 150, bounce_rate: 74.9, avg_duration_seconds: 31, avg_duration_formatted: '31s', identified_count: 3 },
  { landing_page: '/wissen/website-tracking-dsgvo', sessions: 92, bounce_rate: 33.7, avg_duration_seconds: 211, avg_duration_formatted: '3m 31s', identified_count: 18 },
];

const base: Props = {
  viewer, workspace,
  activeTab: 'data',
  loading: false,
  refreshing: false,
  trackingSiteId: 'site_7f2c94ab',
  dateRange: 7,
  stats: populatedStats,
  insights: populatedInsights,
  timeseries: timeseries7d,
  sessions: sampleSessions,
  sessionsTotal: 214,
  sessionsPage: 1,
  sessionExpandedId: 'sess_1',
  sessionEventsById: sampleSessionEvents,
  campaigns: sampleCampaigns,
  landingPages: sampleLandingPages,
};

export const states = defineStates<Props>({
  'default': {
    label: 'Data tab, populated: stats, timeseries and insights all loaded for the active 7-day range',
    props: base,
    height: 2600, viewport: 1440,
  },
  'loading': {
    label: 'First fetch in flight (line 249, 318 to 321): the shell and tabs are already on screen, one spinner card where the metrics will be',
    props: { ...base, activeTab: 'data', loading: true, trackingSiteId: '', stats: null, insights: null, timeseries: null, sessions: [], sessionsTotal: 0, sessionExpandedId: null, campaigns: [], landingPages: [] },
    height: 700, viewport: 1440,
  },
  'empty': {
    label: 'Fresh workspace: zero events, the tab effect surfaces Setup, but the tracking script is already installed and ready to copy',
    props: { ...base, activeTab: 'setup', trackingSiteId: 'site_2b6e10cd', stats: emptyStats, insights: null, timeseries: null, sessions: [], sessionsTotal: 0, sessionExpandedId: null, campaigns: [], landingPages: [] },
    height: 1750, viewport: 1440,
  },
  'error': {
    label: "Insights read failed on its own catch (line 305) while stats, timeseries, sessions and campaigns all loaded: the traffic-source card is simply absent, top metrics fall back to stats",
    props: { ...base, activeTab: 'data', insights: null, sessionExpandedId: null },
    height: 2200, viewport: 1440,
  },
  'setup': {
    label: 'No site_id ever returned by /api/scribe/config (line 276 to 277): the Setup tab is primary and the site-ID card never resolves past its pulsing placeholder',
    props: { ...base, activeTab: 'setup', trackingSiteId: '', stats: emptyStats, insights: null, timeseries: null, sessions: [], sessionsTotal: 0, sessionExpandedId: null, campaigns: [], landingPages: [] },
    height: 1750, viewport: 1440,
  },
});

/* ---- date formatting (fixed UTC table, see header comment) -------------- */

const MONTHS_DE_SHORT = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
const DOW_DE_SHORT = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];

function formatTimestamp(ts: string): string {
  const d = new Date(ts);
  const p2 = (n: number) => String(n).padStart(2, '0');
  return `${p2(d.getUTCDate())}.${p2(d.getUTCMonth() + 1)}.${String(d.getUTCFullYear()).slice(-2)} ${p2(d.getUTCHours())}:${p2(d.getUTCMinutes())}`;
}

function formatChartDate(dateStr: string, dateRange: DateRange): string {
  const d = new Date(dateStr);
  const p2 = (n: number) => String(n).padStart(2, '0');
  if (dateRange <= 1) return `${p2(d.getUTCHours())}:${p2(d.getUTCMinutes())}`;
  return `${p2(d.getUTCDate())}.${p2(d.getUTCMonth() + 1)}.`;
}

function formatDuration(seconds: number): string {
  if (seconds < 60) return `${seconds}s`;
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  return `${h}h ${m}m`;
}

function truncatePath(path: string | null, maxLen = 40): string {
  if (!path) return '-';
  if (path.length <= maxLen) return path;
  return path.substring(0, maxLen) + '...';
}

/* ---- inline-SVG chart rebuilds (recharts is not importable, header comment) */

function MiniAreaChart({ series, dateRange }: { series: TimeSeriesData['series']; dateRange: DateRange }) {
  const W = 640;
  const H = 220;
  const max = Math.max(1, ...series.flatMap((d) => [d.sessions, d.page_views, d.contacts]));
  const stepX = series.length > 1 ? W / (series.length - 1) : W;
  const points = (key: 'sessions' | 'page_views' | 'contacts') =>
    series.map((d, i) => `${i * stepX},${H - (d[key] / max) * H}`).join(' ');
  const series1 = points('sessions');
  const series2 = points('page_views');
  const series3 = points('contacts');
  const legend: Array<[string, string, string]> = [
    ['sessions', 'Sessions', '#6844C4'],
    ['page_views', 'Seitenaufrufe', '#3b82f6'],
    ['contacts', 'Kontakte', '#22c55e'],
  ];
  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H + 8}`} width="100%" height={288} preserveAspectRatio="none" role="img" aria-label="Besucher und Events">
        {[0, 0.25, 0.5, 0.75, 1].map((f) => (
          <line key={f} x1={0} x2={W} y1={H - H * f} y2={H - H * f} stroke="#e7e5e4" strokeDasharray="3 3" strokeWidth={1} />
        ))}
        <polyline points={series2} fill="none" stroke="#3b82f6" strokeWidth={2} />
        <polyline points={series3} fill="none" stroke="#22c55e" strokeWidth={2} />
        <polyline points={series1} fill="none" stroke="#6844C4" strokeWidth={2.5} />
        {series.map((d, i) => (
          <text key={d.date} x={i * stepX} y={H + 8} textAnchor="middle" fontSize={10} fill="#71717a">
            {formatChartDate(d.date, dateRange)}
          </text>
        ))}
      </svg>
      <div className="flex items-center gap-4 justify-center mt-1">
        {legend.map(([key, label, color]) => (
          <span key={key} className="flex items-center gap-1.5 text-xs text-ink-60">
            <span className="w-2.5 h-2.5 rounded-full" style={{ background: color }} />
            {label}
          </span>
        ))}
      </div>
    </div>
  );
}

function MiniBarChart({ data, color, everyNthLabel = 1 }: { data: Array<{ label: string; count: number }>; color: string; everyNthLabel?: number }) {
  const W = 300;
  const H = 140;
  const max = Math.max(1, ...data.map((d) => d.count));
  const barW = W / data.length;
  return (
    <svg viewBox={`0 0 ${W} ${H + 16}`} width="100%" height={192} preserveAspectRatio="none" role="img">
      {[0, 0.5, 1].map((f) => (
        <line key={f} x1={0} x2={W} y1={H - H * f} y2={H - H * f} stroke="#e7e5e4" strokeDasharray="3 3" strokeWidth={1} />
      ))}
      {data.map((d, i) => {
        const h = (d.count / max) * H;
        return (
          <g key={`${d.label}-${i}`}>
            <rect x={i * barW + barW * 0.15} y={H - h} width={barW * 0.7} height={h} fill={color} rx={2} />
            {i % everyNthLabel === 0 && (
              <text x={i * barW + barW / 2} y={H + 12} textAnchor="middle" fontSize={9} fill="#71717a">{d.label}</text>
            )}
          </g>
        );
      })}
    </svg>
  );
}

function MiniDonutChart({ data }: { data: Array<{ channel: string; sessions: number }> }) {
  const total = data.reduce((s, d) => s + d.sessions, 0) || 1;
  const cx = 90, cy = 90, r = 62, strokeW = 32;
  const circumference = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className="flex items-center gap-6">
      <svg viewBox="0 0 180 180" width={180} height={180} role="img" aria-label="Traffic-Kanäle">
        {data.map((d) => {
          const dash = (d.sessions / total) * circumference;
          const el = (
            <circle
              key={d.channel}
              cx={cx} cy={cy} r={r} fill="none"
              stroke={CHANNEL_COLORS[d.channel] || '#52525b'}
              strokeWidth={strokeW}
              strokeDasharray={`${dash} ${circumference - dash}`}
              strokeDashoffset={-offset}
              transform={`rotate(-90 ${cx} ${cy})`}
            />
          );
          offset += dash;
          return el;
        })}
      </svg>
      <ul className="space-y-1.5 flex-1">
        {data.map((d) => (
          <li key={d.channel} className="flex items-center justify-between text-sm">
            <span className="flex items-center gap-2 text-ink-60">
              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: CHANNEL_COLORS[d.channel] || '#52525b' }} />
              {d.channel}
            </span>
            <span className="text-ink-60">{((d.sessions / total) * 100).toFixed(0)}%</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ---- setup-tab code samples (TrackingDashboard.tsx lines 434 to 458) ----- */

const apiBaseUrl = 'https://api.example-labs.test';

function buildTrackingScript(siteId: string): string {
  return `<!-- Alchemy Labs Tracking Script -->
<script>
  (function(w,d,s,l,i){
    w[l]=w[l]||[];
    var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s);
    j.async=true;
    j.src='${apiBaseUrl}/static/scribe.js';
    j.setAttribute('data-site-id', '${siteId}');
    j.setAttribute('data-api-url', '${apiBaseUrl}');
    f.parentNode.insertBefore(j,f);
  })(window,document,'script','AlchemyScribe');
</script>`;
}

const identifyExample = `// Identifiziere einen Benutzer (z.B. nach Formular-Absendung)
window.AlchemyScribe.identify('email@example.com', {
  name: 'Max Mustermann',
  company: 'Musterfirma AG'
});`;

const trackEventExample = `// Tracke ein benutzerdefiniertes Event
window.AlchemyScribe.track('button_clicked', {
  button_id: 'cta-hero',
  page: window.location.pathname
});`;

function CodeBlock({ code, id, copiedId, onCopy }: { code: string; id: string; copiedId: string | null; onCopy: (code: string, id: string) => void }) {
  return (
    <div className="relative group">
      <pre className="bg-zinc-900 text-stone-300 p-4 rounded-xl text-sm overflow-x-auto font-mono border border-zinc-800">
        <code>{code}</code>
      </pre>
      <button
        onClick={() => onCopy(code, id)}
        className="absolute top-3 right-3 p-2 rounded-lg bg-zinc-700 hover:bg-zinc-600 transition-colors opacity-0 group-hover:opacity-100"
        title="Kopieren"
      >
        {copiedId === id ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4 text-stone-400" />}
      </button>
    </div>
  );
}

/* ---- the Explore tab (ScribeExplore.tsx shell, condensed builder below) - */

function Explore() {
  // ScribeExplore fetches its own schema on mount; a demo has no network
  // (AUTHORING.md "The exports"), so this frame skips straight to the
  // ready state, the only one of ScribeExplore's own three branches that
  // has anything besides a spinner or a retry card to show.
  const [mode, setMode] = useState<'query' | 'funnel'>('query');
  return (
    <div className="space-y-6">
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => setMode('query')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm border transition-colors ${mode === 'query' ? 'bg-[#6844C4]/10 border-[#6844C4] text-[#6844C4] font-medium' : 'border-line bg-white text-ink-60 hover:text-ink hover:bg-stone-50'}`}
        >
          <Database className="w-4 h-4" />
          Abfrage
        </button>
        <button
          type="button"
          onClick={() => setMode('funnel')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm border transition-colors ${mode === 'funnel' ? 'bg-[#6844C4]/10 border-[#6844C4] text-[#6844C4] font-medium' : 'border-line bg-white text-ink-60 hover:text-ink hover:bg-stone-50'}`}
        >
          <Target className="w-4 h-4" />
          Funnel
        </button>
      </div>

      {mode === 'query' ? (
        <Card variant="glass" padding="lg">
          <Heading level={3} className="mb-4">Segment abfragen</Heading>
          <div className="grid sm:grid-cols-3 gap-3 mb-4">
            <div>
              <Text size="xs" muted className="mb-1">Entität</Text>
              <div className="h-10 rounded-lg border border-line bg-white px-3 flex items-center text-sm">Kontakte</div>
            </div>
            <div>
              <Text size="xs" muted className="mb-1">Filter</Text>
              <div className="h-10 rounded-lg border border-line bg-white px-3 flex items-center text-sm text-ink-60">source = google</div>
            </div>
            <div>
              <Text size="xs" muted className="mb-1">Zeitraum</Text>
              <div className="h-10 rounded-lg border border-line bg-white px-3 flex items-center text-sm">7 Tage</div>
            </div>
          </div>
          <Button variant="primary" size="sm">
            <Search className="w-4 h-4" />
            Ausführen
          </Button>
          <Divider className="my-6" />
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-line text-ink-60">
                  <th className="text-left py-2 px-3 font-medium">E-Mail</th>
                  <th className="text-left py-2 px-3 font-medium">Quelle</th>
                  <th className="text-right py-2 px-3 font-medium">Events</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { email: 'anna.berger@example.com', source: 'google / organic', events: 12 },
                  { email: 'marc.huber@example.com', source: 'google / cpc', events: 7 },
                ].map((row) => (
                  <tr key={row.email} className="border-b border-line">
                    <td className="py-2 px-3">{row.email}</td>
                    <td className="py-2 px-3 text-ink-60">{row.source}</td>
                    <td className="py-2 px-3 text-right">{row.events}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      ) : (
        <Card variant="glass" padding="lg">
          <Heading level={3} className="mb-4">Funnel-Schritte</Heading>
          <div className="space-y-2">
            {['Landing Page besucht', 'Formular gestartet', 'Formular abgeschickt'].map((step, idx) => (
              <div key={step} className="flex items-center gap-3 p-3 rounded-lg bg-stone-100">
                <Badge variant="secondary" size="sm">{idx + 1}</Badge>
                <Text size="sm">{step}</Text>
              </div>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
}

/* ---- the page ------------------------------------------------------------ */

function TrackingDashboardPage({
  activeTab: activeTabInitial,
  loading = false,
  refreshing = false,
  trackingSiteId = '',
  dateRange = 7,
  stats,
  insights,
  timeseries,
  sessions = [],
  sessionsTotal = 0,
  sessionsPage = 1,
  sessionExpandedId = null,
  sessionEventsById = {},
  campaigns = [],
  landingPages = [],
}: Omit<Props, 'viewer' | 'workspace'>) {
  const [activeTab, setActiveTab] = useState(activeTabInitial);
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const [expandedSession, setExpandedSession] = useState<string | null>(sessionExpandedId);

  const copyCode = (code: string, id: string) => {
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  const hasData = !!stats && stats.totals.events > 0;
  const totalSessionsPages = Math.ceil(sessionsTotal / 15) || 0;

  const peakHour = timeseries?.hourly.reduce((a, b) => (b.count > a.count ? b : a), timeseries.hourly[0]) ?? null;
  const peakDay = timeseries?.daily.reduce((a, b) => (b.count > a.count ? b : a), timeseries.daily[0]) ?? null;

  return (
    <div className="max-w-6xl mx-auto p-6 pb-20">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <Badge variant="primary" className="mb-2">Analytics</Badge>
          <Heading level={1} className="mb-2 flex items-center gap-3">
            <BarChart2 className="w-8 h-8 text-[#6844C4]" />
            Tracking & Analytics
          </Heading>
          <Text muted>Verfolge Besucher, erfasse Leads und verstehe deine Marketing-Performance.</Text>
        </div>
        <div className="flex items-center gap-3">
          <div className="relative">
            <button
              onClick={() => setShowDatePicker(!showDatePicker)}
              className="flex items-center gap-2 px-3 py-2 rounded-lg border border-line bg-white hover:bg-stone-50 text-sm text-ink transition-colors"
            >
              <Calendar className="w-4 h-4 text-[#6844C4]" />
              {DATE_RANGES.find((r) => r.value === dateRange)?.label}
              <ChevronDown className="w-3 h-3" />
            </button>
            {showDatePicker && (
              <>
                <div className="fixed inset-0 z-10" onClick={() => setShowDatePicker(false)} />
                <div className="absolute right-0 top-full mt-1 bg-white border border-line rounded-lg shadow-xl z-20 py-1 min-w-[140px]">
                  {DATE_RANGES.map((range) => (
                    <button
                      key={range.value}
                      onClick={() => setShowDatePicker(false)}
                      className={`w-full text-left px-4 py-2 text-sm transition-colors ${range.value === dateRange ? 'bg-[#6844C4]/10 text-[#6844C4]' : 'text-ink hover:bg-stone-50'}`}
                    >
                      {range.label}
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>
          <Button variant="outline" disabled={refreshing}>
            <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
            Aktualisieren
          </Button>
          <Button variant="outline">
            <Settings className="w-4 h-4 mr-2" />
            Einstellungen
          </Button>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 mb-6 border-b border-line pb-2">
        <button
          onClick={() => setActiveTab('data')}
          className={`px-4 py-2 rounded-t-lg font-medium transition-colors flex items-center gap-2 ${activeTab === 'data' ? 'bg-[#6844C4]/20 text-[#6844C4] border-b-2 border-[#6844C4]' : 'text-ink-60 hover:text-ink hover:bg-stone-100'}`}
        >
          <Activity className="w-4 h-4" />
          Live-Daten
          {hasData && (
            <span className="ml-1 px-2 py-0.5 text-xs rounded-full bg-[#6844C4]/30">
              {insights?.summary?.total_sessions ?? stats?.totals?.events ?? 0}
            </span>
          )}
        </button>
        <button
          onClick={() => setActiveTab('insights')}
          className={`px-4 py-2 rounded-t-lg font-medium transition-colors flex items-center gap-2 ${activeTab === 'insights' ? 'bg-[#6844C4]/20 text-[#6844C4] border-b-2 border-[#6844C4]' : 'text-ink-60 hover:text-ink hover:bg-stone-100'}`}
        >
          <Lightbulb className="w-4 h-4" />
          Insights
        </button>
        <button
          onClick={() => setActiveTab('explore')}
          className={`px-4 py-2 rounded-t-lg font-medium transition-colors flex items-center gap-2 ${activeTab === 'explore' ? 'bg-[#6844C4]/20 text-[#6844C4] border-b-2 border-[#6844C4]' : 'text-ink-60 hover:text-ink hover:bg-stone-100'}`}
        >
          <Search className="w-4 h-4" />
          Explore
        </button>
        <button
          onClick={() => setActiveTab('setup')}
          className={`px-4 py-2 rounded-t-lg font-medium transition-colors flex items-center gap-2 ${activeTab === 'setup' ? 'bg-[#6844C4]/20 text-[#6844C4] border-b-2 border-[#6844C4]' : 'text-ink-60 hover:text-ink hover:bg-stone-100'}`}
        >
          <Code className="w-4 h-4" />
          Installation
        </button>
      </div>

      {/* DATA TAB */}
      {activeTab === 'data' && (
        <div className="space-y-6">
          {loading ? (
            <Card variant="glass" padding="lg">
              <div className="flex items-center justify-center py-12">
                <RefreshCw className="w-8 h-8 text-[#6844C4] animate-spin" />
              </div>
            </Card>
          ) : !hasData ? (
            <Card variant="glass" padding="lg">
              <div className="text-center py-12">
                <Activity className="w-16 h-16 text-stone-300 mx-auto mb-4" />
                <Heading level={3} className="mb-2">Noch keine Daten</Heading>
                <Text muted className="mb-6">Installiere das Tracking-Script auf deiner Website, um Daten zu erfassen.</Text>
                <Button onClick={() => setActiveTab('setup')}>
                  <Code className="w-4 h-4 mr-2" />
                  Zur Installation
                </Button>
              </div>
            </Card>
          ) : (
            <>
              {/* Top metrics */}
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                <Card variant="glass" padding="md">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-[#6844C4]/20 flex items-center justify-center">
                      <Activity className="w-5 h-5 text-[#6844C4]" />
                    </div>
                    <div>
                      <Text size="xl" weight="bold">{insights?.summary?.total_sessions ?? stats?.totals?.visitors ?? 0}</Text>
                      <Text size="sm" muted>Sessions</Text>
                    </div>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center">
                      <Users className="w-5 h-5 text-blue-500" />
                    </div>
                    <div>
                      <Text size="xl" weight="bold">{insights?.summary?.unique_visitors ?? 0}</Text>
                      <Text size="sm" muted>Besucher</Text>
                    </div>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center">
                      <Mail className="w-5 h-5 text-green-500" />
                    </div>
                    <div>
                      <Text size="xl" weight="bold">{insights?.summary?.identified_contacts ?? stats?.totals?.contacts ?? 0}</Text>
                      <Text size="sm" muted>Kontakte</Text>
                    </div>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
                      <Timer className="w-5 h-5 text-amber-500" />
                    </div>
                    <div>
                      <Text size="xl" weight="bold">{insights?.summary?.avg_session_duration_formatted ?? '0s'}</Text>
                      <Text size="sm" muted>Avg. Dauer</Text>
                    </div>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                      <ExternalLink className="w-5 h-5 text-red-500" />
                    </div>
                    <div>
                      <Text size="xl" weight="bold">{insights?.summary?.bounce_rate ?? 0}%</Text>
                      <Text size="sm" muted>Bounce Rate</Text>
                    </div>
                  </div>
                </Card>
              </div>

              {/* Time series */}
              {timeseries && timeseries.series.length > 0 && (
                <Card variant="glass" padding="lg">
                  <Heading level={3} className="mb-4 flex items-center gap-2">
                    <TrendingUp className="w-5 h-5 text-[#6844C4]" />
                    Besucher & Events
                    <Text size="xs" muted className="ml-auto">{DATE_RANGES.find((r) => r.value === dateRange)?.label}</Text>
                  </Heading>
                  <MiniAreaChart series={timeseries.series} dateRange={dateRange} />
                </Card>
              )}

              {/* Hourly & daily */}
              {timeseries && (
                <div className="grid md:grid-cols-2 gap-6">
                  <Card variant="glass" padding="lg">
                    <Heading level={3} className="mb-1 flex items-center gap-2">
                      <Clock className="w-5 h-5 text-amber-500" />
                      Wann kommen Besucher?
                    </Heading>
                    {peakHour && <Text size="xs" muted className="mb-4">Hauptzeit: {peakHour.label} Uhr ({peakHour.count} Events)</Text>}
                    <MiniBarChart data={timeseries.hourly} color="#f59e0b" everyNthLabel={3} />
                  </Card>
                  <Card variant="glass" padding="lg">
                    <Heading level={3} className="mb-1 flex items-center gap-2">
                      <Calendar className="w-5 h-5 text-[#6844C4]" />
                      Wochentage
                    </Heading>
                    {peakDay && <Text size="xs" muted className="mb-4">Aktivster Tag: {peakDay.label} ({peakDay.count} Events)</Text>}
                    <MiniBarChart data={timeseries.daily} color="#6844C4" />
                  </Card>
                </div>
              )}

              {/* Traffic sources */}
              {insights?.traffic_sources && (insights.traffic_sources.channels.length > 0 || insights.traffic_sources.sources.length > 0) && (
                <div className="grid md:grid-cols-2 gap-6">
                  <Card variant="glass" padding="lg">
                    <Heading level={3} className="mb-4 flex items-center gap-2">
                      <PieChartIcon className="w-5 h-5 text-[#6844C4]" />
                      Traffic-Kanäle
                    </Heading>
                    {insights.traffic_sources.channels.length > 0 ? (
                      <MiniDonutChart data={insights.traffic_sources.channels} />
                    ) : (
                      <Text muted>Keine Daten verfügbar</Text>
                    )}
                  </Card>
                  <Card variant="glass" padding="lg">
                    <Heading level={3} className="mb-4 flex items-center gap-2">
                      <Globe className="w-5 h-5 text-[#6844C4]" />
                      Traffic-Quellen
                    </Heading>
                    {insights.traffic_sources.sources.length === 0 ? (
                      <Text muted>Keine Daten verfügbar</Text>
                    ) : (
                      <div className="space-y-2 max-h-64 overflow-y-auto">
                        <div className="flex items-center justify-between px-3 py-1 text-xs text-ink-40">
                          <span className="flex-1">Quelle / Medium</span>
                          <span className="w-20 text-right">Sessions</span>
                          <span className="w-20 text-right">Kanal</span>
                        </div>
                        {insights.traffic_sources.sources.map((source, idx) => (
                          <div key={idx} className="flex items-center justify-between p-3 rounded-lg bg-stone-100">
                            <Text size="sm" className="flex-1 truncate">{source.label}</Text>
                            <Text size="sm" weight="semibold" className="w-20 text-right">{source.sessions}</Text>
                            <Badge variant="secondary" size="sm" className="w-20 text-center ml-2">{source.channel}</Badge>
                          </div>
                        ))}
                      </div>
                    )}
                  </Card>
                </div>
              )}

              {/* Campaigns */}
              {campaigns.length > 0 && (
                <Card variant="glass" padding="lg">
                  <Heading level={3} className="mb-4 flex items-center gap-2">
                    <Megaphone className="w-5 h-5 text-amber-500" />
                    Campaign Performance
                  </Heading>
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b border-line text-ink-60">
                          <th className="text-left py-2 px-3 font-medium">Campaign</th>
                          <th className="text-right py-2 px-3 font-medium">Sessions</th>
                          <th className="text-right py-2 px-3 font-medium">Besucher</th>
                          <th className="text-right py-2 px-3 font-medium">Kontakte</th>
                          <th className="text-right py-2 px-3 font-medium">Conv. Rate</th>
                          <th className="text-right py-2 px-3 font-medium">Bounce</th>
                          <th className="text-center py-2 px-3 font-medium">Plattformen</th>
                        </tr>
                      </thead>
                      <tbody>
                        {campaigns.map((c, idx) => (
                          <tr key={idx} className="border-b border-line hover:bg-stone-50">
                            <td className="py-2.5 px-3"><Text size="sm" weight="medium">{c.campaign}</Text></td>
                            <td className="py-2.5 px-3 text-right">{c.sessions}</td>
                            <td className="py-2.5 px-3 text-right">{c.unique_visitors}</td>
                            <td className="py-2.5 px-3 text-right"><span className="text-green-600">{c.identified_contacts}</span></td>
                            <td className="py-2.5 px-3 text-right">
                              <span className={c.conversion_rate > 0 ? 'text-green-600' : 'text-ink-40'}>{c.conversion_rate.toFixed(1)}%</span>
                            </td>
                            <td className="py-2.5 px-3 text-right">
                              <span className={c.bounce_rate > 70 ? 'text-red-500' : 'text-ink'}>{c.bounce_rate.toFixed(1)}%</span>
                            </td>
                            <td className="py-2.5 px-3 text-center">
                              <div className="flex items-center justify-center gap-1">
                                {c.has_gclid_count > 0 && <Badge variant="secondary" size="sm">G</Badge>}
                                {c.has_fbclid_count > 0 && <Badge variant="secondary" size="sm">M</Badge>}
                                {c.has_li_fat_id_count > 0 && <Badge variant="secondary" size="sm">Li</Badge>}
                                {c.has_gclid_count === 0 && c.has_fbclid_count === 0 && c.has_li_fat_id_count === 0 && <span className="text-ink-40">-</span>}
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </Card>
              )}

              {/* Sessions */}
              <Card variant="glass" padding="lg">
                <Heading level={3} className="mb-4 flex items-center gap-2">
                  <Activity className="w-5 h-5 text-[#6844C4]" />
                  Sessions
                  {sessionsTotal > 0 && <Text size="xs" muted className="ml-auto">{sessionsTotal} gesamt</Text>}
                </Heading>
                {sessions.length === 0 ? (
                  <Text muted className="py-4">Keine Sessions in diesem Zeitraum.</Text>
                ) : (
                  <>
                    <div className="space-y-1">
                      <div className="hidden md:grid grid-cols-[24px_1fr_1fr_60px_70px_80px_100px] gap-3 px-3 py-1.5 text-xs text-ink-40">
                        <span></span>
                        <span>Quelle</span>
                        <span>Landing Page</span>
                        <span className="text-right">Seiten</span>
                        <span className="text-right">Dauer</span>
                        <span className="text-center">Status</span>
                        <span className="text-right">Zeit</span>
                      </div>
                      {sessions.map((session) => (
                        <div key={session.id}>
                          <button
                            onClick={() => setExpandedSession(expandedSession === session.id ? null : session.id)}
                            className="w-full grid grid-cols-[24px_1fr_1fr_60px_70px_80px_100px] gap-3 items-center px-3 py-2.5 rounded-lg bg-stone-100 hover:bg-stone-200 transition-colors text-left"
                          >
                            <ChevronRight className={`w-4 h-4 text-ink-40 transition-transform ${expandedSession === session.id ? 'rotate-90' : ''}`} />
                            <div className="truncate">
                              <Text size="sm" className="truncate">{session.source_label}</Text>
                              {session.utm_campaign && <Text size="xs" muted className="truncate">{session.utm_campaign}</Text>}
                            </div>
                            <Text size="xs" muted className="font-mono truncate">{truncatePath(session.landing_page, 35)}</Text>
                            <Text size="sm" className="text-right">{session.pages_viewed}</Text>
                            <Text size="sm" className="text-right">{session.duration_formatted || formatDuration(session.duration_seconds)}</Text>
                            <div className="text-center">
                              {session.status === 'identified' ? (
                                <Badge variant="primary" size="sm">{session.contact_email?.split('@')[0] || 'ID'}</Badge>
                              ) : (
                                <Badge variant="secondary" size="sm">Anonym</Badge>
                              )}
                            </div>
                            <Text size="xs" muted className="text-right" title={formatTimestamp(session.first_seen)}>{formatTimestamp(session.first_seen)}</Text>
                          </button>

                          {expandedSession === session.id && (
                            <div className="ml-8 mr-2 mt-1 mb-2 p-3 rounded-lg bg-stone-50 border border-line">
                              {!sessionEventsById[session.id] ? (
                                <div className="flex items-center gap-2 py-2">
                                  <RefreshCw className="w-4 h-4 text-ink-40 animate-spin" />
                                  <Text size="xs" muted>Lade Events...</Text>
                                </div>
                              ) : sessionEventsById[session.id].length === 0 ? (
                                <Text size="xs" muted>Keine Events in dieser Session.</Text>
                              ) : (
                                <div className="space-y-1">
                                  {sessionEventsById[session.id].map((ev, idx) => (
                                    <div key={idx} className="flex items-center gap-3 py-1 text-xs">
                                      <div className="w-5 h-5 rounded bg-stone-100 flex items-center justify-center flex-shrink-0">
                                        {ev.event_type === 'page_view' ? (
                                          <Eye className="w-3 h-3 text-blue-600" />
                                        ) : ev.event_type.includes('click') ? (
                                          <MousePointer className="w-3 h-3 text-amber-600" />
                                        ) : (
                                          <Activity className="w-3 h-3 text-ink-60" />
                                        )}
                                      </div>
                                      <Badge variant="secondary" size="sm">{ev.event_type}</Badge>
                                      <span className="text-ink-60 font-mono truncate flex-1">{ev.page_path || ev.page_title || '-'}</span>
                                      <span className="text-ink-40 flex-shrink-0">{formatTimestamp(ev.created_at)}</span>
                                    </div>
                                  ))}
                                </div>
                              )}
                              {session.contact_email && (
                                <div className="mt-2 pt-2 border-t border-line">
                                  <Text size="xs" muted className="flex items-center gap-1"><Mail className="w-3 h-3" /> {session.contact_email}</Text>
                                </div>
                              )}
                              <div className="mt-1 flex gap-2">
                                {session.has_gclid && <Badge variant="secondary" size="sm">Google Ads</Badge>}
                                {session.has_fbclid && <Badge variant="secondary" size="sm">Meta</Badge>}
                                {session.has_li_fat_id && <Badge variant="secondary" size="sm">LinkedIn</Badge>}
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                    {totalSessionsPages > 1 && (
                      <div className="flex items-center justify-center gap-2 mt-4 pt-4 border-t border-line">
                        <Button variant="ghost" size="sm" disabled={sessionsPage <= 1}>Zurück</Button>
                        <Text size="sm" muted>Seite {sessionsPage} von {totalSessionsPages}</Text>
                        <Button variant="ghost" size="sm" disabled={sessionsPage >= totalSessionsPages}>Weiter</Button>
                      </div>
                    )}
                  </>
                )}
              </Card>

              {/* Landing pages */}
              {landingPages.length > 0 && (
                <Card variant="glass" padding="lg">
                  <Heading level={3} className="mb-4 flex items-center gap-2">
                    <Globe className="w-5 h-5 text-[#6844C4]" />
                    Landing Pages
                  </Heading>
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b border-line text-ink-60">
                          <th className="text-left py-2 px-3 font-medium">Seite</th>
                          <th className="text-right py-2 px-3 font-medium">Sessions</th>
                          <th className="text-right py-2 px-3 font-medium">Bounce Rate</th>
                          <th className="text-right py-2 px-3 font-medium">Avg. Dauer</th>
                          <th className="text-right py-2 px-3 font-medium">Kontakte</th>
                        </tr>
                      </thead>
                      <tbody>
                        {landingPages.slice(0, 15).map((lp, idx) => {
                          const maxSessions = Math.max(...landingPages.map((l) => l.sessions));
                          const pct = maxSessions > 0 ? (lp.sessions / maxSessions) * 100 : 0;
                          return (
                            <tr key={idx} className="border-b border-line hover:bg-stone-50 relative">
                              <td className="py-2.5 px-3 relative">
                                <div className="absolute inset-y-0 left-0 bg-[#6844C4]/5 rounded" style={{ width: `${pct}%` }} />
                                <Text size="sm" className="font-mono relative z-10 truncate max-w-xs block">{truncatePath(lp.landing_page, 50)}</Text>
                              </td>
                              <td className="py-2.5 px-3 text-right">{lp.sessions}</td>
                              <td className="py-2.5 px-3 text-right">
                                <span className={lp.bounce_rate > 70 ? 'text-red-500' : 'text-ink'}>{lp.bounce_rate.toFixed(1)}%</span>
                              </td>
                              <td className="py-2.5 px-3 text-right">{lp.avg_duration_formatted || formatDuration(Math.round(lp.avg_duration_seconds))}</td>
                              <td className="py-2.5 px-3 text-right">
                                <span className={lp.identified_count > 0 ? 'text-green-600' : 'text-ink-40'}>{lp.identified_count}</span>
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </Card>
              )}
            </>
          )}
        </div>
      )}

      {/* EXPLORE TAB */}
      {activeTab === 'explore' && <Explore />}

      {/* SETUP TAB */}
      {activeTab === 'setup' && (
        <div className="space-y-6">
          <div className="grid md:grid-cols-3 gap-4">
            <Card variant="glass" padding="md">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-xl bg-[#6844C4]/20 flex items-center justify-center flex-shrink-0">
                  <Globe className="w-5 h-5 text-[#6844C4]" />
                </div>
                <div>
                  <Text weight="semibold" className="mb-1">Marketing Attribution</Text>
                  <Text size="sm" muted>UTM-Parameter, Referrer, Landing Pages</Text>
                </div>
              </div>
            </Card>
            <Card variant="glass" padding="md">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
                  <AZSymbol className="w-5 h-5 text-green-500" />
                </div>
                <div>
                  <Text weight="semibold" className="mb-1">Conversion Tracking</Text>
                  <Text size="sm" muted>Events an Meta & Google senden</Text>
                </div>
              </div>
            </Card>
            <Card variant="glass" padding="md">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center flex-shrink-0">
                  <Shield className="w-5 h-5 text-blue-500" />
                </div>
                <div>
                  <Text weight="semibold" className="mb-1">DSGVO-Konform</Text>
                  <Text size="sm" muted>First-Party Tracking, kein Cookie-Banner nötig</Text>
                </div>
              </div>
            </Card>
          </div>

          <Card variant="glass" padding="lg" className="border-green-500/30">
            <div className="flex items-center gap-3 mb-2">
              <Check className="w-5 h-5 text-green-500" />
              <Text weight="semibold" className="text-green-700">Deine Site-ID</Text>
            </div>
            <div className="flex items-center gap-3">
              <code className="flex-1 bg-stone-100 text-ink px-4 py-2 rounded-lg font-mono text-sm">
                {trackingSiteId || <span className="text-ink-40 animate-pulse">Lade Site-ID...</span>}
              </code>
              <Button variant="ghost" size="sm" onClick={() => copyCode(trackingSiteId, 'site-id')} disabled={!trackingSiteId}>
                {copiedId === 'site-id' ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4" />}
              </Button>
            </div>
          </Card>

          <Card variant="glass" padding="lg">
            <Heading level={2} className="mb-4 flex items-center gap-2">
              <Code className="w-6 h-6 text-[#6844C4]" />
              Installation
            </Heading>
            <Text className="mb-4">
              Füge das Tracking-Script im <code className="bg-stone-100 text-ink px-2 py-0.5 rounded text-sm">&lt;head&gt;</code> deiner Website ein:
            </Text>
            {trackingSiteId ? (
              <CodeBlock code={buildTrackingScript(trackingSiteId)} id="tracking-script" copiedId={copiedId} onCopy={copyCode} />
            ) : (
              <div className="bg-zinc-900 p-4 rounded-xl border border-zinc-800">
                <div className="space-y-2 animate-pulse">
                  <div className="h-4 bg-zinc-800 rounded w-3/4" />
                  <div className="h-4 bg-zinc-800 rounded w-1/2" />
                  <div className="h-4 bg-zinc-800 rounded w-2/3" />
                </div>
              </div>
            )}
          </Card>

          <Card variant="glass" padding="lg">
            <Heading level={2} className="mb-6">JavaScript API</Heading>
            <div className="mb-8">
              <Heading level={3} className="mb-3">identify() - Benutzer identifizieren</Heading>
              <Text className="mb-4">Verknüpfe einen anonymen Besucher mit einer E-Mail-Adresse (z.B. nach Formular-Absendung).</Text>
              <CodeBlock code={identifyExample} id="identify-example" copiedId={copiedId} onCopy={copyCode} />
            </div>
            <Divider className="my-8" />
            <div>
              <Heading level={3} className="mb-3">track() - Events erfassen</Heading>
              <Text className="mb-4">Tracke benutzerdefinierte Events wie Button-Klicks, Downloads oder andere Aktionen.</Text>
              <CodeBlock code={trackEventExample} id="track-example" copiedId={copiedId} onCopy={copyCode} />
            </div>
          </Card>

          <Card variant="glass" padding="lg">
            <div className="flex items-center justify-between">
              <div>
                <Heading level={3} className="mb-2">Meta & Google Conversions</Heading>
                <Text muted>Konfiguriere deine Pixel-IDs, um Conversions automatisch zu senden.</Text>
              </div>
              <Button variant="outline">
                <Settings className="w-4 h-4 mr-2" />
                Konfigurieren
              </Button>
            </div>
          </Card>
        </div>
      )}

      {/* INSIGHTS TAB */}
      {activeTab === 'insights' && (
        <div className="space-y-6">
          {!insights ? (
            <Card variant="glass" padding="lg">
              <div className="flex items-center justify-center py-12">
                <RefreshCw className="w-8 h-8 text-[#6844C4] animate-spin" />
              </div>
            </Card>
          ) : (
            <>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <Card variant="glass" padding="md">
                  <div className="text-center">
                    <Text size="xl" weight="bold" className="text-[#6844C4]">{insights.summary.identification_rate}%</Text>
                    <Text size="sm" muted>Identifikationsrate</Text>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="text-center">
                    <Text size="xl" weight="bold" className="text-green-500">{insights.summary.form_submissions}</Text>
                    <Text size="sm" muted>Formular-Absendungen</Text>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="text-center">
                    <Text size="xl" weight="bold" className="text-blue-500">{insights.summary.avg_events_per_session.toFixed(1)}</Text>
                    <Text size="sm" muted>Events pro Session</Text>
                  </div>
                </Card>
                <Card variant="glass" padding="md">
                  <div className="flex items-center justify-center gap-2">
                    {insights.trends.trend === 'up' ? (
                      <TrendingUp className="w-5 h-5 text-green-500" />
                    ) : insights.trends.trend === 'down' ? (
                      <TrendingDown className="w-5 h-5 text-red-500" />
                    ) : (
                      <Activity className="w-5 h-5 text-ink-40" />
                    )}
                    <Text size="xl" weight="bold" className={insights.trends.trend === 'up' ? 'text-green-500' : insights.trends.trend === 'down' ? 'text-red-500' : 'text-ink-40'}>
                      {insights.trends.change_percent > 0 ? '+' : ''}{insights.trends.change_percent}%
                    </Text>
                  </div>
                  <Text size="sm" muted className="text-center">vs. Vormonat</Text>
                </Card>
              </div>

              {insights.insights && insights.insights.length > 0 && (
                <Card variant="glass" padding="lg">
                  <Heading level={3} className="mb-4 flex items-center gap-2">
                    <Lightbulb className="w-5 h-5 text-amber-500" />
                    Empfehlungen
                  </Heading>
                  <div className="space-y-3">
                    {insights.insights.map((insight, idx) => (
                      <div key={idx} className={`p-4 rounded-lg border ${insight.type === 'success' ? 'bg-green-500/10 border-green-500/30' : insight.type === 'warning' ? 'bg-amber-500/10 border-amber-500/30' : 'bg-blue-500/10 border-blue-500/30'}`}>
                        <div className="flex items-start gap-3">
                          {insight.type === 'success' ? (
                            <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                          ) : insight.type === 'warning' ? (
                            <AlertTriangle className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" />
                          ) : (
                            <Info className="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" />
                          )}
                          <div>
                            <Text weight="semibold" className="mb-1">{insight.title}</Text>
                            <Text size="sm" muted>{insight.message}</Text>
                            {insight.action && <Text size="sm" className="mt-2 text-[#6844C4]">{insight.action}</Text>}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </Card>
              )}

              <div className="grid md:grid-cols-2 gap-6">
                <Card variant="glass" padding="lg">
                  <Heading level={3} className="mb-4 flex items-center gap-2">
                    <Target className="w-5 h-5 text-green-500" />
                    Conversion Funnel
                  </Heading>
                  {insights.conversion_funnel.stages.length === 0 ? (
                    <Text muted>Keine Daten verfügbar</Text>
                  ) : (
                    <div className="space-y-3">
                      {insights.conversion_funnel.stages.map((stage, idx) => (
                        <div key={idx}>
                          <div className="flex items-center justify-between mb-1">
                            <Text size="sm">{stage.name}</Text>
                            <Text size="sm" muted>{stage.count} ({stage.percentage}%)</Text>
                          </div>
                          <div className="h-2 bg-stone-200 rounded-full overflow-hidden">
                            <div className="h-full bg-gradient-to-r from-[#6844C4] to-green-500 rounded-full transition-all" style={{ width: `${stage.percentage}%` }} />
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </Card>

                <Card variant="glass" padding="lg">
                  <Heading level={3} className="mb-4 flex items-center gap-2">
                    <Activity className="w-5 h-5 text-amber-500" />
                    Engagement-Verteilung
                  </Heading>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between p-3 rounded-lg bg-green-500/10">
                      <div className="flex items-center gap-2">
                        <div className="w-3 h-3 rounded-full bg-green-500" />
                        <Text size="sm">Hoch engagiert</Text>
                      </div>
                      <Text size="sm" weight="semibold">{insights.engagement_distribution.counts.high} ({insights.engagement_distribution.percentages.high}%)</Text>
                    </div>
                    <div className="flex items-center justify-between p-3 rounded-lg bg-amber-500/10">
                      <div className="flex items-center gap-2">
                        <div className="w-3 h-3 rounded-full bg-amber-500" />
                        <Text size="sm">Mittel engagiert</Text>
                      </div>
                      <Text size="sm" weight="semibold">{insights.engagement_distribution.counts.medium} ({insights.engagement_distribution.percentages.medium}%)</Text>
                    </div>
                    <div className="flex items-center justify-between p-3 rounded-lg bg-zinc-500/10">
                      <div className="flex items-center gap-2">
                        <div className="w-3 h-3 rounded-full bg-zinc-500" />
                        <Text size="sm">Niedrig engagiert</Text>
                      </div>
                      <Text size="sm" weight="semibold">{insights.engagement_distribution.counts.low} ({insights.engagement_distribution.percentages.low}%)</Text>
                    </div>
                  </div>
                </Card>
              </div>

              <Card variant="glass" padding="lg">
                <Heading level={3} className="mb-4 flex items-center gap-2">
                  <Monitor className="w-5 h-5 text-blue-500" />
                  Geräte
                </Heading>
                <div className="grid grid-cols-3 gap-4">
                  <div className="flex items-center justify-between p-3 rounded-lg bg-stone-100">
                    <div className="flex items-center gap-2">
                      <Monitor className="w-4 h-4 text-blue-500" />
                      <Text size="sm">Desktop</Text>
                    </div>
                    <Text size="sm" weight="semibold">{insights.device_breakdown.counts.desktop} ({insights.device_breakdown.percentages.desktop}%)</Text>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-lg bg-stone-100">
                    <div className="flex items-center gap-2">
                      <Smartphone className="w-4 h-4 text-green-500" />
                      <Text size="sm">Mobile</Text>
                    </div>
                    <Text size="sm" weight="semibold">{insights.device_breakdown.counts.mobile} ({insights.device_breakdown.percentages.mobile}%)</Text>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-lg bg-stone-100">
                    <div className="flex items-center gap-2">
                      <Tablet className="w-4 h-4 text-amber-500" />
                      <Text size="sm">Tablet</Text>
                    </div>
                    <Text size="sm" weight="semibold">{insights.device_breakdown.counts.tablet} ({insights.device_breakdown.percentages.tablet}%)</Text>
                  </div>
                </div>
              </Card>
            </>
          )}
        </div>
      )}
    </div>
  );
}

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