/**
 * NodeConfigPanel - Generic parameter renderer for all node types.
 * Renders each parameter using FRONTEND_TYPE_RENDERERS based on frontendType.
 */

import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import type { CanvasNode } from './FlowCanvas';
import type { GraphDefinedSchemaRef, NodeType, NodeTypeParameter, PortSchema } from '../../../api/workflowApi';
import type { ApiRequestFunction } from '../../../api/workflowApi';
import { getLabel } from '../nodes/shared/utils';
import { FRONTEND_TYPE_RENDERERS } from '../nodes/frontendTypeRenderers';
import { RequiredAttributePicker } from '../nodes/shared/RequiredAttributePicker';
import { findRequiredErrors } from '../nodes/shared/paramValidation';
import { useAutomation2DataFlow } from '../context/Automation2DataFlowContext';
import styles from './Automation2FlowEditor.module.css';

import { useLanguage } from '../../../providers/language/LanguageContext';
import { AccordionList } from '../../UiComponents/AccordionList';
import type { AccordionListItem } from '../../UiComponents/AccordionList';

const CONTEXT_EXTRACT_CONTENT_NODE_TYPE = 'context.extractContent';
const CONTEXT_EXTRACT_CHUNK_PARAM_NAMES = ['chunkSizeUnit', 'chunkSize', 'chunkOverlap'] as const;
const CONTEXT_EXTRACT_CHUNK_SET = new Set<string>(CONTEXT_EXTRACT_CHUNK_PARAM_NAMES);

/** Optional params use stored value only (unset ⇒ no chip). Required uses schema default as fallback. */
export function workflowParamUiValue(stored: Record<string, unknown>, param: NodeTypeParameter): unknown {
  const raw = stored[param.name];
  if (param.required) {
    return raw !== undefined && raw !== null ? raw : param.default;
  }
  return raw;
}

function effectiveSchemaParamString(name: string, currentParams: Record<string, unknown>, nt: NodeType): string {
  const raw = currentParams[name];
  const s = raw !== undefined && raw !== null ? String(raw) : '';
  if (s !== '') return s;
  const meta = nt.parameters?.find((p) => p.name === name);
  const d = meta?.default;
  return d !== undefined && d !== null ? String(d) : '';
}

function accordionExtractParamTitle(param: NodeTypeParameter, t: (key: string) => string): React.ReactNode {
  return (
    <span style={{ fontWeight: 700, fontSize: 12 }}>
      {param.required ? (
        <span style={{ color: 'var(--danger-color, #dc3545)', marginRight: 3 }} title={t('Pflichtfeld')}>
          *
        </span>
      ) : null}
      {param.name}
    </span>
  );
}

function verboseSchemaTypeBadge(
  verboseSchema: boolean,
  param: NodeTypeParameter,
  t: (key: string) => string,
): React.ReactElement | null {
  if (!verboseSchema || !param.type) return null;
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 6,
        marginBottom: 6,
        flexWrap: 'wrap',
        minWidth: 0,
      }}
    >
      <span
        title={t('Parameter-Typ')}
        style={{
          fontSize: 10,
          fontWeight: 600,
          color: 'var(--text-secondary)',
          background: 'var(--bg-secondary)',
          border: '1px solid var(--border-color)',
          borderRadius: 4,
          padding: '1px 6px',
          maxWidth: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }}
      >
        {param.type}
      </span>
    </div>
  );
}

interface NodeConfigPanelProps {
  node: CanvasNode | null;
  nodeType: NodeType | undefined;
  language: string;
  onParametersChange: (nodeId: string, parameters: Record<string, unknown>) => void;
  onMergeNodeParameters?: (nodeId: string, patch: Record<string, unknown>) => void;
  onNodeUpdate?: (nodeId: string, updates: Partial<Pick<CanvasNode, 'title' | 'comment'>>) => void;
  instanceId?: string;
  request?: ApiRequestFunction;
  /** When true, render developer-oriented sections (Schema-Typ-Referenz,
   *  parameter type-badges). Toggle in CanvasHeader, sysadmin-only. */
  verboseSchema?: boolean;
}

