"use client";

/**
 * TASK-0103 — the file block renderer (all kinds + all states).
 *
 * A `file` block references an uploaded file by `properties.fileId`. The
 * block renders from the SERVER-VERIFIED record (`GET /files/:id`):
 *
 *   - kind   = f(mimeType) — the post-scan MIME, never the extension
 *   - URLs   = the fresh signed URLs the API mints per read (15-min contract:
 *              the detail is re-fetched whenever `now + 60 s > expiresAt`)
 *
 * States (spec Requirements §3):
 *   - not READY (UPLOADING/SCANNING) → skeleton + status label
 *     (live upload progress + cancel when this tab started the transfer)
 *   - VIRUS_DETECTED → red "Blocked by virus scan" card, NO download
 *   - FAILED         → error card with the server message + Remove
 *   - READY          → per kind:
 *       image   inline, max-width 100 %, bottom-right resize handle
 *               (50/75/100 % presets + free drag → `properties.widthPercent`),
 *               caption toggle + inline editable text (`properties.caption`)
 *       video   native <video controls> (poster = thumbnail)
 *       audio   native <audio controls> + icon
 *       pdf     sandboxed iframe with the signed preview URL +
 *               "Open in new tab" + Download
 *       doc/other  download card (type icon, name, human size, version count,
 *               Download button, Copy link)
 *
 * A11y (Requirements §7): progress is announced via aria-live="polite" in
 * 25 % steps; cancel is a real <button>; video/audio carry text alternatives
 * (name + duration); the download affordance is a real <button>.
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Download,
  ExternalLink,
  File as FileIcon,
  FileAudio,
  FileText,
  FileVideo,
  GripVertical,
  Link as LinkIcon,
  Loader2,
  MoreHorizontal,
  Music,
  Pencil,
  RefreshCw,
  ShieldAlert,
  ShieldCheck,
  Trash2,
  X,
} from "lucide-react";
import type { Block } from "@/lib/types";
import { blockApi } from "@/lib/api";
import { API_BASE } from "@/lib/constants";
import { filesApi, humanSize, kindForMime, type FileDetail, type FileKind } from "@/lib/files/api";
import { isTerminalStatus, type UploadProgress } from "@/lib/files/upload";
import { useUploadStore } from "@/lib/files/upload-store";
import { toast } from "@/stores/ui-store";
import { usePage } from "@/hooks/use-pages";
import { useFileUploads } from "@/lib/files/use-file-uploads";
import { Dialog, DialogFooter } from "@/components/dialogs/dialog";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import { FilePermissionsDialog } from "@/components/dialogs/file-permissions-dialog";

interface FileBlockProps {
  block: Block;
}

const KIND_ICONS: Record<FileKind, typeof FileIcon> = {
  image: FileText,
  video: FileVideo,
  audio: FileAudio,
  pdf: FileText,
  doc: FileText,
  other: FileIcon,
};

export function FileBlock({ block }: FileBlockProps) {
  const fileId = block.properties.fileId as string | undefined;
  // Pre-Phase-9 block: a direct `src` with no `fileId` (legacy card, so
  // existing content never breaks — AGENTS.md #16).
  if (!fileId && block.properties.src) return <LegacyFileCard block={block} />;
  if (!fileId) {
    // A `file` block with no uploaded file yet — the "Add file" entry point
    // (slash menu "File" inserts an empty file block; the button opens the
    // native file input, multi-select, and uploads to THIS block in place).
    return <FilePickerBlock block={block} />;
  }
  return <LiveFileBlock block={block} fileId={fileId} />;
}

/* ========================================================== add-file */

