import React from 'react';
import { useTranslation } from 'react-i18next';
import './styles.css';
import FieldBlock from './FieldBlock';

const formatDate = (value?: string | null) => {
  if (!value) return '--';
  const parsed = Date.parse(value);
  if (!Number.isNaN(parsed)) {
    return new Date(parsed).toLocaleString();
  }
  return value;
};

const formatFileSize = (bytes?: number | null) => {
  if (bytes === undefined || bytes === null) return '--';
  if (bytes === 0) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
  const size = bytes / Math.pow(1024, exponent);
  return `${size.toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
};

const FileSummaryHeader = ({
  fileSize,
  createdAt,
  totalSignatures,
  lastSignatureDate,
}: {
  fileSize?: number | null;
  createdAt?: string | null;
  totalSignatures: number;
  lastSignatureDate?: string | null;
}) => {
  const { t } = useTranslation();
  const infoBlocks = [
    FieldBlock(t('files.size', 'File Size'), formatFileSize(fileSize ?? null)),
    FieldBlock(t('files.created', 'Created'), createdAt || '-'),
    FieldBlock(t('validateSignature.signatureDate', 'Signature Date'), formatDate(lastSignatureDate)),
    FieldBlock(t('validateSignature.totalSignatures', 'Total Signatures'), totalSignatures.toString()),
  ];

  return <div className="grid-container">{infoBlocks}</div>;
};

export default FileSummaryHeader;