"use client";

import { Download, ExternalLink, FileText } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { Modal } from "@/components/ui/modal";
import { getFileKind, isPreviewableFile } from "@/lib/file-utils";

interface FilePreviewModalProps {
  open: boolean;
  onClose: () => void;
  fileName: string;
  publicUrl: string;
  mimeType: string | null;
}

export function FilePreviewModal({
  open,
  onClose,
  fileName,
  publicUrl,
  mimeType,
}: FilePreviewModalProps) {
  const fileKind = getFileKind(mimeType, fileName);
  const previewable = isPreviewableFile(mimeType, fileName);

  return (
    <Modal open={open} onClose={onClose} title={fileName} className="max-w-5xl">
      <div className="space-y-4">
        <div className="flex flex-wrap items-center gap-2">
          <a
            href={publicUrl}
            target="_blank"
            rel="noreferrer"
            className={buttonVariants({ size: "sm", variant: "outline" })}
          >
            <ExternalLink className="h-4 w-4" />
            Open file
          </a>
          <a
            href={publicUrl}
            download={fileName}
            className={buttonVariants({ size: "sm", variant: "outline" })}
          >
            <Download className="h-4 w-4" />
            Download
          </a>
        </div>

        {previewable ? (
          fileKind === "pdf" ? (
            <iframe
              src={publicUrl}
              title={fileName}
              className="h-[72vh] w-full rounded-xl border border-border bg-white"
            />
          ) : fileKind === "video" ? (
            <div className="flex items-center justify-center rounded-xl border border-border bg-black">
              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
              <video
                src={publicUrl}
                controls
                playsInline
                className="max-h-[72vh] w-full rounded-xl object-contain"
              />
            </div>
          ) : (
            <div className="flex min-h-[22rem] items-center justify-center rounded-xl border border-border bg-muted/20 p-4">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={publicUrl}
                alt={fileName}
                className="max-h-[72vh] w-auto max-w-full rounded-lg object-contain"
              />
            </div>
          )
        ) : (
          <div className="flex min-h-[18rem] flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border bg-muted/20 p-8 text-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-background">
              <FileText className="h-5 w-5 text-muted-foreground" />
            </div>
            <div className="space-y-1">
              <p className="text-sm font-medium">Preview not available for this file type</p>
              <p className="text-sm text-muted-foreground">
                Open or download the file to view it in the original app.
              </p>
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
}