import type React from 'react';
import { IconCloudDownload } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import classes from './FileMessage.module.scss';
import type { MessageInfo, FileMessagePayload } from 'tuikit-atomicx-react/chat';

interface FileMessageProps {
  message: MessageInfo;
}

function formatFileSize(bytes: number | undefined): string {
  if (!bytes || bytes <= 0) {
    return '';
  }
  const MB = 1024 * 1024;
  if (bytes >= MB) {
    return `${(bytes / MB).toFixed(1)} MB`;
  }
  return `${(bytes / 1024).toFixed(1)} KB`;
}

function FileMessage(props: FileMessageProps) {
  const { message } = props;
  const payload = message.messagePayload as FileMessagePayload;
  const messageContent = {
    name: payload.fileName,
    size: formatFileSize(payload.fileSize),
    url: payload.fileURL,
  };

  const handleFileClick = async (event: React.MouseEvent) => {
    if (event.metaKey || event.ctrlKey) {
      window.open(messageContent.url, '_blank');
    } else {
      try {
        event.preventDefault();

        const response = await fetch(messageContent.url ?? '');
        if (!response.ok) {
          throw new Error('Download failed');
        }

        const blob = await response.blob();
        const blobUrl = window.URL.createObjectURL(blob);

        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = messageContent.name || '';
        link.click();

        window.URL.revokeObjectURL(blobUrl);
      } catch (error) {
        console.error('Download error:', error);
      }
    }
  };

  return (
    <View
      className={cs(classes['file-message'], {
        [classes['file-message--self']]: message.isSentBySelf,
        [classes['file-message--other']]: !message.isSentBySelf,
      })}
      onClick={handleFileClick}
    >
      <View className={classes['file-message__icon']}>
        <FileIcon />
      </View>
      <View className={classes['file-message__info']}>
        <View className={classes['file-message__name']}>{messageContent.name}</View>
        <View className={classes['file-message__size']}>{messageContent.size}</View>
      </View>
      <View className={classes['file-message__download']}>
        <IconCloudDownload />
      </View>
    </View>
  );
}

function FileIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 2H7C5.34315 2 4 3.34315 4 5V27C4 28.6569 5.34315 30 7 30H25C26.6569 30 28 28.6569 28 27V14L16 2Z" fill="#E2E5E7" />
      <path d="M22 14H28L16 2V8C16 11.3137 18.6863 14 22 14Z" fill="#B0B7BD" />
      <path d="M28 16L22 14C18.6863 14 16 11.3137 16 8V2L28 16Z" fill="#CAD1D8" />
    </svg>
  );
}

export default FileMessage;