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

import { Box, Icon, Icons, Text, as, color, config } from 'folds';
import React from 'react';

const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };

export const MessageDeletedContent = as<'div', { children?: never; reason?: string }>(
  ({ reason, ...props }, ref) => (
    <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
      <Icon size="50" src={Icons.Delete} />
      <i>
        {reason ? `This message has been deleted — ${reason}` : 'This message has been deleted'}
      </i>
    </Box>
  ),
);

export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
  <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
    <Icon size="50" src={Icons.Warning} />
    <i>Unsupported message</i>
  </Box>
));

export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
  <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
    <Icon size="50" src={Icons.Warning} />
    <i>Failed to load message</i>
  </Box>
));

export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
  <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
    <Icon size="50" src={Icons.Lock} />
    <i>Unable to decrypt message</i>
  </Box>
));

export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
  <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
    <Icon size="50" src={Icons.Lock} />
    <i>This message is not decrypted yet</i>
  </Box>
));

export const MessageBrokenContent = as<'div', { children?: never }>(({ ...props }, ref) => (
  <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
    <Icon size="50" src={Icons.Warning} />
    <i>Broken message</i>
  </Box>
));

export const MessageEmptyContent = as<'div', { children?: never }>(({ ...props }, ref) => (
  <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
    <Icon size="50" src={Icons.Warning} />
    <i>Empty message</i>
  </Box>
));

export const MessageVerificationRequestContent = as<'div', { children?: never }>(
  ({ ...props }, ref) => (
    <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
      <Icon size="50" src={Icons.Lock} />
      <i>Device verification request — open another Matrix client to accept</i>
    </Box>
  ),
);

export const MessageEditedContent = as<
  'span',
  { children?: never; onEditHistoryClick?: () => void }
>(({ onEditHistoryClick, ...props }, ref) =>
  onEditHistoryClick ? (
    <span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
      <button
        type="button"
        onClick={onEditHistoryClick}
        aria-label="View edit history"
        style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
      >
        <Text as="span" size="T200" priority="300">
          {' (edited)'}
        </Text>
      </button>
    </span>
  ) : (
    <Text as="span" size="T200" priority="300" {...props} ref={ref}>
      {' (edited)'}
    </Text>
  ),
);

type TranslatedStatus = 'downloading' | 'translating' | 'done' | 'error';

const translatedLabel = (
  status: TranslatedStatus,
  fromLangName: string,
  downloadProgress?: number,
): string => {
  if (status === 'downloading') {
    const pct =
      typeof downloadProgress === 'number' ? ` ${Math.round(downloadProgress * 100)}%` : '';
    return `Downloading translation model…${pct}`;
  }
  if (status === 'translating') return 'Translating…';
  if (status === 'error') return 'Translation failed — show original';
  return `Translated from ${fromLangName} · Show original`;
};

// Inline chip shown beside a translated message body. Clicking it toggles back
// to the original text (the same per-event toggle the message menu drives).
export const MessageTranslatedContent = as<
  'span',
  {
    children?: never;
    fromLangName: string;
    status: TranslatedStatus;
    downloadProgress?: number;
    onToggle: () => void;
  }
>(({ fromLangName, status, downloadProgress, onToggle, ...props }, ref) => (
  <span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
    <button
      type="button"
      onClick={onToggle}
      aria-pressed={status === 'done'}
      aria-label="Toggle message translation"
      style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
    >
      <Text as="span" size="T200" priority="300">
        {` · ${translatedLabel(status, fromLangName, downloadProgress)}`}
      </Text>
    </button>
  </span>
));