/**
 * Start node (Formular) — define fields that appear at run time (payload.*).
 */

import React, { useMemo } from 'react';
import type { NodeConfigRendererProps } from '../shared/types';
import styles from '../../editor/Automation2FlowEditor.module.css';

import { useLanguage } from '../../../../providers/language/LanguageContext';

type FormField = {
  name: string;
  label: string;
  type: 'text' | 'number' | 'email' | 'date' | 'boolean' | 'clickup_status';
  statusOptions?: Array<{ value: string; label: string }>;
};

const FORM_FIELD_TYPES = ['text', 'number', 'email', 'date', 'boolean', 'clickup_status'] as const;

function _parseFields(params: Record<string, unknown>, t: (key: string) => string): FormField[] {
  const raw = params.formFields;
  if (!Array.isArray(raw)) return [{ name: 'field1', label: t('Feld 1'), type: 'text' }];
  return raw.map((f, i) => {
    if (f && typeof f === 'object' && !Array.isArray(f)) {
      const o = f as Record<string, unknown>;
      const fieldType = String(o.type ?? 'text');
      const name = String(o.name ?? `field${i + 1}`);
      const label = String(o.label ?? `${t('Feld')} ${i + 1}`);
      const type = (
        FORM_FIELD_TYPES.includes(fieldType as (typeof FORM_FIELD_TYPES)[number]) ? fieldType : 'text'
      ) as FormField['type'];
      if (type === 'clickup_status' && Array.isArray(o.statusOptions)) {
        return {
          name,
          label,
          type: 'clickup_status',
          statusOptions: o.statusOptions as Array<{ value: string; label: string }>,
        };
      }
      return { name, label, type };
    }
    return { name: `field${i + 1}`, label: `${t('Feld')} ${i + 1}`, type: 'text' as const };
  });
}

export const FormStartNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
  const { t } = useLanguage();
  const fields = useMemo(() => _parseFields(params, t), [params, t]);

  const setFields = (next: FormField[]) => {
    updateParam('formFields', next);
  };

  return (
    <div className={styles.startNodeDoc}>
      <p className={styles.startNodeDocIntro}>
        <strong>{t('Formular-Felder')}</strong>{' '}
        {t('werden beim Start ausgefüllt und liegen unter')}{' '}
        <code>payload.&lt;name&gt;</code> {t('in der Start-Ausgabe.')}
      </p>
      <div className={styles.formFieldsList}>
        {fields.map((f, idx) => (
          <div key={idx} className={styles.formFieldRow}>
            <input
              className={styles.startsInput}
              placeholder={t('Name (Payload-Key)')}
              value={f.name}
              onChange={(e) => {
                const next = [...fields];
                next[idx] = { ...f, name: e.target.value };
                setFields(next);
              }}
            />
            <input
              className={styles.startsInput}
              placeholder={t('Beschriftung')}
              value={f.label}
              onChange={(e) => {
                const next = [...fields];
                next[idx] = { ...f, label: e.target.value };
                setFields(next);
              }}
            />
            <select
              className={styles.startsSelect}
              value={f.type}
              onChange={(e) => {
                const next = [...fields];
                const fieldType = e.target.value as FormField['type'];
                if (fieldType === 'clickup_status') {
                  next[idx] = { name: f.name, label: f.label, type: 'clickup_status', statusOptions: f.statusOptions };
                } else {
                  next[idx] = { name: f.name, label: f.label, type: fieldType };
                }
                setFields(next);
              }}
            >
              <option value="text">{t('Text')}</option>
              <option value="number">{t('Zahl')}</option>
              <option value="email">{t('E-Mail')}</option>
              <option value="date">{t('Datum')}</option>
              <option value="boolean">{t('Ja/Nein')}</option>
              <option value="clickup_status">{t('ClickUp-Status Liste')}</option>
            </select>
            <button
              type="button"
              className={styles.formFieldRemoveButton}
              onClick={() => setFields(fields.filter((_, j) => j !== idx))}
            >
              ✕
            </button>
          </div>
        ))}
        <button
          type="button"
          className={styles.startsAddBtn}
          onClick={() =>
            setFields([...fields, { name: `field${fields.length + 1}`, label: t('Neues Feld'), type: 'text' }])
          }
        >
          {t('+ Feld')}
        </button>
      </div>
    </div>
  );
};
