Upload list

"use client";

import { useEffect, useRef, useState } from "react";
import type { ComponentProps, ReactNode } from "react";
import { Button } from "./button";
import { Truncate } from "./truncate";
import "./upload-list.css";

export type UploadState = "queued" | "uploading" | "done" | "failed";

export type UploadItem = {
  /** Stable key for the row. Two files may share a name; they never share an id. */
  id: string;
  name: string;
  /** Size in bytes. */
  size: number;
  state: UploadState;
  /** 0 to 1 while uploading. Leave out for a bar that only says it is under way. */
  progress?: number;
  /** Why it failed, shown under the name. */
  error?: string;
};

export type UploadListProps = Omit<ComponentProps<"div">, "children"> & {
  /** Heading above the list, and its accessible name. */
  label?: ReactNode;
  files: UploadItem[];
  /** Adds a Retry button to failed rows. */
  onRetry?: (id: string) => void;
  /** Adds a remove button to every row; on a queued or uploading row it reads as Cancel. */
  onRemove?: (id: string) => void;
};

function formatSize(bytes: number): string {
  if (bytes < 1000) return `${bytes} B`;
  const units = ["KB", "MB", "GB", "TB"];
  let n = bytes / 1000;
  let unit = 0;
  while (n >= 1000 && unit < units.length - 1) {
    n /= 1000;
    unit += 1;
  }
  return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[unit]}`;
}

const percent = (value: number) => `${Math.round(Math.max(0, Math.min(1, value)) * 100)}%`;

function StateIcon({ state }: { state: UploadState }) {
  const common = {
    className: "eq-upload-list-icon",
    viewBox: "0 0 16 16",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.5,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    "aria-hidden": true,
  };
  if (state === "done") {
    return (
      <svg {...common}>
        <circle cx="8" cy="8" r="6" />
        <path d="m5.5 8.25 1.75 1.75 3.25-3.75" pathLength="1" className="eq-upload-list-tick" />
      </svg>
    );
  }
  if (state === "failed") {
    return (
      <svg {...common}>
        <circle cx="8" cy="8" r="6" />
        <path d="M8 5v3.25M8 10.75v.01" />
      </svg>
    );
  }
  return (
    <svg {...common}>
      <path d="M9.25 1.75H4.5c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h7c.69 0 1.25-.56 1.25-1.25V5.25l-3.5-3.5Z" />
      <path d="M9.25 1.75v3.5h3.5" />
    </svg>
  );
}

export function UploadList({ label = "Uploads", files, onRetry, onRemove, className, ...rest }: UploadListProps) {
  const [announcement, setAnnouncement] = useState("");
  const seen = useRef<Map<string, UploadState> | null>(null);
  const list = useRef<HTMLUListElement>(null);
  /** After a remove, where focus goes: the neighbouring row's id, or "" for the list itself. */
  const refocus = useRef<string | null>(null);

  useEffect(() => {
    const target = refocus.current;
    if (target === null || !list.current) return;
    refocus.current = null;
    const row = target ? list.current.querySelector<HTMLElement>(`[data-id="${CSS.escape(target)}"] .eq-upload-list-remove`) : null;
    (row ?? list.current).focus();
  }, [files]);

  function remove(id: string) {
    const index = files.findIndex((f) => f.id === id);
    const neighbour = files[index + 1] ?? files[index - 1];
    refocus.current = neighbour ? neighbour.id : "";
    onRemove?.(id);
  }

  // Only finishes and failures are announced; progress ticks would drown everything else out.
  useEffect(() => {
    const previous = seen.current;
    const next = new Map(files.map((f) => [f.id, f.state]));
    seen.current = next;
    if (!previous) return;
    const said: string[] = [];
    for (const file of files) {
      const was = previous.get(file.id);
      if (was === file.state) continue;
      if (file.state === "done") said.push(`${file.name} uploaded.`);
      else if (file.state === "failed") said.push(`${file.name} failed${file.error ? `: ${file.error}` : ""}.`);
    }
    if (said.length) setAnnouncement(said.join(" "));
  }, [files]);

  const done = files.filter((f) => f.state === "done").length;
  const failed = files.filter((f) => f.state === "failed").length;

  return (
    <div {...rest} className={["eq-upload-list", className].filter(Boolean).join(" ")}>
      {label != null && files.length > 0 && (
        <div className="eq-upload-list-header">
          <span className="eq-upload-list-label">{label}</span>
          <span className="eq-upload-list-count">
            {done} of {files.length} done{failed > 0 && `, ${failed} failed`}
          </span>
        </div>
      )}
      <ul ref={list} tabIndex={-1} className="eq-upload-list-list" aria-label={typeof label === "string" ? label : "Uploads"}>
        {files.map((file) => {
          const status =
            file.state === "queued"
              ? "Queued"
              : file.state === "uploading"
                ? file.progress === undefined
                  ? "Uploading"
                  : percent(file.progress)
                : file.state === "done"
                  ? "Done"
                  : "Failed";
          const active = file.state === "queued" || file.state === "uploading";
          return (
            <li key={file.id} className="eq-upload-list-item" data-id={file.id} data-state={file.state}>
              <StateIcon state={file.state} />
              <span className="eq-upload-list-main">
                <Truncate className="eq-upload-list-name" keep={8}>
                  {file.name}
                </Truncate>
                <span className="eq-upload-list-meta">
                  <span className="eq-upload-list-size">{formatSize(file.size)}</span>
                  <span className="eq-upload-list-status">{status}</span>
                </span>
                {file.state === "failed" && file.error && <span className="eq-upload-list-error">{file.error}</span>}
              </span>
              {file.state === "failed" && onRetry && (
                <Button variant="ghost" size="xs" className="eq-upload-list-retry" onClick={() => onRetry(file.id)} aria-label={`Retry ${file.name}`}>
                  Retry
                </Button>
              )}
              {onRemove && (
                <Button
                  variant="quiet"
                  size="xs"
                  square
                  className="eq-upload-list-remove"
                  aria-label={active ? `Cancel upload of ${file.name}` : `Remove ${file.name}`}
                  onClick={() => remove(file.id)}
                  lead={
                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
                      <path d="m4.5 4.5 7 7m0-7-7 7" />
                    </svg>
                  }
                />
              )}
              {file.state === "uploading" && (
                <progress
                  className="eq-upload-list-progress"
                  max={1}
                  value={file.progress === undefined ? undefined : Math.max(0, Math.min(1, file.progress))}
                  aria-label={`Uploading ${file.name}`}
                  aria-valuetext={file.progress === undefined ? undefined : percent(file.progress)}
                />
              )}
            </li>
          );
        })}
      </ul>
      <p className="eq-upload-list-announce" role="status">
        {announcement}
      </p>
    </div>
  );
}