File Drop Zone

// File Drop Zone — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-03.tsx, export FileDropZone.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.
// 3 helpers the demo imports are inlined above it, verbatim.

import { useEffect, useRef, useState } from "react";

export interface SceneMotion {
  /** True when the reader asked the system for less motion. */
  reduced: boolean;
  /** A duration in milliseconds, collapsed to 0 when reduced. */
  ms: (value: number) => number;
  /** A repeat count, collapsed to 1 when reduced — an entrance plays once. */
  times: (value: number) => number;
}

export function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState<boolean>(() =>
    typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const on = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

export function useSceneMotion(): SceneMotion {
  const reduced = useReducedMotion();
  return {
    reduced,
    ms: (value: number) => (reduced ? 0 : value),
    times: (value: number) => (reduced ? 1 : value),
  };
}

export function FileDropZone() {
  const [phase, setPhase] = useState<"idle" | "over" | "busy" | "done">("idle");
  const [file, setFile] = useState<{ name: string; size: string } | null>(null);
  const [pct, setPct] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const started = useRef(false);
  // #26 — the upload progress bar advances on a 90ms interval. Reduced: the
  // bar goes to done in one step, because the crawl is the animation.
  const { reduced } = useSceneMotion();
  useEffect(() => {
    // Reduced motion never reaches "busy": `accept` decides that, so this effect
    // only ever runs for the animated path.
    if (phase !== "busy" || reduced) return;
    started.current = true;
    const t = setInterval(() => {
      setPct((p) => {
        const n = p + 7 + Math.round(Math.random() * 6);
        if (n >= 100) {
          clearInterval(t);
          setTimeout(() => setPhase("done"), 250);
          return 100;
        }
        return n;
      });
    }, 90);
    return () => clearInterval(t);
  }, [phase, reduced]);
  const accept = (f?: File | null) => {
    const name = f?.name ?? "motif-build-spec.json";
    const size = f ? `${(f.size / 1024 / 1024).toFixed(1)} MB` : "1.2 MB";
    setFile({ name, size });
    setPct(0);
    // #26 — the crawl is the animation, so under reduced motion the upload is
    // simply complete: decided here, where the work starts, rather than by an
    // effect correcting the state a frame later.
    setPhase(reduced ? "done" : "busy");
    if (reduced) setPct(100);
  };
  const reset = () => { setPhase("idle"); setFile(null); setPct(0); started.current = false; };
  return (
    <div className="flex h-full w-full flex-col items-center justify-center bg-[radial-gradient(60%_90%_at_50%_0%,rgba(52,211,153,0.12),transparent_60%),#08090f] px-6">
      <div className="w-full max-w-sm">
        <input ref={inputRef} type="file" className="hidden" aria-hidden tabIndex={-1} onChange={(e) => accept(e.target.files?.[0])} />
        <div
          role="button"
          tabIndex={0}
          aria-label="Upload a build spec"
          onDragOver={(e) => { e.preventDefault(); if (phase === "idle") setPhase("over"); }}
          onDragLeave={() => phase === "over" && setPhase("idle")}
          onDrop={(e) => { e.preventDefault(); accept(e.dataTransfer?.files?.[0]); }}
          onClick={() => phase === "idle" && inputRef.current?.click()}
          onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && phase === "idle") inputRef.current?.click(); }}
          className={`flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-6 py-9 text-center outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-mint transition-all duration-200 ${
            phase === "over"
              ? "border-mint/70 bg-mint/8 scale-[1.01]"
              : phase === "done"
                ? "border-mint/40 bg-mint/5"
                : "border-white/15 bg-white/3 hover:border-mint/40 hover:bg-white/5"
          }`}
        >
          {phase !== "done" ? (
            <>
              <span className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/12 bg-white/6 text-xl text-mint">⇪</span>
              <span className="text-sm font-bold">{phase === "over" ? "Drop it — we have it" : "Drag a build spec here"}</span>
              <span className="text-[11px] text-ink-faint">or <span className="font-semibold text-mint">browse files</span> · anything under 5 MB</span>
            </>
          ) : (
            <>
              <span className="flex h-11 w-11 items-center justify-center rounded-full bg-mint/15 text-xl text-mint">✓</span>
              <span className="text-sm font-bold text-mint">{file?.name}</span>
              <span className="text-[11px] text-ink-faint">{file?.size} · uploaded clean</span>
            </>
          )}
        </div>
        {phase === "busy" && (
          <div className="mt-3 rounded-xl border border-white/8 bg-black/25 p-3" style={{ animation: "mf-growin .15s ease-out both" }}>
            <div className="flex items-center justify-between text-[11px]">
              <span className="truncate font-semibold text-ink-dim">{file?.name}</span>
              <span className="font-mono text-mint">{pct}%</span>
            </div>
            <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-white/8">
              <div className="h-full rounded-full bg-gradient-to-r from-mint to-cyan-300 transition-[width] duration-100" style={{ width: `${pct}%` }} />
            </div>
            <p className="mt-1.5 text-[10px] text-ink-faint">auditing a11y + size before it lands in your stack…</p>
          </div>
        )}
        {phase === "done" && (
          <button type="button" onClick={reset} className="btn btn-ghost mt-3 !w-full !py-2 text-xs">
            ↺ Upload another
          </button>
        )}
      </div>
    </div>
  );
}