"use client";

/**
 * The row of files staged in the composer before a message is sent.
 *
 * Each chip shows its own upload state, because one failure among several
 * shouldn't discard the rest — the user removes the failed one and sends.
 */

import { AlertCircle, FileText, Loader2, X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { UploadedAttachment } from "@/lib/chat";

export type StagedAttachment = {
  /** Client-side id; the upload has no server identity until it is sent. */
  id: string;
  file: File;
  /** Object URL for an image thumbnail, revoked when the chip is removed. */
  previewUrl?: string;
  status: "uploading" | "ready" | "failed";
  uploaded?: UploadedAttachment;
};

export function ComposerAttachments({
  items,
  onRemove,
}: {
  items: StagedAttachment[];
  onRemove: (id: string) => void;
}) {
  if (items.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-2 px-4 pt-2">
      {items.map((item) => (
        <div
          key={item.id}
          className={cn(
            "relative flex items-center gap-2 rounded-lg border border-border bg-muted/40 p-1.5",
            item.status === "failed" && "border-destructive/60",
          )}
        >
          {item.previewUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={item.previewUrl}
              alt=""
              className="size-10 rounded object-cover"
            />
          ) : (
            <span className="inline-flex size-10 items-center justify-center rounded bg-background text-muted-foreground">
              <FileText className="size-4" />
            </span>
          )}

          <span className="max-w-32 truncate text-xs text-foreground">
            {item.file.name}
          </span>

          {item.status === "uploading" && (
            <Loader2
              className="size-3.5 shrink-0 animate-spin text-muted-foreground"
              aria-label="Uploading"
            />
          )}
          {item.status === "failed" && (
            <AlertCircle
              className="size-3.5 shrink-0 text-destructive"
              aria-label="Upload failed"
            />
          )}

          <button
            type="button"
            onClick={() => onRemove(item.id)}
            aria-label={`Remove ${item.file.name}`}
            className="ml-1 rounded-md p-1 text-muted-foreground hover:text-foreground"
          >
            <X className="size-3.5" />
          </button>
        </div>
      ))}
    </div>
  );
}