import { asError } from '@/utils/errorTypes';
import React, { useState, useEffect } from 'react';
// TODO: P2-F21 — Replace hardcoded triggerEventOptions with backend config
import { useTranslation } from 'react-i18next';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { useToast } from '@/components/ui/Toast';
import { StepConfigPanel } from './StepConfigPanel';
import {
  useCreateWorkflow,
  useUpdateWorkflow,
} from '@/api/workflows';
import type { Workflow, WorkflowStep, WorkflowStepType, WorkflowCreateInput, WorkflowUpdateInput } from '@/api/workflows';
import { ArrowUp, ArrowDown, Plus, Trash2, Code2, FormInput, LayoutTemplate } from 'lucide-react';

const triggerEventOptions = [
  { value: '', label: '— Kein Trigger —' },
  { value: 'contact.created', label: 'contact.created' },
  { value: 'contact.updated', label: 'contact.updated' },
  { value: 'deal.created', label: 'deal.created' },
  { value: 'deal.stage_changed', label: 'deal.stage_changed' },
  { value: 'deal.won', label: 'deal.won' },
  { value: 'deal.lost', label: 'deal.lost' },
  { value: 'task.completed', label: 'task.completed' },
  { value: 'task.overdue', label: 'task.overdue' },
  { value: 'manual', label: 'manual' },
];

interface EditorFormState {
  name: string;
  description: string;
  trigger_event: string;
  is_active: boolean;
  steps: WorkflowStep[];
}

const emptyStep = (): WorkflowStep => ({
  name: '',
  type: 'action',
  config: {},
  description: null,
});

const emptyForm: EditorFormState = {
  name: '',
  description: '',
  trigger_event: '',
  is_active: true,
  steps: [],
};

interface WorkflowTemplate {
  id: string;
  name: string;
  description: string;
  form: EditorFormState;
}

const templates: WorkflowTemplate[] = [
  {
    id: 'welcome-email',
    name: 'Welcome Email',
    description: 'Sendet eine Willkommens-Mail an neue Kontakte.',
    form: {
      name: 'Welcome Email',
      description: 'Sendet eine Willkommens-Mail an neue Kontakte.',
      trigger_event: 'contact.created',
      is_active: true,
      steps: [
        {
          name: 'Willkommens-Mail senden',
          type: 'mail',
          config: {
            to: '{{contact.email}}',
            subject: 'Willkommen bei uns!',
            body: 'Hallo {{contact.first_name}}, willkommen bei unserem Unternehmen!',
          },
          description: 'Sendet die Willkommens-Mail an den neuen Kontakt.',
        },
      ],
    },
  },
  {
    id: 'contact-follow-up',
    name: 'Contact Follow-Up',
    description: 'Wartet 3 Tage und sendet dann ein Follow-Up.',
    form: {
      name: 'Contact Follow-Up',
      description: 'Wartet 3 Tage und sendet dann ein Follow-Up.',
      trigger_event: 'contact.created',
      is_active: true,
      steps: [
        {
          name: '3 Tage warten',
          type: 'wait',
          config: { duration_seconds: 259200 },
          description: 'Wartet 3 Tage nach Kontakterstellung.',
        },
        {
          name: 'Follow-Up senden',
          type: 'mail',
          config: {
            to: '{{contact.email}}',
            subject: 'Wie können wir helfen?',
            body: 'Hallo {{contact.first_name}}, wir wollten nachfragen, ob wir helfen können.',
          },
          description: 'Sendet das Follow-Up an den Kontakt.',
        },
      ],
    },
  },
  {
    id: 'approval-chain',
    name: 'Approval Chain',
    description: 'Deal-Genehmigung mit zweistufiger Freigabe.',
    form: {
      name: 'Approval Chain',
      description: 'Deal-Genehmigung mit zweistufiger Freigabe.',
      trigger_event: 'deal.stage_changed',
      is_active: true,
      steps: [
        {
          name: 'Vertriebsleiter-Genehmigung',
          type: 'approval',
          config: { approver_role: 'sales_manager', timeout_hours: 24 },
          description: 'Erste Freigabe durch den Vertriebsleiter.',
        },
        {
          name: 'Geschäftsführer-Genehmigung',
          type: 'approval',
          config: { approver_role: 'ceo', timeout_hours: 48 },
          description: 'Zweite Freigabe durch die Geschäftsführung.',
        },
        {
          name: 'Bestätigungs-Mail',
          type: 'notification',
          config: { channel: 'email', template: 'deal_approved', recipients: '{{deal.owner_email}}' },
          description: 'Benachrichtigt den Deal-Owner über die Freigabe.',
        },
      ],
    },
  },
];

