"use client";

import MediaPreviewModal from "@/components/shared/MediaPreviewModal";
import { Modal } from "@/components/ui";
import type { RequestAttachmentPreview } from "@/hooks/useRequestsPage";
import { getMediaKind } from "@/lib/media";
import { useAuthenticatedFileUrl } from "@/hooks/useAuthenticatedFileUrl";
import { FileSignature } from "lucide-react";

type RequestAttachmentPreviewModalProps = {
  onClose: () => void;
  preview: RequestAttachmentPreview | null;
};

export function RequestAttachmentPreviewModal({
  onClose,
  preview,
}: RequestAttachmentPreviewModalProps) {
  const { url: previewUrl, error } = useAuthenticatedFileUrl(
    preview?.url || "",
  );
  if (!preview) return null;

  if (!previewUrl) {
    return (
      <Modal isOpen onClose={onClose} title={preview.name} size="lg">
        <p
          role={error ? "alert" : "status"}
          className="app-text-muted py-8 text-center"
        >
          {error || "Загрузка вложения…"}
        </p>
      </Modal>
    );
  }
  const mediaKind = getMediaKind({ fileName: preview.name || preview.url });

  if (mediaKind === "image" || mediaKind === "video") {
    return (
      <MediaPreviewModal
        preview={{
          type: mediaKind,
          src: previewUrl,
          name: preview.name,
          downloadUrl: previewUrl,
        }}
        onClose={onClose}
      />
    );
  }

  return (
    <Modal
      isOpen
      onClose={onClose}
      title={preview.name}
      size="lg"
      footer={
        <a
          href={previewUrl}
          download={preview.name}
          className="app-action-secondary rounded-lg px-3 py-1.5 text-xs font-medium"
        >
          Скачать
        </a>
      }
    >
      <div className="flex-1 overflow-auto">
        {mediaKind === "audio" ? (
          <audio src={previewUrl} controls className="mx-auto mt-8" />
        ) : (
          <div className="flex flex-col items-center gap-3 py-12 text-center">
            <FileSignature size={40} className="app-text-muted" />
            <p className="app-text-muted text-sm">{preview.name}</p>
            <a
              href={previewUrl}
              download={preview.name}
              className="app-action-primary rounded-lg px-4 py-2 text-sm font-medium"
            >
              Скачать файл
            </a>
          </div>
        )}
      </div>
    </Modal>
  );
}