/** When ``frontendOptions.dependsOn`` and ``frontendOptions.showWhen`` are set
 * (same convention as trustee / gateway nodeAdapter ``visibleWhen``), hide the
 * parameter unless the referenced parameter's effective value matches.
 */
export function parameterVisibleForFrontendOptions(
  param: NodeTypeParameter,
  params: Record<string, unknown>,
  nodeType: NodeType,
): boolean {
  const fo = param.frontendOptions;
  if (!fo || typeof fo !== 'object') return true;
  const dependsOnRaw = fo.dependsOn as unknown;
  const showWhenRaw = fo.showWhen as unknown;
  if (typeof dependsOnRaw !== 'string' || dependsOnRaw.length === 0 || showWhenRaw === undefined || showWhenRaw === null) {
    return true;
  }
  const depMeta = nodeType.parameters?.find((p) => p.name === dependsOnRaw);
  const rawSibling = params[dependsOnRaw];
  const siblingValue =
    rawSibling !== undefined && rawSibling !== null ? String(rawSibling) : '';
  const fallback =
    depMeta?.default !== undefined && depMeta?.default !== null ? String(depMeta.default) : '';
  const effective = siblingValue !== '' ? siblingValue : fallback;
  const allowed: string[] = Array.isArray(showWhenRaw)
    ? showWhenRaw.map((x) => String(x))
    : [String(showWhenRaw)];
  return allowed.includes(effective);
}

