'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { Box, Skeleton, Stack, Typography } from '@mui/material';
import type { VerificationDocument } from '@/services/verification/types';
import { useVerificationDocumentUrl } from '@/services/verification';
import AppButton from '../common/AppButton';
import AppIcon from '../common/AppIcon';

export interface DocumentViewerProps {
  document: VerificationDocument;
}

/** Human-readable file size. */
function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

/**
 * A verification-document viewer that fetches its **signed URL on demand** (never the embedded one — those
 * are short-lived) via `useVerificationDocumentUrl`. Handles the full lifecycle: **loading** the link,
 * **error / expired → re-request** (the URL is short-lived, so a manual re-request re-signs it), and the
 * loaded state (inline image preview for images, otherwise an "open in a new tab" affordance). PII → only
 * the signed URL is ever surfaced, never a public asset (phase §5).
 * @component DocumentViewer
 */
const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) => {
  const t = useTranslations('admin');
  const signed = useVerificationDocumentUrl(document.id);
  const isImage = document.contentType.startsWith('image/');

  return (
    <Box
      data-document-id={document.id}
      sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 1.5 }}
    >
      <Stack direction="row" sx={{ gap: 1, alignItems: 'center', mb: 1 }}>
        <AppIcon icon="document" size={18} color="var(--bal-text-secondary)" />
        <Typography variant="body2" sx={{ fontWeight: 600, flexGrow: 1, wordBreak: 'break-all' }}>
          {t('doc_file_meta', { name: document.originalFileName ?? `#${document.id}`, size: formatSize(document.fileSizeBytes) })}
        </Typography>
        <AppButton
          variant="text"
          color="primary"
          startIcon="refresh"
          onClick={() => signed.refetch()}
          disabled={signed.isFetching}
          sx={{ m: 0, minWidth: 0 }}
        >
          {t('doc_reload')}
        </AppButton>
      </Stack>

      {signed.isLoading || signed.isFetching ? (
        <Skeleton variant="rounded" height={isImage ? 180 : 44} />
      ) : signed.isError ? (
        <Stack sx={{ gap: 1, alignItems: 'flex-start' }}>
          <Typography variant="body2" sx={{ color: 'var(--bal-error)' }}>
            {t('doc_error')}
          </Typography>
          <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => signed.refetch()} sx={{ m: 0 }}>
            {t('doc_reload')}
          </AppButton>
        </Stack>
      ) : signed.data?.url ? (
        isImage ? (
          // Signed, short-lived, cross-host URL (not a static asset) — a plain <img> via Box, not next/image.
          <Box
            component="img"
            src={signed.data.url}
            alt={document.originalFileName ?? String(document.id)}
            sx={{ maxWidth: '100%', maxHeight: 320, borderRadius: 1, display: 'block' }}
          />
        ) : (
          <AppButton variant="outlined" color="primary" endIcon="external" href={signed.data.url} openInNewTab sx={{ m: 0 }}>
            {t('doc_open_new')}
          </AppButton>
        )
      ) : null}
    </Box>
  );
};

export default DocumentViewer;