"use client";

/**
 * MoveToDialog — "Move page to…" (topbar / sidebar-tree entry points).
 *
 * A page IS a folder when it has children (`Page.parentId` + fractional
 * position; there is no separate folder entity). Moving a page is
 * `PATCH /pages/:id { parentId }` — cycle protection (a page can't become
 * its own descendant) and trashed-parent rejection are enforced
 * server-side (page.service.ts `update`); the dialog surfaces those
 * rejections as a toast.
 *
 * The destination picker is the workspace page tree, lazy per level (the
 * same `usePageTree` hook + sibling-list endpoint the sidebar uses), with a
 * "Root (top level)" option (parentId = null). The moved page itself is
 * excluded from the picker; its descendants stay reachable but are never a
 * useful target (after the move they'd be outside the destination) and the
 * server rejects any true cycle anyway.
 *
 * Mounted at the workspace shell (like SearchDialog / GeneratePageDialog)
 * and opened through the ui-store (`setMove`), so the topbar menu and the
 * sidebar tree rows can open it without prop-drilling.
 */
import { useEffect, useState } from "react";
import { ChevronRight, FolderClosed, FolderOpen, Home, Inbox } from "lucide-react";
import { Dialog, DialogFooter } from "./dialog";
import { isApiError } from "@/lib/api";
import { usePageTree, useUpdatePage } from "@/hooks/use-pages";
import { useUiStore } from "@/stores/ui-store";
import { cn } from "@/lib/utils";
import type { PageTreeEntry } from "@/lib/types";

export function MoveToDialog() {
  const open = useUiStore((s) => s.moveOpen);
  const context = useUiStore((s) => s.moveContext);
  const setMove = useUiStore((s) => s.setMove);
  const pushToast = useUiStore((s) => s.pushToast);

  const pageId = context?.pageId ?? null;
  const workspaceId = context?.workspaceId ?? "";

  // undefined = nothing picked yet (Move disabled); null = root; string = page.
  const [selected, setSelected] = useState<string | null | undefined>(undefined);
  const [busy, setBusy] = useState(false);

  const updatePage = useUpdatePage(workspaceId);
  // Unconditional (hooks rule): disabled while no workspace is in context.
  const rootQuery = usePageTree(workspaceId, null);

  // Reset the selection each time the dialog opens for a page.
  useEffect(() => {
    if (open) setSelected(undefined);
  }, [open, pageId]);

  if (!open || !context || !pageId) return null;

  const title = context.title || "This page";

  const onAction = () => {
    if (selected === undefined) return;
    setBusy(true);
    updatePage.mutate(
      { id: pageId, parentId: selected ?? null },
      {
        onSuccess: () => {
          setBusy(false);
          setMove(false, null);
          pushToast({
            kind: "success",
            title: "Moved",
            description:
              selected === null ? `“${title}” is now at the top level` : `“${title}” moved into its new folder`
          });
        },
        onError: (e: Error) => {
          setBusy(false);
          const msg = isApiError(e) && e.message && e.message.length < 140 ? e.message : e.message || "Move failed";
          pushToast({ kind: "error", title: "Move failed", description: msg });
        }
      }
    );
  };

  const entries = (rootQuery.data ?? []).filter((e) => e.id !== pageId);

  return (
    <Dialog
      open={open}
      title={`Move “${title}” to…`}
      description="Pick a page to use as the new folder, or move back to the top level."
      onClose={() => !busy && setMove(false, null)}
      testId="move-dialog"
      footer={
        <DialogFooter
          onCancel={() => setMove(false, null)}
          onAction={onAction}
          actionLabel="Move here"
          busy={busy}
          disabled={selected === undefined}
          testId="move-dialog-confirm"
        />
      }
    >
      <div className="space-y-3">
        <RootOption selected={selected === null} onPick={() => setSelected(null)} />
        <div className="flex items-center gap-2 px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
          <span className="h-px flex-1 bg-border" aria-hidden />
          or into a page
          <span className="h-px flex-1 bg-border" aria-hidden />
        </div>
        {rootQuery.isLoading ? (
          <p className="px-2 py-1 text-sm text-muted-foreground">Loading pages…</p>
        ) : (
          <MoveTreePicker
            entries={entries}
            workspaceId={workspaceId}
            selected={selected}
            onSelect={setSelected}
          />
        )}
      </div>
    </Dialog>
  );
}

