"use client";

/**
 * /spaces — the spaces directory (T-136/T-137 web surface; the API — list
 * filters, archive/restore, stats — landed 2026-10-11 and its E2E was
 * pending on THIS route).
 *
 * Top-level (outside the [workspace] segment): a directory lists MULTIPLE
 * spaces, so it has no single current workspace. It reuses the app's
 * WorkspaceShell (auth gate + sidebar switcher + topbar) via the (app)
 * layout — the same path the /w/:workspace index page uses when no
 * workspace param is present.
 *
 * Filters: `type` is SERVER-side (one refetch per selection — the directory
 * is the member-scoped list, which can be large); `search` and the archived
 * toggle are CLIENT-side over the already-loaded list (no extra round-trip
 * for a filter the user applies to what's on screen). The server still
 * enforces the no-leak boundary (non-members never appear) — the client
 * filters only narrow the caller's own list.
 */
import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Archive, ArchiveRestore, FilePlus2, Loader2, Search } from "lucide-react";
import { workspaceApi } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import type { Workspace } from "@/lib/types";

const TYPE_OPTIONS = [
  { value: "", label: "All types" },
  { value: "team", label: "Team" },
  { value: "project", label: "Project" },
  { value: "kb", label: "Knowledge base" },
  { value: "custom", label: "Custom" }
] as const;

function typeLabel(t: string | undefined): string {
  switch (t) {
    case "team":
      return "Team";
    case "project":
      return "Project";
    case "kb":
      return "Knowledge base";
    case "custom":
      return "Custom";
    default:
      return "Space";
  }
}

export default function SpacesDirectoryPage() {
  const router = useRouter();
  const qc = useQueryClient();

  const [type, setType] = useState("");
  const [search, setSearch] = useState("");
  const [showArchived, setShowArchived] = useState(false);
  const [actingId, setActingId] = useState<string | null>(null);

  // Server-side member-scoped list, filtered by type + archived (refetch per
  // change). The DEFAULT list EXCLUDES archived spaces, so "show archived"
  // must ask the server for `archived=true` (a replace, not an include) —
  // client-side filtering can't surface rows the server didn't return.
  // `type` empty → no param (all types).
  const list = useQuery({
    queryKey: ["workspaces", "directory", { type: type || null, archived: showArchived }],
    queryFn: () =>
      workspaceApi.list({
        ...(type ? { type } : {}),
        ...(showArchived ? { archived: true } : {})
      }),
    retry: false
  });
  const items = list.data ?? [];

  // Client-side search only (narrow the caller's own already-loaded list).
  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return q ? items.filter((w) => w.name.toLowerCase().includes(q)) : items;
  }, [items, search]);

  const open = (w: Workspace) => router.push(`/w/${w.slug || w.id}`);

  const onArchive = async (w: Workspace, archive: boolean) => {
    setActingId(w.id);
    try {
      await (archive ? workspaceApi.archive(w.id) : workspaceApi.restoreArchive(w.id));
      qc.invalidateQueries({ queryKey: ["workspaces"] });
      toast("success", archive ? `“${w.name}” archived` : `“${w.name}” restored`);
    } catch (e) {
      toast("error", "Could not update the space", e instanceof Error ? e.message : undefined);
    } finally {
      setActingId(null);
    }
  };

  return (
    <div className="mx-auto max-w-3xl px-6 py-8">
      <h1 className="mb-1 flex items-center gap-2 text-xl font-semibold">
        <FilePlus2 className="size-5 text-muted-foreground" aria-hidden /> Spaces
      </h1>
      <p className="mb-4 text-sm text-muted-foreground">
        Every space you belong to. {showArchived ? "Showing archived spaces." : "Archived spaces are hidden."}
      </p>

      <div className="mb-4 flex flex-wrap items-center gap-2">
        <div className="relative min-w-52 flex-1">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden />
          <input
            data-testid="spaces-search"
            type="search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search spaces…"
            aria-label="Search spaces"
            className="w-full rounded-md border border-border bg-background py-1.5 pl-8 pr-2 text-sm outline-none focus:ring-1 focus:ring-ring"
          />
        </div>
        <select
          data-testid="spaces-type-filter"
          value={type}
          onChange={(e) => setType(e.target.value)}
          aria-label="Filter by type"
          className="rounded-md border border-border bg-background px-2 py-1.5 text-sm"
        >
          {TYPE_OPTIONS.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
        <label className="flex cursor-pointer items-center gap-1.5 text-sm text-muted-foreground">
          <input
            data-testid="spaces-show-archived"
            type="checkbox"
            checked={showArchived}
            onChange={(e) => setShowArchived(e.target.checked)}
            className="size-3.5"
          />
          Show archived
        </label>
      </div>

      {list.isLoading && (
        <p className="inline-flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" aria-hidden /> Loading spaces…
        </p>
      )}
      {list.isError && (
        <p className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
          Couldn&rsquo;t load your spaces.
        </p>
      )}
      {!list.isLoading && !list.isError && filtered.length === 0 && (
        <p className="rounded-md border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
          {showArchived ? "No archived spaces." : "No spaces yet."}
        </p>
      )}

      <ul className="space-y-1.5">
        {filtered.map((w) => {
          const canManage = ["owner", "admin"].includes(w.role?.toLowerCase() ?? "");
          return (
            <li
              key={w.id}
              data-testid={`space-item-${w.id}`}
              className="flex items-center gap-2.5 rounded-md border border-border px-3 py-2"
            >
              <span className="shrink-0 text-lg leading-none" aria-hidden>
                {w.emoji || "📁"}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{w.name}</p>
                <p className="flex items-center gap-2 text-[11px] text-muted-foreground">
                  {typeLabel(w.type)}
                  {w.archivedAt && (
                    <span className="rounded bg-muted px-1.5 py-0.5">Archived</span>
                  )}
                </p>
              </div>
              {canManage && (
                <button
                  type="button"
                  data-testid={w.archivedAt ? `space-restore-${w.id}` : `space-archive-${w.id}`}
                  onClick={() => void onArchive(w, !w.archivedAt)}
                  disabled={actingId !== null}
                  className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
                  title={w.archivedAt ? "Restore this space" : "Archive this space"}
                >
                  {actingId === w.id ? (
                    <Loader2 className="size-3.5 animate-spin" aria-hidden />
                  ) : w.archivedAt ? (
                    <ArchiveRestore className="size-3.5" aria-hidden />
                  ) : (
                    <Archive className="size-3.5" aria-hidden />
                  )}
                  {w.archivedAt ? "Restore" : "Archive"}
                </button>
              )}
              <button
                type="button"
                data-testid={`space-open-${w.id}`}
                onClick={() => open(w)}
                className="rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
              >
                Open
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}