cinny/src/app/components/message/content/ImageContent.tsx

import React, { ReactNode, useCallback, useEffect, useState } from 'react';
import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
import { Icon, Icons } from '../../icons';
import classNames from 'classnames';
import { Blurhash } from 'react-blurhash';
import FocusTrap from 'focus-trap-react';
import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/matrix/common';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import * as css from './style.css';
import { bytesToSize } from '../../../utils/common';
import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
import { stopPropagation } from '../../../utils/keyboard';
import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { ModalWide } from '../../../styles/Modal.css';
import { validBlurHash } from '../../../utils/blurHash';
import { getCurrentAccessToken } from '../../../utils/auth';
import { setMediaDimensions, getMediaBlurHash, getMediaDimensions, rememberMediaBlurHash } from '../../../state/mediaDimensionCache';

/**
 * Fetches media with authentication headers and returns a blob URL.
 * This is needed because service workers don't work reliably in Tauri/WebKit.
 * Falls back to unauthenticated request if authenticated request fails with 401.
 * If all attempts fail, returns the original URL to let the browser try directly.
 */
const fetchAuthenticatedMedia = async (
  url: string,
  accessToken: string | null
): Promise<string> => {
  try {
    let response = await fetch(url, {
      method: 'GET',
      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
    });
    
    // If we got a 401 and we tried with auth, fallback to unauthenticated request
    if (!response.ok && response.status === 401 && accessToken) {
      console.warn('[ImageContent] Auth failed (401), attempting unauthenticated fallback for:', url);
      response = await fetch(url, { method: 'GET' });
    }
    
    if (!response.ok) {
      console.warn(`[ImageContent] Failed to fetch authenticated media (${response.status}), falling back to original URL`);
      return url;
    }
    const blob = await response.blob();
    return URL.createObjectURL(blob);
  } catch (error) {
    console.warn('[ImageContent] Error fetching authenticated media, falling back to original URL:', error);
    return url;
  }
};

/**
 * Checks if a URL is an authenticated media endpoint.
 */
const isAuthenticatedMediaUrl = (url: string): boolean =>
  url.includes('/_matrix/client/v1/media/download') ||
  url.includes('/_matrix/client/v1/media/thumbnail');

