"use client";

/**
 * T-140 — "Related" panel: the pages that reference THIS page (backlinks).
 *
 * A read-only slide-over (mirrors CommentPanel's backdrop + right drawer)
 * listing `GET /pages/:id/backlinks` — the server scans `child_page` /
 * `linked_database` blocks + comment mentions, then drops every source the
 * caller cannot VIEW (fail-closed, no existence leak). Rows deep-link to the
 * source page in the SAME workspace (backlinks are workspace-scoped).
 *
 * The data lives in the `useBacklinks` query (30 s staleTime, mirroring the
 * API's ≤60 s version-keyed cache); the panel is a pure presenter so the
 * fetch/caching is owned by the page (testable without rendering a dialog).
 */
import { X, Link2, Inbox } from "lucide-react";
import Link from "next/link";
import type { BacklinkRef } from "@/lib/types";

interface RelatedPanelProps {
  pageId: string;
  workspaceSlug: string;
  open: boolean;
  onClose: () => void;
  refs: BacklinkRef[];
  isLoading: boolean;
  isError: boolean;
}

export function RelatedPanel({
  pageId,
  workspaceSlug,
  open,
  onClose,
  refs,
  isLoading,
  isError
}: RelatedPanelProps) {
  if (!open) return null;

  return (
    <>
      {/* Backdrop (a click closes the panel). */}
      <div className="fixed inset-0 z-40 bg-black/20" aria-hidden onClick={onClose} />
      <aside
        className="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l border-border bg-background shadow-xl"
        role="dialog"
        aria-label={`Related pages referencing this page`}
        data-testid="related-panel"
      >
        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
          <h2 className="inline-flex items-center gap-2 text-sm font-semibold">
            <Link2 className="size-4 text-muted-foreground" aria-hidden />
            Related
            {refs.length > 0 ? (
              <span className="text-xs font-normal text-muted-foreground" aria-hidden>
                ({refs.length})
              </span>
            ) : null}
          </h2>
          <button
            type="button"
            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
            onClick={onClose}
            aria-label="Close related pages"
          >
            <X className="size-4" aria-hidden />
          </button>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto p-3" data-testid="related-panel-body">
          {isLoading ? (
            <p className="px-1 py-2 text-sm text-muted-foreground" data-testid="related-loading">
              Loading related pages…
            </p>
          ) : isError ? (
            <p className="px-1 py-2 text-sm text-muted-foreground" data-testid="related-error">
              Couldn&apos;t load related pages.
            </p>
          ) : refs.length === 0 ? (
            <div className="flex flex-col items-center gap-2 px-4 py-10 text-center">
              <Inbox className="size-6 text-muted-foreground/70" aria-hidden />
              <p className="text-sm font-medium">No related pages yet</p>
              <p className="text-xs text-muted-foreground">
                Pages that link to this one (child page, linked database, or a
                comment mention) will appear here.
              </p>
            </div>
          ) : (
            <ul className="space-y-1" data-testid="related-list">
              {refs.map((r) => (
                <li key={r.pageId}>
                  <Link
                    href={`/w/${workspaceSlug}/page/${r.pageId}`}
                    data-testid={`related-item-${r.pageId}`}
                    onClick={onClose}
                    className="flex items-center gap-2.5 rounded-md border border-border/60 px-3 py-2 text-sm hover:bg-accent"
                  >
                    {r.icon ? (
                      <span className="shrink-0 text-base" aria-hidden>
                        {r.icon}
                      </span>
                    ) : null}
                    <span className="min-w-0 flex-1 truncate font-medium">
                      {r.title || "Untitled"}
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      </aside>
    </>
  );
}