pn-new-crm/src/components/files/file-preview-dialog.tsx

'use client';

import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { Download, ExternalLink, FileWarning, ZoomIn } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';

// yet-another-react-lightbox is ~50kb, lazy-load it.
const Lightbox = dynamic(() => import('yet-another-react-lightbox'), { ssr: false });
import 'yet-another-react-lightbox/styles.css';

// pdfjs-dist is ~150kb gzip - lazy-load so routes that never preview
// PDFs don't ship it. ssr:false because the worker setup needs window.
const PdfViewer = dynamic(() => import('./pdf-viewer').then((m) => ({ default: m.PdfViewer })), {
  ssr: false,
  loading: () => (
    <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
      Loading PDF viewer…
    </div>
  ),
});

interface FilePreviewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  fileId?: string;
  fileName?: string;
  mimeType?: string;
}

/**
 * Routes a file's mime type to one of seven preview surfaces. Order
 * matters - `application/pdf` is matched before the generic
 * "application/*" bucket so PDFs stay on the rich pdfjs viewer.
 */
type PreviewKind =
  | 'image'
  | 'pdf'
  | 'text'
  | 'audio'
  | 'video'
  | 'office' // .docx / .xlsx / .pptx / .odt / .ods
  | 'unknown';

function previewKindFor(mimeType: string | undefined, fileName: string | undefined): PreviewKind {
  const mt = mimeType ?? '';
  const name = (fileName ?? '').toLowerCase();
  if (mt.startsWith('image/')) return 'image';
  if (mt === 'application/pdf' || name.endsWith('.pdf')) return 'pdf';
  if (mt.startsWith('audio/') || /\.(mp3|wav|m4a|ogg|flac)$/.test(name)) return 'audio';
  if (mt.startsWith('video/') || /\.(mp4|mov|webm|m4v|ogg)$/.test(name)) return 'video';
  if (
    mt.startsWith('text/') ||
    mt === 'application/json' ||
    mt === 'application/xml' ||
    /\.(txt|md|csv|tsv|json|xml|log|yaml|yml|conf|ini|html?)$/.test(name)
  ) {
    return 'text';
  }
  if (
    mt.includes('officedocument') ||
    mt === 'application/msword' ||
    mt === 'application/vnd.ms-excel' ||
    mt === 'application/vnd.ms-powerpoint' ||
    mt === 'application/vnd.oasis.opendocument.text' ||
    mt === 'application/vnd.oasis.opendocument.spreadsheet' ||
    mt === 'application/vnd.oasis.opendocument.presentation' ||
    /\.(docx?|xlsx?|pptx?|odt|ods|odp)$/.test(name)
  ) {
    return 'office';
  }
  return 'unknown';
}

