'use client';

import { useState, useRef } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Variable,
  Plus,
  Trash2,
  GripVertical,
  ChevronDown,
  Copy,
} from 'lucide-react';

// ============================================================================
// Available fields per trigger source
// ============================================================================

const TRIGGER_FIELDS: Record<string, { key: string; label: string; group: string }[]> = {
  datto_rmm: [
    { key: 'triggered', label: 'Triggered (True/False)', group: 'Alert' },
    { key: 'alert_type', label: 'Alert Type', group: 'Alert' },
    { key: 'alert_category', label: 'Alert Category', group: 'Alert' },
    { key: 'alert_priority', label: 'Alert Priority', group: 'Alert' },
    { key: 'alert_message_en', label: 'Alert Message', group: 'Alert' },
    { key: 'alert_uid', label: 'Alert UID', group: 'Alert' },
    { key: 'device_hostname', label: 'Device Hostname', group: 'Device' },
    { key: 'device_id', label: 'Device ID', group: 'Device' },
    { key: 'device_uid', label: 'Device UID', group: 'Device' },
    { key: 'device_ip', label: 'Device IP', group: 'Device' },
    { key: 'device_os', label: 'Device OS', group: 'Device' },
    { key: 'device_description', label: 'Device Description', group: 'Device' },
    { key: 'last_user', label: 'Last User', group: 'Device' },
    { key: 'site_name', label: 'Site Name', group: 'Site' },
    { key: 'site_id', label: 'Site ID', group: 'Site' },
    { key: 'site_uid', label: 'Site UID', group: 'Site' },
    { key: 'platform', label: 'Platform', group: 'Site' },
    ...Array.from({ length: 29 }, (_, i) => ({
      key: `device_udf${i + 1}`, label: `UDF ${i + 1}`, group: 'UDF',
    })),
  ],
  autotask: [
    { key: 'Action', label: 'Action (Create/Update/Delete)', group: 'Event' },
    { key: 'EntityType', label: 'Entity Type', group: 'Event' },
    { key: 'Id', label: 'Entity ID', group: 'Event' },
    { key: 'EventTime', label: 'Event Time', group: 'Event' },
    { key: 'SequenceNumber', label: 'Sequence Number', group: 'Event' },
    { key: 'PersonId', label: 'Person ID', group: 'Event' },
  ],
  veeam: [
    { key: 'eventType', label: 'Event Type', group: 'Event' },
    { key: 'severity', label: 'Severity', group: 'Event' },
    { key: 'message', label: 'Message', group: 'Event' },
  ],
  manual: [],
};

// Fields produced by enrichment steps
const STEP_OUTPUT_FIELDS: Record<string, { key: string; label: string }[]> = {
  enrich_device: [
    { key: 'device_found', label: 'Device Found (bool)' },
    { key: 'device_hostname', label: 'Device Hostname' },
    { key: 'device_os', label: 'Device OS' },
    { key: 'device_ip', label: 'Device IP' },
    { key: 'company_id', label: 'Company ID' },
    { key: 'company_name', label: 'Company Name' },
  ],
  enrich_company: [
    { key: 'company_found', label: 'Company Found (bool)' },
    { key: 'company_id', label: 'Company ID' },
    { key: 'company_name', label: 'Company Name' },
  ],
  enrich_ticket: [
    { key: 'ticket_found', label: 'Ticket Found (bool)' },
    { key: 'ticket_id', label: 'Ticket ID' },
    { key: 'ticket_number', label: 'Ticket Number' },
    { key: 'ticket_title', label: 'Ticket Title' },
  ],
  transform: [], // dynamic — comes from mappings
  set_variable: [], // dynamic
  create_ticket: [
    { key: 'ticket_id', label: 'Created Ticket ID' },
    { key: 'ticket_number', label: 'Created Ticket Number' },
  ],
  ai_analyze: [
    { key: 'ai_response', label: 'AI Response' },
    { key: 'ai_provider', label: 'AI Provider' },
    { key: 'ai_model', label: 'AI Model' },
  ],
  approval: [
    { key: 'approval_id', label: 'Approval ID' },
    { key: 'approval_result', label: 'Approval Result' },
  ],
  rmm_quick_job: [
    { key: 'job_uid', label: 'Job UID' },
    { key: 'quick_job_result', label: 'Job Result' },
  ],
  rmm_get_job_results: [
    { key: 'job_results', label: 'Job Results' },
    { key: 'job_status', label: 'Job Status' },
  ],
  notify: [{ key: 'notified', label: 'Notified (bool)' }],
  enrich_vspc: [
    { key: 'vspc_found', label: 'VSPC Found (bool)' },
    { key: 'vspc_last_job_status', label: 'Last Job Status' },
    { key: 'vspc_last_success', label: 'Last Success Date' },
    { key: 'vspc_hours_since_success', label: 'Hours Since Success' },
    { key: 'vspc_failure_message', label: 'Failure Message' },
    { key: 'vspc_restore_points', label: 'Restore Points' },
    { key: 'vspc_backed_up_size', label: 'Backed Up Size' },
    { key: 'vspc_alarm_count', label: 'Alarm Count' },
    { key: 'vspc_failed_job_count', label: 'Failed Job Count' },
    { key: 'vspc_summary', label: 'VSPC Summary Text' },
    { key: 'vspc_agent_jobs', label: 'Agent Jobs (array)' },
    { key: 'vspc_server_jobs', label: 'Server Jobs (array)' },
    { key: 'vspc_workloads', label: 'Workloads (array)' },
    { key: 'vspc_alarms', label: 'Alarms (array)' },
  ],
  db_query: [], // dynamic — output_key from config
  fetch_b2_result: [], // dynamic — output_key from config
};

