"use client";

/**
 * TASK-0103 — the file preview modal (file browser, Requirements §5).
 *
 * Row click in the browser opens this: image → lightbox (full size), pdf →
 * sandboxed iframe, video → native player, audio → player, doc/other → the
 * download card. Signed URLs come from `GET /files/:id` (15-min contract);
 * the modal closes on Escape / backdrop.
 */
import { useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { Download, ExternalLink, Loader2, ShieldAlert, X } from "lucide-react";
import { filesApi, humanSize, kindForMime, type FileDetail } from "@/lib/files/api";

interface PreviewModalProps {
  fileId: string;
  workspaceId?: string;
  onClose: () => void;
}

export function PreviewModal({ fileId, workspaceId, onClose }: PreviewModalProps) {
  const query = useQuery({
    queryKey: ["files", fileId, "preview"],
    queryFn: () => filesApi.get(fileId, { workspaceId }),
  });

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
      role="dialog"
      aria-modal="true"
      aria-label={`Preview ${query.data?.name ?? "file"}`}
      onClick={onClose}
    >
      <div
        className="relative flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-lg border border-border bg-background shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-2 border-b border-border p-3">
          <span className="min-w-0 flex-1 truncate text-sm font-medium">{query.data?.name ?? "Loading…"}</span>
          <button type="button" onClick={onClose} aria-label="Close preview" className="rounded p-1 text-muted-foreground hover:bg-accent">
            <X className="size-4" aria-hidden />
          </button>
        </div>

        <div className="min-h-[200px] flex-1 overflow-auto bg-muted/20">
          {query.isLoading || !query.data ? (
            <div className="flex h-40 items-center justify-center">
              <Loader2 className="size-5 animate-spin text-muted-foreground" aria-hidden />
            </div>
          ) : query.data.status === "VIRUS_DETECTED" ? (
            <div className="flex h-40 items-center justify-center gap-2 text-sm text-red-700">
              <ShieldAlert className="size-4" aria-hidden /> Blocked by virus scan — contact an admin
            </div>
          ) : query.data.status !== "READY" ? (
            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
              {query.data.status === "SCANNING" ? "Scanning…" : "Processing…"}
            </div>
          ) : (
            <ModalBody detail={query.data} />
          )}
        </div>

        {query.data && query.data.status === "READY" ? (
          <div className="flex items-center justify-end gap-2 border-t border-border p-2">
            {kindForMime(query.data.mimeType) === "pdf" ? (
              <a
                href={query.data.previewUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent"
              >
                <ExternalLink className="size-3" aria-hidden /> Open in new tab
              </a>
            ) : null}
            <button
              type="button"
              onClick={() => {
                // downloadUrl is always set for a READY file (quarantined
                // files never reach this footer — it's gated on status READY).
                if (query.data.downloadUrl) window.location.href = query.data.downloadUrl;
              }}
              className="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent"
            >
              <Download className="size-3" aria-hidden /> Download ({humanSize(query.data.size)})
            </button>
          </div>
        ) : null}
      </div>
    </div>
  );
}

function ModalBody({ detail }: { detail: FileDetail }) {
  const kind = kindForMime(detail.mimeType);
  if (kind === "image") {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img src={detail.previewUrl} alt={detail.name} className="mx-auto max-h-[75vh] object-contain" />
    );
  }
  if (kind === "video") {
    return (
      <video
        controls
        src={detail.previewUrl}
        poster={detail.thumbnailUrl ?? undefined}
        className="mx-auto max-h-[75vh] bg-black"
        aria-label={detail.name}
      />
    );
  }
  if (kind === "audio") {
    return (
      <div className="flex h-32 items-center justify-center">
        <audio controls src={detail.previewUrl} className="w-3/4" aria-label={detail.name} />
      </div>
    );
  }
  if (kind === "pdf") {
    return (
      <iframe
        title={detail.name}
        src={detail.previewUrl}
        sandbox="allow-scripts allow-popups"
        referrerPolicy="no-referrer"
        className="h-[75vh] w-full bg-white"
      />
    );
  }
  // doc / other: the download card
  return (
    <div className="flex h-32 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
      <span className="text-base">{detail.name}</span>
      <span>{[detail.mimeType, humanSize(detail.size)].join(" · ")}</span>
      <span>No inline preview — use Download.</span>
    </div>
  );
}