import { useEffect, useState } from "react";
import { FileText, Loader2 } from "lucide-react";
import type { AuthPlatform } from "@/lib/auth";
import { documentFileUrl } from "@/lib/document-upload";
import { cn } from "@/lib/utils";

export function DocumentPreview({
  invoiceId,
  platform,
  email,
  mimeType,
  fileName,
  className,
}: {
  invoiceId: string;
  platform: AuthPlatform;
  email: string;
  mimeType?: string | null;
  fileName: string;
  className?: string;
}) {
  const [src, setSrc] = useState<string | null>(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    let objectUrl: string | null = null;
    setError(false);
    setSrc(null);

    void fetch(documentFileUrl(invoiceId, platform, email))
      .then((response) => {
        if (!response.ok) throw new Error("unavailable");
        return response.blob();
      })
      .then((blob) => {
        objectUrl = URL.createObjectURL(blob);
        setSrc(objectUrl);
      })
      .catch(() => setError(true));

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

  if (error) {
    return (
      <div
        className={cn(
          "flex min-h-[220px] flex-col items-center justify-center gap-2 bg-muted/30 px-6 py-10 text-center",
          className,
        )}
      >
        <FileText size={28} className="text-muted-foreground" aria-hidden="true" />
        <p className="text-[13px] text-muted-foreground">Preview unavailable for {fileName}</p>
      </div>
    );
  }

  if (!src) {
    return (
      <div
        className={cn(
          "flex min-h-[220px] items-center justify-center bg-muted/30 px-6 py-10",
          className,
        )}
      >
        <Loader2 className="size-6 animate-spin text-muted-foreground" aria-label="Loading preview" />
      </div>
    );
  }

  if (mimeType?.startsWith("image/")) {
    return (
      <div className={cn("flex items-center justify-center bg-muted/20 p-4", className)}>
        <img
          src={src}
          alt={fileName}
          className="max-h-[420px] w-full rounded-lg object-contain ring-1 ring-border/60"
        />
      </div>
    );
  }

  if (mimeType === "application/pdf" || fileName.toLowerCase().endsWith(".pdf")) {
    return (
      <iframe
        title={fileName}
        src={src}
        className={cn("min-h-[420px] w-full border-0 bg-muted/20", className)}
      />
    );
  }

  return (
    <div
      className={cn(
        "flex min-h-[220px] flex-col items-center justify-center gap-2 bg-muted/30 px-6 py-10",
        className,
      )}
    >
      <FileText size={28} className="text-muted-foreground" aria-hidden="true" />
      <p className="text-[13px] text-muted-foreground">{fileName}</p>
    </div>
  );
}