/** The file-block "Add file" button (upload path c, spec §1). */
function FilePickerBlock({ block }: { block: Block }) {
  const { data: page } = usePage(block.pageId);
  const workspaceId = page?.workspaceId ?? null;
  const { start } = useFileUploads(workspaceId, block.pageId);
  const inputRef = useRef<HTMLInputElement>(null);

  // The FIRST file replaces this block; subsequent files (multi-select) land
  // as sibling blocks after it (the API positions them via the batch insert).
  const onFilesMulti = async (list: FileList | null) => {
    const files = Array.from(list ?? []);
    const first = files[0];
    if (!first) return;
    const rest = files.slice(1);
    // first file → this block, in place; the rest → new blocks after it
    // (each insert appends after the current last sibling of the parent).
    await start(first, { parentId: block.parentId, position: null, updateBlockId: block.id });
    for (const f of rest) {
      await start(f, { parentId: block.parentId, position: null });
    }
  };

  return (
    <div className="flex items-center gap-3 rounded-md border border-dashed border-border p-3">
      <span className="flex size-9 shrink-0 items-center justify-center rounded bg-muted">
        <FileIcon className="size-4 text-muted-foreground" aria-hidden />
      </span>
      <span className="min-w-0 flex-1 text-sm text-muted-foreground">No file yet</span>
      <button
        type="button"
        onClick={() => inputRef.current?.click()}
        className="shrink-0 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent"
      >
        Add file
      </button>
      <input
        ref={inputRef}
        data-testid="file-input"
        type="file"
        className="sr-only"
        aria-label="Choose a file to attach"
        multiple
        onChange={(e) => void onFilesMulti(e.target.files)}
      />
    </div>
  );
}

/* ================================================================ live */

