nexarch/web/mail-search/app/mail/[messageId]/AttachmentList.tsx

"use client";

import { useEffect, useState } from "react";
import { fetchAttachmentList, type AttachmentListResult } from "../../../lib/attachments";
import { AttachmentPreview } from "./AttachmentPreview";

export interface AttachmentListProps {
  messageId: string;
}

// UX-03 Akzeptanzkriterium 1: laedt die Anhangsliste und zeigt je Anhang
// eine Vorschau. Ein Ausfall der Mail-API blockiert die uebrige
// Mailanzeige nicht (gleiche Konvention wie CaseContextPanel).
export function AttachmentList({ messageId }: AttachmentListProps) {
  const [result, setResult] = useState<AttachmentListResult | null>(null);

  useEffect(() => {
    let cancelled = false;
    setResult(null);
    fetchAttachmentList(messageId).then((r) => {
      if (!cancelled) setResult(r);
    });
    return () => {
      cancelled = true;
    };
  }, [messageId]);

  if (result === null) {
    return null;
  }
  if (result.status === "unavailable") {
    return (
      <section aria-label="Anhänge" style={{ marginTop: 24 }}>
        <p>Anhänge konnten nicht geladen werden.</p>
      </section>
    );
  }
  if (result.attachments.length === 0) {
    return null;
  }

  return (
    <section aria-label="Anhänge" style={{ marginTop: 24 }}>
      <h2>Anhänge</h2>
      {result.attachments.map((attachment) => (
        <AttachmentPreview key={attachment.index} messageId={messageId} attachment={attachment} />
      ))}
    </section>
  );
}