pn-new-crm/src/app/(dashboard)/[portSlug]/admin/website-analytics/page.tsx

import {
  SettingsFormCard,
  type SettingFieldDef,
} from '@/components/admin/shared/settings-form-card';
import { UmamiTestButton } from '@/components/admin/website-analytics/umami-test-button';
import { PageHeader } from '@/components/shared/page-header';

/**
 * Per-port Umami credentials. Self-hosted Umami uses username + password →
 * JWT bearer token (https://docs.umami.is/docs/api/authentication); the
 * service POSTs to /api/auth/login and caches the JWT in-memory. Umami
 * Cloud installations use a long-lived API key instead; the optional field
 * below covers that case. All credentials are port-scoped so different
 * ports can point at different Umami instances.
 */
const FIELDS: SettingFieldDef[] = [
  {
    key: 'umami_api_url',
    label: 'Umami URL',
    description:
      'Base URL of the Umami instance, e.g. https://analytics.portnimara.com (no trailing slash, no /api).',
    type: 'string',
    placeholder: 'https://analytics.portnimara.com',
    defaultValue: '',
  },
  {
    key: 'umami_username',
    label: 'Username',
    description: 'Umami login username (self-hosted).',
    type: 'string',
    placeholder: 'admin',
    defaultValue: '',
  },
  {
    key: 'umami_password',
    label: 'Password',
    description:
      'Umami login password (self-hosted). Exchanged for a JWT via /api/auth/login on each port; the JWT is cached for 55 minutes. Stored AES-256-GCM at rest.',
    type: 'password',
    defaultValue: '',
  },
  {
    key: 'umami_website_id',
    label: 'Website ID',
    description:
      'UUID of this port’s website inside Umami. Find it in Umami → Settings → Websites → Edit → Website ID.',
    type: 'string',
    placeholder: '00000000-0000-0000-0000-000000000000',
    defaultValue: '',
  },
  {
    key: 'umami_api_token',
    label: 'API key (Umami Cloud only - optional)',
    description:
      'Only fill this if you use Umami Cloud, which uses a long-lived API key instead of username/password. Leave blank for self-hosted installs - the username + password above are used instead. Stored AES-256-GCM at rest.',
    type: 'password',
    defaultValue: '',
  },
];

// Tracking-pixel kill switch - opt-in per port. When enabled, outbound
// sales sends embed a 1×1 pixel pointing at /api/public/email-pixel that
// records opens to `document_send_opens` and cross-posts to Umami.
const TRACKING_FIELDS: SettingFieldDef[] = [
  {
    key: 'email_open_tracking_enabled',
    label: 'Track email opens',
    description:
      'Embeds an invisible 1×1 tracking pixel in outbound sales emails. Each open is recorded in the CRM and cross-posted to Umami as an "email-opened" event. Apple Mail privacy proxy will over-count; clients that block images will under-count - standard email-tracking caveats apply.',
    type: 'boolean',
    defaultValue: false,
  },
];

export default function WebsiteAnalyticsSettingsPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="Website analytics (Umami)"
        description="Connect this port to its Umami website to display traffic, top pages, referrers, and conversion data on the Website Analytics dashboard."
      />

      <SettingsFormCard
        title="Umami connection"
        description="Self-hosted Umami: enter URL + username + password + website ID. Umami Cloud: enter URL + API key (Cloud field at the bottom) + website ID. Each port can point at its own Umami instance, or share one instance with different website IDs."
        fields={FIELDS}
        extra={<UmamiTestButton />}
      />

      <SettingsFormCard
        title="Email open tracking"
        description="Opt-in tracking for outbound sales emails. Disabled by default."
        fields={TRACKING_FIELDS}
      />
    </div>
  );
}