"use client";

/**
 * FormulaEditor — dialog for writing/editing a formula property expression.
 *
 * Expressions are validated server-side (safe AST parser — never eval,
 * PRODUCT-SPEC §9.6 / AGENTS rule 18): debounced POST
 * /databases/:id/formulas/validate with sampleRecordIds, showing the
 * returned returnType + sample values or the error with its position.
 *
 * A function library cheat-sheet (left column) lets users insert functions.
 * Saving PATCHes the property's config.expression.
 *
 * Contract (imported by cell-editor.tsx):
 *   <FormulaEditor databaseId property initialExpression sampleRecordIds onClose onSaved />
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Check, Loader2, Save, X } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DatabaseProperty,
  FormulaValidationResult,
  useUpdateProperty,
  useValidateFormula
} from "@/hooks/use-database";

const FUNCTIONS: { name: string; signature: string; desc: string }[] = [
  { name: "if", signature: "if(cond, a, b)", desc: "Return a if cond, else b" },
  { name: "and", signature: "and(a, b, …)", desc: "Logical AND" },
  { name: "or", signature: "or(a, b, …)", desc: "Logical OR" },
  { name: "not", signature: "not(a)", desc: "Logical NOT" },
  { name: "plus", signature: "plus(a, b, …)", desc: "Numeric sum" },
  { name: "minus", signature: "minus(a, b)", desc: "Numeric difference" },
  { name: "times", signature: "times(a, b)", desc: "Numeric product" },
  { name: "divide", signature: "divide(a, b)", desc: "Numeric quotient (0 → null)" },
  { name: "mod", signature: "mod(a, b)", desc: "Remainder" },
  { name: "abs", signature: "abs(n)", desc: "Absolute value" },
  { name: "round", signature: "round(n, d=0)", desc: "Round to d decimals" },
  { name: "min", signature: "min(…)", desc: "Smallest value" },
  { name: "max", signature: "max(…)", desc: "Largest value" },
  { name: "power", signature: "power(n, e)", desc: "n raised to e" },
  { name: "sqrt", signature: "sqrt(n)", desc: "Square root" },
  { name: "concat", signature: "concat(a, b, …)", desc: "Concatenate as text" },
  { name: "upper", signature: "upper(s)", desc: "Uppercase" },
  { name: "lower", signature: "lower(s)", desc: "Lowercase" },
  { name: "len", signature: "len(s)", desc: "String length" },
  { name: "contains", signature: "contains(s, sub)", desc: "Substring test" },
  { name: "trim", signature: "trim(s)", desc: "Trim whitespace" },
  { name: "now", signature: "now()", desc: "Current date/time" },
  { name: "today", signature: "today()", desc: "Current date" },
  { name: "date", signature: "date(iso)", desc: "Parse an ISO date" },
  { name: "years", signature: "years(a, b)", desc: "Year difference" },
  { name: "months", signature: "months(a, b)", desc: "Month difference" },
  { name: "days", signature: "days(a, b)", desc: "Day difference" },
  { name: "format", signature: "format(v, f)", desc: "Format per f (currency, percent…)" }
];

export interface FormulaEditorProps {
  databaseId: string;
  property: DatabaseProperty;
  initialExpression: string;
  /** Record ids to evaluate the expression against (live preview). */
  sampleRecordIds: string[];
  onClose: () => void;
  onSaved: () => void;
}

