"use client";

/**
 * Automations editor — TRIGGERS section (1..3, OR-semantics).
 * Per-type config inputs per @factory/shared/automation trigger schemas:
 *   RECORD_CREATED / PAGE_CREATED / FORM_SUBMITTED / MANUAL / SCHEDULE:
 *     optional databaseId (record/form ones); SCHEDULE adds cron + timezone.
 *   RECORD_UPDATED / PROPERTY_CHANGED: optional `properties` (comma list;
 *     REQUIRED non-empty for PROPERTY_CHANGED).
 *   WEBHOOK: read-only URL + webhookId + "Regenerate secret" button.
 */
import { useEffect, useState } from "react";
import { Loader2, Plus, RefreshCw, Trash2 } from "lucide-react";
import { workspaceApi } from "@/lib/api";
import { inputCls } from "@/components/settings/settings-shell";
import {
  AUTOMATION_MAX_TRIGGERS,
  AUTOMATION_TRIGGER_TYPES,
  TRIGGER_LABELS,
  type AutomationTriggerType,
  type TriggerDraft
} from "./lib";

const SELECT_TYPES = new Set<AutomationTriggerType>(["RECORD_CREATED", "RECORD_UPDATED", "PROPERTY_CHANGED", "FORM_SUBMITTED"]);

interface TriggerEditorProps {
  triggers: TriggerDraft[];
  onChange: (triggers: TriggerDraft[]) => void;
  workspaceId: string;
  /** Webhook secret regeneration (parent owns the mutation + one-time reveal). */
  onRegenerateWebhook?: () => void;
  regenerating?: boolean;
}

export function TriggerEditor({ triggers, onChange, workspaceId, onRegenerateWebhook, regenerating }: TriggerEditorProps) {
  const [databases, setDatabases] = useState<{ id: string; title: string }[]>([]);

  useEffect(() => {
    if (!workspaceId) return;
    workspaceApi
      .databases(workspaceId, { limit: 100 })
      .then((dbs) => setDatabases(dbs.map((d) => ({ id: d.id, title: d.title }))))
      .catch(() => setDatabases([]));
  }, [workspaceId]);

  const update = (i: number, patch: Partial<TriggerDraft>) => {
    const next = [...triggers];
    next[i] = { ...next[i]!, ...patch };
    onChange(next);
  };

  const updateConfig = (i: number, key: string, value: string) => {
    const t = triggers[i]!;
    update(i, { config: { ...t.config, [key]: value } });
  };

  const add = () => {
    if (triggers.length >= AUTOMATION_MAX_TRIGGERS) return;
    onChange([...triggers, { type: "MANUAL", config: {} }]);
  };

  const remove = (i: number) => onChange(triggers.filter((_t, idx) => idx !== i));

  return (
    <div className="space-y-3">
      {triggers.length === 0 && <p className="text-sm text-muted-foreground">No triggers yet — the automation only runs manually via the Run now button.</p>}
      {triggers.map((t, 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={t.type}
              aria-label={`Trigger ${i + 1} type`}
              onChange={(e) => update(i, { type: e.target.value as AutomationTriggerType, config: {} })}
            >
              {AUTOMATION_TRIGGER_TYPES.map((type) => (
                <option key={type} value={type}>
                  {TRIGGER_LABELS[type]}
                </option>
              ))}
            </select>
            <span className="flex-1" />
            <button
              type="button"
              className="rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
              onClick={() => remove(i)}
              disabled={triggers.length <= 1}
              aria-label={`Remove trigger ${i + 1}`}
            >
              <Trash2 className="size-4" />
            </button>
          </div>

          <div className="mt-2.5 grid gap-2 sm:grid-cols-2">
            {SELECT_TYPES.has(t.type) && (
              <label className="block sm:col-span-2">
                <span className="mb-1 block text-xs font-medium text-muted-foreground">Database (optional — all databases when empty)</span>
                <input
                  className={inputCls}
                  list={`auto-db-${i}`}
                  placeholder="Database id (optional)"
                  value={String(t.config.databaseId ?? "")}
                  onChange={(e) => updateConfig(i, "databaseId", e.target.value)}
                />
                <datalist id={`auto-db-${i}`}>
                  {databases.map((d) => (
                    <option key={d.id} value={d.id}>
                      {d.title}
                    </option>
                  ))}
                </datalist>
              </label>
            )}

            {(t.type === "RECORD_UPDATED" || t.type === "PROPERTY_CHANGED") && (
              <label className="block sm:col-span-2">
                <span className="mb-1 block text-xs font-medium text-muted-foreground">
                  Property names {t.type === "PROPERTY_CHANGED" ? "(required, comma-separated)" : "(optional, comma-separated)"}
                </span>
                <input
                  className={inputCls}
                  placeholder="Status, Priority, …"
                  value={String(t.config.properties ?? "")}
                  onChange={(e) => updateConfig(i, "properties", e.target.value)}
                />
              </label>
            )}

            {t.type === "SCHEDULE" && (
              <>
                <label className="block">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Cron expression (min interval 60 s)</span>
                  <input
                    className={inputCls}
                    placeholder="0 * * * *"
                    value={String(t.config.cron ?? "")}
                    onChange={(e) => updateConfig(i, "cron", e.target.value)}
                  />
                </label>
                <label className="block">
                  <span className="mb-1 block text-xs font-medium text-muted-foreground">Timezone (optional)</span>
                  <input
                    className={inputCls}
                    placeholder="UTC"
                    value={String(t.config.timezone ?? "")}
                    onChange={(e) => updateConfig(i, "timezone", e.target.value)}
                  />
                </label>
              </>
            )}

            {t.type === "WEBHOOK" && (
              <div className="space-y-2 sm:col-span-2">
                {t.config.webhookId ? (
                  <>
                    <div className="flex items-center gap-1.5">
                      <code className="min-w-0 flex-1 truncate rounded bg-muted px-2 py-1.5 text-xs">{String(t.config.url ?? "")}</code>
                      {onRegenerateWebhook && (
                        <button
                          type="button"
                          className="inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 text-xs disabled:opacity-50"
                          onClick={onRegenerateWebhook}
                          disabled={regenerating}
                        >
                          {regenerating ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
                          Regenerate secret
                        </button>
                      )}
                    </div>
                    <p className="text-[11px] text-muted-foreground">
                      POST to this URL with the <code>X-FS-Signature</code> header. webhookId: <code>{String(t.config.webhookId)}</code>
                    </p>
                  </>
                ) : (
                  <p className="text-xs text-muted-foreground">The webhook URL + a one-time secret are generated when you save.</p>
                )}
              </div>
            )}

            {(t.type === "PAGE_CREATED" || t.type === "MANUAL") && (
              <p className="text-xs text-muted-foreground sm:col-span-2">No extra configuration.</p>
            )}
          </div>
        </div>
      ))}

      {triggers.length < AUTOMATION_MAX_TRIGGERS && (
        <button
          type="button"
          data-testid="automation-trigger-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 trigger
        </button>
      )}
    </div>
  );
}