export const NodeConfigPanel: React.FC<NodeConfigPanelProps> = ({ node,
  nodeType,
  language,
  onParametersChange,
  onMergeNodeParameters: _onMergeNodeParameters,
  onNodeUpdate,
  instanceId,
  request,
  verboseSchema = false,
}) => {
  const { t } = useLanguage();
  const [params, setParams] = useState<Record<string, unknown>>({});
  const nodeIdRef = useRef<string | undefined>(undefined);
  nodeIdRef.current = node?.id;
  const notifyParentTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    setParams(node?.parameters ?? {});
  }, [node?.id, node?.parameters]);

  useEffect(() => {
    return () => {
      if (notifyParentTimeoutRef.current != null) {
        clearTimeout(notifyParentTimeoutRef.current);
        notifyParentTimeoutRef.current = null;
      }
    };
  }, [node?.id]);

  const updateParam = useCallback(
    (key: string, value: unknown) => {
      setParams((prev) => {
        const next = { ...prev };
        if (value === undefined) {
          delete next[key];
        } else {
          next[key] = value;
        }
        const id = nodeIdRef.current;
        if (id) {
          if (notifyParentTimeoutRef.current != null) {
            clearTimeout(notifyParentTimeoutRef.current);
          }
          notifyParentTimeoutRef.current = setTimeout(() => {
            notifyParentTimeoutRef.current = null;
            onParametersChange(id, next);
          }, 0);
        }
        return next;
      });
    },
    [onParametersChange]
  );

  const patchParams = useCallback(
    (patch: Record<string, unknown>) => {
      setParams((prev) => {
        const next = { ...prev, ...patch };
        const id = nodeIdRef.current;
        if (id) {
          if (notifyParentTimeoutRef.current != null) {
            clearTimeout(notifyParentTimeoutRef.current);
          }
          notifyParentTimeoutRef.current = setTimeout(() => {
            notifyParentTimeoutRef.current = null;
            onParametersChange(id, next);
          }, 0);
        }
        return next;
      });
    },
    [onParametersChange]
  );

  const dataFlow = useAutomation2DataFlow();
  const portTypeCatalog: Record<string, PortSchema> = (dataFlow?.portTypeCatalog as Record<string, PortSchema> | undefined) ?? {};

  // Phase-4 Schicht-4 — Pflicht-Params zuerst sortieren, damit der User
  // nicht nach unten scrollen muss, um zu sehen was fehlt.
  const sortedParameters: NodeTypeParameter[] = useMemo(() => {
    const all = nodeType?.parameters ?? [];
    const required = all.filter((p) => p.required);
    const optional = all.filter((p) => !p.required);
    return [...required, ...optional];
  }, [nodeType?.parameters]);

  // Pre-compute which required params are unbound on this node so we can
  // surface a panel-level summary banner. The hidden-param safety net lives
  // inside `findRequiredErrors` so banner, canvas badges and Run-button stay
  // in lockstep.
  // Banner labels are kept short (`param.name`); the full description is
  // attached as the tooltip below.
  const requiredErrors = useMemo(() => {
    if (!node || !nodeType) return [];
    return findRequiredErrors(node, nodeType, (p) => p.name);
  }, [node, nodeType]);

  // Resolve full descriptions per missing param (for the banner tooltip).
  const requiredErrorTooltip = useMemo(() => {
    if (!requiredErrors.length || !nodeType) return '';
    const byName = new Map((nodeType.parameters ?? []).map((p) => [p.name, p]));
    return requiredErrors
      .map((e) => {
        const p = byName.get(e.paramName);
        const desc = p ? (getLabel(p.description, language) || '') : '';
        return desc ? `${e.paramName}: ${desc}` : e.paramName;
      })
      .join('\n');
  }, [requiredErrors, nodeType, language]);

  const extractContentAccordionItems = useMemo((): AccordionListItem<string>[] | null => {
    if (!node || !nodeType || node.type !== CONTEXT_EXTRACT_CONTENT_NODE_TYPE) return null;

    const byName = new Map((nodeType.parameters ?? []).map((p) => [p.name, p]));
    const out: AccordionListItem<string>[] = [];

    for (const param of sortedParameters) {
      if (param.frontendType === 'hidden') continue;
      if (CONTEXT_EXTRACT_CHUNK_SET.has(param.name)) continue;
      if (!parameterVisibleForFrontendOptions(param, params, nodeType)) continue;

      const usePicker = _shouldUseRequiredPicker(param);
      if (usePicker) {
        out.push({
          id: param.name,
          title: accordionExtractParamTitle(param, t),
          children: (
            <div style={{ minWidth: 0 }}>
              {verboseSchemaTypeBadge(verboseSchema, param, t)}
              <RequiredAttributePicker
                label={getLabel(param.description, language) || param.name}
                expectedType={param.type}
                value={workflowParamUiValue(params, param)}
                onChange={(val) => updateParam(param.name, val)}
              />
            </div>
          ),
        });
        continue;
      }

      const frontendType = param.frontendType || 'text';
      const Renderer = FRONTEND_TYPE_RENDERERS[frontendType] ?? FRONTEND_TYPE_RENDERERS.text;

      if (param.name === 'outputMode') {
        const chunksNested = effectiveSchemaParamString('outputMode', params, nodeType) === 'chunks';
        out.push({
          id: param.name,
          title: accordionExtractParamTitle(param, t),
          children: (
            <div style={{ minWidth: 0 }}>
              {verboseSchemaTypeBadge(verboseSchema, param, t)}
              <Renderer
                param={param}
                value={workflowParamUiValue(params, param)}
                onChange={(val: unknown) => updateParam(param.name, val)}
                allParams={params}
                instanceId={instanceId}
                request={request}
                nodeType={node.type}
                onPatchParams={patchParams}
                hideAccordionTitle
              />
              {chunksNested ? (
                <div style={{ marginTop: 8 }}>
                  <AccordionList<string>
                    key={`extract-chunks-${node.id}`}
                    defaultOpenId={null}
                    items={CONTEXT_EXTRACT_CHUNK_PARAM_NAMES.map((chunkName): AccordionListItem<string> => {
                      const cp = byName.get(chunkName);
                      if (!cp) {
                        return { id: chunkName, title: chunkName, children: <></> };
                      }
                      const ft = cp.frontendType || 'text';
                      const ChunkRenderer = FRONTEND_TYPE_RENDERERS[ft] ?? FRONTEND_TYPE_RENDERERS.text;
                      return {
                        id: chunkName,
                        title: accordionExtractParamTitle(cp, t),
                        children: (
                          <div style={{ minWidth: 0 }}>
                            {verboseSchemaTypeBadge(verboseSchema, cp, t)}
                            <ChunkRenderer
                              param={cp}
                              value={workflowParamUiValue(params, cp)}
                              onChange={(val: unknown) => updateParam(cp.name, val)}
                              allParams={params}
                              instanceId={instanceId}
                              request={request}
                              nodeType={node.type}
                              onPatchParams={patchParams}
                              hideAccordionTitle
                            />
                          </div>
                        ),
                      };
                    })}
                  />
                </div>
              ) : null}
            </div>
          ),
        });
        continue;
      }

      out.push({
        id: param.name,
        title: accordionExtractParamTitle(param, t),
        children: (
          <div style={{ minWidth: 0 }}>
            {verboseSchemaTypeBadge(verboseSchema, param, t)}
            <Renderer
              param={param}
              value={workflowParamUiValue(params, param)}
              onChange={(val: unknown) => updateParam(param.name, val)}
              allParams={params}
              instanceId={instanceId}
              request={request}
              nodeType={node.type}
              onPatchParams={patchParams}
              hideAccordionTitle
            />
          </div>
        ),
      });
    }

    return out;
  }, [
    sortedParameters,
    params,
    nodeType,
    language,
    node?.id,
    node?.type,
    verboseSchema,
    instanceId,
    request,
    patchParams,
    updateParam,
    t,
  ]);

  if (!node || !nodeType) return null;

  const isTrigger = node.type.startsWith('trigger.');
  const showNameField = onNodeUpdate && !isTrigger;
  const parameters = sortedParameters;

  const inputPortDefs = nodeType.inputPorts ?? {};
  const outputPortDefs = nodeType.outputPorts ?? {};
  const inputPortEntries = Object.entries(inputPortDefs);
  const outputPortEntries = Object.entries(outputPortDefs);
  const hasPortInfo = inputPortEntries.length > 0 || outputPortEntries.length > 0;

  return (
    <div className={styles.nodeConfigPanel}>
      {showNameField && (
        <div className={styles.nodeConfigNameRow}>
          <label htmlFor="node-config-name">{t('Bezeichnung')}</label>
          <input
            id="node-config-name"
            type="text"
            value={node.title ?? ''}
            onChange={(e) => onNodeUpdate(node.id, { title: e.target.value })}
            placeholder={t('z.B. Kundenformular prüfen, Land')}
          />
          <p className={styles.nodeConfigNameHint}>
            {t('Wird im Data Picker angezeigt, um diesen Node zu identifizieren.')}
          </p>
        </div>
      )}
      <h4>{getLabel(nodeType?.label, language) || node.type}</h4>
      {nodeType?.description && (
        <p className={styles.nodeConfigDescription}>
          {getLabel(nodeType.description, language)}
        </p>
      )}
      {hasPortInfo && verboseSchema && (
        <details className={styles.nodeConfigPorts ?? ''} style={{ margin: '0 0 0.75rem', fontSize: '0.7rem' }}>
          <summary
            style={{
              cursor: 'pointer',
              color: 'var(--text-secondary)',
              fontWeight: 500,
              padding: '0.15rem 0',
              fontStyle: 'italic',
            }}
            title={t('Statische Schema-Referenz f\u00fcr diesen Node-Typ \u2014 keine Live-Daten')}
          >
            {t('Schema (Typ-Referenz, Sysadmin-Ansicht)')}
          </summary>
          {inputPortEntries.length > 0 && (
            <div style={{ marginTop: '0.4rem' }}>
              <div style={{ color: 'var(--text-secondary)', fontWeight: 600, marginBottom: 2 }}>
                {'\u2B07'} {t('Eingabe')}
              </div>
              {inputPortEntries.map(([idx, def]) => (
                <_PortFieldList
                  key={`in-${idx}`}
                  portIndex={Number(idx)}
                  schemaNames={def?.accepts ?? []}
                  catalog={portTypeCatalog}
                  emptyLabel={t('keine Felder')}
                  language={language}
                />
              ))}
            </div>
          )}
          {outputPortEntries.length > 0 && (
            <div style={{ marginTop: '0.4rem' }}>
              <div style={{ color: 'var(--text-secondary)', fontWeight: 600, marginBottom: 2 }}>
                {'\u2B06'} {t('Ausgabe')}
              </div>
              {outputPortEntries.map(([idx, def]) => (
                <_PortFieldList
                  key={`out-${idx}`}
                  portIndex={Number(idx)}
                  schemaNames={_schemaNamesFromOutputPort(def)}
                  catalog={portTypeCatalog}
                  emptyLabel={t('keine Felder')}
                  language={language}
                />
              ))}
            </div>
          )}
        </details>
      )}
      {requiredErrors.length > 0 && (
        <div
          style={{
            marginBottom: 8,
            padding: '6px 10px',
            background: 'rgba(220,53,69,0.10)',
            borderLeft: '3px solid var(--danger-color, #dc3545)',
            borderRadius: 4,
            fontSize: 12,
            color: 'var(--danger-color, #dc3545)',
            overflowWrap: 'anywhere',
            wordBreak: 'break-word',
          }}
          title={requiredErrorTooltip || undefined}
        >
          {t('Pflicht-Felder ohne Quelle:')}{' '}
          <strong>{requiredErrors.map((e) => e.paramLabel).join(', ')}</strong>
        </div>
      )}
      {extractContentAccordionItems !== null ? (
        <AccordionList<string>
          key={`${node.id}-extract-accordion`}
          defaultOpenId={null}
          items={extractContentAccordionItems}
        />
      ) : (
        parameters.map((param: NodeTypeParameter) => {
          // Safety net: hidden params have no UI footprint at all — no row,
          // no required-mark, no type-badge. Their value is system-set.
          if (param.frontendType === 'hidden') return null;
          if (!parameterVisibleForFrontendOptions(param, params, nodeType)) return null;
          const useRequiredPicker = _shouldUseRequiredPicker(param);
          if (useRequiredPicker) {
            return (
              <div key={param.name} style={{ marginBottom: 8 }}>
                <RequiredAttributePicker
                  label={getLabel(param.description, language) || param.name}
                  expectedType={param.type}
                  value={workflowParamUiValue(params, param)}
                  onChange={(val) => updateParam(param.name, val)}
                />
              </div>
            );
          }
          const frontendType = param.frontendType || 'text';
          const Renderer = FRONTEND_TYPE_RENDERERS[frontendType] ?? FRONTEND_TYPE_RENDERERS.text;
          return (
            <div key={`${node.id}-${param.name}`} style={{ marginBottom: 4, minWidth: 0, maxWidth: '100%' }}>
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 6,
                  marginBottom: 2,
                  flexWrap: 'wrap',
                  minWidth: 0,
                }}
              >
                {param.required && (
                  <span
                    title={t('Pflichtfeld')}
                    style={{ color: 'var(--danger-color, #dc3545)', fontWeight: 700, flexShrink: 0 }}
                  >
                    *
                  </span>
                )}
                {verboseSchema && param.type && (
                  <span
                    title={t('Parameter-Typ')}
                    style={{
                      fontSize: 10,
                      fontWeight: 600,
                      color: 'var(--text-secondary)',
                      background: 'var(--bg-secondary)',
                      border: '1px solid var(--border-color)',
                      borderRadius: 4,
                      padding: '1px 6px',
                      maxWidth: '100%',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {param.type}
                  </span>
                )}
              </div>
              <Renderer
                param={param}
                value={workflowParamUiValue(params, param)}
                onChange={(val: unknown) => updateParam(param.name, val)}
                allParams={params}
                instanceId={instanceId}
                request={request}
                nodeType={node.type}
                onPatchParams={patchParams}
              />
            </div>
          );
        })
      )}
    </div>
  );
};

