"use client";

/**
 * SortBuilder — ordered sort specs (docs/api/databases.md §5.4):
 *   [{ propertyId, direction }] (0–8 entries, stable; ties by position/id).
 * Pure editor; the query engine applies sorting server-side.
 */
import { ArrowDown, ArrowUp, Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { DatabaseProperty, SortSpec } 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";

export interface SortBuilderProps {
  value: SortSpec[] | null;
  onChange: (sort: SortSpec[] | null) => void;
  properties: DatabaseProperty[];
  className?: string;
}

export function SortBuilder({ value, onChange, properties, className }: SortBuilderProps) {
  const sorts = value ?? [];
  const usedProps = new Set(sorts.map((s) => s.propertyId));
  const available = properties.filter((p) => !usedProps.has(p.id) || p.isTitle);

  if (properties.length === 0) {
    return <p className="px-1 py-2 text-xs text-muted-foreground">Add properties before sorting.</p>;
  }

  return (
    <div className={className}>
      {sorts.map((s, i) => (
        <div key={i} className="flex items-center gap-1.5 py-1">
          <select
            className={cn(inputCls, "w-36")}
            value={s.propertyId}
            onChange={(e) => {
              const next = sorts.map((x, j) => (j === i ? { ...x, propertyId: e.target.value } : x));
              onChange(next);
            }}
            aria-label={`Sort property ${i + 1}`}
          >
            {properties.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </select>
          <select
            className={cn(inputCls, "w-24")}
            value={s.direction}
            onChange={(e) => {
              const next = sorts.map((x, j) => (j === i ? { ...x, direction: e.target.value as "asc" | "desc" } : x));
              onChange(next);
            }}
            aria-label={`Direction ${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 disabled:opacity-30"
            disabled={i === 0}
            onClick={() => {
              const next = [...sorts];
              [next[i - 1], next[i]] = [next[i], next[i - 1]];
              onChange(next);
            }}
            aria-label="Move sort up"
          >
            <ArrowUp className="size-3.5" />
          </button>
          <button
            type="button"
            className="rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
            disabled={i === sorts.length - 1}
            onClick={() => {
              const next = [...sorts];
              [next[i + 1], next[i]] = [next[i], next[i + 1]];
              onChange(next);
            }}
            aria-label="Move sort down"
          >
            <ArrowDown className="size-3.5" />
          </button>
          <button
            type="button"
            className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-destructive"
            onClick={() => onChange(sorts.filter((_, j) => j !== i))}
            aria-label="Remove sort"
          >
            <X className="size-3.5" />
          </button>
        </div>
      ))}
      {sorts.length === 0 && <p className="py-1 text-xs text-muted-foreground">No sorts — records stay in position order.</p>}
      <div className="flex items-center gap-2 pt-1">
        <button
          type="button"
          disabled={sorts.length >= 8 || 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([...sorts, { propertyId: p.id, direction: "asc" }]);
          }}
        >
          <Plus className="size-3" /> Add sort
        </button>
        {sorts.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 all
          </button>
        )}
      </div>
    </div>
  );
}