'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 AppButton from '../common/AppButton';
import AppIcon from '../common/AppIcon';

export interface DocumentViewerProps {
  document: VerificationDocument;
  /** Refetches the parent case — there is no per-document re-sign route, so a reopen re-fetches the whole
   * case to get a freshly-signed `document.url`. */
  onReload: () => void;
  /** True while the parent case is (re)loading — drives the skeleton. */
  reloading: boolean;
}

/** 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. `document.url` is the **short-lived signed GET URL the case detail
 * already carries** — there is no separate per-document re-sign route (b6 gap), so "reload" refetches the
 * whole case (`onReload`) rather than calling a document-specific endpoint. Handles the loading (parent
 * case fetching) and loaded states (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, onReload, reloading }) => {
  const t = useTranslations('admin');
  const isImage = document.contentType.startsWith('image/');

  return (
    <Box
      data-document-id={document.id}
      sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', 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: 500, 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={onReload}
          disabled={reloading}
          sx={{ minWidth: 0 }}
        >
          {t('doc_reload')}
        </AppButton>
      </Stack>

      {reloading ? (
        <Skeleton variant="rounded" height={isImage ? 180 : 44} />
      ) : document.url ? (
        isImage ? (
          // Signed, short-lived, cross-host URL (not a static asset) — a plain <img> via Box, not next/image.
          <Box
            component="img"
            src={document.url}
            alt={document.originalFileName ?? String(document.id)}
            sx={{ maxWidth: '100%', maxHeight: 320, borderRadius: 'var(--bal-radius-sm)', display: 'block' }}
          />
        ) : (
          <AppButton variant="outlined" color="primary" endIcon="external" href={document.url} openInNewTab>
            {t('doc_open_new')}
          </AppButton>
        )
      ) : null}
    </Box>
  );
};

export default DocumentViewer;