/** The "Root (top level)" row — move back to the sidebar top level. */
function RootOption({ selected, onPick }: { selected: boolean; onPick: () => void }) {
  return (
    <button
      type="button"
      onClick={onPick}
      className={cn(
        "flex w-full items-center gap-2 rounded-md border px-3 py-2 text-sm",
        selected ? "border-primary bg-accent font-medium" : "border-border hover:bg-accent"
      )}
    >
      <Home className="size-4 text-muted-foreground" aria-hidden />
      Root (top level)
      {selected ? <PickMark /> : null}
    </button>
  );
}

/** Lazy, recursive destination picker (one level loaded per expand). */
function MoveTreePicker({
  entries,
  workspaceId,
  selected,
  onSelect,
  depth = 0
}: {
  entries: PageTreeEntry[];
  workspaceId: string;
  selected: string | null | undefined;
  onSelect: (id: string | null) => void;
  depth?: number;
}) {
  if (entries.length === 0) {
    return <p className="px-2 py-1 text-sm text-muted-foreground">No pages here yet.</p>;
  }
  return (
    <ul className="space-y-px">
      {entries.map((entry) => (
        <MovePickerNode
          key={entry.id}
          entry={entry}
          workspaceId={workspaceId}
          selected={selected}
          onSelect={onSelect}
          depth={depth}
        />
      ))}
    </ul>
  );
}

function MovePickerNode({
  entry,
  workspaceId,
  selected,
  onSelect,
  depth
}: {
  entry: PageTreeEntry;
  workspaceId: string;
  selected: string | null | undefined;
  onSelect: (id: string | null) => void;
  depth: number;
}) {
  const [expanded, setExpanded] = useState(false);
  const childrenQuery = usePageTree(workspaceId, entry.id);
  const children = entry.children ?? childrenQuery.data ?? [];
  const hasChildren = Boolean(entry.hasMore || (entry.children?.length ?? 0) > 0);
  const isSelected = selected === entry.id;

  return (
    <li>
      <div
        className={cn(
          "flex items-center gap-1 rounded-md py-1 pr-2 text-sm hover:bg-accent",
          isSelected && "bg-accent"
        )}
        style={{ paddingLeft: `${depth * 14 + 4}px` }}
      >
        <button
          type="button"
          onClick={() => setExpanded((v) => !v)}
          className={cn(
            "flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground",
            !hasChildren && "invisible"
          )}
          aria-label={expanded ? "Collapse" : "Expand"}
          aria-expanded={expanded}
        >
          <ChevronRight className={cn("size-3.5 transition-transform", expanded && "rotate-90")} aria-hidden />
        </button>
        {hasChildren ? (
          expanded ? (
            <FolderOpen className="size-4 shrink-0 text-amber-500/80" aria-hidden />
          ) : (
            <FolderClosed className="size-4 shrink-0 text-amber-500/80" aria-hidden />
          )
        ) : (
          <Inbox className="size-4 shrink-0 text-muted-foreground" aria-hidden />
        )}
        <button
          type="button"
          onClick={() => onSelect(entry.id)}
          className={cn(
            "min-w-0 flex-1 truncate text-left text-foreground/90 hover:text-foreground",
            isSelected && "font-medium"
          )}
          title={entry.title || "Untitled"}
        >
          {entry.title || "Untitled"}
        </button>
        {isSelected ? <PickMark /> : null}
      </div>
      {expanded ? (
        children.length > 0 || childrenQuery.isLoading ? (
          <MoveTreePicker
            entries={children}
            workspaceId={workspaceId}
            selected={selected}
            onSelect={onSelect}
            depth={depth + 1}
          />
        ) : (
          <p className="py-1 text-xs text-muted-foreground" style={{ paddingLeft: `${(depth + 1) * 14 + 20}px` }}>
            {childrenQuery.isLoading ? "Loading…" : "Empty"}
          </p>
        )
      ) : null}
    </li>
  );
}

function PickMark() {
  return (
    <span className="text-primary" aria-hidden>
      ✓
    </span>
  );
}