import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { FileText, Download, Loader2 } from "lucide-react";

export function SupportAttachment({
  path,
  type,
  name,
}: {
  path: string;
  type?: string | null;
  name?: string | null;
}) {
  const [url, setUrl] = useState<string | null>(null);
  const isImage = (type ?? "").startsWith("image/");

  useEffect(() => {
    let alive = true;
    supabase.storage
      .from("support-attachments")
      .createSignedUrl(path, 3600)
      .then(({ data }) => {
        if (alive) setUrl(data?.signedUrl ?? null);
      });
    return () => {
      alive = false;
    };
  }, [path]);

  if (!url) {
    return (
      <div className="flex items-center gap-2 text-xs opacity-70 py-2">
        <Loader2 className="h-3 w-3 animate-spin" /> লোড হচ্ছে
      </div>
    );
  }

  if (isImage) {
    return (
      <a href={url} target="_blank" rel="noreferrer" className="block">
        <img
          src={url}
          alt={name ?? "attachment"}
          className="max-h-56 max-w-full rounded-lg object-cover"
          loading="lazy"
        />
      </a>
    );
  }

  return (
    <a
      href={url}
      target="_blank"
      rel="noreferrer"
      className="flex items-center gap-2 bg-background/30 rounded-lg px-2 py-2 text-xs hover:bg-background/50"
    >
      <FileText className="h-4 w-4 shrink-0" />
      <span className="flex-1 truncate">{name ?? "ফাইল"}</span>
      <Download className="h-3 w-3 shrink-0" />
    </a>
  );
}