export function FilePreviewDialog({
  open,
  onOpenChange,
  fileId,
  fileName,
  mimeType,
}: FilePreviewDialogProps) {
  const [lightboxOpen, setLightboxOpen] = useState(false);

  // useQuery replaces the prior useEffect(fetch+setState) pattern. The
  // request is gated on the dialog being open and a fileId being set.
  const previewQuery = useQuery<{ data: { url: string } }>({
    queryKey: ['file-preview', fileId],
    queryFn: () => apiFetch(`/api/v1/files/${fileId}/preview`),
    enabled: open && !!fileId,
  });
  const previewUrl = previewQuery.data?.data.url ?? null;
  const loading = previewQuery.isLoading;
  const error = previewQuery.error ? 'Failed to load preview' : null;

  const kind = previewKindFor(mimeType, fileName);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-[min(95vw,1400px)] sm:max-w-none lg:max-w-none h-[85vh] flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 truncate">
            <span className="truncate">{fileName ?? 'Preview'}</span>
            {previewUrl && (
              <a
                href={previewUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="shrink-0 text-muted-foreground hover:text-foreground"
              >
                <ExternalLink className="h-4 w-4" />
              </a>
            )}
          </DialogTitle>
          {/* A6: screen-reader description; visually hidden because the
           *  title + preview surface tells sighted users what the dialog
           *  contains. Skips the Radix "missing aria-describedby" warning. */}
          <DialogDescription className="sr-only">
            Inline preview of {fileName ?? 'the selected file'}.
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-hidden rounded-lg border bg-muted/20">
          {loading && (
            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
              Loading preview...
            </div>
          )}

          {error && (
            <div className="flex h-full items-center justify-center text-sm text-destructive">
              {error}
            </div>
          )}

          {!loading && !error && previewUrl && kind === 'image' && (
            <button
              type="button"
              onClick={() => setLightboxOpen(true)}
              className="flex h-full w-full items-center justify-center p-4 group"
              aria-label="Open in lightbox"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={previewUrl}
                alt={fileName ?? 'Preview'}
                className="max-h-full max-w-full object-contain rounded transition-transform group-hover:scale-[1.02]"
              />
              <ZoomIn className="absolute right-6 bottom-6 h-6 w-6 rounded-full bg-background/80 p-1 text-foreground opacity-0 transition-opacity group-hover:opacity-100" />
            </button>
          )}

          {!loading && !error && previewUrl && kind === 'pdf' && (
            <PdfViewer url={previewUrl} fileName={fileName} />
          )}

          {!loading && !error && previewUrl && kind === 'text' && <TextPreview url={previewUrl} />}

          {!loading && !error && previewUrl && kind === 'audio' && (
            <div className="flex h-full items-center justify-center p-6">
              {/* HTML5 <audio> handles streaming + scrubbing natively;
                  preload="metadata" avoids burning bandwidth on a tab
                  the rep may close before playing. */}
              <audio src={previewUrl} controls preload="metadata" className="w-full max-w-xl" />
            </div>
          )}

          {!loading && !error && previewUrl && kind === 'video' && (
            <div className="flex h-full items-center justify-center bg-black">
              <video
                src={previewUrl}
                controls
                preload="metadata"
                className="max-h-full max-w-full"
              />
            </div>
          )}

          {!loading && !error && previewUrl && kind === 'office' && (
            // Office documents render via Microsoft's hosted Office viewer
            // - public URL only; presigned download URLs include a token
            // in the query string so they work here even though the file
            // isn't world-public. The viewer streams the document and
            // renders a high-fidelity preview without us shipping a
            // headless LibreOffice. Falls back to "download to view" if
            // the embed loads but renders nothing (e.g. CORS rejected) -
            // detection is hard so we just keep the download CTA below.
            <iframe
              title={fileName ?? 'Office document preview'}
              src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                previewUrl,
              )}`}
              className="h-full w-full"
              sandbox="allow-scripts allow-same-origin allow-popups"
            />
          )}

          {!loading && !error && previewUrl && kind === 'unknown' && (
            <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
              <FileWarning className="size-8 text-muted-foreground" aria-hidden />
              <p className="text-sm font-medium">Preview not supported for this file type</p>
              <p className="max-w-xs text-xs text-muted-foreground">
                The file mime type ({mimeType ?? 'unknown'}) doesn&apos;t map to a built-in preview
                surface. Download to view it locally.
              </p>
              <Button asChild>
                <a href={previewUrl} download={fileName ?? 'download'}>
                  <Download className="mr-1.5 size-4" aria-hidden />
                  Download
                </a>
              </Button>
            </div>
          )}
        </div>
      </DialogContent>

      {/* Lightbox renders OUTSIDE the parent Dialog so the dialog's own
       *  bounds don't clip the fullscreen overlay. yet-another-react-
       *  lightbox handles zoom/pan/keyboard nav out of the box. */}
      {previewUrl && kind === 'image' && (
        <Lightbox
          open={lightboxOpen}
          close={() => setLightboxOpen(false)}
          slides={[{ src: previewUrl, alt: fileName ?? 'Preview' }]}
          controller={{ closeOnBackdropClick: true }}
          carousel={{ finite: true }}
        />
      )}
    </Dialog>
  );
}

/**
 * Plain-text preview pane - fetches the file body via the presigned
 * URL (no auth needed; the URL itself carries the access token) and
 * renders it as monospaced text. Caps the body at 1 MB so a huge log
 * file doesn't lock the browser; surfaces a "first 1 MB shown" notice
 * when the cap is hit.
 */
function TextPreview({ url }: { url: string }) {
  const [text, setText] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [truncated, setTruncated] = useState(false);
  const MAX_BYTES = 1_000_000; // 1 MB

  useEffect(() => {
    let cancelled = false;
    async function load() {
      try {
        const res = await fetch(url);
        if (!res.ok) {
          if (!cancelled) setError(`Failed to load preview (${res.status})`);
          return;
        }
        const blob = await res.blob();
        const slice = blob.slice(0, MAX_BYTES);
        const body = await slice.text();
        if (cancelled) return;
        setText(body);
        setTruncated(blob.size > MAX_BYTES);
      } catch (err) {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : 'Unknown error');
      }
    }
    void load();
    return () => {
      cancelled = true;
    };
  }, [url]);

  if (error) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-destructive">
        {error}
      </div>
    );
  }
  if (text === null) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        Loading…
      </div>
    );
  }
  return (
    <div className="flex h-full flex-col">
      {truncated ? (
        <div className="border-b bg-amber-50 px-3 py-1 text-xs text-amber-900">
          Showing the first 1 MB. Download the full file to view the rest.
        </div>
      ) : null}
      <pre className="flex-1 overflow-auto whitespace-pre-wrap break-words bg-background p-4 font-mono text-xs leading-relaxed">
        {text}
      </pre>
    </div>
  );
}