"use client";

/**
 * DatabaseToolbar — filter / sort / group / search-in-view controls for a
 * database view.
 *
 * State model (frontend-architecture §4.1: "anything shareable via link
 * lives in the URL, never in a store"):
 *   saved view (filter/sort/group on the DatabaseView row)
 *     + ad-hoc overrides (store, per dbId:viewId)
 *       → composed tree
 *         → useDatabaseRecords (server-side engine)
 * The composed state is mirrored into the URL (?filter=&sort=&group=&q=)
 * via router.replace so the current lens is shareable; on mount the URL
 * wins over the store.
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import {
  CalendarRange,
  Filter,
  Group,
  Loader2,
  Search,
  SlidersHorizontal,
  X
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiFetch } from "@/lib/api";
import { useDatabaseStore } from "@/stores/database-store";
import {
  andFilters,
  DatabaseProperty,
  DatabaseView,
  FilterTree,
  GroupSpec,
  searchFilter,
  SortSpec
} from "@/hooks/use-database";
import { FilterBuilder } from "@/components/database/filter-builder";
import { SortBuilder } from "@/components/database/sort-builder";
import { GroupBuilder } from "@/components/database/group-builder";

type Pop = "filter" | "sort" | "group" | null;

export interface DatabaseToolbarProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  className?: string;
}

function encode(v: unknown): string | null {
  if (v == null) return null;
  if (Array.isArray(v) && v.length === 0) return null;
  return JSON.stringify(v);
}
function decode<T>(s: string | null): T | null {
  if (!s) return null;
  try {
    return JSON.parse(s) as T;
  } catch {
    return null;
  }
}

export function DatabaseToolbar({ databaseId, view, properties, className }: DatabaseToolbarProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [pop, setPop] = useState<Pop>(null);
  const rootRef = useRef<HTMLDivElement>(null);

  const overrides = useDatabaseStore((s) => s.overrides[`${databaseId}:${view.id}`]);
  const setOverrides = useDatabaseStore((s) => s.setOverrides);
  const clearOverrides = useDatabaseStore((s) => s.clearOverrides);

  // ---- URL → store hydration (URL wins on mount) ----------------------------
  const hydrated = useRef(false);
  useEffect(() => {
    if (hydrated.current) return;
    hydrated.current = true;
    const patch: Record<string, unknown> = {};
    const f = decode<FilterTree>(searchParams.get("filter"));
    const so = decode<SortSpec[]>(searchParams.get("sort"));
    const g = decode<GroupSpec[]>(searchParams.get("group"));
    const q = searchParams.get("q");
    if (f) patch.filter = f;
    if (so) patch.sort = so;
    if (g) patch.group = g;
    if (q != null) patch.searchText = q;
    if (Object.keys(patch).length > 0) setOverrides(databaseId, view.id, patch);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [databaseId, view.id]);

  // ---- composed effective state --------------------------------------------
  const effectiveFilter = useMemo<FilterTree | null>(
    () => andFilters(view.filter, overrides?.filter ?? null, searchFilter(properties, overrides?.searchText ?? "")),
    [view.filter, overrides?.filter, overrides?.searchText, properties]
  );
  const effectiveSort = useMemo<SortSpec[] | null>(
    () => overrides?.sort ?? view.sort ?? null,
    [overrides?.sort, view.sort]
  );
  const effectiveGroup = useMemo<GroupSpec[] | null>(
    () => overrides?.group ?? view.group ?? null,
    [overrides?.group, view.group]
  );

  // ---- mirror effective state into the URL (shareable) ----------------------
  useEffect(() => {
    const params = new URLSearchParams(searchParams.toString());
    const setOrDelete = (key: string, value: string | null) => {
      if (value == null) params.delete(key);
      else params.set(key, value);
    };
    setOrDelete("filter", overrides?.filter ? encode(overrides.filter) : null);
    setOrDelete("sort", overrides?.sort ? encode(overrides.sort) : null);
    setOrDelete("group", overrides?.group ? encode(overrides.group) : null);
    setOrDelete("q", overrides?.searchText || null);
    const qs = params.toString();
    const next = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
    if (window.location.pathname + (qs ? `?${qs}` : "") !== window.location.pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "")) {
      router.replace(next, { scroll: false });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [overrides?.filter, overrides?.sort, overrides?.group, overrides?.searchText]);

  // Close popovers on outside click.
  useEffect(() => {
    if (!pop) return;
    const onDown = (e: MouseEvent) => {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setPop(null);
    };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [pop]);

  // ---- live match count while editing (server-side, pageSize: 1) ------------
  const [preview, setPreview] = useState<{ filter: FilterTree | null; count: number | null } | null>(null);
  const editingFilter = pop === "filter" && preview?.filter === effectiveFilter ? preview.count : null;
  const countQuery = useQuery({
    queryKey: ["db-count", databaseId, view.id, JSON.stringify(effectiveFilter ?? null)],
    enabled: false, // triggered manually below
    queryFn: async () => {
      const b = await apiFetch(`/databases/${databaseId}/query`, {
        method: "POST",
        body: JSON.stringify({ filter: effectiveFilter ?? undefined, pageSize: 1 })
      });
      const d = (b as { data?: { totalCount?: number } }).data ?? b;
      return (d as { totalCount?: number }).totalCount ?? null;
    }
  });
  const refreshCount = useCallback(() => {
    setPreview({ filter: effectiveFilter, count: null });
    void countQuery.refetch();
  }, [effectiveFilter, countQuery]);
  useEffect(() => {
    if (pop === "filter" && countQuery.data != null) {
      setPreview((p) => (p ? { ...p, count: countQuery.data } : p));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [countQuery.data, pop]);

  // ---- chip helpers -----------------------------------------------------------
  const conditionCount = useMemo(() => {
    let n = 0;
    const walk = (node: FilterTree | null | undefined) => {
      if (!node) return;
      if (typeof (node as { propertyId?: string }).propertyId === "string") n += 1;
      else for (const c of (node as { conditions: FilterTree[] }).conditions) walk(c);
    };
    walk(effectiveFilter);
    return n;
  }, [effectiveFilter]);

  const chipCls =
    "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs hover:bg-muted";

  return (
    <div ref={rootRef} className={cn("flex flex-wrap items-center gap-1", className)}>
      {/* Active filter chips */}
      {view.filter && (
        <span className={chipCls} title="Saved view filter">
          <Filter className="size-3" aria-hidden />
          {conditionCount} saved
        </span>
      )}
      {overrides?.filter && (
        <button
          type="button"
          className={cn(chipCls, "bg-primary/10 text-primary")}
          onClick={() => setOverrides(databaseId, view.id, { filter: undefined })}
          title="Remove ad-hoc filter"
        >
          <Filter className="size-3" aria-hidden />
          filter
          <X className="size-3" />
        </button>
      )}
      {overrides?.searchText && (
        <button
          type="button"
          className={cn(chipCls, "bg-primary/10 text-primary")}
          onClick={() => setOverrides(databaseId, view.id, { searchText: undefined })}
          title="Clear in-view search"
        >
          “{overrides.searchText}”
          <X className="size-3" />
        </button>
      )}

      {/* Search in view */}
      <div className="relative">
        <Search className="pointer-events-none absolute left-1.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden />
        <input
          className="h-7 w-40 rounded-md border border-input bg-background pl-7 pr-6 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
          placeholder="Search in view…"
          value={overrides?.searchText ?? ""}
          onChange={(e) => setOverrides(databaseId, view.id, { searchText: e.target.value || undefined })}
          aria-label="Search within this view"
        />
        {overrides?.searchText && (
          <button
            type="button"
            className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            onClick={() => setOverrides(databaseId, view.id, { searchText: undefined })}
            aria-label="Clear search"
          >
            <X className="size-3" />
          </button>
        )}
      </div>

      {/* Filter */}
      <div className="relative">
        <button
          type="button"
          className={cn(
            "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs hover:bg-muted",
            (overrides?.filter || pop === "filter") && "border-primary/40 bg-primary/10 text-primary"
          )}
          onClick={() => {
            const next = pop === "filter" ? null : "filter";
            setPop(next);
            if (next === "filter") refreshCount();
          }}
          aria-expanded={pop === "filter"}
        >
          <Filter className="size-3.5" aria-hidden />
          Filter
        </button>
        {pop === "filter" && (
          <div className="absolute left-0 top-8 z-40 w-[26rem] max-w-[85vw] rounded-lg border bg-popover p-2 shadow-lg">
            <div className="mb-1 flex items-center justify-between">
              <span className="text-xs font-medium">Filters</span>
              <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                {countQuery.isFetching && <Loader2 className="size-3 animate-spin" aria-hidden />}
                {editingFilter != null ? `${editingFilter} records match` : countQuery.data != null ? `${countQuery.data} records match` : ""}
              </span>
            </div>
            <FilterBuilder
              value={overrides?.filter ?? null}
              onChange={(tree) => {
                setOverrides(databaseId, view.id, { filter: tree ?? undefined });
                refreshCount();
              }}
              properties={properties}
            />
          </div>
        )}
      </div>

      {/* Sort */}
      <div className="relative">
        <button
          type="button"
          className={cn(
            "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs hover:bg-muted",
            effectiveSort && "border-primary/40 bg-primary/10 text-primary"
          )}
          onClick={() => setPop(pop === "sort" ? null : "sort")}
          aria-expanded={pop === "sort"}
        >
          <SlidersHorizontal className="size-3.5" aria-hidden />
          Sort
          {(overrides?.sort?.length ?? 0) > 0 && ` (${overrides?.sort?.length})`}
        </button>
        {pop === "sort" && (
          <div className="absolute left-0 top-8 z-40 w-80 max-w-[85vw] rounded-lg border bg-popover p-2 shadow-lg">
            <p className="mb-1 text-xs font-medium">Sorts</p>
            <SortBuilder
              value={effectiveSort}
              onChange={(sort) => setOverrides(databaseId, view.id, { sort: sort ?? undefined })}
              properties={properties}
            />
          </div>
        )}
      </div>

      {/* Group */}
      <div className="relative">
        <button
          type="button"
          className={cn(
            "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs hover:bg-muted",
            effectiveGroup && "border-primary/40 bg-primary/10 text-primary"
          )}
          onClick={() => setPop(pop === "group" ? null : "group")}
          aria-expanded={pop === "group"}
        >
          <Group className="size-3.5" aria-hidden />
          Group
        </button>
        {pop === "group" && (
          <div className="absolute left-0 top-8 z-40 w-80 max-w-[85vw] rounded-lg border bg-popover p-2 shadow-lg">
            <p className="mb-1 text-xs font-medium">Group by</p>
            <GroupBuilder
              value={effectiveGroup}
              onChange={(group) => setOverrides(databaseId, view.id, { group: group ?? undefined })}
              properties={properties}
              viewType={view.type}
            />
          </div>
        )}
      </div>

      {/* Reset ad-hoc overrides */}
      {(overrides?.filter || overrides?.sort || overrides?.group || overrides?.searchText) && (
        <button
          type="button"
          className="inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
          onClick={() => clearOverrides(databaseId, view.id)}
          title="Reset ad-hoc filters, sorts, groups and search"
        >
          <CalendarRange className="hidden" aria-hidden />
          Reset
        </button>
      )}
    </div>
  );
}