import React from 'react';
import { AlertCircle, X } from 'lucide-react';
import { useComposerAttachments, useRemoveComposerAttachment } from '../../contexts/ComposerContext';

/** Thumbnail tray of pending composer attachments with upload/error states. */
const ComposerAttachments: React.FC = () => {
  const attachments = useComposerAttachments();
  const remove = useRemoveComposerAttachment();

  if (attachments.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-2 pb-2">
      {attachments.map((att) => (
        <div
          key={att.id}
          className="group/att relative h-16 w-16 overflow-hidden rounded-lg border border-app-border bg-app-surface-muted"
        >
          <img src={att.previewUrl} alt={att.name} className="h-full w-full object-cover" />
          {att.status === 'uploading' && (
            <div className="absolute inset-0 flex items-center justify-center bg-app-surface/60">
              <span className="h-4 w-4 animate-spin rounded-full border-2 border-app-border border-t-brand" />
            </div>
          )}
          {att.status === 'error' && (
            <div className="absolute inset-0 flex items-center justify-center bg-danger/15 text-danger" title="Upload failed">
              <AlertCircle size={18} />
            </div>
          )}
          <button
            type="button"
            onClick={() => remove(att.id)}
            aria-label={`Remove ${att.name}`}
            className="absolute right-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-app-text/70 text-app-surface opacity-0 transition-opacity hover:bg-app-text group-hover/att:opacity-100 focus:opacity-100 focus:outline-none"
          >
            <X size={12} />
          </button>
        </div>
      ))}
    </div>
  );
};

export default ComposerAttachments;