'use client';

import type { UrlCard, Collection, User } from '@/api-client';
import { Anchor, Card, Group, Stack, Text } from '@mantine/core';
import UrlCardActions from '../urlCardActions/UrlCardActions';
import { MouseEvent, Suspense } from 'react';
import UrlCardContent from '../urlCardContent/UrlCardContent';
import { useRouter } from 'next/navigation';
import { isCollectionPage, isProfilePage } from '@/lib/utils/link';
import styles from './UrlCard.module.css';
import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
import UrlCardDebugView from '../UrlCardDebugView/UrlCardDebugView';
import { CardSaveAnalyticsContext } from '@/features/analytics/types';
import posthog from 'posthog-js';
import { shouldCaptureAnalytics } from '@/features/analytics/utils';
import UrlCardContentSkeleton from '../urlCardContent/Skeleton.UrlCardContent';
import { LinkAvatar } from '@/components/link/MantineLink';

interface Props {
  id: string;
  url: string;
  uri?: string;
  cardContent: UrlCard['cardContent'];
  note?: UrlCard['note'];
  currentCollection?: Collection;
  urlLibraryCount: number;
  urlIsInLibrary?: boolean;
  urlConnectionCount: number;
  urlIsConnected?: boolean;
  authorHandle?: string;
  cardAuthor?: User;
  viaCardId?: string;
  showAuthor?: boolean;
  semblePageUrl?: string;
  analyticsContext?: CardSaveAnalyticsContext;
}

export default function UrlCard(props: Props) {
  const router = useRouter();
  const { settings } = useUserSettings();

  const handleNavigateToSemblePage = (e: MouseEvent<HTMLElement>) => {
    e.stopPropagation();

    let targetUrl: string;
    const isNavigatingToSemble =
      !isCollectionPage(props.url) && !isProfilePage(props.url);

    if (isCollectionPage(props.url) || isProfilePage(props.url)) {
      targetUrl = props.url;
    } else {
      // Build URL with viaCardId first, then id last (since id contains a URL that might have query params)
      if (props.viaCardId) {
        targetUrl = `/url?viaCardId=${props.id}&id=${props.cardContent.url}`;
      } else {
        targetUrl = `/url?id=${props.cardContent.url}`;
      }
    }

    // Register super properties and capture click event when navigating to semble page
    if (
      isNavigatingToSemble &&
      props.analyticsContext &&
      shouldCaptureAnalytics()
    ) {
      // Register super properties for later card_saved event
      posthog.register({
        original_save_source: props.analyticsContext.saveSource,
        original_active_filters: props.analyticsContext.activeFilters,
      });

      // Capture card clicked event
      posthog.capture('card_clicked', {
        card_id: props.id,
        url: props.cardContent.url,
        save_source: props.analyticsContext.saveSource,
        active_filters: props.analyticsContext.activeFilters,
        via_card_id: props.viaCardId,
      });
    }

    // Open in new tab if Cmd+Click (Mac), Ctrl+Click (Windows/Linux), or middle click
    if (e.metaKey || e.ctrlKey || e.button === 1) {
      window.open(targetUrl, '_blank', 'noopener,noreferrer');
      return;
    }

    router.push(targetUrl);
  };

  const handleAuxClick = (e: MouseEvent<HTMLElement>) => {
    // Handle middle mouse button (button 1)
    if (e.button === 1) {
      handleNavigateToSemblePage(e);
    }
  };

  return (
    <Card
      component="article"
      radius={settings.cardView === 'list' ? 0 : 'lg'}
      p={settings.cardView === 'list' ? 'xs' : 'sm'}
      flex={1}
      h={'100%'}
      withBorder={settings.cardView !== 'list'}
      className={styles.root}
      onClick={handleNavigateToSemblePage}
      onAuxClick={handleAuxClick}
    >
      <Stack justify="space-between" flex={1}>
        <Suspense fallback={<UrlCardContentSkeleton />}>
          <UrlCardContent
            url={props.url}
            uri={props.uri}
            cardContent={props.cardContent}
          />
        </Suspense>

        {settings.tinkerMode && (
          <UrlCardDebugView
            cardContent={props.cardContent}
            cardAuthor={props.cardAuthor}
          />
        )}

        <Stack>
          {props.showAuthor && props.cardAuthor && (
            <Group gap={'7'}>
              <Text fz={'xs'} c={'dimmed'} fw={500}>
                By{' '}
              </Text>
              <Group gap={'5'}>
                <LinkAvatar
                  href={`/profile/${props.cardAuthor?.handle}`}
                  src={props.cardAuthor?.avatarUrl?.replace(
                    'avatar',
                    'avatar_thumbnail',
                  )}
                  alt={`${props.cardAuthor?.handle}'s avatar`}
                  size={'xs'}
                  radius={'sm'}
                />
                <Anchor
                  href={`/profile/${props.cardAuthor.handle}`}
                  fz={'xs'}
                  fw={600}
                  c={'bright'}
                  underline="never"
                  onClick={(e) => e.stopPropagation()}
                >
                  {props.cardAuthor.name || `@${props.cardAuthor.handle}`}
                </Anchor>
              </Group>
            </Group>
          )}

          <UrlCardActions
            cardAuthor={props.cardAuthor}
            cardContent={props.cardContent}
            cardCount={props.urlLibraryCount}
            id={props.id}
            authorHandle={props.authorHandle}
            note={props.note}
            currentCollection={props.currentCollection}
            urlLibraryCount={props.urlLibraryCount}
            urlIsInLibrary={props.urlIsInLibrary ?? false}
            urlConnectionCount={props.urlConnectionCount}
            urlIsConnected={props.urlIsConnected}
            viaCardId={props.viaCardId}
            semblePageUrl={props.semblePageUrl}
            analyticsContext={props.analyticsContext}
          />
        </Stack>
      </Stack>
    </Card>
  );
}