function LiveFileBlock({ block, fileId }: { block: Block; fileId: string }) {
  // The fresh signed URLs live on GET /files/:id. Refetch cadence:
  //   - non-terminal status: every 2 s (the pipeline is working)
  //   - READY but a signed URL is within 60 s of expiry: every 5 s (re-mint)
  //   - otherwise: stale (react-query refetches on focus/mount)
  const query = useQuery({
    queryKey: ["files", fileId],
    queryFn: () => filesApi.get(fileId),
    refetchInterval: (query) => {
      const data = query.state.data as FileDetail | undefined;
      if (!data) return 2000;
      if (!isTerminalStatus(data.status)) return 2000;
      // A quarantined (VIRUS_DETECTED) file is never signed — no re-mint.
      if (!data.expiresAt) return false;
      const expiresMs = new Date(data.expiresAt).getTime() - Date.now();
      return expiresMs < 60_000 ? 5000 : false;
    },
    staleTime: 30_000,
  });

  // Live progress (this tab started the transfer) — shown until settled.
  const live = useUploadStore((s) => s.active[fileId]);
  const qc = useQueryClient();

  const [captionOpen, setCaptionOpen] = useState(false);
  // TASK-0104 context-menu state (Replace / Rename / Permissions / Delete).
  const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);
  const [renameOpen, setRenameOpen] = useState(false);
  const [permsOpen, setPermsOpen] = useState(false);
  const [trashConfirmOpen, setTrashConfirmOpen] = useState(false);

  // Error states are derived from the server record: `query.isError` (no
  // access / not found) and `detail.status === "FAILED"` (pipeline error).
  const detail = query.data;

  // Persist a properties patch (the API REPLACES properties → merge).
  const patchProps = useCallback(
    async (patch: Record<string, unknown>) => {
      await blockApi.update(block.id, { properties: { ...block.properties, ...patch } });
    },
    [block.id, block.properties],
  );

  // TASK-0104 context-menu actions. The upload orchestrator + workspace come
  // from the page (same path as FilePickerBlock); the actions are defined here
  // (hooks only) and rendered in the READY branch.
  const { data: page } = usePage(block.pageId);
  const workspaceId = page?.workspaceId ?? null;
  const { start } = useFileUploads(workspaceId, block.pageId);
  const replaceInputRef = useRef<HTMLInputElement>(null);

  const closeMenu = () => setMenuAnchor(null);

  const doRename = async (name: string) => {
    const trimmed = name.trim();
    if (!trimmed) return;
    try {
      await filesApi.rename(fileId, trimmed, { workspaceId: workspaceId ?? undefined });
      await patchProps({ name: trimmed });
      qc.invalidateQueries({ queryKey: ["files", fileId] });
      toast("success", "File renamed");
      setRenameOpen(false);
    } catch (e) {
      toast("error", "Rename failed", e instanceof Error ? e.message : undefined);
    }
  };

  const doTrash = async () => {
    try {
      await filesApi.trash(fileId, { workspaceId: workspaceId ?? undefined });
      // The block keeps its fileId; the file is now in the workspace trash
      // (restorable). Remove the block so the page no longer points at it.
      await blockApi.remove(block.id).catch(() => undefined);
      qc.invalidateQueries({ queryKey: ["files", "browser"] });
      toast("success", "Moved to trash", "Restore it from the Files → Trash tab.");
      setTrashConfirmOpen(false);
    } catch (e) {
      toast("error", "Delete failed", e instanceof Error ? e.message : undefined);
    }
  };

  const onReplaceFile = (list: FileList | null) => {
    const file = list?.[0];
    if (!file) return;
    void start(file, {
      parentId: block.parentId,
      position: null,
      updateBlockId: block.id,
      replaceFileId: fileId,
    }).then(() => toast("success", "New version uploaded"));
  };

  if (live) {
    return <UploadProgressCard block={block} fileId={fileId} progress={live} />;
  }

  if (!detail || !query.data) {
    if (query.isError) {
      return (
        <ErrorCard
          message="File not found or you no longer have access."
          onRemove={() => void blockApi.remove(block.id)}
        />
      );
    }
    return <Skeleton status="Loading…" />;
  }

  if (detail.status === "VIRUS_DETECTED") {
    return (
      <div
        role="alert"
        className="flex items-start gap-3 rounded-md border border-red-300 bg-red-50 p-3 text-sm"
      >
        <ShieldAlert className="mt-0.5 size-4 shrink-0 text-red-600" aria-hidden />
        <div className="min-w-0">
          <p className="font-medium text-red-800">Blocked by virus scan — contact an admin</p>
          <p className="truncate text-red-700">{detail.name}</p>
        </div>
      </div>
    );
  }

  if (detail.status === "FAILED") {
    const err = (detail.metadata?.pipeline as { error?: string } | undefined)?.error;
    return (
      <ErrorCard
        message={err ?? "Processing failed — the file could not be prepared."}
        onRemove={() => void blockApi.remove(block.id)}
      />
    );
  }

  if (detail.status !== "READY") {
    return <Skeleton status={detail.status === "SCANNING" ? "Scanning…" : "Waiting for upload…"} />;
  }

  // READY — render per kind.
  const kind = kindForMime(detail.mimeType);
  const props = block.properties;

  return (
    <div data-testid={`file-card-${detail.id}`} className="group/file w-full">
      <div className="relative">
        {/* TASK-0104 context menu (hover affordance; also keyboard-reachable). */}
        <div className="absolute right-1 top-1 z-10 opacity-0 transition-opacity group-hover/file:opacity-100 focus-within:opacity-100">
          <button
            type="button"
            aria-label={`Actions for ${detail.name}`}
            aria-haspopup="menu"
            aria-expanded={menuAnchor !== null}
            onClick={(e) => {
              e.stopPropagation();
              setMenuAnchor({ x: e.clientX, y: e.clientY });
            }}
            className="flex size-7 items-center justify-center rounded-md border border-border bg-background/90 text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground"
          >
            <MoreHorizontal className="size-4" aria-hidden />
          </button>
        </div>
        {kind === "image" && <ImageRender detail={detail} props={props} patchProps={patchProps} />}
        {kind === "video" && <VideoRender detail={detail} />}
        {kind === "audio" && <AudioRender detail={detail} />}
        {kind === "pdf" && <PdfRender detail={detail} />}
        {(kind === "doc" || kind === "other") && (
          <DocCard detail={detail} onCopyLink={() => void copyShareLink(detail.id)} />
        )}
      </div>
      {(kind === "image" || kind === "video") && (
        <CaptionRow
          open={captionOpen}
          onToggle={() => setCaptionOpen((v) => !v)}
          caption={props.caption ?? ""}
          onSave={(caption) => void patchProps({ caption: caption || undefined })}
        />
      )}

      {menuAnchor && (
        <FileBlockMenu
          x={menuAnchor.x}
          y={menuAnchor.y}
          onClose={closeMenu}
          onReplace={() => {
            closeMenu();
            replaceInputRef.current?.click();
          }}
          onRename={() => {
            closeMenu();
            setRenameOpen(true);
          }}
          onPermissions={() => {
            closeMenu();
            setPermsOpen(true);
          }}
          onDelete={() => {
            closeMenu();
            setTrashConfirmOpen(true);
          }}
        />
      )}

      {/* native file input for "Replace" (same file → new version) */}
      <input
        ref={replaceInputRef}
        type="file"
        className="sr-only"
        aria-label={`Choose a replacement for ${detail.name}`}
        onChange={(e) => {
          onReplaceFile(e.target.files);
          e.target.value = "";
        }}
      />

      <RenameFileDialog open={renameOpen} initialName={detail.name} onClose={() => setRenameOpen(false)} onSave={(name) => void doRename(name)} />

      <ConfirmDialog
        open={trashConfirmOpen}
        title="Delete this file?"
        description={
          <>
            <span className="font-medium text-foreground">{detail.name}</span> moves to the workspace trash (the
            current version is kept). Restore it from Files → Trash, or purge it there to delete for good.
          </>
        }
        confirmLabel="Delete"
        destructive
        busy={false}
        onConfirm={() => void doTrash()}
        onClose={() => setTrashConfirmOpen(false)}
      />

      {permsOpen && (
        <FilePermissionsDialog
          open={permsOpen}
          fileId={fileId}
          fileName={detail.name}
          workspaceId={workspaceId ?? ""}
          onClose={() => setPermsOpen(false)}
        />
      )}
    </div>
  );
}