// Autotask ticket fields for create_ticket
const TICKET_FIELDS = [
  { key: 'title', label: 'Title', required: true, type: 'text' as const },
  { key: 'description', label: 'Description', required: false, type: 'textarea' as const },
  { key: 'companyID', label: 'Company ID', required: true, type: 'variable' as const },
  { key: 'ticketType', label: 'Ticket Type', required: false, type: 'select' as const, options: [
    { value: '1', label: '1 — Service Request' },
    { value: '2', label: '2 — Incident' },
    { value: '3', label: '3 — Problem' },
    { value: '4', label: '4 — Change Request' },
  ]},
  { key: 'priority', label: 'Priority', required: false, type: 'select' as const, options: [
    { value: '1', label: '1 — Critical' },
    { value: '2', label: '2 — High' },
    { value: '3', label: '3 — Medium' },
    { value: '4', label: '4 — Low' },
  ]},
  { key: 'status', label: 'Status', required: false, type: 'select' as const, options: [
    { value: '1', label: '1 — New' },
    { value: '5', label: '5 — In Progress' },
  ]},
  { key: 'queueID', label: 'Queue ID', required: false, type: 'text' as const },
  { key: 'issueType', label: 'Issue Type ID', required: false, type: 'text' as const },
  { key: 'subIssueType', label: 'Sub-Issue Type ID', required: false, type: 'text' as const },
  { key: 'ticketCategory', label: 'Ticket Category', required: false, type: 'select' as const, options: [
    { value: '3', label: '3 — Standard' },
  ]},
];

// ============================================================================
// Props
// ============================================================================

interface StepConfigEditorProps {
  stepType: string;
  config: Record<string, any>;
  triggerSource: string;
  priorSteps: { step_type: string; name: string; config: Record<string, any> }[];
  channels: { id: number; name: string; channel_type: string }[];
  onChange: (config: Record<string, any>) => void;
}

// ============================================================================
// Variable Picker — shows insertable {{variables}} from trigger + prior steps
// ============================================================================