/** Heuristic: required params with a Schicht-1 catalog type (non-primitive
 *  ref/record/list) get the typed RequiredAttributePicker; primitive scalars
 *  fall through to the legacy frontend-type renderer (text/number/select etc.)
 *  unless they have no frontendType at all and a non-trivial type. */
function _shouldUseRequiredPicker(param: NodeTypeParameter): boolean {
  if (!param.required) return false;
  if (!param.type) return false;
  // Hidden params never get a picker — they are system-set or rendered to
  // nothing on purpose. The render loop above also skips hidden rows entirely.
  if (param.frontendType === 'hidden') return false;
  // Always defer to specialized FE renderers when explicitly chosen.
  if (param.frontendType && _LEGACY_RENDERERS_THAT_HANDLE_BINDINGS.has(param.frontendType)) {
    return false;
  }
  // Catalog ref/record/list types are best handled by RequiredAttributePicker.
  if (/^(List\[|Dict\[)/.test(param.type)) return true;
  if (/^[A-Z]/.test(param.type)) return true;
  return false;
}

const _LEGACY_RENDERERS_THAT_HANDLE_BINDINGS = new Set([
  'userConnection',
  'featureInstance',
  'sharepointFolder',
  'sharepointFile',
  'userFileFolder',
  'clickupList',
  'clickupTask',
  'dataRef',
  'caseList',
  'fieldBuilder',
  'keyValueRows',
  'cron',
  'condition',
  'mappingTable',
  'filterExpression',
  'attachmentBuilder',
  'json',
  'modelMultiSelect',
]);

function _schemaNamesFromOutputPort(def: { schema?: string | GraphDefinedSchemaRef } | undefined): string[] {
  if (!def?.schema) return [];
  if (typeof def.schema === 'string') return [def.schema];
  if (typeof def.schema === 'object' && def.schema.kind === 'fromGraph') return ['FormPayload', 'FormPayload_dynamic'];
  return [];
}

interface _PortFieldListProps {
  portIndex: number;
  schemaNames: string[];
  catalog: Record<string, PortSchema>;
  emptyLabel: string;
  language: string;
}

const _PortFieldList: React.FC<_PortFieldListProps> = ({ portIndex, schemaNames, catalog, emptyLabel, language }) => {
  if (!schemaNames.length) return null;
  return (
    <div style={{ marginLeft: 4, marginBottom: 4 }}>
      <div style={{ color: 'var(--text-secondary)', fontSize: '0.7rem' }}>
        {`#${portIndex} `}{schemaNames.join(' | ')}
      </div>
      {schemaNames.map((name) => {
        const schema = catalog[name];
        const fields = schema?.fields ?? [];
        if (name === 'Transit') {
          return (
            <div key={name} style={{ marginLeft: 8, color: 'var(--text-tertiary)', fontStyle: 'italic', fontSize: '0.7rem' }}>
              {'\u00B7 Transit (durchgereichte Daten)'}
            </div>
          );
        }
        if (!fields.length) {
          return (
            <div key={name} style={{ marginLeft: 8, color: 'var(--text-tertiary)', fontSize: '0.7rem' }}>
              {`\u00B7 ${emptyLabel}`}
            </div>
          );
        }
        return (
          <ul key={name} style={{ margin: '2px 0 4px 16px', padding: 0, listStyle: 'none' }}>
            {fields.map((f) => (
              <li key={f.name} style={{ fontSize: '0.7rem', lineHeight: 1.4, color: 'var(--text-secondary)' }}>
                <span style={{ fontFamily: 'monospace', color: 'var(--text-primary)' }}>{f.name}</span>
                <span style={{ color: 'var(--text-tertiary)' }}>{`: ${f.type}`}</span>
                {!f.required && <span style={{ color: 'var(--text-tertiary)' }}>{' (optional)'}</span>}
                {f.description && (
                  <div style={{ color: 'var(--text-secondary)', marginLeft: 4 }}>
                    {getLabel(f.description, language)}
                  </div>
                )}
              </li>
            ))}
          </ul>
        );
      })}
    </div>
  );
};