/* ============================================== TASK-0104: context menu */

function FileBlockMenu({
  x,
  y,
  onClose,
  onReplace,
  onRename,
  onPermissions,
  onDelete,
}: {
  x: number;
  y: number;
  onClose: () => void;
  onReplace: () => void;
  onRename: () => void;
  onPermissions: () => void;
  onDelete: () => void;
}) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onClick);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onClick);
    };
  }, [onClose]);

  // Keep the menu on-screen (mirrors the editor ContextMenu).
  const style = {
    top: Math.min(y, (typeof window !== "undefined" ? window.innerHeight : 800) - 220),
    left: Math.min(x, (typeof window !== "undefined" ? window.innerWidth : 1200) - 230),
  };

  const item = "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent";

  return (
    <div
      ref={ref}
      role="menu"
      aria-label="File actions"
      style={style}
      className="fixed z-[95] w-52 rounded-md border border-border bg-background p-1 shadow-xl"
    >
      <button type="button" role="menuitem" onClick={onReplace} className={item}>
        <RefreshCw className="size-4 text-muted-foreground" aria-hidden />
        Replace
      </button>
      <button type="button" role="menuitem" onClick={onRename} className={item}>
        <Pencil className="size-4 text-muted-foreground" aria-hidden />
        Rename
      </button>
      <button type="button" role="menuitem" onClick={onPermissions} className={item}>
        <ShieldCheck className="size-4 text-muted-foreground" aria-hidden />
        Permissions…
      </button>
      <div className="my-1 border-t border-border" aria-hidden />
      <button
        type="button"
        role="menuitem"
        onClick={onDelete}
        className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"
      >
        <Trash2 className="size-4" aria-hidden />
        Delete
      </button>
    </div>
  );
}

