Gradient File Upload

"use client";

import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type ButtonHTMLAttributes,
  type ChangeEvent,
  type DragEvent,
  type ReactNode,
} from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  Archive,
  File,
  FileText,
  FileXls,
  Image as ImageIcon,
  Pause,
  UploadSimple,
  X,
} from "@phosphor-icons/react";
import { cn } from "@/lib/cn";

type UploadPhase = "idle" | "dragging" | "uploading" | "success" | "error";

const DEFAULT_ACCEPT = "image/*,.pdf,.csv,.zip";
const DEFAULT_MAX_SIZE_MB = 24;
const DEFAULT_UPLOAD_DURATION_MS = 1900;
const STATUS_MESSAGES: Record<"success" | "error", string> = {
  success: "Upload complete. Your file is ready to process.",
  error: "Upload failed. Please check the file and try again.",
};

function formatBytes(bytes: number) {
  if (bytes === 0) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
  const value = bytes / 1024 ** exponent;
  return `${value.toFixed(value >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
}

function validateFileSize(file: File, maxSizeMb: number) {
  const maxBytes = maxSizeMb * 1024 * 1024;
  return file.size <= maxBytes ? null : `File is larger than ${maxSizeMb} MB.`;
}

function wait(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function getFileIconInfo(file: File | null) {
  if (!file) return { extension: "FILE", icon: File };
  const extension = file.name.split(".").pop()?.slice(0, 4).toUpperCase() || "FILE";
  const type = file.type;
  if (type.startsWith("image/")) return { extension, icon: ImageIcon };
  if (/\b(csv|sheet|excel|spreadsheet)\b/i.test(type) || /xlsx?|csv/i.test(extension)) {
    return { extension, icon: FileXls };
  }
  if (/pdf|text|document/i.test(type) || /pdf|txt|doc/i.test(extension)) {
    return { extension, icon: FileText };
  }
  if (/zip|archive|compressed/i.test(type) || /zip|rar|7z/i.test(extension)) {
    return { extension, icon: Archive };
  }
  return { extension, icon: File };
}

/* ═══════════════════════════════════════════════
   Animated beam border — glowing conic-gradient ring
   ═══════════════════════════════════════════════ */

function AnimatedBeamBorder({ className, children }: { className?: string; children: ReactNode }) {
  const rawId = useId().replace(/:/g, "-");

  return (
    <>
      <style>{`
@property --beam-angle-${rawId} { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
@property --beam-opacity-${rawId} { syntax: "<number>"; initial-value: 0; inherits: true; }
[data-beam="${rawId}"] { position: relative; border-radius: 20px; overflow: hidden; }
[data-beam="${rawId}"][data-active] {
  animation: beam-spin-${rawId} 2.4s linear infinite, beam-fade-in-${rawId} 0.6s ease forwards;
}
[data-beam="${rawId}"][data-active]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 19px;
  padding: 1px;
  clip-path: inset(0 round 20px);
  background: conic-gradient(
        from var(--beam-angle-${rawId}),
        transparent 0%, transparent 54%,
        rgba(255, 255, 255, 0.1) 57%,
        rgba(255, 255, 255, 0.3) 60%,
        rgba(255, 255, 255, 0.6) 63%,
        rgba(255, 255, 255, 0.75) 66%,
        rgba(255, 255, 255, 0.6) 69%,
        rgba(255, 255, 255, 0.3) 72%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 78%, transparent 100%
      ),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(100, 80, 220), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(60, 120, 255), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(80, 100, 200), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(50, 140, 220), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(120, 80, 255), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(70, 130, 255), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(140, 100, 240), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(90, 110, 230), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(130, 70, 255), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle-${rawId}),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(
      from var(--beam-angle-${rawId}),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-${rawId}) * 0.26);
  animation: beam-hue-shift-${rawId} 12s ease-in-out infinite;
}
[data-beam="${rawId}"][data-active]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(100, 80, 220, 0.45), transparent),
    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(60, 120, 255, 0.45), transparent),
    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(80, 100, 200, 0.45), transparent),
    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(50, 140, 220, 0.45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(120, 80, 255, 0.45), transparent),
    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(70, 130, 255, 0.45), transparent),
    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(140, 100, 240, 0.45), transparent),
    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(90, 110, 230, 0.45), transparent),
    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(130, 70, 255, 0.45), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.27);
  -webkit-mask-image:
    conic-gradient(
      from var(--beam-angle-${rawId}),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(
      from var(--beam-angle-${rawId}),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-${rawId}) * 0.42);
  clip-path: inset(0 round 20px);
  animation: beam-hue-shift-${rawId} 12s ease-in-out infinite;
}
[data-beam="${rawId}"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 19px;
  clip-path: inset(0 round 20px);
  background: conic-gradient(
        from var(--beam-angle-${rawId}),
        transparent 0%, transparent 58%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.08) 65%,
        rgba(255, 255, 255, 0.2) 67%,
        rgba(255, 255, 255, 0.45) 69%,
        rgba(255, 255, 255, 0.85) 70%,
        rgba(255, 255, 255, 0.85) 70.5%,
        rgba(255, 255, 255, 0.45) 71.5%,
        rgba(255, 255, 255, 0.2) 73%,
        rgba(255, 255, 255, 0.08) 75%,
        rgba(255, 255, 255, 0.03) 78%,
        transparent 82%
      );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
  filter: blur(8px) brightness(1.35) saturate(1.25);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}
