import React from 'react';

export interface MessageAttachment {
  url?: string;
  display_url?: string;
  name?: string;
  kind?: 'image';
}

function dataUrlToBlobUrl(dataUrl: string): string | null {
  const separatorIndex = dataUrl.indexOf(',');
  if (!dataUrl.startsWith('data:') || separatorIndex < 0) return null;

  const header = dataUrl.slice(0, separatorIndex);
  const payload = dataUrl.slice(separatorIndex + 1);
  const mime = /^data:([^;,]+)/.exec(header)?.[1] ?? 'application/octet-stream';
  const bytes = header.includes(';base64')
    ? Uint8Array.from(atob(payload), char => char.charCodeAt(0))
    : new TextEncoder().encode(decodeURIComponent(payload));

  return URL.createObjectURL(new Blob([bytes], { type: mime }));
}

function openAttachmentUrl(event: React.MouseEvent<HTMLAnchorElement>, url: string) {
  if (!url.startsWith('data:')) return;
  event.preventDefault();

  const blobUrl = dataUrlToBlobUrl(url);
  if (!blobUrl) return;

  window.open(blobUrl, '_blank', 'noopener,noreferrer');
  window.setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
}

/**
 * Read-only attachments rendered inside a message (and reused for the model's
 * "rendered output" preview). Wire message data into this once messages carry
 * attachments.
 */
const MessageAttachments: React.FC<{ attachments?: MessageAttachment[] }> = ({ attachments }) => {
  if (!attachments || attachments.length === 0) return null;

  return (
    <div className="mb-2 flex flex-wrap gap-2">
      {attachments.map((attachment, index) => {
        const imageUrl = attachment.display_url ?? attachment.url;
        const key = `${imageUrl ?? attachment.name ?? 'attachment'}-${index}`;
        return (
          imageUrl ? (
            <a
              key={key}
              href={imageUrl}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(event) => openAttachmentUrl(event, imageUrl)}
              className="block overflow-hidden rounded-lg border border-app-border transition-colors hover:border-brand/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
            >
              <img src={imageUrl} alt={attachment.name ?? ''} className="max-h-48 max-w-[12rem] object-cover" />
            </a>
          ) : (
            <div key={key} className="rounded-lg border border-app-border bg-app-surface px-3 py-2 text-xs text-app-muted">
              {attachment.name ?? 'Image attachment'}
            </div>
          )
        );
      })}
    </div>
  );
};

export default MessageAttachments;