export function FormulaEditor({
  databaseId,
  property,
  initialExpression,
  sampleRecordIds,
  onClose,
  onSaved
}: FormulaEditorProps) {
  const [expr, setExpr] = useState(initialExpression);
  const [validation, setValidation] = useState<FormulaValidationResult | null>(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const validate = useValidateFormula(databaseId);
  const updateProperty = useUpdateProperty(databaseId);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Debounced server-side validation while typing.
  const scheduleValidate = useCallback(
    (value: string) => {
      if (timer.current) clearTimeout(timer.current);
      if (!value.trim()) {
        setValidation(null);
        return;
      }
      timer.current = setTimeout(() => {
        validate.mutate({ expression: value, sampleRecordIds: sampleRecordIds.slice(0, 5) }, {
          onSuccess: (res) => {
            setValidation(res);
            setError(null);
          },
          onError: (e) => {
            setValidation(null);
            setError((e as Error).message);
          }
        });
      }, 400);
    },
    [validate, sampleRecordIds]
  );

  useEffect(() => {
    inputRef.current?.focus();
    return () => {
      if (timer.current) clearTimeout(timer.current);
    };
  }, []);

  // Escape closes (but not while a menu is open — no menu here).
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  const insertFunction = (name: string) => {
    const el = inputRef.current;
    const token = `${name}(`;
    if (!el) {
      setExpr((e) => e + token);
      return;
    }
    const start = el.selectionStart ?? expr.length;
    const end = el.selectionEnd ?? expr.length;
    const next = expr.slice(0, start) + token + expr.slice(end);
    setExpr(next);
    requestAnimationFrame(() => {
      el.focus();
      el.setSelectionRange(start + token.length - 1, start + token.length - 1);
    });
    scheduleValidate(next);
  };

  const canSave = expr.trim().length > 0 && validation?.ok === true;
  const functionIndex = useMemo(() => FUNCTIONS.map((f) => f.name.toLowerCase()).sort(), []);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" role="dialog" aria-modal="true" aria-label="Formula editor">
      <div className="flex max-h-[85vh] w-full max-w-3xl flex-col overflow-hidden rounded-lg border bg-background shadow-xl">
        {/* header */}
        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
          <span className="text-sm font-medium">
            Formula: <span className="text-primary">{property.name}</span>
          </span>
          <div className="ml-auto flex items-center gap-1">
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40"
              disabled={!canSave || saving}
              onClick={() => {
                setSaving(true);
                updateProperty.mutate(
                  { propertyId: property.id, config: { ...property.config, expression: expr } },
                  {
                    onSuccess: () => onSaved(),
                    onError: (e) => {
                      setError((e as Error).message);
                      setSaving(false);
                    }
                  }
                );
              }}
            >
              {saving ? <Loader2 className="size-3.5 animate-spin" /> : <Save className="size-3.5" />}
              Save
            </button>
            <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted" onClick={onClose} aria-label="Close">
              <X className="size-4" />
            </button>
          </div>
        </div>

        <div className="flex min-h-0 flex-1">
          {/* function library */}
          <aside className="hidden w-64 shrink-0 flex-col border-r border-border sm:flex">
            <div className="border-b border-border px-3 py-2">
              <input
                className="w-full rounded border border-input bg-background px-2 py-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
                placeholder="Filter functions…"
                aria-label="Filter functions"
                onKeyDown={(e) => {
                  const list = functionIndex.filter((n) => n.startsWith((e.currentTarget.value || "").toLowerCase()));
                  if (e.key === "Enter" && list.length > 0) insertFunction(FUNCTIONS.find((f) => f.name === list[0])!.name);
                }}
              />
            </div>
            <ul className="min-h-0 flex-1 overflow-y-auto p-2 text-xs">
              {FUNCTIONS.map((f) => (
                <li key={f.name}>
                  <button
                    type="button"
                    className="w-full rounded px-2 py-1 text-left hover:bg-muted"
                    onClick={() => insertFunction(f.name)}
                    title={f.desc}
                  >
                    <span className="font-mono text-primary">{f.name}</span>
                    <span className="ml-1 text-muted-foreground">{f.signature.replace(`${f.name}`, "")}</span>
                    <span className="mt-0.5 block truncate text-[10px] text-muted-foreground">{f.desc}</span>
                  </button>
                </li>
              ))}
            </ul>
          </aside>

          {/* editor + preview */}
          <div className="flex min-w-0 flex-1 flex-col p-4">
            <label className="mb-1 text-xs text-muted-foreground">Expression</label>
            <textarea
              ref={inputRef}
              className="h-28 w-full resize-none rounded-md border border-input bg-background p-2 font-mono text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
              placeholder="e.g. if(status = &quot;Done&quot;, plus(price, 10), price)"
              value={expr}
              spellCheck={false}
              onChange={(e) => {
                setExpr(e.target.value);
                scheduleValidate(e.target.value);
              }}
            />

            {/* validation status */}
            <div className="mt-2 min-h-6">
              {validate.isPending && (
                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                  <Loader2 className="size-3 animate-spin" /> Checking expression…
                </span>
              )}
              {validation?.ok && (
                <span className="inline-flex items-center gap-1 text-xs text-emerald-600">
                  <Check className="size-3.5" /> Valid — returns {validation.returnType ?? "value"}
                </span>
              )}
              {!validation?.ok && validation?.error && (
                <span className="text-xs text-destructive">
                  {validation.error}
                  {validation.position != null && (
                    <span className="ml-1 text-muted-foreground">(position {validation.position})</span>
                  )}
                </span>
              )}
              {error && <span className="text-xs text-destructive">{error}</span>}
            </div>

            {/* sample preview */}
            {validation?.ok && validation.samples && validation.samples.length > 0 && (
              <div className="mt-2 rounded-md border border-border">
                <p className="border-b border-border px-2 py-1 text-[11px] font-medium text-muted-foreground">Sample values</p>
                <ul className="max-h-32 overflow-y-auto text-xs">
                  {validation.samples.map((s, i) => (
                    <li key={s.recordId} className="flex items-center gap-2 border-b border-border/40 px-2 py-1 last:border-b-0">
                      <span className="w-16 truncate text-muted-foreground" title={s.recordId}>
                        …{s.recordId.slice(-6)}
                      </span>
                      {s.error ? (
                        <span className="text-destructive" title={s.error}>
                          ⚠ {s.error}
                        </span>
                      ) : (
                        <span className="font-mono">{s.value == null ? "∅" : String(s.value)}</span>
                      )}
                      {i > 4 && null}
                    </li>
                  ))}
                </ul>
              </div>
            )}

            <p className="mt-auto pt-3 text-[11px] text-muted-foreground">
              Formulas are evaluated by the server's safe parser — arbitrary code is never executed. Property references use the
              property name, e.g. <code className="rounded bg-muted px-1">status</code>, or the syntax shown in the function list.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}