type RenderViewerProps = {
  src: string;
  alt: string;
  requestClose: () => void;
};
type RenderImageProps = {
  alt: string;
  title: string;
  src: string;
  onLoad: (event?: React.SyntheticEvent<HTMLImageElement>) => void;
  onError: () => void;
  onClick: () => void;
  tabIndex: number;
};
export type ImageContentProps = {
  body: string;
  mimeType?: string;
  url: string;
  info?: IImageInfo;
  encInfo?: EncryptedAttachmentInfo;
  autoPlay?: boolean;
  markedAsSpoiler?: boolean;
  spoilerReason?: string;
  renderViewer: (props: RenderViewerProps) => ReactNode;
  renderImage: (props: RenderImageProps) => ReactNode;
};
export const ImageContent = as<'div', ImageContentProps>(
  (
    {
      className,
      body,
      mimeType,
      url,
      info,
      encInfo,
      autoPlay,
      markedAsSpoiler,
      spoilerReason,
      renderViewer,
      renderImage,
      ...props
    },
    ref
  ) => {
    const mx = useMatrixClient();
    const useAuthentication = useMediaAuthentication();
    const eventBlurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
    const cachedBlurHash = getMediaBlurHash(url);
    const blurHash = eventBlurHash ?? cachedBlurHash;
    const cachedDims = getMediaDimensions(url);
    const blurResolutionX = 32;
    const ratioW = info?.w || cachedDims?.w;
    const ratioH = info?.h || cachedDims?.h;
    const blurResolutionY =
      ratioW && ratioH && ratioW > 0
        ? Math.max(1, Math.round(blurResolutionX * (ratioH / ratioW)))
        : 32;

    const [load, setLoad] = useState(false);
    const [error, setError] = useState(false);
    const [viewer, setViewer] = useState(false);
    const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
    const [showPlaceholder, setShowPlaceholder] = useState(true);

    const [srcState, loadSrc] = useAsyncCallback(
      useCallback(async () => {
        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
        // Always use current session's token to avoid stale tokens during account switches
        const accessToken = getCurrentAccessToken();
        if (encInfo) {
          const fileContent = await downloadEncryptedMedia(
            mediaUrl,
            (encBuf) => decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo),
            accessToken
          );
          return URL.createObjectURL(fileContent);
        }
        // For authenticated media, fetch with auth header and return blob URL
        if (useAuthentication && isAuthenticatedMediaUrl(mediaUrl)) {
          return fetchAuthenticatedMedia(mediaUrl, accessToken);
        }
        return mediaUrl;
      }, [mx, url, useAuthentication, mimeType, encInfo])
    );

    const handleLoad = () => {
      setLoad(true);
    };
    const handleError = () => {
      setLoad(false);
      setError(true);
      setShowPlaceholder(true);
    };

    const handleRetry = () => {
      setError(false);
      loadSrc();
    };

    useEffect(() => {
      if (autoPlay) loadSrc();
    }, [autoPlay, loadSrc]);

    // Keep blurhash under the fade, then remove it once the image is fully opaque.
    useEffect(() => {
      if (!load) {
        setShowPlaceholder(true);
        return undefined;
      }
      const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
      return () => window.clearTimeout(timer);
    }, [load]);

    return (
      <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
        {showPlaceholder &&
          (typeof blurHash === 'string' ? (
            <div className={css.BlurhashPlaceholder}>
              <Blurhash
                hash={blurHash}
                width="100%"
                height="100%"
                resolutionX={blurResolutionX}
                resolutionY={blurResolutionY}
                punch={1.2}
                style={{ display: 'block' }}
              />
            </div>
          ) : (
            <div className={css.MediaSkeleton} />
          ))}
        {srcState.status === AsyncStatus.Success && (
          <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
            <OverlayCenter>
              <FocusTrap
                focusTrapOptions={{
                  initialFocus: false,
                  onDeactivate: () => setViewer(false),
                  clickOutsideDeactivates: true,
                  escapeDeactivates: stopPropagation,
                }}
              >
                <Modal
                  className={ModalWide}
                  size="500"
                >
                  {renderViewer({
                    src: srcState.data,
                    alt: body,
                    requestClose: () => setViewer(false),
                  })}
                </Modal>
              </FocusTrap>
            </OverlayCenter>
          </Overlay>
        )}
        {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
            <Button
              variant="Secondary"
              fill="Solid"
              radii="300"
              size="300"
              onClick={loadSrc}
              before={<Icon size="Inherit" src={Icons.Photo} filled />}
            >
              <Text size="B300">View</Text>
            </Button>
          </Box>
        )}
        {srcState.status === AsyncStatus.Success && (
          <Box
            className={classNames(
              css.AbsoluteContainer,
              css.MediaFadeIn,
              load && css.MediaFadeInLoaded,
              blurred && css.Blur
            )}
          >
            {renderImage({
              alt: body,
              title: body,
              src: srcState.data,
              onLoad: (e?: React.SyntheticEvent<HTMLImageElement>) => {
                const img = e?.currentTarget;
                if (img?.naturalWidth && img?.naturalHeight) {
                  setMediaDimensions(url, img.naturalWidth, img.naturalHeight);
                }
                if (img) rememberMediaBlurHash(url, img);
                handleLoad();
              },
              onError: handleError,
              onClick: () => setViewer(true),
              tabIndex: 0,
            })}
          </Box>
        )}
        {blurred && !error && srcState.status !== AsyncStatus.Error && (
          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
            <TooltipProvider
              tooltip={
                typeof spoilerReason === 'string' && (
                  <Tooltip variant="Secondary">
                    <Text>{spoilerReason}</Text>
                  </Tooltip>
                )
              }
              position="Top"
              align="Center"
            >
              {(triggerRef) => (
                <Chip
                  ref={triggerRef}
                  variant="Secondary"
                  radii="Pill"
                  size="500"
                  outlined
                  onClick={() => {
                    setBlurred(false);
                    if (srcState.status === AsyncStatus.Idle) {
                      loadSrc();
                    }
                  }}
                >
                  <Text size="B300">Spoiler</Text>
                </Chip>
              )}
            </TooltipProvider>
          </Box>
        )}
        {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
          !load &&
          !blurred &&
          typeof blurHash !== 'string' && (
            <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
              <Spinner variant="Secondary" />
            </Box>
          )}
        {(error || srcState.status === AsyncStatus.Error) && (
          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
            <TooltipProvider
              tooltip={
                <Tooltip variant="Critical">
                  <Text>Failed to load image!</Text>
                </Tooltip>
              }
              position="Top"
              align="Center"
            >
              {(triggerRef) => (
                <Button
                  ref={triggerRef}
                  size="300"
                  variant="Critical"
                  fill="Soft"
                  outlined
                  radii="300"
                  onClick={handleRetry}
                  before={<Icon size="Inherit" src={Icons.Warning} filled />}
                >
                  <Text size="B300">Retry</Text>
                </Button>
              )}
            </TooltipProvider>
          </Box>
        )}
        {!load && typeof info?.size === 'number' && (
          <Box className={css.AbsoluteFooter} justifyContent="End" alignContent="Center" gap="200">
            <Badge variant="Secondary" fill="Soft">
              <Text size="L400">{bytesToSize(info.size)}</Text>
            </Badge>
          </Box>
        )}
      </Box>
    );
  }
);