[data-beam="${rawId}"][data-active] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-${rawId}) * 0.24);
}
@keyframes beam-spin-${rawId} { to { --beam-angle-${rawId}: 360deg; } }
@keyframes beam-fade-in-${rawId} { to { --beam-opacity-${rawId}: 1; } }
@keyframes beam-hue-shift-${rawId} {
  0% { filter: hue-rotate(-26deg) brightness(1.35) saturate(1.25); }
  50% { filter: hue-rotate(26deg) brightness(1.35) saturate(1.25); }
  100% { filter: hue-rotate(-26deg) brightness(1.35) saturate(1.25); }
}
      `}</style>
      <div data-beam={rawId} data-active="" className={className}>
        {children}
        <div data-beam-bloom="" />
      </div>
    </>
  );
}

/* ═══════════════════════════════════════════════
   Progress bar
   ═══════════════════════════════════════════════ */

function UploadProgressBar({
  className,
  progress,
  state,
}: {
  className?: string;
  progress: number;
  state: UploadPhase;
}) {
  return (
    <div
      className={cn("pointer-events-none", className, {
        "border border-emerald-600/50 rounded-lg": state === "success",
        "border border-red-600/50 rounded-lg": state === "error",
        "border border-indigo-600/50 rounded-lg": state === "uploading",
        "border border-white/15 rounded-lg": state === "idle",
      })}
    >
      <div className="h-2 overflow-hidden rounded-full bg-white/18 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]">
        <motion.div
          className={cn(
            "h-full rounded-full shadow-[0_0_18px_rgba(14,165,233,0.62)]",
            state === "success"
              ? "bg-emerald-300 shadow-[0_0_18px_rgba(110,231,183,0.85)]"
              : state === "error"
                ? "bg-red-300 shadow-[0_0_18px_rgba(252,165,165,0.85)]"
                : "bg-[linear-gradient(90deg,#0ea5e9,#2dd4bf_45%,#fde047_82%,#f8fafc)]"
          )}
          style={{ backgroundSize: state === "uploading" ? "220% 100%" : "100% 100%" }}
          initial={{ width: "0%" }}
          animate={{
            width: `${progress}%`,
            backgroundPosition: state === "uploading" ? ["0% 50%", "100% 50%"] : "100% 50%",
          }}
          transition={{
            width: { duration: 0.28, ease: "easeOut" },
            backgroundPosition: {
              duration: 1.25,
              ease: "easeInOut",
              repeat: state === "uploading" ? Infinity : 0,
              repeatType: "mirror",
            },
          }}
        />
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════
   Icon button
   ═══════════════════════════════════════════════ */

function UploadIconButton({
  variant,
  className,
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { variant: "default" | "secondary" | "ghost" }) {
  return (
    <button
      type="button"
      className={cn(
        "inline-flex size-9 shrink-0 items-center justify-center rounded-full transition-[color,background-color,scale] outline-none focus-visible:ring-2 focus-visible:ring-neutral-900/40 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
        variant === "default" && "bg-primary text-primary-foreground shadow-md hover:bg-primary/80",
        variant === "secondary" && "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        variant === "ghost" && "hover:bg-muted hover:text-foreground",
        className
      )}
      {...props}
    />
  );
}

/* ═══════════════════════════════════════════════
   Upload state hook
   ═══════════════════════════════════════════════ */

function useFileUpload({
  maxSizeMb = DEFAULT_MAX_SIZE_MB,
  uploadDurationMs = DEFAULT_UPLOAD_DURATION_MS,
}: { maxSizeMb?: number; uploadDurationMs?: number } = {}) {
  const [file, setFile] = useState<File | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [phase, setPhase] = useState<UploadPhase>("idle");
  const [progress, setProgress] = useState(0);
  const attemptRef = useRef(0);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const clearProgressTimer = useCallback(() => {
    if (intervalRef.current !== null) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  }, []);

  useEffect(() => clearProgressTimer, [clearProgressTimer]);

  const runUpload = useCallback(
    async (nextFile: File) => {
      const attemptId = attemptRef.current + 1;
      attemptRef.current = attemptId;
      const isCurrent = () => attemptRef.current === attemptId;

      setFile(nextFile);
      setMessage(null);
      setProgress(8);
      setPhase("uploading");
      clearProgressTimer();
      intervalRef.current = setInterval(() => {
        if (!isCurrent()) {
          clearProgressTimer();
          return;
        }
        setProgress((p) => Math.min(p + 6 + Math.random() * 9, 92));
      }, 180);

      const finish = (result: { status: "success" | "error"; message?: string }) => {
        if (!isCurrent()) return;
        clearProgressTimer();
        setProgress(100);
        setPhase(result.status);
        setMessage(result.message ?? STATUS_MESSAGES[result.status]);
      };

      const sizeError = validateFileSize(nextFile, maxSizeMb);
      if (sizeError) {
        await wait(650);
        finish({ status: "error", message: sizeError });
        return;
      }
      await wait(uploadDurationMs);
      finish({ status: "success" });
    },
    [clearProgressTimer, maxSizeMb, uploadDurationMs]
  );

  const selectFiles = useCallback(
    (files: FileList) => {
      const [nextFile] = Array.from(files);
      if (!nextFile) {
        setPhase("idle");
        return;
      }
      runUpload(nextFile);
    },
    [runUpload]
  );

  const setDragging = useCallback((isDragging: boolean) => {
    setPhase((p) => (p === "uploading" ? p : isDragging ? "dragging" : "idle"));
  }, []);

  const reset = useCallback(() => {
    attemptRef.current += 1;
    clearProgressTimer();
    setFile(null);
    setMessage(null);
    setProgress(0);
    setPhase("idle");
  }, [clearProgressTimer]);

  return {
    file,
    message,
    phase,
    progress,
    isBusy: phase === "uploading",
    isDragging: phase === "dragging",
    resultState: phase === "success" || phase === "error" ? phase : null,
    selectFiles,
    setDragging,
    reset,
  };
}

/* ═══════════════════════════════════════════════
   Upload card
   ═══════════════════════════════════════════════ */

function FileUploadCard({
  accept,
  file,
  isBusy,
  isDragging,
  maxSizeMb,
  message,
  onRemove,
  onSelectFiles,
  onSetDragging,
  phase,
  progress,
  resultState,
}: {
  accept: string;
  file: File | null;
  isBusy: boolean;
  isDragging: boolean;
  maxSizeMb: number;
  message: string | null;
  onRemove: () => void;
  onSelectFiles: (files: FileList) => void;
  onSetDragging: (isDragging: boolean) => void;
  phase: UploadPhase;
  progress: number;
  resultState: "success" | "error" | null;
}) {
  const inputRef = useRef<HTMLInputElement>(null);
  const openPicker = () => inputRef.current?.click();
  const roundedProgress = Math.round(progress);
  const uploadedBytes = file ? Math.round((file.size * progress) / 100) : 0;
  const { icon: FileIcon, extension } = useMemo(() => getFileIconInfo(file), [file]);
  const hasFile = !!file;

  const statusLabel =
    phase === "success"
      ? "Uploaded"
      : phase === "error"
        ? "Error"
        : phase === "uploading"
          ? `Uploading ${roundedProgress}%`
          : phase === "dragging"
            ? "Release to upload"
            : "Ready";

  const sizeLabel = file
    ? phase === "uploading"
      ? `${formatBytes(uploadedBytes)} of ${formatBytes(file.size)}`
      : formatBytes(file.size)
    : `Up to ${maxSizeMb} MB`;

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    onSetDragging(false);
    if (!isBusy) onSelectFiles(event.dataTransfer.files);
  };

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) onSelectFiles(event.target.files);
  };

  return (
    <AnimatedBeamBorder className="mx-auto block w-full max-w-lg border border-neutral-200">
      <motion.div
        aria-busy={isBusy}
        aria-live="polite"
        role="button"
        tabIndex={isBusy ? -1 : 0}
        className={cn(
          "group relative flex items-center justify-between w-full overflow-hidden px-3 pt-3 text-black",
          "transition-[border-color,box-shadow,transform,background-color] duration-300",
          "focus-visible:ring-2 focus-visible:ring-white/45"
        )}
        onClick={() => !isBusy && openPicker()}
        onDragEnter={(event) => {
          event.preventDefault();
          if (!isBusy) onSetDragging(true);
        }}
        onDragOver={(event) => event.preventDefault()}
        onDragLeave={(event) => {
          event.preventDefault();
          if (!event.currentTarget.contains(event.relatedTarget as Node)) onSetDragging(false);
        }}
        onDrop={handleDrop}
        onKeyDown={(event) => {
          // Only the card itself opens the picker — let Enter/Space bubbling
          // from nested controls (Remove/Choose) trigger their own click.
          if (event.target !== event.currentTarget) return;
          if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            if (!isBusy) openPicker();
          }
        }}
        animate={{ paddingBottom: hasFile ? "2.5rem" : "0.75rem" }}
        transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
      >
        <AnimatePresence initial={false}>
          {isDragging && !file && !isBusy ? (
            <motion.div
              key="drag-gradient"
              aria-hidden="true"
              className="pointer-events-none absolute inset-0"
              style={{
                background:
                  "radial-gradient(circle at 16% 34%, rgba(14, 165, 233, 0.24), transparent 34%), radial-gradient(circle at 78% 60%, rgba(20, 184, 166, 0.22), transparent 32%), linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(59, 130, 246, 0.14) 45%, rgba(45, 212, 191, 0.2))",
                backgroundSize: "150% 150%",
              }}
              initial={{ opacity: 0, scale: 0.98, backgroundPosition: "0% 50%" }}
              animate={{ opacity: 1, scale: 1, backgroundPosition: "100% 50%" }}
              exit={{ opacity: 0, scale: 0.98, backgroundPosition: "100% 50%" }}
              transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
            />
          ) : null}
        </AnimatePresence>

        <motion.div
          aria-hidden="true"
          className={cn(
            "absolute inset-y-0 left-0",
            "bg-[linear-gradient(90deg,rgba(14,165,233,0.38),rgba(45,212,191,0.32)_42%,rgba(250,204,21,0.18)_72%,rgba(255,255,255,0.02))]",
            resultState === "success" &&
              "bg-[linear-gradient(90deg,rgba(16,185,129,0.55),rgba(34,197,94,0.24),rgba(34,197,94,0.04))]",
            resultState === "error" &&
              "bg-[linear-gradient(90deg,rgba(239,68,68,0.55),rgba(248,113,113,0.24),rgba(248,113,113,0.04))]"
          )}
          style={{ backgroundSize: "180% 100%" }}
          initial={false}
          animate={{
            width: file ? `${Math.max(progress, 6)}%` : "0%",
            opacity: file ? 1 : 0,
            backgroundPosition: phase === "uploading" ? ["0% 50%", "100% 50%"] : "100% 50%",
          }}
          transition={{
            width: { duration: 0.35, ease: [0.16, 1, 0.3, 1] },
            opacity: { duration: 0.35, ease: [0.16, 1, 0.3, 1] },
            backgroundPosition: {
              duration: 1.6,
              ease: "easeInOut",
              repeat: phase === "uploading" ? Infinity : 0,
              repeatType: "mirror",
            },
          }}
        />

        <input
          ref={inputRef}
          className="sr-only"
          type="file"
          accept={accept}
          disabled={isBusy}
          tabIndex={-1}
          aria-hidden="true"
          onChange={handleInputChange}
          onClick={(event) => {
            event.currentTarget.value = "";
          }}
        />

        <div className="relative z-10 flex items-start gap-4 w-full">
          <motion.div
            className="relative flex flex-col size-13 shrink-0 items-start justify-between overflow-hidden rounded-lg border border-neutral-200 bg-white p-2 shadow-xs"
            layout
            transition={{ type: "spring", stiffness: 420, damping: 34 }}
          >
            <FileIcon aria-hidden="true" weight="regular" className="size-3.5 shrink-0 text-black" />
            <span className="text-[10px] font-black uppercase tracking-wide text-black/85">
              {extension}
            </span>
          </motion.div>

          <div className="min-w-0 flex-1">
            <AnimatePresence mode="wait" initial={false}>
              <motion.div
                key={file ? file.name : phase}
                initial={{ opacity: 0, y: 6 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -6 }}
                transition={{ duration: 0.18, ease: "easeOut" }}
              >
                <p className="truncate text-sm font-semibold leading-tight mt-1.5">
                  {file?.name ?? "Select a file"}
                </p>
                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs">
                  <span className="font-medium tabular-nums">{message ?? statusLabel}</span>
                  <span aria-hidden="true">·</span>
                  <span className="truncate tabular-nums">{sizeLabel}</span>
                </div>
              </motion.div>
            </AnimatePresence>
          </div>

          <div className="flex shrink-0 items-center gap-2 self-start pt-0.5">
            {isBusy ? (
              <UploadIconButton
                variant="secondary"
                aria-label="Upload in progress"
                disabled
                onClick={(event) => event.stopPropagation()}
              >
                <Pause weight="regular" className="size-4" />
              </UploadIconButton>
            ) : null}
            {(file || resultState) && !isBusy ? (
              <UploadIconButton
                variant="ghost"
                aria-label="Remove file"
                onClick={(event) => {
                  event.stopPropagation();
                  onRemove();
                }}
              >
                <X weight="regular" className="size-4" />
              </UploadIconButton>
            ) : null}
            {!file && !isBusy ? (
              <UploadIconButton
                variant="default"
                aria-label="Choose file"
                onClick={(event) => {
                  event.stopPropagation();
                  openPicker();
                }}
              >
                <UploadSimple weight="regular" className="size-4" />
              </UploadIconButton>
            ) : null}
          </div>
        </div>

        <AnimatePresence initial={false}>
          {hasFile ? (
            <motion.div
              key="upload-progress"
              className="absolute inset-x-3 bottom-4"
              initial={{ opacity: 0, y: 6 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 6 }}
              transition={{ duration: 0.28, ease: [0.16, 1, 0.3, 1] }}
            >
              <UploadProgressBar progress={progress} state={phase} />
            </motion.div>
          ) : null}
        </AnimatePresence>
      </motion.div>
    </AnimatedBeamBorder>
  );
}

/* ═══════════════════════════════════════════════
   Demo
   ═══════════════════════════════════════════════ */

export default function GradientFileUploadDemo() {
  const upload = useFileUpload();

  return (
    <div className="flex h-dvh w-full items-center justify-center p-6">
      <section
        className="w-full max-w-lg"
        aria-labelledby="file-upload-title"
        aria-describedby="file-upload-description"
      >
        <h1 id="file-upload-title" className="sr-only">
          Upload document
        </h1>
        <p id="file-upload-description" className="sr-only">
          A refined upload surface with an animated beam preloader and radial result feedback.
        </p>
        <FileUploadCard
          accept={DEFAULT_ACCEPT}
          file={upload.file}
          isBusy={upload.isBusy}
          isDragging={upload.isDragging}
          maxSizeMb={DEFAULT_MAX_SIZE_MB}
          message={upload.message}
          onRemove={upload.reset}
          onSelectFiles={upload.selectFiles}
          onSetDragging={upload.setDragging}
          phase={upload.phase}
          progress={upload.progress}
          resultState={upload.resultState}
        />
      </section>
    </div>
  );
}