/** Inline rename (reuses the shared Dialog shell). */
function RenameFileDialog({
  open,
  initialName,
  onClose,
  onSave,
}: {
  open: boolean;
  initialName: string;
  onClose: () => void;
  onSave: (name: string) => void;
}) {
  const [name, setName] = useState(initialName);
  useEffect(() => {
    if (open) setName(initialName);
  }, [open, initialName]);
  return (
    <Dialog
      open={open}
      title="Rename file"
      onClose={onClose}
      footer={
        <DialogFooter
          onCancel={onClose}
          onAction={() => onSave(name)}
          actionLabel="Rename"
          disabled={!name.trim() || name.trim() === initialName}
        />
      }
    >
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSave(name);
        }}
      >
        <label htmlFor="file-rename-name" className="mb-1 block text-sm font-medium">
          File name
        </label>
        <input
          id="file-rename-name"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          autoFocus
          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/40"
        />
      </form>
    </Dialog>
  );
}

/* ===================================================== per-kind renders */

function ImageRender({
  detail,
  props,
  patchProps,
}: {
  detail: FileDetail;
  props: Block["properties"];
  patchProps: (patch: Record<string, unknown>) => Promise<void>;
}) {
  const widthPercent = clampPercent((props.widthPercent as number | undefined) ?? 100);
  const frameRef = useRef<HTMLDivElement>(null);
  const [dragging, setDragging] = useState(false);

  const onHandlePointerMove = (e: React.PointerEvent) => {
    if (!dragging || !frameRef.current) return;
    const rect = frameRef.current.getBoundingClientRect();
    const pct = ((e.clientX - rect.left) / rect.width) * 100;
    // live local preview only; persistence happens on pointer up
    frameRef.current.querySelector<HTMLElement>("[data-image-frame]")?.style.setProperty(
      "width",
      `${clampPercent(pct)}%`,
    );
  };

  return (
    <div ref={frameRef} className="relative inline-block max-w-full align-top" onPointerMove={onHandlePointerMove}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        data-image-frame
        src={detail.previewUrl}
        alt={props.caption || detail.name}
        style={{ width: `${widthPercent}%` }}
        className="block max-w-full rounded-md"
        loading="lazy"
      />
      <div
        role="group"
        aria-label={`Image width ${widthPercent}% — use the presets or the drag handle`}
        className="mt-1 flex items-center gap-1"
      >
        {[50, 75, 100].map((p) => (
          <button
            key={p}
            type="button"
            aria-pressed={widthPercent === p}
            onClick={() => void patchProps({ widthPercent: p })}
            className="rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-accent"
          >
            {p}%
          </button>
        ))}
        <button
          type="button"
          aria-label="Drag to resize"
          onPointerDown={(e) => {
            (e.target as HTMLElement).setPointerCapture(e.pointerId);
            setDragging(true);
          }}
          onPointerUp={(e) => {
            (e.target as HTMLElement).releasePointerCapture(e.pointerId);
            setDragging(false);
            const frame = frameRef.current?.querySelector<HTMLElement>("[data-image-frame]");
            const pct = frame ? (parseFloat(frame.style.width || "100") || 100) : widthPercent;
            void patchProps({ widthPercent: Math.round(clampPercent(pct)) });
          }}
          className="ml-1 cursor-ew-resize rounded p-1 text-muted-foreground hover:bg-accent"
        >
          <GripVertical className="size-3.5" aria-hidden />
        </button>
      </div>
    </div>
  );
}

function VideoRender({ detail }: { detail: FileDetail }) {
  const duration = (detail.metadata?.media as { duration?: number } | undefined)?.duration;
  return (
    <video
      controls
      src={detail.previewUrl}
      poster={detail.thumbnailUrl ?? undefined}
      className="max-h-[70vh] max-w-full rounded-md bg-black"
      aria-label={`${detail.name}${typeof duration === "number" ? `, ${Math.round(duration)} seconds` : ""}`}
    >
      <track kind="captions" />
    </video>
  );
}

function AudioRender({ detail }: { detail: FileDetail }) {
  const duration = (detail.metadata?.media as { duration?: number } | undefined)?.duration;
  return (
    <div className="flex items-center gap-3 rounded-md border border-border p-3">
      <Music className="size-5 shrink-0 text-muted-foreground" aria-hidden />
      <audio
        controls
        src={detail.previewUrl}
        className="h-9 min-w-0 flex-1"
        aria-label={`${detail.name}${typeof duration === "number" ? `, ${Math.round(duration)} seconds` : ""}`}
      />
    </div>
  );
}

