"use client";

import { useEffect, useState } from "react";

interface FilePreviewProps {
  fileId: string;
  fileType: string; // Pass the file type as a prop
}

export function FilePreview({ fileId, fileType }: FilePreviewProps) {
  const [mediaSrc, setMediaSrc] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!fileId) {
      setError("File ID is required.");
      return;
    }

    let objectUrl: string | null = null;

    const fetchMedia = async () => {
      try {
        const response = await fetch(`/api/files/serv?id=${encodeURIComponent(fileId)}`);
        if (!response.ok) {
          throw new Error("Failed to fetch media");
        }

        const blob = await response.blob();
        objectUrl = URL.createObjectURL(blob);
        setMediaSrc(objectUrl);
      } catch (err) {
        console.error(err);
        setError("Failed to load media.");
      }
    };

    fetchMedia();

    return () => {
      if (objectUrl) {
        URL.revokeObjectURL(objectUrl);
      }
    };
  }, [fileId]);

  if (error) {
    return <div className="text-red-500">{error}</div>;
  }

  if (!mediaSrc) {
    return <div>Loading...</div>;
  }

  if (fileType.startsWith("video")) {
    return (
      <video
        controls
        className="max-w-full max-h-96 rounded-lg shadow-md"
        src={mediaSrc}
      >
        Your browser does not support the video tag.
      </video>
    );
  }
  if (fileType.startsWith("audio")) {
    return (
      <audio
        controls
        className="max-w-full max-h-96 rounded-lg shadow-md"
        src={mediaSrc}
      >
        Your browser does not support the audio tag.
      </audio>
    );
  }

  return <img src={mediaSrc} alt="Media preview" className="max-w-full max-h-96 rounded-lg shadow-md" />;
}