type EditorMode = 'form' | 'json';

export interface WorkflowEditorProps {
  open: boolean;
  workflow?: Workflow | null;
  onClose: () => void;
}

export function WorkflowEditor({ open, workflow, onClose }: WorkflowEditorProps) {
  const { t } = useTranslation();
  const toast = useToast();
  const createMutation = useCreateWorkflow();
  const updateMutation = useUpdateWorkflow();

  const isEdit = !!workflow;
  const [form, setForm] = useState<EditorFormState>(emptyForm);
  const [mode, setMode] = useState<EditorMode>('form');
  const [jsonText, setJsonText] = useState('');
  const [jsonError, setJsonError] = useState<string | undefined>(undefined);
  const [showTemplates, setShowTemplates] = useState(false);

  useEffect(() => {
    if (open) {
      if (workflow) {
        setForm({
          name: workflow.name,
          description: workflow.description ?? '',
          trigger_event: workflow.trigger_event ?? '',
          is_active: workflow.is_active,
          steps: workflow.steps?.length
            ? workflow.steps.map((s) => ({
                name: s.name,
                type: s.type,
                config: s.config ?? {},
                description: s.description ?? null,
              }))
            : [],
        });
      } else {
        setForm({ ...emptyForm });
      }
      setMode('form');
      setShowTemplates(false);
      setJsonError(undefined);
    }
  }, [open, workflow]);

  useEffect(() => {
    setJsonText(JSON.stringify(form, null, 2));
    setJsonError(undefined);
  }, [form]);

  const updateField = <K extends keyof EditorFormState>(
    key: K,
    value: EditorFormState[K]
  ) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const addStep = () => {
    setForm((prev) => ({ ...prev, steps: [...prev.steps, emptyStep()] }));
  };

  const updateStep = (index: number, updated: WorkflowStep) => {
    setForm((prev) => {
      const steps = [...prev.steps];
      steps[index] = updated;
      return { ...prev, steps };
    });
  };

  const removeStep = (index: number) => {
    setForm((prev) => ({
      ...prev,
      steps: prev.steps.filter((_, i) => i !== index),
    }));
  };

  const moveStep = (index: number, dir: 'up' | 'down') => {
    setForm((prev) => {
      const steps = [...prev.steps];
      const target = dir === 'up' ? index - 1 : index + 1;
      if (target < 0 || target >= steps.length) return prev;
      [steps[index], steps[target]] = [steps[target], steps[index]];
      return { ...prev, steps };
    });
  };

  const applyTemplate = (template: WorkflowTemplate) => {
    setForm({
      name: template.form.name,
      description: template.form.description,
      trigger_event: template.form.trigger_event,
      is_active: template.form.is_active,
      steps: template.form.steps.map((s) => ({ ...s, config: { ...s.config } })),
    });
    setShowTemplates(false);
  };

  const handleJsonChange = (value: string) => {
    setJsonText(value);
    try {
      const parsed = JSON.parse(value) as EditorFormState;
      if (!Array.isArray(parsed.steps)) {
        setJsonError('steps muss ein Array sein');
        return;
      }
      setJsonError(undefined);
      setForm(parsed);
    } catch {
      setJsonError('Ungültiges JSON');
    }
  };

  const requiredConfigFields: Partial<Record<WorkflowStepType, string[]>> = {
    wait: ['duration_seconds'],
    http: ['url'],
    mail: ['to', 'subject'],
    calendar: ['action'],
    dms: ['action'],
    search: ['query'],
    agent: ['agent_id'],
    crm: ['action'],
  };

  const validateSteps = (steps: WorkflowStep[]): string | null => {
    if (steps.length === 0) {
      return 'Mindestens ein Schritt ist erforderlich';
    }
    for (let i = 0; i < steps.length; i++) {
      const s = steps[i];
      if (!s.name.trim()) {
        return `Schritt ${i + 1}: Name ist erforderlich`;
      }
      const required = requiredConfigFields[s.type];
      if (required) {
        for (const field of required) {
          const v = s.config[field];
          if (v === undefined || v === null || v === '') {
            return `Schritt ${i + 1} (${s.type}): Feld "${field}" ist erforderlich`;
          }
        }
      }
    }
    return null;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!form.name.trim()) {
      toast.error('Name ist erforderlich');
      return;
    }

    const stepError = validateSteps(form.steps);
    if (stepError) {
      toast.error(stepError);
      return;
    }

    try {
      if (isEdit && workflow) {
        const data: WorkflowUpdateInput = {
          name: form.name,
          description: form.description || null,
          trigger_event: form.trigger_event || null,
          steps: form.steps,
          is_active: form.is_active,
        };
        await updateMutation.mutateAsync({ id: workflow.id, data });
        toast.success('Workflow aktualisiert');
      } else {
        const data: WorkflowCreateInput = {
          name: form.name,
          description: form.description || null,
          trigger_event: form.trigger_event || null,
          steps: form.steps,
          is_active: form.is_active,
        };
        await createMutation.mutateAsync(data);
        toast.success('Workflow erstellt');
      }
      onClose();
    } catch (err: unknown) { const errObj = asError(err);
      // Show detailed validation errors from backend (422)
      if (errObj.validationErrors) {
        const details = Object.entries(errObj.validationErrors)
          .map(([field, msgs]) => `${field}: ${(msgs as string[]).join(', ')}`)
          .join('; ');
        toast.error(`Validierungsfehler: ${details}`);
      } else if (errObj.detail) {
        toast.error(errObj.detail);
      } else {
        toast.error(errObj.message || 'Fehler beim Speichern');
      }
    }
  };

  const isSaving = createMutation.isPending || updateMutation.isPending;

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={isEdit ? 'Workflow bearbeiten' : 'Neuer Workflow'}
      size="xl"
    >
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Mode toggle + template gallery */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {!isEdit && (
              <Button
                size="sm"
                variant="ghost"
                type="button"
                onClick={() => setShowTemplates((v) => !v)}
                icon={<LayoutTemplate className="h-4 w-4" />}
              >
                Vorlagen
              </Button>
            )}
          </div>
          <div className="flex items-center gap-1 rounded-md border border-secondary-200 bg-white p-0.5">
            <button
              type="button"
              onClick={() => setMode('form')}
              className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium ${
                mode === 'form'
                  ? 'bg-primary-600 text-white'
                  : 'text-secondary-600 hover:bg-secondary-100'
              }`}
              aria-pressed={mode === 'form'}
            >
              <FormInput className="h-3.5 w-3.5" /> Formular
            </button>
            <button
              type="button"
              onClick={() => setMode('json')}
              className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium ${
                mode === 'json'
                  ? 'bg-primary-600 text-white'
                  : 'text-secondary-600 hover:bg-secondary-100'
              }`}
              aria-pressed={mode === 'json'}
            >
              <Code2 className="h-3.5 w-3.5" /> JSON Expert
            </button>
          </div>
        </div>

        {/* Template gallery */}
        {showTemplates && !isEdit && (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {templates.map((template) => (
              <button
                key={template.id}
                type="button"
                onClick={() => applyTemplate(template)}
                className="rounded-lg border border-secondary-200 bg-secondary-50 p-4 text-left hover:border-primary-500 hover:bg-primary-50 transition-colors"
              >
                <span className="block text-sm font-medium text-secondary-800">
                  {template.name}
                </span>
                <span className="mt-1 block text-xs text-secondary-500">
                  {template.description}
                </span>
                <span className="mt-2 block text-xs text-primary-600 font-medium">
                  {template.form.steps.length} Schritte
                </span>
              </button>
            ))}
          </div>
        )}

        {mode === 'form' ? (
          <>
            <div className="grid grid-cols-1 gap-4">
              <Input
                label="Name"
                required
                value={form.name}
                onChange={(e) => updateField('name', e.target.value)}
                placeholder="z.B. Deal-Genehmigungsprozess"
              />
              <div>
                <label className="block text-sm font-medium text-secondary-700 mb-1">
                  Beschreibung
                </label>
                <textarea
                  value={form.description}
                  onChange={(e) => updateField('description', e.target.value)}
                  rows={2}
                  className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="Optionale Beschreibung"
                />
              </div>
              <Select
                label="Trigger-Event"
                options={triggerEventOptions}
                value={form.trigger_event}
                onChange={(e) => updateField('trigger_event', e.target.value)}
              />
              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  checked={form.is_active}
                  onChange={(e) => updateField('is_active', e.target.checked)}
                  className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
                />
                Aktiv
              </label>
            </div>

            {/* Steps section */}
            <div>
              <div className="flex items-center justify-between mb-3">
                <label className="text-sm font-medium text-secondary-700">
                  Schritte
                </label>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={addStep}
                  type="button"
                  icon={<Plus className="h-4 w-4" />}
                >
                  Schritt hinzufuegen
                </Button>
              </div>
              {form.steps.length === 0 && (
                <p className="text-sm text-secondary-400 italic">
                  Keine Schritte definiert. Klicke auf Schritt hinzufuegen.
                </p>
              )}
              <div className="space-y-4">
                {form.steps.map((step, i) => (
                  <div key={i} className="relative">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-xs font-medium text-secondary-500">
                        Schritt {i + 1}
                      </span>
                      <div className="flex items-center gap-1">
                        <button
                          type="button"
                          onClick={() => moveStep(i, 'up')}
                          disabled={i === 0}
                          className="text-secondary-400 hover:text-secondary-700 disabled:opacity-30 p-1"
                          aria-label="Nach oben"
                        >
                          <ArrowUp className="h-4 w-4" />
                        </button>
                        <button
                          type="button"
                          onClick={() => moveStep(i, 'down')}
                          disabled={i === form.steps.length - 1}
                          className="text-secondary-400 hover:text-secondary-700 disabled:opacity-30 p-1"
                          aria-label="Nach unten"
                        >
                          <ArrowDown className="h-4 w-4" />
                        </button>
                        <button
                          type="button"
                          onClick={() => removeStep(i)}
                          className="text-danger-500 hover:text-danger-700 p-1"
                          aria-label="Schritt entfernen"
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    </div>
                    <StepConfigPanel
                      step={step}
                      onChange={(updated) => updateStep(i, updated)}
                    />
                  </div>
                ))}
              </div>
            </div>
          </>
        ) : (
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-1">
              Workflow (JSON)
            </label>
            <textarea
              value={jsonText}
              onChange={(e) => handleJsonChange(e.target.value)}
              rows={18}
              className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
              placeholder='{"name": "...", "steps": [...]}'
            />
            {jsonError && (
              <p className="mt-1 text-sm text-danger-600" role="alert">
                {jsonError}
              </p>
            )}
          </div>
        )}

        <div className="flex justify-end gap-3 pt-4 border-t border-secondary-200">
          <Button variant="secondary" onClick={onClose} type="button">
            Abbrechen
          </Button>
          <Button type="submit" isLoading={isSaving}>
            {isEdit ? 'Speichern' : 'Erstellen'}
          </Button>
        </div>
      </form>
    </Modal>
  );
}