function PdfRender({ detail }: { detail: FileDetail }) {
  return (
    <div className="w-full overflow-hidden rounded-md border border-border">
      <iframe
        title={detail.name}
        src={detail.previewUrl}
        sandbox="allow-scripts allow-popups"
        referrerPolicy="no-referrer"
        className="h-[70vh] w-full bg-white"
      />
      <div className="flex items-center gap-2 border-t border-border p-2">
        <a
          href={detail.previewUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent"
        >
          <ExternalLink className="size-3" aria-hidden /> Open in new tab
        </a>
        <DownloadButton detail={detail} />
      </div>
    </div>
  );
}

function DocCard({ detail, onCopyLink }: { detail: FileDetail; onCopyLink: () => void }) {
  const Icon = KIND_ICONS[kindForMime(detail.mimeType)];
  return (
    <div className="flex items-center gap-3 rounded-md border border-border p-3">
      <span className="flex size-9 shrink-0 items-center justify-center rounded bg-muted">
        <Icon className="size-4 text-muted-foreground" aria-hidden />
      </span>
      <span className="min-w-0 flex-1">
        <span data-testid={`file-name-${detail.id}`} className="block truncate text-sm font-medium">{detail.name}</span>
        <span className="block text-xs text-muted-foreground">
          {[detail.mimeType, humanSize(detail.size), detail.versions.length > 1 ? `${detail.versions.length} versions` : null]
            .filter(Boolean)
            .join(" · ")}
        </span>
      </span>
      <div className="flex shrink-0 items-center gap-1">
        <button
          type="button"
          title="Copy share link"
          aria-label="Copy share link"
          onClick={onCopyLink}
          className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-accent"
        >
          <LinkIcon className="size-3.5" aria-hidden />
        </button>
        <DownloadButton detail={detail} />
      </div>
    </div>
  );
}

function DownloadButton({ detail }: { detail: FileDetail }) {
  return (
    <button
      type="button"
      data-testid={`file-download-${detail.id}`}
      onClick={() => {
        // The 302 endpoint audits file.downloaded; a signed GET would skip
        // the audit. Filename comes from the server record (signed into the
        // disposition), never client-constructed. (downloadUrl is always set
        // here — a quarantined file renders the red card, never this button.)
        if (!detail.downloadUrl) return;
        window.location.href = detail.downloadUrl;
      }}
      className="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent"
    >
      <Download className="size-3" aria-hidden /> Download
    </button>
  );
}

/* ======================================================= state surfaces */

function Skeleton({ status }: { status: string }) {
  return (
    <div className="flex items-center gap-3 rounded-md border border-border p-4" role="status" aria-live="polite">
      <Loader2 className="size-4 animate-spin text-muted-foreground" aria-hidden />
      <span className="text-sm text-muted-foreground">{status}</span>
    </div>
  );
}

function ErrorCard({ message, onRemove }: { message: string; onRemove: () => void }) {
  return (
    <div
      role="alert"
      className="flex items-start gap-3 rounded-md border border-border bg-muted/40 p-3 text-sm"
    >
      <ShieldAlert className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden />
      <div className="min-w-0 flex-1">
        <p className="text-muted-foreground">{message}</p>
      </div>
      <button
        type="button"
        onClick={onRemove}
        className="inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-accent"
      >
        <Trash2 className="size-3" aria-hidden /> Remove
      </button>
    </div>
  );
}

function UploadProgressCard({
  block,
  fileId,
  progress,
}: {
  block: Block;
  fileId: string;
  progress: UploadProgress;
}) {
  const cancelFn = useUploadStore((s) => s.cancelFns[fileId]);
  // 25 % steps for screen readers (Requirements §7).
  const announced = Math.min(100, Math.floor(progress.fraction * 100) / 25) * 25;
  return (
    <div className="w-full rounded-md border border-border p-3" role="status" aria-live="polite" aria-atomic="true">
      <p className="sr-only">Uploading {block.properties.name ?? "file"}: {announced} percent</p>
      <div className="flex items-center gap-3">
        <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" aria-hidden />
        <div className="min-w-0 flex-1">
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-primary transition-[width] duration-150"
              style={{ width: `${Math.round(progress.fraction * 100)}%` }}
            />
          </div>
          <p className="mt-1 text-xs text-muted-foreground">
            {progress.fraction < 1
              ? `${Math.round(progress.fraction * 100)} % · ${humanSize(progress.loaded)} of ${humanSize(progress.total)}${progress.speedBps > 0 ? ` · ${humanSize(progress.speedBps)}/s` : ""}`
              : "Uploading complete — processing…"}
          </p>
        </div>
        {progress.phase === "uploading" && cancelFn ? (
          <button
            type="button"
            onClick={cancelFn}
            className="inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-accent"
          >
            <X className="size-3" aria-hidden /> Cancel
          </button>
        ) : null}
      </div>
    </div>
  );
}

function CaptionRow({
  open,
  onToggle,
  caption,
  onSave,
}: {
  open: boolean;
  onToggle: () => void;
  caption: string;
  onSave: (caption: string) => void;
}) {
  const [draft, setDraft] = useState(caption);
  useEffect(() => setDraft(caption), [caption, open]);
  return (
    <div className="mt-1">
      {open ? (
        <input
          autoFocus
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onBlur={() => onSave(draft)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === "Escape") onSave(draft);
          }}
          placeholder="Add a caption…"
          aria-label="Caption"
          className="w-full rounded border border-border bg-transparent px-1 py-0.5 text-center text-xs text-muted-foreground outline-none focus:border-primary"
        />
      ) : (
        <>
          {caption ? (
            <p className="text-center text-xs text-muted-foreground">{caption}</p>
          ) : null}
          <button
            type="button"
            onClick={onToggle}
            className="mx-auto block rounded px-1.5 py-0.5 text-[11px] text-muted-foreground opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 group-hover:opacity-100"
          >
            + Caption
          </button>
        </>
      )}
    </div>
  );
}