function VariablePicker({
  triggerSource,
  priorSteps,
  onInsert,
  compact = false,
}: {
  triggerSource: string;
  priorSteps: { step_type: string; name: string; config: Record<string, any> }[];
  onInsert: (variable: string) => void;
  compact?: boolean;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const triggerFields = TRIGGER_FIELDS[triggerSource] || [];

  // Gather context fields from prior steps
  const contextFields: { key: string; label: string; source: string }[] = [];
  for (const step of priorSteps) {
    const outputs = STEP_OUTPUT_FIELDS[step.step_type] || [];
    for (const f of outputs) {
      contextFields.push({ ...f, source: step.name });
    }
    // For transform steps, add the mapping keys
    if (step.step_type === 'transform' && step.config.mappings) {
      for (const key of Object.keys(step.config.mappings)) {
        contextFields.push({ key, label: key, source: step.name });
      }
    }
    // For set_variable, add the key
    if (step.step_type === 'set_variable' && step.config.key) {
      contextFields.push({ key: step.config.key, label: step.config.key, source: step.name });
    }
  }

  // Group trigger fields
  const triggerGroups = new Map<string, typeof triggerFields>();
  for (const f of triggerFields) {
    const group = triggerGroups.get(f.group) || [];
    group.push(f);
    triggerGroups.set(f.group, group);
  }

  if (!isOpen) {
    return (
      <Button
        variant="outline"
        size={compact ? 'sm' : 'default'}
        className={compact ? 'h-7 text-xs px-2' : ''}
        onClick={() => setIsOpen(true)}
      >
        <Variable className="h-3 w-3 mr-1" />
        Insert Variable
      </Button>
    );
  }

  return (
    <div className="border rounded-lg bg-background shadow-lg p-3 space-y-3 max-h-80 overflow-y-auto">
      <div className="flex items-center justify-between">
        <span className="text-xs font-semibold text-muted-foreground uppercase">Insert Variable</span>
        <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={() => setIsOpen(false)}>Close</Button>
      </div>

      {/* Trigger fields */}
      {triggerFields.length > 0 && (
        <div>
          <div className="text-xs font-semibold text-muted-foreground mb-1">Trigger Payload</div>
          {Array.from(triggerGroups.entries()).map(([group, fields]) => (
            <div key={group} className="mb-2">
              <div className="text-[10px] uppercase text-muted-foreground/60 mb-0.5">{group}</div>
              <div className="flex flex-wrap gap-1">
                {fields.map(f => (
                  <button
                    key={f.key}
                    className="px-1.5 py-0.5 text-[11px] bg-blue-50 hover:bg-blue-100 text-blue-700 rounded border border-blue-200 cursor-pointer transition-colors"
                    onClick={() => { onInsert(`{{trigger.${f.key}}}`); setIsOpen(false); }}
                    title={`{{trigger.${f.key}}}`}
                  >
                    {f.label}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Context fields from prior steps */}
      {contextFields.length > 0 && (
        <div>
          <div className="text-xs font-semibold text-muted-foreground mb-1">From Prior Steps</div>
          <div className="flex flex-wrap gap-1">
            {contextFields.map((f, i) => (
              <button
                key={`${f.key}-${i}`}
                className="px-1.5 py-0.5 text-[11px] bg-green-50 hover:bg-green-100 text-green-700 rounded border border-green-200 cursor-pointer transition-colors"
                onClick={() => { onInsert(`{{context.${f.key}}}`); setIsOpen(false); }}
                title={`{{context.${f.key}}} — from "${f.source}"`}
              >
                {f.label}
                <span className="text-[9px] text-green-500 ml-1">({f.source})</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ============================================================================
// Insertable Input — text input with variable insert button
// ============================================================================

function InsertableInput({
  value,
  onChange,
  placeholder,
  triggerSource,
  priorSteps,
  multiline = false,
  rows = 3,
  label,
  required = false,
}: {
  value: string;
  onChange: (val: string) => void;
  placeholder?: string;
  triggerSource: string;
  priorSteps: { step_type: string; name: string; config: Record<string, any> }[];
  multiline?: boolean;
  rows?: number;
  label?: string;
  required?: boolean;
}) {
  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);

  const handleInsert = (variable: string) => {
    const el = inputRef.current;
    if (el) {
      const start = el.selectionStart || value.length;
      const end = el.selectionEnd || value.length;
      const newVal = value.substring(0, start) + variable + value.substring(end);
      onChange(newVal);
      // Restore cursor after the inserted variable
      setTimeout(() => {
        el.focus();
        el.setSelectionRange(start + variable.length, start + variable.length);
      }, 0);
    } else {
      onChange(value + variable);
    }
  };

  return (
    <div className="space-y-1">
      {label && (
        <div className="flex items-center justify-between">
          <label className="text-xs font-medium text-muted-foreground">
            {label} {required && <span className="text-red-400">*</span>}
          </label>
          <VariablePicker triggerSource={triggerSource} priorSteps={priorSteps} onInsert={handleInsert} compact />
        </div>
      )}
      {multiline ? (
        <textarea
          ref={inputRef as any}
          className="w-full px-2.5 py-1.5 text-sm border rounded bg-background font-mono"
          rows={rows}
          placeholder={placeholder}
          value={value}
          onChange={e => onChange(e.target.value)}
        />
      ) : (
        <input
          ref={inputRef as any}
          className="w-full px-2.5 py-1.5 text-sm border rounded bg-background"
          placeholder={placeholder}
          value={value}
          onChange={e => onChange(e.target.value)}
        />
      )}
      {/* Show resolved variable badges */}
      {value && value.includes('{{') && (
        <div className="flex flex-wrap gap-1">
          {(value.match(/\{\{[^}]+\}\}/g) || []).map((v, i) => (
            <Badge key={i} variant="outline" className="text-[10px] bg-violet-50 text-violet-600 border-violet-200">
              {v}
            </Badge>
          ))}
        </div>
      )}
    </div>
  );
}

// ============================================================================
// Step-specific editors
// ============================================================================

function TransformEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const mappings: Record<string, string> = config.mappings || {};
  const keys = Object.keys(mappings);
  const [newKey, setNewKey] = useState('');

  const triggerFields = TRIGGER_FIELDS[triggerSource] || [];

  const updateMapping = (key: string, value: string) => {
    onChange({ ...config, mappings: { ...mappings, [key]: value } });
  };

  const removeMapping = (key: string) => {
    const updated = { ...mappings };
    delete updated[key];
    onChange({ ...config, mappings: updated });
  };

  const addMapping = (fieldKey: string) => {
    onChange({ ...config, mappings: { ...mappings, [fieldKey]: `{{trigger.${fieldKey}}}` } });
  };

  const addCustomMapping = () => {
    if (!newKey) return;
    onChange({ ...config, mappings: { ...mappings, [newKey]: '' } });
    setNewKey('');
  };

  // Fields not yet extracted
  const availableFields = triggerFields.filter(f => !mappings[f.key]);
  const groups = new Map<string, typeof availableFields>();
  for (const f of availableFields) {
    const g = groups.get(f.group) || [];
    g.push(f);
    groups.set(f.group, g);
  }

  return (
    <div className="space-y-4">
      {/* Current mappings */}
      {keys.length > 0 && (
        <div className="space-y-2">
          <div className="text-xs font-semibold text-muted-foreground">Extracted Fields</div>
          {keys.map(key => (
            <div key={key} className="flex items-center gap-2 bg-muted/50 rounded p-2">
              <Badge variant="outline" className="font-mono text-xs shrink-0">{key}</Badge>
              <span className="text-muted-foreground text-xs">=</span>
              <input
                className="flex-1 px-2 py-1 text-xs border rounded bg-background font-mono"
                value={mappings[key]}
                onChange={e => updateMapping(key, e.target.value)}
              />
              <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => removeMapping(key)}>
                <Trash2 className="h-3 w-3 text-red-400" />
              </Button>
            </div>
          ))}
        </div>
      )}

      {/* Available fields to extract */}
      <div>
        <div className="text-xs font-semibold text-muted-foreground mb-2">Available Fields — click to extract</div>
        {Array.from(groups.entries()).map(([group, fields]) => (
          <div key={group} className="mb-2">
            <div className="text-[10px] uppercase text-muted-foreground/60 mb-1">{group}</div>
            <div className="flex flex-wrap gap-1">
              {fields.map(f => (
                <button
                  key={f.key}
                  className="px-2 py-1 text-xs bg-blue-50 hover:bg-blue-100 text-blue-700 rounded border border-blue-200 cursor-pointer transition-colors"
                  onClick={() => addMapping(f.key)}
                  title={`Extract {{trigger.${f.key}}} as context.${f.key}`}
                >
                  <Plus className="h-2.5 w-2.5 inline mr-0.5" />
                  {f.label}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Custom field */}
      <div className="flex gap-2">
        <input
          className="flex-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          placeholder="Custom field name..."
          value={newKey}
          onChange={e => setNewKey(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addCustomMapping()}
        />
        <Button variant="outline" size="sm" onClick={addCustomMapping} disabled={!newKey}>
          <Plus className="h-3 w-3 mr-1" /> Add Custom
        </Button>
      </div>
    </div>
  );
}

function FilterEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const conditions: any[] = config.conditions || [];

  const addCondition = () => {
    onChange({ ...config, conditions: [...conditions, { field: '', operator: 'equals', value: '' }] });
  };

  const updateCondition = (index: number, updates: any) => {
    const updated = conditions.map((c, i) => i === index ? { ...c, ...updates } : c);
    onChange({ ...config, conditions: updated });
  };

  const removeCondition = (index: number) => {
    onChange({ ...config, conditions: conditions.filter((_, i) => i !== index) });
  };

  const allFields = [
    ...(TRIGGER_FIELDS[triggerSource] || []).map(f => ({ key: `trigger.${f.key}`, label: `Trigger: ${f.label}` })),
    ...getContextFields(priorSteps).map(f => ({ key: `context.${f.key}`, label: `Context: ${f.label}` })),
  ];

  return (
    <div className="space-y-3">
      <div className="text-xs font-semibold text-muted-foreground">Conditions (all must match)</div>
      {conditions.map((cond, i) => (
        <div key={i} className="flex items-center gap-2 bg-muted/50 rounded p-2">
          <select
            className="px-2 py-1 text-xs border rounded bg-background min-w-[180px]"
            value={cond.field}
            onChange={e => updateCondition(i, { field: e.target.value })}
          >
            <option value="">Select field...</option>
            {allFields.map(f => <option key={f.key} value={f.key}>{f.label}</option>)}
          </select>
          <select
            className="px-2 py-1 text-xs border rounded bg-background"
            value={cond.operator}
            onChange={e => updateCondition(i, { operator: e.target.value })}
          >
            <option value="equals">equals</option>
            <option value="not_equals">not equals</option>
            <option value="contains">contains</option>
            <option value="not_contains">not contains</option>
            <option value="regex">regex</option>
            <option value="exists">exists</option>
            <option value="not_exists">not exists</option>
          </select>
          {!['exists', 'not_exists'].includes(cond.operator) && (
            <input
              className="flex-1 px-2 py-1 text-xs border rounded bg-background"
              placeholder="Value..."
              value={cond.value}
              onChange={e => updateCondition(i, { value: e.target.value })}
            />
          )}
          <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => removeCondition(i)}>
            <Trash2 className="h-3 w-3 text-red-400" />
          </Button>
        </div>
      ))}
      <Button variant="outline" size="sm" onClick={addCondition}>
        <Plus className="h-3 w-3 mr-1" /> Add Condition
      </Button>
    </div>
  );
}

function CreateTicketEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const template: Record<string, any> = config.template || {};

  const updateField = (key: string, value: string) => {
    onChange({ ...config, template: { ...template, [key]: value } });
  };

  return (
    <div className="space-y-3">
      <div className="text-xs font-semibold text-muted-foreground">Ticket Fields</div>
      {TICKET_FIELDS.map(field => (
        <div key={field.key}>
          {field.type === 'select' ? (
            <div className="space-y-1">
              <label className="text-xs font-medium text-muted-foreground">
                {field.label} {field.required && <span className="text-red-400">*</span>}
              </label>
              <div className="flex gap-2">
                <select
                  className="flex-1 px-2.5 py-1.5 text-sm border rounded bg-background"
                  value={template[field.key] || ''}
                  onChange={e => updateField(field.key, e.target.value)}
                >
                  <option value="">— Select —</option>
                  {field.options?.map(opt => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
                {/* Allow typing a variable instead */}
                <input
                  className="w-48 px-2 py-1 text-xs border rounded bg-background font-mono"
                  placeholder="or {{variable}}"
                  value={typeof template[field.key] === 'string' && template[field.key]?.includes('{{') ? template[field.key] : ''}
                  onChange={e => updateField(field.key, e.target.value)}
                />
              </div>
            </div>
          ) : field.type === 'textarea' ? (
            <InsertableInput
              label={field.label}
              required={field.required}
              value={template[field.key] || ''}
              onChange={val => updateField(field.key, val)}
              placeholder={`Enter ${field.label.toLowerCase()}...`}
              triggerSource={triggerSource}
              priorSteps={priorSteps}
              multiline
              rows={4}
            />
          ) : field.type === 'variable' ? (
            <InsertableInput
              label={field.label}
              required={field.required}
              value={template[field.key]?.toString() || ''}
              onChange={val => updateField(field.key, val)}
              placeholder={`{{context.company_id}} or numeric ID`}
              triggerSource={triggerSource}
              priorSteps={priorSteps}
            />
          ) : (
            <InsertableInput
              label={field.label}
              required={field.required}
              value={template[field.key]?.toString() || ''}
              onChange={val => updateField(field.key, val)}
              placeholder={`Enter ${field.label.toLowerCase()}...`}
              triggerSource={triggerSource}
              priorSteps={priorSteps}
            />
          )}
        </div>
      ))}
    </div>
  );
}

function UpdateTicketEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const fields: Record<string, any> = config.fields || {};

  return (
    <div className="space-y-3">
      <InsertableInput
        label="Ticket ID"
        required
        value={config.ticket_id || ''}
        onChange={val => onChange({ ...config, ticket_id: val })}
        placeholder="{{context.ticket_id}}"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <div className="text-xs font-semibold text-muted-foreground">Fields to Update</div>
      {TICKET_FIELDS.filter(f => f.key !== 'title' && f.key !== 'description').map(field => (
        <InsertableInput
          key={field.key}
          label={field.label}
          value={fields[field.key]?.toString() || ''}
          onChange={val => onChange({ ...config, fields: { ...fields, [field.key]: val || undefined } })}
          placeholder={`Leave blank to skip`}
          triggerSource={triggerSource}
          priorSteps={priorSteps}
        />
      ))}
    </div>
  );
}

function CreateNoteEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  return (
    <div className="space-y-3">
      <InsertableInput
        label="Ticket ID"
        required
        value={config.ticket_id || ''}
        onChange={val => onChange({ ...config, ticket_id: val })}
        placeholder="{{context.ticket_id}}"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <InsertableInput
        label="Note Title"
        value={config.title || ''}
        onChange={val => onChange({ ...config, title: val })}
        placeholder="Pipeline Note"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <InsertableInput
        label="Note Body"
        value={config.body || ''}
        onChange={val => onChange({ ...config, body: val })}
        placeholder="Note content..."
        triggerSource={triggerSource}
        priorSteps={priorSteps}
        multiline
        rows={5}
      />
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="text-xs font-medium text-muted-foreground">Note Type</label>
          <select
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            value={config.note_type || '1'}
            onChange={e => onChange({ ...config, note_type: Number(e.target.value) })}
          >
            <option value="1">Internal</option>
            <option value="2">External</option>
          </select>
        </div>
        <div>
          <label className="text-xs font-medium text-muted-foreground">Publish</label>
          <select
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            value={config.publish || '1'}
            onChange={e => onChange({ ...config, publish: Number(e.target.value) })}
          >
            <option value="1">Yes</option>
            <option value="0">No</option>
          </select>
        </div>
      </div>
    </div>
  );
}

function EnrichEditor({ config, onChange, triggerSource, priorSteps, stepType }: StepConfigEditorProps & { stepType: string }) {
  const lookupOptions: Record<string, { key: string; label: string }[]> = {
    enrich_device: [{ key: 'device_uid', label: 'Device UID' }],
    enrich_company: [
      { key: 'site_name', label: 'Site Name' },
      { key: 'site_uid', label: 'Site UID' },
    ],
    enrich_ticket: [
      { key: 'ticket_number', label: 'Ticket Number' },
      { key: 'ticket_id', label: 'Ticket ID' },
    ],
  };

  const options = lookupOptions[stepType] || [];
  const outputs = STEP_OUTPUT_FIELDS[stepType] || [];

  return (
    <div className="space-y-3">
      <div>
        <label className="text-xs font-medium text-muted-foreground">Lookup By</label>
        <select
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          value={config.lookup_by || options[0]?.key || ''}
          onChange={e => onChange({ ...config, lookup_by: e.target.value })}
        >
          {options.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
        </select>
      </div>
      <InsertableInput
        label="Source Value"
        required
        value={config.source_field || ''}
        onChange={val => onChange({ ...config, source_field: val })}
        placeholder={`{{trigger.${config.lookup_by || options[0]?.key || 'field'}}}`}
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      {outputs.length > 0 && (
        <div>
          <div className="text-xs font-semibold text-muted-foreground mb-1">Output Fields (added to context)</div>
          <div className="flex flex-wrap gap-1">
            {outputs.map(f => (
              <Badge key={f.key} variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
                {f.label} → context.{f.key}
              </Badge>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function NotifyEditor({ config, onChange, channels, triggerSource, priorSteps }: StepConfigEditorProps) {
  return (
    <div className="space-y-3">
      <div>
        <label className="text-xs font-medium text-muted-foreground">Channel <span className="text-red-400">*</span></label>
        <select
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          value={config.channel_id || ''}
          onChange={e => onChange({ ...config, channel_id: Number(e.target.value) })}
        >
          <option value="">Select channel...</option>
          {channels.map(ch => (
            <option key={ch.id} value={ch.id}>{ch.name} ({ch.channel_type})</option>
          ))}
        </select>
        {channels.length === 0 && (
          <p className="text-xs text-muted-foreground mt-1">
            No channels configured. <a href="/admin/workflow/channels" className="text-blue-500 underline">Add one</a>
          </p>
        )}
      </div>
      <InsertableInput
        label="Title"
        value={config.title || ''}
        onChange={val => onChange({ ...config, title: val })}
        placeholder="Notification title"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <InsertableInput
        label="Message"
        required
        value={config.message || ''}
        onChange={val => onChange({ ...config, message: val })}
        placeholder="Notification message..."
        triggerSource={triggerSource}
        priorSteps={priorSteps}
        multiline
        rows={4}
      />
    </div>
  );
}

function ApprovalEditor({ config, onChange, channels, triggerSource, priorSteps }: StepConfigEditorProps) {
  const options: string[] = config.options || ['Approve', 'Reject'];

  return (
    <div className="space-y-3">
      <div>
        <label className="text-xs font-medium text-muted-foreground">Channel</label>
        <select
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          value={config.channel_id || ''}
          onChange={e => onChange({ ...config, channel_id: Number(e.target.value) })}
        >
          <option value="">Select channel...</option>
          {channels.map(ch => (
            <option key={ch.id} value={ch.id}>{ch.name} ({ch.channel_type})</option>
          ))}
        </select>
      </div>
      <InsertableInput
        label="Message"
        required
        value={config.message || ''}
        onChange={val => onChange({ ...config, message: val })}
        placeholder="Approval request message..."
        triggerSource={triggerSource}
        priorSteps={priorSteps}
        multiline
        rows={3}
      />
      <div>
        <label className="text-xs font-medium text-muted-foreground">Options</label>
        <div className="flex flex-wrap gap-2 mt-1">
          {options.map((opt, i) => (
            <div key={i} className="flex items-center gap-1 bg-muted rounded px-2 py-1">
              <input
                className="px-1.5 py-0.5 text-xs border rounded bg-background w-24"
                value={opt}
                onChange={e => {
                  const updated = [...options];
                  updated[i] = e.target.value;
                  onChange({ ...config, options: updated });
                }}
              />
              <Button variant="ghost" size="icon" className="h-5 w-5" onClick={() => {
                onChange({ ...config, options: options.filter((_, j) => j !== i) });
              }}>
                <Trash2 className="h-2.5 w-2.5 text-red-400" />
              </Button>
            </div>
          ))}
          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
            onChange({ ...config, options: [...options, 'Option'] });
          }}>
            <Plus className="h-2.5 w-2.5 mr-1" /> Add
          </Button>
        </div>
      </div>
      <div>
        <label className="text-xs font-medium text-muted-foreground">Timeout (minutes)</label>
        <input
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          type="number"
          value={config.timeout_min || 60}
          onChange={e => onChange({ ...config, timeout_min: Number(e.target.value) })}
        />
      </div>
    </div>
  );
}

function AiAnalyzeEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  return (
    <div className="space-y-3">
      <InsertableInput
        label="System Prompt"
        value={config.system_prompt || ''}
        onChange={val => onChange({ ...config, system_prompt: val })}
        placeholder="You are a helpful IT operations assistant."
        triggerSource={triggerSource}
        priorSteps={priorSteps}
        multiline
        rows={2}
      />
      <InsertableInput
        label="Prompt"
        required
        value={config.prompt || ''}
        onChange={val => onChange({ ...config, prompt: val })}
        placeholder="Summarize this alert..."
        triggerSource={triggerSource}
        priorSteps={priorSteps}
        multiline
        rows={5}
      />
      <div className="grid grid-cols-3 gap-3">
        <div>
          <label className="text-xs font-medium text-muted-foreground">Provider</label>
          <select
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            value={config.provider || ''}
            onChange={e => onChange({ ...config, provider: e.target.value || undefined })}
          >
            <option value="">Default</option>
            <option value="openai">OpenAI</option>
            <option value="anthropic">Anthropic</option>
          </select>
        </div>
        <div>
          <label className="text-xs font-medium text-muted-foreground">Model</label>
          <input
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            placeholder="Default from settings"
            value={config.model || ''}
            onChange={e => onChange({ ...config, model: e.target.value || undefined })}
          />
        </div>
        <div>
          <label className="text-xs font-medium text-muted-foreground">Max Tokens</label>
          <input
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            type="number"
            placeholder="2000"
            value={config.max_tokens || ''}
            onChange={e => onChange({ ...config, max_tokens: Number(e.target.value) || undefined })}
          />
        </div>
      </div>
      <div>
        <div className="text-xs font-semibold text-muted-foreground mb-1">Output Fields</div>
        <div className="flex flex-wrap gap-1">
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">ai_response</Badge>
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">ai_provider</Badge>
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">ai_model</Badge>
        </div>
      </div>
    </div>
  );
}

function RmmQuickJobEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  return (
    <div className="space-y-3">
      <InsertableInput
        label="Device UID"
        required
        value={config.device_uid || ''}
        onChange={val => onChange({ ...config, device_uid: val })}
        placeholder="{{context.device_uid}}"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <InsertableInput
        label="Component UID"
        required
        value={config.component_uid || ''}
        onChange={val => onChange({ ...config, component_uid: val })}
        placeholder="comp-xxx-yyy"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <InsertableInput
        label="Job Name"
        value={config.job_name || ''}
        onChange={val => onChange({ ...config, job_name: val })}
        placeholder="Quick Job Name"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <p className="text-xs text-muted-foreground">
        Use <code className="bg-muted px-1 rounded">GET /api/rmm/components</code> to find available component UIDs.
      </p>
    </div>
  );
}

function SetVariableEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  return (
    <div className="space-y-3">
      <div>
        <label className="text-xs font-medium text-muted-foreground">Variable Name <span className="text-red-400">*</span></label>
        <input
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          placeholder="my_variable"
          value={config.key || ''}
          onChange={e => onChange({ ...config, key: e.target.value })}
        />
      </div>
      <InsertableInput
        label="Value"
        required
        value={config.value || ''}
        onChange={val => onChange({ ...config, value: val })}
        placeholder="Static value or {{variable}}"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
    </div>
  );
}

function DelayEditor({ config, onChange }: StepConfigEditorProps) {
  return (
    <div>
      <label className="text-xs font-medium text-muted-foreground">Delay (seconds)</label>
      <input
        className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
        type="number"
        min={0}
        value={config.seconds || 0}
        onChange={e => onChange({ ...config, seconds: Number(e.target.value) })}
      />
    </div>
  );
}

function RmmGetJobResultsEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  return (
    <div className="space-y-3">
      <InsertableInput
        label="Job UID"
        required
        value={config.job_uid || ''}
        onChange={val => onChange({ ...config, job_uid: val })}
        placeholder="{{context.job_uid}}"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <InsertableInput
        label="Device UID"
        required
        value={config.device_uid || ''}
        onChange={val => onChange({ ...config, device_uid: val })}
        placeholder="{{context.device_uid}}"
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
    </div>
  );
}

// ============================================================================
// Helper
// ============================================================================

function getContextFields(priorSteps: { step_type: string; name: string; config: Record<string, any> }[]) {
  const fields: { key: string; label: string }[] = [];
  for (const step of priorSteps) {
    const outputs = STEP_OUTPUT_FIELDS[step.step_type] || [];
    fields.push(...outputs);
    if (step.step_type === 'transform' && step.config.mappings) {
      for (const key of Object.keys(step.config.mappings)) {
        fields.push({ key, label: key });
      }
    }
    if (step.step_type === 'set_variable' && step.config.key) {
      fields.push({ key: step.config.key, label: step.config.key });
    }
    if (step.step_type === 'db_query' && step.config.output_key) {
      fields.push({ key: step.config.output_key, label: `${step.config.output_key} (query)` });
      fields.push({ key: `${step.config.output_key}_count`, label: `${step.config.output_key}_count` });
    }
    if (step.step_type === 'fetch_b2_result' && step.config.output_key) {
      fields.push({ key: step.config.output_key, label: `${step.config.output_key} (B2 JSON)` });
      fields.push({ key: `${step.config.output_key}_raw_length`, label: `${step.config.output_key}_raw_length` });
      fields.push({ key: 'b2_object_key', label: 'b2_object_key' });
    }
  }
  return fields;
}

function EnrichVspcEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const outputs = STEP_OUTPUT_FIELDS['enrich_vspc'] || [];

  return (
    <div className="space-y-3">
      <div>
        <label className="text-xs font-medium text-muted-foreground">Lookup By</label>
        <select
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
          value={config.lookup_by || 'device_name'}
          onChange={e => onChange({ ...config, lookup_by: e.target.value })}
        >
          <option value="device_name">Device Name (hostname)</option>
          <option value="organization_uid">Organization UID</option>
        </select>
      </div>
      <InsertableInput
        label="Source Value"
        required
        value={config.source_field || ''}
        onChange={val => onChange({ ...config, source_field: val })}
        placeholder={config.lookup_by === 'organization_uid' ? '{{context.org_uid}}' : '{{trigger.device_hostname}}'}
        triggerSource={triggerSource}
        priorSteps={priorSteps}
      />
      <div className="bg-blue-50 border border-blue-200 rounded p-3 space-y-2">
        <div className="text-xs font-semibold text-blue-700">What this step does</div>
        <ul className="text-xs text-blue-600 space-y-0.5 list-disc pl-4">
          <li>Queries local Veeam VSPC data for backup agent jobs matching the device</li>
          <li>Checks backup server jobs and protected workloads (VM-level)</li>
          <li>Retrieves active VSPC alarms for the device</li>
          <li>Calculates hours since last successful backup</li>
          <li>Builds a text summary of all findings</li>
        </ul>
      </div>
      {outputs.length > 0 && (
        <div>
          <div className="text-xs font-semibold text-muted-foreground mb-1">Output Fields (added to context)</div>
          <div className="flex flex-wrap gap-1">
            {outputs.map(f => (
              <Badge key={f.key} variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
                {f.label} → context.{f.key}
              </Badge>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function DbQueryEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const outputKey = config.output_key || 'query_result';

  return (
    <div className="space-y-3">
      <div>
        <div className="flex items-center justify-between">
          <label className="text-xs font-medium text-muted-foreground">SQL Query <span className="text-red-400">*</span></label>
          <span className="text-[10px] text-muted-foreground">Read-only SELECT only. Use $1, $2 for params.</span>
        </div>
        <textarea
          className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background font-mono"
          rows={6}
          placeholder={`SELECT status, failure_message, last_run\nFROM veeam_backup_agent_jobs\nWHERE LOWER(name) LIKE LOWER($1)\nORDER BY last_run DESC LIMIT 10`}
          value={config.query || ''}
          onChange={e => onChange({ ...config, query: e.target.value })}
        />
      </div>
      <div>
        <div className="text-xs font-semibold text-muted-foreground mb-1">Query Parameters</div>
        {(config.params || []).map((param: string, i: number) => (
          <div key={i} className="flex items-center gap-2 mb-1">
            <Badge variant="outline" className="font-mono text-xs shrink-0">${i + 1}</Badge>
            <div className="flex-1">
              <InsertableInput
                value={param}
                onChange={val => {
                  const updated = [...(config.params || [])];
                  updated[i] = val;
                  onChange({ ...config, params: updated });
                }}
                placeholder={`Parameter $${i + 1} value`}
                triggerSource={triggerSource}
                priorSteps={priorSteps}
              />
            </div>
            <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => {
              const updated = (config.params || []).filter((_: any, j: number) => j !== i);
              onChange({ ...config, params: updated });
            }}>
              <Trash2 className="h-3 w-3 text-red-400" />
            </Button>
          </div>
        ))}
        <Button variant="outline" size="sm" className="mt-1" onClick={() => {
          onChange({ ...config, params: [...(config.params || []), ''] });
        }}>
          <Plus className="h-3 w-3 mr-1" /> Add Parameter
        </Button>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="text-xs font-medium text-muted-foreground">Output Key</label>
          <input
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            placeholder="query_result"
            value={config.output_key || ''}
            onChange={e => onChange({ ...config, output_key: e.target.value || undefined })}
          />
          <p className="text-[10px] text-muted-foreground mt-0.5">Results stored as context.{outputKey}</p>
        </div>
        <div>
          <label className="text-xs font-medium text-muted-foreground">Result Mode</label>
          <select
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            value={config.single_row ? 'single' : 'array'}
            onChange={e => onChange({ ...config, single_row: e.target.value === 'single' })}
          >
            <option value="array">All rows (array)</option>
            <option value="single">First row only (object)</option>
          </select>
        </div>
      </div>
      <div className="bg-amber-50 border border-amber-200 rounded p-2">
        <div className="text-xs text-amber-700">
          <strong>Security:</strong> Only SELECT queries allowed. INSERT, UPDATE, DELETE, DROP, etc. are blocked.
        </div>
      </div>
      <div>
        <div className="text-xs font-semibold text-muted-foreground mb-1">Output Fields</div>
        <div className="flex flex-wrap gap-1">
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
            {outputKey} → query rows
          </Badge>
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
            {outputKey}_count → row count
          </Badge>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// Fetch B2 Result Editor
// ============================================================================

function FetchB2ResultEditor({ config, onChange, triggerSource, priorSteps }: StepConfigEditorProps) {
  const outputKey = config.output_key || 'b2_result';
  return (
    <div className="space-y-3">
      <div>
        <label className="text-xs font-medium text-muted-foreground">Object Key</label>
        <InsertableInput
          value={config.object_key || ''}
          onChange={v => onChange({ ...config, object_key: v })}
          placeholder="diagnostics/{{context.device_hostname}}/result.json"
          triggerSource={triggerSource}
          priorSteps={priorSteps}
        />
        <p className="text-[10px] text-muted-foreground mt-0.5">S3 object key in the B2 bucket. Use template variables from prior steps.</p>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="text-xs font-medium text-muted-foreground">Output Key</label>
          <input
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            placeholder="diagnostic_results"
            value={config.output_key || ''}
            onChange={e => onChange({ ...config, output_key: e.target.value || undefined })}
          />
          <p className="text-[10px] text-muted-foreground mt-0.5">Parsed JSON stored as context.{outputKey}</p>
        </div>
        <div>
          <label className="text-xs font-medium text-muted-foreground">Bucket</label>
          <input
            className="w-full mt-1 px-2.5 py-1.5 text-sm border rounded bg-background"
            placeholder="wulf-audits (default)"
            value={config.bucket || ''}
            onChange={e => onChange({ ...config, bucket: e.target.value || undefined })}
          />
          <p className="text-[10px] text-muted-foreground mt-0.5">Leave blank for default B2_BUCKET</p>
        </div>
      </div>
      <div className="bg-blue-50 border border-blue-200 rounded p-2">
        <div className="text-xs text-blue-700">
          <strong>How it works:</strong> Generates a presigned S3 URL, downloads the file, and parses JSON into the pipeline context.
        </div>
      </div>
      <div>
        <div className="text-xs font-semibold text-muted-foreground mb-1">Output Fields</div>
        <div className="flex flex-wrap gap-1">
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
            {outputKey} → parsed JSON
          </Badge>
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
            {outputKey}_raw_length → byte count
          </Badge>
          <Badge variant="outline" className="text-[10px] bg-green-50 text-green-600 border-green-200">
            b2_object_key → key used
          </Badge>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// Main Export — routes to the correct editor
// ============================================================================

export default function StepConfigEditor(props: StepConfigEditorProps) {
  const { stepType } = props;

  switch (stepType) {
    case 'transform':
      return <TransformEditor {...props} />;
    case 'filter':
      return <FilterEditor {...props} />;
    case 'create_ticket':
      return <CreateTicketEditor {...props} />;
    case 'update_ticket':
      return <UpdateTicketEditor {...props} />;
    case 'create_note':
      return <CreateNoteEditor {...props} />;
    case 'enrich_device':
    case 'enrich_company':
    case 'enrich_ticket':
      return <EnrichEditor {...props} stepType={stepType} />;
    case 'notify':
      return <NotifyEditor {...props} />;
    case 'approval':
      return <ApprovalEditor {...props} />;
    case 'ai_analyze':
      return <AiAnalyzeEditor {...props} />;
    case 'rmm_quick_job':
      return <RmmQuickJobEditor {...props} />;
    case 'rmm_get_job_results':
      return <RmmGetJobResultsEditor {...props} />;
    case 'set_variable':
      return <SetVariableEditor {...props} />;
    case 'delay':
      return <DelayEditor {...props} />;
    case 'enrich_vspc':
      return <EnrichVspcEditor {...props} />;
    case 'db_query':
      return <DbQueryEditor {...props} />;
    case 'fetch_b2_result':
      return <FetchB2ResultEditor {...props} />;
    default:
      // Fallback: raw JSON editor
      return (
        <div>
          <label className="text-xs font-medium text-muted-foreground">Config (JSON)</label>
          <textarea
            className="w-full mt-1 px-2 py-1.5 text-sm border rounded bg-background font-mono"
            rows={6}
            value={JSON.stringify(props.config, null, 2)}
            onChange={e => {
              try { props.onChange(JSON.parse(e.target.value)); } catch {}
            }}
          />
        </div>
      );
  }
}

export { VariablePicker, InsertableInput, TRIGGER_FIELDS, STEP_OUTPUT_FIELDS };