/**
 * CanvasHeader - Workflow controls (Neu, Speichern, laden, Ausführen), version selector, and execute result.
 */

import React, { useState, useRef, useEffect } from 'react';
import { FaCog, FaPlay, FaSpinner, FaCloudUploadAlt, FaCloudDownloadAlt, FaArchive, FaRobot, FaBookmark, FaCaretDown } from 'react-icons/fa';
import type { Automation2Workflow, ExecuteGraphResponse, AutoVersion, AutoTemplateScope } from '../../../api/workflowApi';
import styles from './Automation2FlowEditor.module.css';

interface CanvasHeaderProps {
  workflows: Automation2Workflow[];
  currentWorkflowId: string | null;
  onWorkflowSelect: (workflowId: string | null) => void;
  onNew: () => void;
  onSave: () => void;
  onExecute: () => void;
  onWorkflowSettings?: () => void;
  onToggleChat?: () => void;
  saving: boolean;
  executing: boolean;
  hasNodes: boolean;
  executeResult: ExecuteGraphResponse | null;
  versions?: AutoVersion[];
  currentVersionId?: string | null;
  onVersionSelect?: (versionId: string | null) => void;
  onPublishVersion?: (versionId: string) => void;
  onUnpublishVersion?: (versionId: string) => void;
  onArchiveVersion?: (versionId: string) => void;
  onCreateDraft?: () => void;
  versionLoading?: boolean;
  onSaveAsTemplate?: (scope: AutoTemplateScope) => void;
  templateSaving?: boolean;
  onNewFromTemplate?: () => void;
}

const STATUS_BADGE: Record<string, { label: string; color: string }> = {
  draft: { label: 'Entwurf', color: 'var(--warning-color, #ffc107)' },
  published: { label: 'Veröffentlicht', color: 'var(--success-color, #28a745)' },
  archived: { label: 'Archiviert', color: 'var(--text-secondary, #666)' },
};

