"use client";

/**
 * TASK-0103 — the file picker (page sidebar, Requirements §4).
 *
 * "Files" tab listing the files of the active page's scope, with a
 * workspace/page filter chip, a client-side name search, a grid
 * (thumbnail, name, size, uploader, date) and click-to-insert. Inserting is
 * a BLOCK INSERT referencing the existing `fileId` (no re-upload) at the
 * selected block's position (or page end).
 *
 * A11y (§7): the grid is keyboard-navigable (roving tabindex + Enter).
 */
import { useMemo, useRef, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { FileImage, Search, X } from "lucide-react";
import { blockApi } from "@/lib/api";
import { useEditorStore } from "@/stores/editor-store";
import { filesApi, humanSize, kindForMime, type FileListItem } from "@/lib/files/api";
import { filterByName, sortPickerFiles, type PickerSort } from "@/lib/files/picker";
import { cn } from "@/lib/utils";
import type { Block } from "@/lib/types";

interface FilePickerProps {
  workspaceId: string;
  pageId: string;
  /** The current page id — the "In this page" scope filters by it. */
  onClose: () => void;
}

type Scope = "page" | "workspace";

export function FilePicker({ workspaceId, pageId, onClose }: FilePickerProps) {
  const [scope, setScope] = useState<Scope>("page");
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState<PickerSort>("updated");
  const gridRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const queryClient = useQueryClient();

  const listQuery = useQuery({
    queryKey: ["files", "picker", workspaceId, scope, pageId],
    queryFn: () =>
      filesApi.list(
        scope === "page" ? { scope: "page", pageId, workspaceId, limit: 100 } : { scope: "workspace", workspaceId, limit: 100 },
      ),
  });

  const all = listQuery.data?.data ?? [];
  // Client-side filter (spec §4: "search box (client filter by name)") +
  // sort, both pure + unit-tested (lib/files/picker.ts).
  const files = useMemo(() => sortPickerFiles(filterByName(all, search), sort), [all, search, sort]);

  /** Insert the file as a `file` block at the cursor: after the selected
   *  block's position (or at the end when nothing is selected). */
  const insertAtCursor = async (file: FileListItem) => {
    try {
      const selectedId = useEditorStore.getState().selectedBlockId;
      let position: string | undefined;
      if (selectedId) {
        // the selected block's fractional position (from the cached list)
        const cached = queryClient.getQueryData<{ data: Block[] }>([
          "pages",
          pageId,
          "blocks",
          "top",
        ]);
        const sel = cached?.data?.find((b) => b.id === selectedId);
        position = sel?.position;
      }
      await blockApi.insert({
        pageId,
        parentId: null,
        type: "file",
        properties: { fileId: file.id, name: file.name },
        ...(position ? { position } : {}),
      });
      onClose();
    } catch {
      // the block list refetches; a transient failure surfaces as a toast
      // from blockApi's caller-less path — keep the panel open for a retry
    }
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "Tab") {
      e.preventDefault();
      setActiveIndex((i) => Math.min(files.length - 1, i + 1));
    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
      e.preventDefault();
      setActiveIndex((i) => Math.max(0, i - 1));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const f = files[activeIndex];
      if (f) void insertAtCursor(f);
    } else if (e.key === "Escape") {
      onClose();
    }
    // keep the focused tile in view
    if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(e.key)) {
      requestAnimationFrame(() => {
        gridRef.current?.querySelector<HTMLElement>('[data-tile-focus="true"]')?.focus();
      });
    }
  };

  return (
    <div
      className="absolute right-0 top-0 z-30 flex h-full w-80 flex-col border-l border-border bg-background shadow-xl"
      role="dialog"
      aria-label="Files"
      onKeyDown={onKeyDown}
    >
      <div className="flex items-center justify-between border-b border-border p-3">
        <h2 className="text-sm font-semibold">Files</h2>
        <button type="button" onClick={onClose} aria-label="Close files panel" className="rounded p-1 text-muted-foreground hover:bg-accent">
          <X className="size-4" aria-hidden />
        </button>
      </div>

      <div className="space-y-2 border-b border-border p-3">
        <div className="flex items-center gap-2">
          <div className="flex flex-1 gap-1" role="group" aria-label="Filter by scope">
            {(["page", "workspace"] as Scope[]).map((s) => (
              <button
                key={s}
                type="button"
                aria-pressed={scope === s}
                onClick={() => setScope(s)}
                className={cn(
                  "rounded-full border px-2.5 py-0.5 text-xs",
                  scope === s ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-accent",
                )}
              >
                {s === "page" ? "In this page" : "In workspace"}
              </button>
            ))}
          </div>
          <select
            value={sort}
            onChange={(e) => setSort(e.target.value as PickerSort)}
            aria-label="Sort files"
            className="rounded-md border border-border bg-background px-1.5 py-0.5 text-xs"
          >
            <option value="updated">Updated</option>
            <option value="name">Name</option>
            <option value="size">Size</option>
            <option value="date">Newest</option>
          </select>
        </div>
        <label className="relative block">
          <Search className="pointer-events-none absolute left-2 top-1.5 size-3.5 text-muted-foreground" aria-hidden />
          <input
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setActiveIndex(0);
            }}
            placeholder="Search files by name"
            aria-label="Search files by name"
            className="w-full rounded-md border border-border bg-transparent py-1.5 pl-7 pr-2 text-sm outline-none focus:border-primary"
          />
        </label>
      </div>

      <div ref={gridRef} className="min-h-0 flex-1 overflow-y-auto p-3" role="listbox" aria-label="Files">
        {listQuery.isLoading ? (
          <p className="text-xs text-muted-foreground">Loading…</p>
        ) : files.length === 0 ? (
          <p className="px-1 py-2 text-xs text-muted-foreground">No files here yet — drag one in.</p>
        ) : (
          <ul className="grid grid-cols-2 gap-2">
            {files.map((f, i) => (
              <FileTile
                key={f.id}
                file={f}
                focused={i === activeIndex}
                onFocus={() => setActiveIndex(i)}
                onInsert={() => void insertAtCursor(f)}
              />
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

function FileTile({
  file,
  focused,
  onFocus,
  onInsert,
}: {
  file: FileListItem;
  focused: boolean;
  onFocus: () => void;
  onInsert: () => void;
}) {
  const kind = kindForMime(file.mimeType);
  return (
    <li role="option" aria-selected={focused}>
      <button
        type="button"
        data-tile-focus={focused ? "true" : undefined}
        tabIndex={focused ? 0 : -1}
        onFocus={onFocus}
        onClick={onInsert}
        title="Insert into the page"
        className={cn(
          "flex w-full flex-col gap-1 rounded-md border p-2 text-left outline-none focus:border-primary focus:ring-1 focus:ring-primary",
          focused ? "border-primary" : "border-border hover:bg-accent",
        )}
      >
        <span className="flex aspect-video w-full items-center justify-center overflow-hidden rounded bg-muted">
          {file.thumbnailUrl && kind === "image" ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={file.thumbnailUrl} alt="" className="size-full object-cover" />
          ) : (
            <FileImage className="size-5 text-muted-foreground" aria-hidden />
          )}
        </span>
        <span className="block truncate text-xs font-medium">{file.name}</span>
        <span className="block truncate text-[11px] text-muted-foreground">
          {humanSize(file.size)}
          {file.uploadedByName ? ` · ${file.uploadedByName}` : ""}
        </span>
      </button>
    </li>
  );
}