"use client";

/**
 * GroupBuilder — group specs (docs/api/databases.md §5.4):
 *   [{ propertyId, direction }] (0–3 levels; board/table/list/gallery).
 * Board views require the group property to be select/status/multi_select/
 * person/date (server validates → 422 otherwise); we surface a hint.
 */
import { Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { DatabaseProperty, GroupSpec } from "@/hooks/use-database";

const inputCls =
  "rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring";

/** Property types the server accepts as group keys (board). */
export const GROUPABLE_TYPES = new Set(["select", "status", "multi_select", "person", "date"]);

export function isGroupable(p: DatabaseProperty): boolean {
  return GROUPABLE_TYPES.has(p.type);
}

export interface GroupBuilderProps {
  value: GroupSpec[] | null;
  onChange: (group: GroupSpec[] | null) => void;
  properties: DatabaseProperty[];
  /** Board views restrict group keys to select/status/multi_select/person/date. */
  viewType?: string;
  className?: string;
}

export function GroupBuilder({ value, onChange, properties, viewType, className }: GroupBuilderProps) {
  const groups = value ?? [];
  const used = new Set(groups.map((g) => g.propertyId));
  const allCandidates = viewType === "board" ? properties.filter(isGroupable) : properties;
  const available = allCandidates.filter((p) => !used.has(p.id));

  if (allCandidates.length === 0) {
    return (
      <p className="px-1 py-2 text-xs text-muted-foreground">
        {viewType === "board"
          ? "Group by a select, status, multi-select, person or date property (add one first)."
          : "Add properties before grouping."}
      </p>
    );
  }

  return (
    <div className={className}>
      {groups.map((g, i) => (
        <div key={i} className="flex items-center gap-1.5 py-1">
          <span className="text-xs text-muted-foreground">Level {i + 1}:</span>
          <select
            className={cn(inputCls, "w-36")}
            value={g.propertyId}
            onChange={(e) => {
              const next = groups.map((x, j) => (j === i ? { ...x, propertyId: e.target.value } : x));
              onChange(next);
            }}
            aria-label={`Group property level ${i + 1}`}
          >
            {allCandidates.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </select>
          <select
            className={cn(inputCls, "w-24")}
            value={g.direction}
            onChange={(e) => {
              const next = groups.map((x, j) => (j === i ? { ...x, direction: e.target.value as "asc" | "desc" } : x));
              onChange(next);
            }}
            aria-label={`Group direction level ${i + 1}`}
          >
            <option value="asc">Ascending</option>
            <option value="desc">Descending</option>
          </select>
          <button
            type="button"
            className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-destructive"
            onClick={() => onChange(groups.filter((_, j) => j !== i))}
            aria-label="Remove group level"
          >
            <X className="size-3.5" />
          </button>
        </div>
      ))}
      {groups.length === 0 && <p className="py-1 text-xs text-muted-foreground">No grouping — records render in view order.</p>}
      <div className="flex items-center gap-2 pt-1">
        <button
          type="button"
          disabled={groups.length >= 3 || available.length === 0}
          className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-primary hover:bg-muted disabled:opacity-40"
          onClick={() => {
            const p = available[0];
            onChange([...groups, { propertyId: p.id, direction: "asc" }]);
          }}
        >
          <Plus className="size-3" /> Add group level
        </button>
        {groups.length > 0 && (
          <button type="button" className="rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-muted hover:text-destructive" onClick={() => onChange(null)}>
            Clear
          </button>
        )}
      </div>
    </div>
  );
}