"use client";

/**
 * Automations editor — ACTIONS section (ordered 1..50).
 * Per-action knobs (retries 1..8, timeoutMs 1000..300000) + per-type config.
 * Field sets follow the real strict ActionConfigSchemas (see lib.ts
 * actionConfigPayload for the documented mapping of the task's illustrative
 * field list onto the actual API schema).
 */
import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
import { inputCls } from "@/components/settings/settings-shell";
import {
  ACTION_LABELS,
  ACTION_RETRY_DEFAULT,
  ACTION_RETRY_MAX,
  ACTION_RETRY_MIN,
  ACTION_TIMEOUT_DEFAULT_MS,
  ACTION_TIMEOUT_MAX_MS,
  ACTION_TIMEOUT_MIN_MS,
  AI_TASKS,
  AUTOMATION_ACTION_TYPES,
  AUTOMATION_MAX_ACTIONS,
  NOTIFICATION_TYPES,
  type ActionDraft,
  type AutomationActionType
} from "./lib";

interface ActionEditorProps {
  actions: ActionDraft[];
  onChange: (actions: ActionDraft[]) => void;
}

const secToMs = (s: number) => Math.round(s * 1000);
const msToSec = (ms: number) => Math.round(ms / 1000);

export function ActionEditor({ actions, onChange }: ActionEditorProps) {
  const update = (i: number, patch: Partial<ActionDraft>) => {
    const next = [...actions];
    next[i] = { ...next[i]!, ...patch };
    onChange(next);
  };
  const setCfg = (i: number, key: string, value: string) => {
    const a = actions[i]!;
    update(i, { config: { ...a.config, [key]: value } });
  };
  const move = (i: number, dir: -1 | 1) => {
    const j = i + dir;
    if (j < 0 || j >= actions.length) return;
    const next = [...actions];
    const tmp = next[i]!;
    next[i] = next[j]!;
    next[j] = tmp;
    onChange(next);
  };
  const remove = (i: number) => onChange(actions.filter((_a, idx) => idx !== i));
  const add = () => {
    if (actions.length >= AUTOMATION_MAX_ACTIONS) return;
    onChange([
      ...actions,
      { type: "RUN_AI_ACTION", config: {}, retries: ACTION_RETRY_DEFAULT, timeoutMs: ACTION_TIMEOUT_DEFAULT_MS }
    ]);
  };

  return (
    <div className="space-y-3">
      {actions.length === 0 && (
        <p className="text-sm text-muted-foreground">No actions yet. An automation needs at least one action to run.</p>
      )}
      {actions.map((a, i) => (
        <div key={i} className="rounded-md border border-border p-3">
          <div className="flex items-center gap-2">
            <span className="text-xs font-medium text-muted-foreground">{i + 1}.</span>
            <select
              className="rounded-md border border-input bg-background px-2 py-1 text-sm"
              value={a.type}
              aria-label={`Action ${i + 1} type`}
              onChange={(e) => update(i, { type: e.target.value as AutomationActionType, config: {} })}
            >
              {AUTOMATION_ACTION_TYPES.map((type) => (
                <option key={type} value={type}>
                  {ACTION_LABELS[type]}
                </option>
              ))}
            </select>
            <span className="flex-1" />
            <button
              type="button"
              className="rounded-md p-1 text-muted-foreground hover:bg-muted disabled:opacity-30"
              onClick={() => move(i, -1)}
              disabled={i === 0}
              aria-label={`Move action ${i + 1} up`}
            >
              <ArrowUp className="size-4" />
            </button>
            <button
              type="button"
              className="rounded-md p-1 text-muted-foreground hover:bg-muted disabled:opacity-30"
              onClick={() => move(i, 1)}
              disabled={i === actions.length - 1}
              aria-label={`Move action ${i + 1} down`}
            >
              <ArrowDown className="size-4" />
            </button>
            <button
              type="button"
              className="rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
              onClick={() => remove(i)}
              aria-label={`Remove action ${i + 1}`}
            >
              <Trash2 className="size-4" />
            </button>
          </div>

          <div className="mt-2.5 grid gap-2 sm:grid-cols-2">
            {a.type === "UPDATE_RECORD" && (
              <>
                <Cfg label="Record id (default from_trigger)" value={a.config.recordId ?? ""} onChange={(v) => setCfg(i, "recordId", v)} />
                <Cfg label="Property name" value={a.config.propertyName ?? ""} onChange={(v) => setCfg(i, "propertyName", v)} />
                <Cfg label="Value" value={a.config.value ?? ""} onChange={(v) => setCfg(i, "value", v)} />
              </>
            )}
            {a.type === "CHANGE_STATUS" && (
              <>
                <Cfg label="Record id (default from_trigger)" value={a.config.recordId ?? ""} onChange={(v) => setCfg(i, "recordId", v)} />
                <Cfg label="Status/Select property id" value={a.config.propertyId ?? ""} onChange={(v) => setCfg(i, "propertyId", v)} />
                <Cfg label="Option name" value={a.config.value ?? ""} onChange={(v) => setCfg(i, "value", v)} />
              </>
            )}
            {a.type === "ASSIGN_USER" && (
              <>
                <Cfg label="Record id (default from_trigger)" value={a.config.recordId ?? ""} onChange={(v) => setCfg(i, "recordId", v)} />
                <Cfg label="Person property id" value={a.config.propertyId ?? ""} onChange={(v) => setCfg(i, "propertyId", v)} />
                <Cfg label="User id" value={a.config.userId ?? ""} onChange={(v) => setCfg(i, "userId", v)} />
              </>
            )}
            {a.type === "CREATE_NOTIFICATION" && (
              <>
                <label className="block">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Notification type</span>
                  <select className={inputCls} value={a.config.type ?? "AUTOMATION"} onChange={(e) => setCfg(i, "type", e.target.value)}>
                    {NOTIFICATION_TYPES.map((t) => (
                      <option key={t} value={t}>
                        {t}
                      </option>
                    ))}
                  </select>
                </label>
                <label className="block sm:col-span-2">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Message (supports {"{{…}}"} interpolation)</span>
                  <input className={inputCls} value={a.config.body ?? ""} onChange={(e) => setCfg(i, "body", e.target.value)} />
                </label>
              </>
            )}
            {a.type === "CREATE_PAGE" && (
              <>
                <Cfg label="Page title" value={a.config.title ?? ""} onChange={(v) => setCfg(i, "title", v)} />
                <Cfg label="Parent page id (optional)" value={a.config.parentPageId ?? ""} onChange={(v) => setCfg(i, "parentPageId", v)} />
              </>
            )}
            {a.type === "SEND_WEBHOOK" && (
              <>
                <label className="block sm:col-span-2">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">URL (https only)</span>
                  <input className={inputCls} placeholder="https://example.com/hook" value={a.config.url ?? ""} onChange={(e) => setCfg(i, "url", e.target.value)} />
                </label>
                <label className="block">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Headers (JSON object, optional)</span>
                  <textarea className={`${inputCls} min-h-16 font-mono text-xs`} value={a.config.headersJson ?? ""} onChange={(e) => setCfg(i, "headersJson", e.target.value)} />
                </label>
                <label className="block">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Payload (JSON object, optional)</span>
                  <textarea className={`${inputCls} min-h-16 font-mono text-xs`} value={a.config.bodyTemplate ?? ""} onChange={(e) => setCfg(i, "bodyTemplate", e.target.value)} />
                </label>
              </>
            )}
            {a.type === "SEND_EMAIL" && (
              <>
                <Cfg label="To (email, trigger_user or automation_creator)" value={a.config.to ?? ""} onChange={(v) => setCfg(i, "to", v)} />
                <Cfg label="Subject" value={a.config.subject ?? ""} onChange={(v) => setCfg(i, "subject", v)} />
                <label className="block sm:col-span-2">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Body</span>
                  <textarea className={`${inputCls} min-h-20`} value={a.config.body ?? ""} onChange={(e) => setCfg(i, "body", e.target.value)} />
                </label>
              </>
            )}
            {a.type === "CALL_INTEGRATION" && (
              <>
                <Cfg label="Integration id" value={a.config.integrationId ?? ""} onChange={(v) => setCfg(i, "integrationId", v)} />
                <Cfg label="Operation" value={a.config.operation ?? ""} onChange={(v) => setCfg(i, "operation", v)} />
                <Cfg label="Params (optional)" value={a.config.params ?? ""} onChange={(v) => setCfg(i, "params", v)} />
              </>
            )}
            {a.type === "RUN_AI_ACTION" && (
              <>
                <label className="block">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Task</span>
                  <select className={inputCls} value={a.config.task ?? "summarize"} onChange={(e) => setCfg(i, "task", e.target.value)}>
                    {AI_TASKS.map((t) => (
                      <option key={t} value={t}>
                        {t}
                      </option>
                    ))}
                  </select>
                </label>
                <label className="block sm:col-span-2">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Prompt (supports {"{{…}}"} interpolation)</span>
                  <textarea className={`${inputCls} min-h-20`} value={a.config.prompt ?? ""} onChange={(e) => setCfg(i, "prompt", e.target.value)} />
                </label>
              </>
            )}
          </div>

          <div className="mt-2.5 flex flex-wrap items-center gap-4 border-t border-border pt-2">
            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
              Retries
              <input
                type="number"
                min={ACTION_RETRY_MIN}
                max={ACTION_RETRY_MAX}
                className="w-16 rounded-md border border-input bg-background px-2 py-1 text-sm"
                value={a.retries}
                onChange={(e) => {
                  const n = Number(e.target.value);
                  update(i, { retries: Number.isFinite(n) ? Math.min(ACTION_RETRY_MAX, Math.max(ACTION_RETRY_MIN, Math.round(n))) : ACTION_RETRY_DEFAULT });
                }}
              />
            </label>
            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
              Timeout (s)
              <input
                type="number"
                min={msToSec(ACTION_TIMEOUT_MIN_MS)}
                max={msToSec(ACTION_TIMEOUT_MAX_MS)}
                step={1}
                className="w-20 rounded-md border border-input bg-background px-2 py-1 text-sm"
                value={msToSec(a.timeoutMs)}
                onChange={(e) => {
                  const n = Number(e.target.value);
                  update(i, { timeoutMs: Number.isFinite(n) ? Math.min(ACTION_TIMEOUT_MAX_MS, Math.max(ACTION_TIMEOUT_MIN_MS, secToMs(n))) : ACTION_TIMEOUT_DEFAULT_MS });
                }}
              />
            </label>
          </div>
        </div>
      ))}

      <button
        type="button"
        data-testid="automation-action-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={add}
      >
        <Plus className="size-4" /> Add action
      </button>
    </div>
  );
}

function Cfg({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
  return (
    <label className="block">
      <span className="mb-1 block text-xs font-medium text-muted-foreground">{label}</span>
      <input className={inputCls} value={value} onChange={(e) => onChange(e.target.value)} />
    </label>
  );
}