/* =========================================================== utilities */

/**
 * Pre-Phase-9 file blocks carried a direct `properties.src` (no `fileId`) —
 * render them as a plain download card so existing content never breaks
 * (AGENTS.md #16: never silently remove existing functionality).
 */
function LegacyFileCard({ block }: { block: Block }) {
  const { src, name, size, mimeType } = block.properties;
  const sizeLabel = typeof size === "number" ? humanSize(size) : undefined;
  return (
    <div className="flex items-center gap-3 rounded-md border border-border p-3">
      <span className="flex size-9 shrink-0 items-center justify-center rounded bg-muted">
        <FileIcon className="size-4 text-muted-foreground" aria-hidden />
      </span>
      <span className="min-w-0 flex-1">
        <span className="block truncate text-sm font-medium">{name ?? "File"}</span>
        <span className="block text-xs text-muted-foreground">{[mimeType, sizeLabel].filter(Boolean).join(" · ")}</span>
      </span>
      {src ? (
        <a
          href={src}
          target="_blank"
          rel="noopener noreferrer"
          download={typeof name === "string" ? name : undefined}
          className="shrink-0 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent"
        >
          Download
        </a>
      ) : null}
    </div>
  );
}

function clampPercent(n: number): number {
  if (!Number.isFinite(n)) return 100;
  return Math.min(100, Math.max(25, n));
}

async function copyShareLink(fileId: string): Promise<void> {
  // The share link is the API endpoint itself (spec §3: "share link =
  // GET /files/:id — public only if the page is shared"). It is
  // permission-checked on read; no client-side URL construction.
  const url = `${API_BASE}/files/${fileId}`;
  try {
    await navigator.clipboard.writeText(url);
    toast("success", "Link copied");
  } catch {
    toast("error", "Copy failed", "This file's link requires workspace access.");
  }
}