"use client";

/**
 * Automations editor — CONDITION section (0..1 condition tree).
 *
 * Minimum required by the spec: a "No condition" toggle + a single
 * leaf-predicate row (field dropdown record-property/event-field, operator,
 * value). Advanced mode is a raw-JSON textarea for the full tree
 * ({ op: AND|OR, children[] } / { op: NOT, child } / predicate), validated
 * client-side with zod (mirroring @factory/shared/automation's
 * CONDITION_EXPRESSION_SCHEMA) before save; server 422 details are surfaced
 * below the editor.
 */
import { useState } from "react";
import { Plus, Trash2 } from "lucide-react";
import { z } from "zod";
import { inputCls } from "@/components/settings/settings-shell";
import { CONDITION_OPERATORS, type ConditionDraft, type ConditionOperator } from "./lib";

/** Local mirror of the shared condition expression schema (zod 3, client-safe). */
const PREDICATE = z
  .object({
    field: z.object({ ref: z.enum(["event", "property"]), name: z.string().min(1).max(200) }).strict(),
    operator: z.enum(["eq", "neq", "contains", "not_contains", "starts_with", "ends_with", "gt", "gte", "lt", "lte", "in", "not_in", "is_empty", "is_not_empty"]),
    value: z.union([z.string(), z.number(), z.boolean(), z.null(), z.array(z.union([z.string(), z.number(), z.boolean()]))]).optional()
  })
  .strict();

export const CONDITION_TREE: z.ZodType<unknown> = z.lazy(() =>
  z.union([
    z
      .object({
        op: z.enum(["AND", "OR"]),
        children: z.array(CONDITION_TREE).min(1).max(100)
      })
      .strict(),
    z.object({ op: z.literal("NOT"), child: CONDITION_TREE }).strict(),
    PREDICATE
  ])
);

/** Validate a raw-JSON condition string. Returns the first issue message or null. */
export function validateConditionJson(raw: string): string | null {
  let parsed: unknown;
  try {
    parsed = JSON.parse(raw);
  } catch (e) {
    return `Invalid JSON: ${(e as Error).message}`;
  }
  const r = CONDITION_TREE.safeParse(parsed);
  if (r.success) return null;
  const first = r.error.issues[0];
  return first ? `Invalid condition: ${first.path.join(".") || "condition"} — ${first.message}` : "Invalid condition.";
}

interface ConditionEditorProps {
  draft: ConditionDraft;
  onChange: (d: ConditionDraft) => void;
}

export function ConditionEditor({ draft, onChange }: ConditionEditorProps) {
  const [mode, setMode] = useState<"simple" | "json">(draft.json.trim() ? "json" : "simple");
  const [localError, setLocalError] = useState<string | null>(null);

  const simpleMode = mode === "simple";
  const showValue = simpleMode && draft.operator !== "exists";

  const setField = (patch: Partial<ConditionDraft>) =>
    onChange({ ...draft, ...(simpleMode ? { json: "" } : {}), ...patch });

  const switchMode = (m: "simple" | "json") => {
    setLocalError(null);
    // Leaving JSON mode discards the raw text so the simple row drives save
    // (no stale-tree shadowing). Entering JSON mode seeds the editor below.
    onChange({ ...draft, ...(m === "simple" ? { json: "" } : {}) });
    setMode(m);
  };

  const toJsonText = () => {
    const trimmed = draft.json.trim();
    if (trimmed) return trimmed;
    const opMap: Record<ConditionOperator, string> = {
      "=": "eq",
      "!=": "neq",
      ">": "gt",
      "<": "lt",
      contains: "contains",
      exists: "is_not_empty"
    };
    const predicate: Record<string, unknown> = {
      field: { ref: draft.fieldRef, name: draft.fieldName || "property" },
      operator: opMap[draft.operator]
    };
    if (draft.operator !== "exists" && draft.value.trim() !== "") predicate.value = draft.value;
    return JSON.stringify(predicate, null, 2);
  };

  return (
    <div className="space-y-3">
      {!draft.hasCondition ? (
        <button
          type="button"
          data-testid="automation-condition-add"
          className="inline-flex items-center gap-1.5 rounded-md border border-dashed px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground"
          onClick={() => setField({ hasCondition: true })}
        >
          <Plus className="size-4" /> Add condition
        </button>
      ) : (
        <>
          <div className="flex items-center gap-1.5 text-xs">
            <button
              type="button"
              className={`rounded-md border px-2 py-1 ${simpleMode ? "border-primary text-foreground" : "text-muted-foreground"}`}
              onClick={() => switchMode("simple")}
            >
              Simple
            </button>
            <button
              type="button"
              className={`rounded-md border px-2 py-1 ${!simpleMode ? "border-primary text-foreground" : "text-muted-foreground"}`}
              onClick={() => switchMode("json")}
            >
              JSON
            </button>
            <span className="flex-1" />
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted-foreground hover:text-destructive"
              onClick={() => setField({ hasCondition: false, json: "" })}
            >
              <Trash2 className="size-3.5" /> No condition
            </button>
          </div>

          {simpleMode ? (
            <div className="grid gap-2 sm:grid-cols-[1fr_1fr_100px_1fr]">
              <label className="block">
                <span className="mb-1 block text-xs font-medium text-muted-foreground">Field</span>
                <div className="flex gap-1">
                  <select
                    className="w-28 shrink-0 rounded-md border border-input bg-background px-1.5 py-1.5 text-sm"
                    value={draft.fieldRef}
                    aria-label="Condition field source"
                    onChange={(e) => setField({ fieldRef: e.target.value as "property" | "event" })}
                  >
                    <option value="property">Record property</option>
                    <option value="event">Event field</option>
                  </select>
                  <input
                    className={`${inputCls} min-w-0 flex-1`}
                    placeholder="e.g. Status"
                    value={draft.fieldName}
                    onChange={(e) => setField({ fieldName: e.target.value })}
                  />
                </div>
              </label>
              <label className="block">
                <span className="mb-1 block text-xs font-medium text-muted-foreground">Operator</span>
                <select
                  className={`${inputCls} rounded-md`}
                  value={draft.operator}
                  aria-label="Condition operator"
                  onChange={(e) => setField({ operator: e.target.value as ConditionOperator })}
                >
                  {CONDITION_OPERATORS.map((op) => (
                    <option key={op} value={op}>
                      {op === "exists" ? "exists" : op}
                    </option>
                  ))}
                </select>
              </label>
              <label className="block sm:col-span-2">
                <span className="mb-1 block text-xs font-medium text-muted-foreground">Value{showValue ? "" : " (not needed)"}</span>
                <input
                  className={inputCls}
                  placeholder={showValue ? "e.g. In progress" : ""}
                  disabled={!showValue}
                  value={draft.value}
                  onChange={(e) => setField({ value: e.target.value })}
                />
              </label>
            </div>
          ) : (
            <div>
              <textarea
                className={`${inputCls} min-h-36 font-mono text-xs`}
                value={draft.json.trim() ? draft.json : toJsonText()}
                placeholder='{"field":{"ref":"property","name":"Status"},"operator":"eq","value":"In progress"}'
                onChange={(e) => {
                  const v = e.target.value;
                  setLocalError(v.trim() ? validateConditionJson(v) : null);
                  setField({ json: v });
                }}
                aria-label="Condition JSON"
              />
              {localError && <p className="mt-1 text-xs text-destructive">{localError}</p>}
            </div>
          )}
        </>
      )}
    </div>
  );
}