'use client';

import { FileText, X } from 'lucide-react';

import { formatBytes } from './MessageAttachments';
import type { PendingAttachment } from './useAttachmentDraft';

/**
 * The staged-files strip above the composer. Shows what will be sent and lets
 * the agent drop any of it before hitting send.
 */
export function AttachmentDraftBar({
  attachments,
  onRemove,
}: {
  attachments: PendingAttachment[];
  onRemove: (id: string) => void;
}) {
  if (attachments.length === 0) return null;

  return (
    <div className="mb-2 flex flex-wrap gap-2">
      {attachments.map((a) => (
        <div
          key={a.id}
          className="relative flex items-center gap-1.5 rounded-lg border border-border bg-background p-1 pr-4"
        >
          {a.previewUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={a.previewUrl}
              alt={a.file.name}
              className="h-9 w-9 shrink-0 rounded object-cover"
            />
          ) : (
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
              <FileText size={16} />
            </span>
          )}
          <span className="min-w-0 max-w-[120px]">
            <span className="block truncate text-xs font-semibold text-foreground">
              {a.file.name}
            </span>
            <span className="block text-[10px] text-muted-foreground">
              {formatBytes(a.file.size)}
            </span>
          </span>
          <button
            onClick={() => onRemove(a.id)}
            aria-label={`Remove ${a.file.name}`}
            className="absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-gray-600 text-white transition hover:bg-gray-700"
          >
            <X size={10} />
          </button>
        </div>
      ))}
    </div>
  );
}