export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
  workflows,
  currentWorkflowId,
  onWorkflowSelect,
  onNew,
  onSave,
  onExecute,
  onWorkflowSettings,
  onToggleChat,
  saving,
  executing,
  hasNodes,
  executeResult,
  versions,
  currentVersionId,
  onVersionSelect,
  onPublishVersion,
  onUnpublishVersion,
  onArchiveVersion,
  onCreateDraft,
  versionLoading,
  onSaveAsTemplate,
  templateSaving,
  onNewFromTemplate,
}) => {
  const currentVersion = versions?.find((v) => v.id === currentVersionId);
  const currentStatus = currentVersion?.status || 'draft';
  const badge = STATUS_BADGE[currentStatus] || STATUS_BADGE.draft;

  const [newMenuOpen, setNewMenuOpen] = useState(false);
  const newMenuRef = useRef<HTMLDivElement>(null);

  const [templateMenuOpen, setTemplateMenuOpen] = useState(false);
  const templateMenuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const _handleClickOutside = (e: MouseEvent) => {
      if (newMenuRef.current && !newMenuRef.current.contains(e.target as Node)) setNewMenuOpen(false);
      if (templateMenuRef.current && !templateMenuRef.current.contains(e.target as Node)) setTemplateMenuOpen(false);
    };
    document.addEventListener('mousedown', _handleClickOutside);
    return () => document.removeEventListener('mousedown', _handleClickOutside);
  }, []);

  const SCOPE_LABELS: Record<string, string> = { user: 'Meine Vorlagen', instance: 'Instanz', mandate: 'Mandant' };

  return (
    <div className={styles.canvasHeader}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
        <h4 className={styles.canvasTitle} style={{ margin: 0 }}>
          Workflow-Editor
        </h4>
        {onWorkflowSettings && (
          <button
            type="button"
            className={styles.canvasGearBtn}
            title="Workflow-Konfiguration (Einstieg / Starts)"
            aria-label="Workflow-Konfiguration"
            onClick={onWorkflowSettings}
          >
            <FaCog />
          </button>
        )}

        {/* Split "Neu" button */}
        <div ref={newMenuRef} style={{ position: 'relative', display: 'inline-block' }}>
          <div style={{ display: 'flex' }}>
            <button type="button" className={styles.retryButton} onClick={onNew} style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
              Neu
            </button>
            <button
              type="button"
              className={styles.retryButton}
              onClick={() => setNewMenuOpen((p) => !p)}
              style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, paddingLeft: 4, paddingRight: 6, borderLeft: '1px solid rgba(0,0,0,0.15)' }}
              title="Neu aus Vorlage"
            >
              <FaCaretDown style={{ fontSize: '0.7rem' }} />
            </button>
          </div>
          {newMenuOpen && (
            <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 100, background: 'var(--bg-primary, #fff)', border: '1px solid var(--border-color, #e0e0e0)', borderRadius: 6, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', minWidth: 180, marginTop: 4 }}>
              <button
                type="button"
                onClick={() => { onNew(); setNewMenuOpen(false); }}
                style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', border: 'none', background: 'transparent', cursor: 'pointer', fontSize: '0.85rem' }}
              >
                Leerer Workflow
              </button>
              {onNewFromTemplate && (
                <button
                  type="button"
                  onClick={() => { onNewFromTemplate(); setNewMenuOpen(false); }}
                  style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', border: 'none', background: 'transparent', cursor: 'pointer', fontSize: '0.85rem', borderTop: '1px solid var(--border-color, #e0e0e0)' }}
                >
                  Aus Vorlage...
                </button>
              )}
            </div>
          )}
        </div>

        <button
          type="button"
          className={styles.retryButton}
          onClick={onSave}
          disabled={saving || !hasNodes}
        >
          {saving ? <FaSpinner className={styles.spinner} /> : 'Speichern'}
        </button>

        {/* Save as template */}
        {currentWorkflowId && onSaveAsTemplate && (
          <div ref={templateMenuRef} style={{ position: 'relative', display: 'inline-block' }}>
            <button
              type="button"
              className={styles.retryButton}
              onClick={() => setTemplateMenuOpen((p) => !p)}
              disabled={templateSaving}
              title="Als Vorlage speichern"
            >
              {templateSaving ? <FaSpinner className={styles.spinner} /> : <><FaBookmark style={{ marginRight: 4 }} />Als Vorlage</>}
            </button>
            {templateMenuOpen && (
              <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 100, background: 'var(--bg-primary, #fff)', border: '1px solid var(--border-color, #e0e0e0)', borderRadius: 6, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', minWidth: 180, marginTop: 4 }}>
                {(['user', 'instance', 'mandate'] as const).map((s) => (
                  <button
                    key={s}
                    type="button"
                    onClick={() => { onSaveAsTemplate(s); setTemplateMenuOpen(false); }}
                    style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', border: 'none', background: 'transparent', cursor: 'pointer', fontSize: '0.85rem', borderTop: s !== 'user' ? '1px solid var(--border-color, #e0e0e0)' : undefined }}
                  >
                    {SCOPE_LABELS[s]}
                  </button>
                ))}
              </div>
            )}
          </div>
        )}
        <select
          value={currentWorkflowId ?? ''}
          onChange={(e) => {
            const id = e.target.value ? e.target.value : null;
            onWorkflowSelect(id);
          }}
          style={{ padding: '0.4rem', minWidth: 180 }}
        >
          <option value="">— Workflow laden —</option>
          {workflows.map((w) => (
            <option key={w.id} value={w.id}>
              {w.label}
            </option>
          ))}
        </select>
        <button
          type="button"
          className={styles.retryButton}
          onClick={onExecute}
          disabled={executing || !hasNodes}
        >
          {executing ? (
            <>
              <FaSpinner className={styles.spinner} style={{ marginRight: '0.5rem', display: 'inline-block' }} />
              Ausführen…
            </>
          ) : (
            <>
              <FaPlay style={{ marginRight: '0.5rem' }} />
              Ausführen
            </>
          )}
        </button>
        {onToggleChat && (
          <button type="button" className={styles.retryButton} onClick={onToggleChat} title="AI Chat & Tracing öffnen">
            <FaRobot style={{ marginRight: '0.4rem' }} />
            AI Chat
          </button>
        )}
      </div>

      {/* Version Selector */}
      {currentWorkflowId && versions && versions.length > 0 && (
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.5rem', flexWrap: 'wrap' }}>
          <span style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-secondary, #666)' }}>Version:</span>
          <select
            value={currentVersionId ?? ''}
            onChange={(e) => onVersionSelect?.(e.target.value || null)}
            style={{ padding: '0.3rem', minWidth: 140, fontSize: '0.85rem' }}
            disabled={versionLoading}
          >
            <option value="">— Aktuelle —</option>
            {versions.map((v) => (
              <option key={v.id} value={v.id}>
                v{v.versionNumber} ({STATUS_BADGE[v.status]?.label ?? v.status})
              </option>
            ))}
          </select>
          <span
            style={{
              padding: '2px 8px',
              borderRadius: 10,
              fontSize: '0.75rem',
              fontWeight: 600,
              background: badge.color + '22',
              color: badge.color,
            }}
          >
            {badge.label}
          </span>
          {currentVersion && currentStatus === 'draft' && onPublishVersion && (
            <button
              type="button"
              className={styles.retryButton}
              onClick={() => onPublishVersion(currentVersion.id)}
              disabled={versionLoading}
              title="Version veröffentlichen"
              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
            >
              <FaCloudUploadAlt style={{ marginRight: 4 }} />
              Publish
            </button>
          )}
          {currentVersion && currentStatus === 'published' && onUnpublishVersion && (
            <button
              type="button"
              className={styles.retryButton}
              onClick={() => onUnpublishVersion(currentVersion.id)}
              disabled={versionLoading}
              title="Veröffentlichung zurücknehmen"
              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
            >
              <FaCloudDownloadAlt style={{ marginRight: 4 }} />
              Unpublish
            </button>
          )}
          {currentVersion && currentStatus !== 'archived' && onArchiveVersion && (
            <button
              type="button"
              className={styles.retryButton}
              onClick={() => onArchiveVersion(currentVersion.id)}
              disabled={versionLoading}
              title="Version archivieren"
              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
            >
              <FaArchive style={{ marginRight: 4 }} />
              Archiv
            </button>
          )}
          {onCreateDraft && (
            <button
              type="button"
              className={styles.retryButton}
              onClick={onCreateDraft}
              disabled={versionLoading}
              title="Neuen Entwurf erstellen"
              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
            >
              + Entwurf
            </button>
          )}
          {versionLoading && <FaSpinner className={styles.spinner} style={{ fontSize: '0.85rem' }} />}
        </div>
      )}

      {executeResult && (
        <div
          style={{
            marginTop: '0.5rem',
            padding: '0.5rem',
            borderRadius: 6,
            fontSize: '0.875rem',
            background: executeResult.success
              ? 'rgba(40,167,69,0.15)'
              : (executeResult as { paused?: boolean }).paused
                ? 'rgba(0,123,255,0.15)'
                : 'rgba(220,53,69,0.15)',
            color: executeResult.success
              ? 'var(--success-color,#28a745)'
              : (executeResult as { paused?: boolean }).paused
                ? 'var(--primary-color,#007bff)'
                : 'var(--danger-color,#dc3545)',
          }}
        >
          {executeResult.success ? (
            <>✓ Ausführung abgeschlossen.</>
          ) : (executeResult as { paused?: boolean }).paused ? (
            <>
              ⏸ Workflow pausiert. Öffne <strong>Workflows & Tasks</strong> in der Sidebar, um den
              Task zu bearbeiten.
            </>
          ) : (
            <>✗ {executeResult.error ?? 'Unbekannter Fehler'}</>
          )}
        </div>
      )}
    </div>
  );
};
