File Upload

"use client";

import { useId, useRef, useState, type DragEvent } from "react";
import { FileText, UploadCloud, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FileUploadProps {
  label?: string;
  accept?: string;
  /** Max size per file in MB. */
  maxSizeMb?: number;
  onFilesChange?: (files: File[]) => void;
  className?: string;
}

interface Item {
  name: string;
  size: number;
  error?: string;
}

/** Receipt/document dropzone: dashed bordered area with upload icon, click-or-drag, file list with size, per-file size validation errors and remove buttons. */
export function FileUpload({ label = "Attach receipts", accept = ".pdf,.png,.jpg,.csv", maxSizeMb = 10, onFilesChange, className }: FileUploadProps) {
  const id = useId();
  const input = useRef<HTMLInputElement>(null);
  const [over, setOver] = useState(false);
  const [items, setItems] = useState<Item[]>([
    { name: "aws-invoice-sept.pdf", size: 184_000 },
    { name: "team-offsite-hotel.jpg", size: 14_600_000, error: `Exceeds ${10} MB` },
  ]);
  const add = (files: FileList | null) => {
    if (!files) return;
    const list = Array.from(files);
    setItems((prev) => [
      ...prev,
      ...list.map((f) => ({ name: f.name, size: f.size, error: f.size > maxSizeMb * 1e6 ? `Exceeds ${maxSizeMb} MB` : undefined })),
    ]);
    onFilesChange?.(list.filter((f) => f.size <= maxSizeMb * 1e6));
  };
  const drop = (e: DragEvent) => {
    e.preventDefault();
    setOver(false);
    add(e.dataTransfer.files);
  };
  const kb = (n: number) => (n > 1e6 ? `${(n / 1e6).toFixed(1)} MB` : `${Math.round(n / 1e3)} KB`);
  return (
    <div className={cn("grid max-w-md gap-2", className)}>
      <span id={`${id}-l`} className="text-sm font-medium">
        {label}
      </span>
      <div
        onDragOver={(e) => {
          e.preventDefault();
          setOver(true);
        }}
        onDragLeave={() => setOver(false)}
        onDrop={drop}
        className={cn(
          "da-transition grid place-items-center rounded-da-lg border-2 border-dashed px-6 py-8 text-center",
          over ? "border-da-primary bg-da-primary/5" : "border-da-border-strong bg-da-surface-2",
        )}
      >
        <UploadCloud aria-hidden className="size-8 text-da-muted-fg" />
        <p className="mt-3 text-sm">
          <button
            type="button"
            aria-describedby={`${id}-l ${id}-h`}
            onClick={() => input.current?.click()}
            className="da-focus rounded-da-sm font-semibold text-da-primary hover:underline"
          >
            Click to upload
          </button>{" "}
          or drag and drop
        </p>
        <p id={`${id}-h`} className="mt-1 text-xs text-da-muted-fg">
          PDF, PNG, JPG or CSV · up to {maxSizeMb} MB
        </p>
        <input ref={input} type="file" multiple accept={accept} className="sr-only" tabIndex={-1} aria-hidden onChange={(e) => add(e.target.files)} />
      </div>
      {items.length > 0 && (
        <ul className="grid gap-2" aria-label="Selected files">
          {items.map((f, i) => (
            <li
              key={`${f.name}-${i}`}
              className={cn("da-stroke flex items-center gap-3 rounded-da-md bg-da-surface px-3 py-2 text-sm", f.error && "border-da-danger/50")}
            >
              <FileText aria-hidden className={cn("size-5 shrink-0", f.error ? "text-da-danger" : "text-da-primary")} />
              <span className="min-w-0 flex-1">
                <span className="block truncate font-medium">{f.name}</span>
                <span className={cn("block text-xs", f.error ? "text-da-danger" : "text-da-muted-fg")}>{f.error ?? kb(f.size)}</span>
              </span>
              <button
                type="button"
                aria-label={`Remove ${f.name}`}
                onClick={() => setItems((p) => p.filter((_, j) => j !== i))}
                className="da-focus grid size-7 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
              >
                <X aria-hidden className="size-4" />
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default FileUpload;