import { buildPageViewTrackingScript } from '@theorchard/songwhip-events';

import { USER_ID_COOKIE_NAME } from '~/lib/auth/constants';
import PageMetadata from '~/src/components/PageMetadata';
import { CHANNEL_CODE_PARAM } from '~/src/features/contentLink/constants';
import {
  TRACKING_APP_NAME,
  TRACKING_APP_VERSION,
  TRACKING_ENDPOINT,
} from '~/src/lib/tracker/constants';
import {
  CLIENT_ID_COOKIE_NAME,
  SESSION_ID_COOKIE_NAME,
} from '~/src/lib/tracker/cookies';
import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';

export interface ContentLinkPageProps {
  contentLinkId: number;
  accountId: number;
  url: string;
  ogTitle: string;
  ogImageUrl: string | null;
  shareUrl: string;
}

export const ContentLinkPage = ({
  url,
  ogTitle,
  ogImageUrl,
  shareUrl,
  contentLinkId,
  accountId,
}: ContentLinkPageProps) => {
  return (
    <>
      <PageMetadata
        title={ogTitle}
        imageUrl={ogImageUrl ?? undefined}
        ogUrl={shareUrl}
        noIndex
      />

      <noscript>
        <Layout column gap="6" height="100%" align="center" justify="center">
          <Text variant="title-4" color="title" align="center">
            {ogTitle}
          </Text>
          <Text variant="title-2" align="center">
            <a href={url} rel="noopener noreferrer">
              {url}
            </a>
          </Text>
        </Layout>
      </noscript>

      <script
        dangerouslySetInnerHTML={{
          __html: buildPageViewTrackingScript({
            endpoint: TRACKING_ENDPOINT,
            redirectUrl: url,
            context: {
              appName: TRACKING_APP_NAME,
              appVersion: TRACKING_APP_VERSION,
              pageType: 'contentLink',
              contentLinkId,
              accountId,
              channelCode: { param: CHANNEL_CODE_PARAM, source: 'query' },
              clientId: { param: CLIENT_ID_COOKIE_NAME, source: 'cookie' },
              userId: { param: USER_ID_COOKIE_NAME, source: 'cookie' },
              sessionId: { param: SESSION_ID_COOKIE_NAME, source: 'cookie' },
            },
          }),
        }}
      />
    </>
  );
};