import React from 'react';
import type { MessageBlock } from '@/store/commStore';
import { Download, FileText } from 'lucide-react';

interface FileBlockProps {
  block: MessageBlock;
}

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

const fileIcon = (
  <FileText className="w-8 h-8 text-secondary-400" aria-hidden="true" strokeWidth={1.5} />
);

const downloadIcon = (
  <Download className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
);

const FileBlock: React.FC<FileBlockProps> = ({ block }) => {
  const { url, name, size } = block.block_data;

  if (!url && !name) {
    return null;
  }

  const fileName: string = name || 'Datei';
  const fileSizeLabel = formatFileSize(size);

  return (
    <div className="flex items-center gap-3 p-3 rounded-lg border border-secondary-200 bg-white shadow-sm">
      <div className="flex-shrink-0">{fileIcon}</div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-secondary-700 truncate">{fileName}</p>
        {fileSizeLabel && (
          <p className="text-xs text-secondary-400">{fileSizeLabel}</p>
        )}
      </div>
      {url && (
        <a
          href={url}
          download={fileName}
          target="_blank"
          rel="noopener noreferrer"
          className="flex-shrink-0 p-2 rounded-lg bg-primary-500 text-white hover:bg-primary-600 transition-colors"
          aria-label={`Datei herunterladen: ${fileName}`}
        >
          {downloadIcon}
        </a>
      )}
    </div>
  );
};

export default FileBlock;