// T2 Falcon Admin — Templates: Flow modals (type picker + editor)

const { useState: useStateF, useEffect: useEffectF, useRef: useRefF } = React;

// ---- Flow type modal (matches the "Flow type" design) ----
const TplFlowTypeModal = ({ onClose, onCreate, onUseExisting, initialTab, t, category }) => {
  // Utility templates create "Get feedback" flows; every other category creates surveys.
  const variant = category === 'Utility' ? 'feedback' : 'survey';
  const [tab, setTab] = useStateF(initialTab === 'existing' ? 'existing' : 'create'); // 'create' | 'existing'
  const [selected, setSelected] = useStateF(variant === 'feedback' ? 'feedback' : 'survey');
  const [existingId, setExistingId] = useStateF((window.existingFlows || [])[0]?.id || '');
  const [existingSearch, setExistingSearch] = useStateF('');
  const [q, setQ] = useStateF(1);
  const opts = (variant === 'feedback' ? window.flowTypeOptionsFeedback : window.flowTypeOptions) || [];
  const allExisting = window.existingFlows || [];
  const filteredExisting = allExisting.filter(f =>
    !existingSearch || (f.name || '').toLowerCase().includes(existingSearch.toLowerCase())
  );

  const surveyPreviews = [
    {
      title: t.flowPreviewTitle || "You've found the perfect deal, what do you next?",
      hint: t.flowChooseAll || 'Choose all that apply:',
      options: [
        'Buy it right away',
        'Check reviews before buying',
        'Share it with friends and family',
        "Buy multiple, while it's cheap",
        t.flowPreviewNone || 'None of the above',
      ],
      cta: t.flowContinue || 'Continue',
    },
    {
      title: t.flowPreviewQ2Title || 'Its your birthday in two weeks, how might you prepare?',
      hint: t.flowChooseOne || 'Choose one:',
      options: [
        'Buy something new',
        'wear the same, as usual',
        'Look for a deal online',
      ],
      cta: t.flowContinue || 'Continue',
    },
    {
      title: t.flowPreviewQ3Title || "What's the best gift for a friend?",
      hint: t.flowChooseAll || 'Choose all that apply:',
      options: [
        'A gift voucher',
        'A new outfit',
        'A bouquet of flowers',
        'A meal out together',
      ],
      cta: t.flowDone || 'Done',
    },
  ];
  // Utility "Get feedback" preview — mirrors window.defaultFeedbackFlow (2 screens).
  const feedbackPreviews = [
    {
      title: t.flowFbRecommend || 'Would you recommend us to a friend?',
      hint: t.flowChooseOne || 'Choose one:',
      options: ['Yes', 'No'],
      cta: t.flowContinue || 'Continue',
    },
    {
      title: t.flowFbRate || 'Rate the following:',
      hint: t.flowFbRateHint || 'Select a rating for each:',
      options: ['Purchase experience', 'Delivery and setup', 'Customer Service'],
      cta: t.flowDone || 'Done',
    },
  ];
  const previews = variant === 'feedback' ? feedbackPreviews : surveyPreviews;
  const total = previews.length;
  const current = previews[q - 1];
  const canPrev = q > 1;
  const canNext = q < total;

  return (
    <div className="tpl-modal-overlay" onClick={onClose}>
      <div className="tpl-modal tpl-flow-type-modal v2" onClick={(e) => e.stopPropagation()}>
        <div className="tpl-modal-head">
          <div className="tpl-modal-title">{t.flowTypeTitle}</div>
          <button className="tpl-modal-close" onClick={onClose} aria-label="Close">
            <IcClose size={16} stroke={2} />
          </button>
        </div>

        {/* Tabs — Create new / Use existing */}
        <div className="tpl-flow-type-tabs">
          <button
            type="button"
            className={`tpl-flow-type-tab ${tab === 'create' ? 'active' : ''}`}
            onClick={() => setTab('create')}
          >{t.createNew}</button>
          <button
            type="button"
            className={`tpl-flow-type-tab ${tab === 'existing' ? 'active' : ''}`}
            onClick={() => setTab('existing')}
          >{t.useExisting}</button>
        </div>

        <div className="tpl-flow-type-grid">
          {tab === 'create' ? (
            <div className="tpl-flow-type-list">
              <h4 className="tpl-flow-type-h">{t.flowTypeSelect}</h4>
              {opts.map(o => (
                <div
                  key={o.id}
                  className={`tpl-flow-type-card ${selected === o.id ? 'selected' : ''} ${!o.enabled ? 'disabled' : ''}`}
                  onClick={() => o.enabled && setSelected(o.id)}
                >
                  <span className={`tpl-flow-type-radio ${selected === o.id && o.enabled ? 'on' : ''}`} />
                  <div className="tpl-flow-type-meta">
                    <div className="name">
                      {t[o.title] || o.id}
                      {!o.enabled && <span className="coming">.{t.comingSoon}</span>}
                    </div>
                    <div className="desc">{t[o.desc] || ''}</div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="tpl-flow-type-list">
              <div className="tpl-flow-type-existing-search">
                <IcSearch size={14} stroke={1.7} />
                <input
                  type="text"
                  placeholder={t.flowTypeSearchExisting || 'Search'}
                  value={existingSearch}
                  onChange={(e) => setExistingSearch(e.target.value)}
                />
              </div>
              {filteredExisting.map(f => (
                <div
                  key={f.id}
                  className={`tpl-flow-type-card ${existingId === f.id ? 'selected' : ''}`}
                  onClick={() => setExistingId(f.id)}
                >
                  <span className={`tpl-flow-type-radio ${existingId === f.id ? 'on' : ''}`} />
                  <div className="tpl-flow-type-meta">
                    <div className="name">{f.name}</div>
                    <div className="desc">
                      {(t.flowTypeExistingPublished || 'Published. {date}').replace('{date}', f.published)}
                    </div>
                  </div>
                </div>
              ))}
              {filteredExisting.length === 0 && (
                <div className="tpl-flow-type-empty">{t.tplEmptyList || 'No results'}</div>
              )}
            </div>
          )}

          <div className="tpl-flow-type-preview">
            <div className="tpl-flow-type-preview-bar" />
            <div className="qcard">
              <div className="qhead">
                <span className="qhead-title">
                  {(t.flowPreviewQuestion || 'Question {n} of {total}')
                    .replace('{n}', String(q))
                    .replace('{total}', String(total))}
                </span>
                <span className="acts">
                  <span className="act"><IcMore size={14} stroke={1.7} /></span>
                  <span className="act"><IcClose size={14} stroke={2} /></span>
                </span>
              </div>
              <div className="qbig">{current.title}</div>
              <div className="qsmall">{current.hint}</div>
              {current.options.map((opt, i) => (
                <div key={i} className="qopt"><span className="cb" />{opt}</div>
              ))}
              <div className="qfoot">{current.cta}</div>
            </div>
            <div className="tpl-flow-type-nav">
              <button
                type="button"
                className={`nav-arrow ${!canPrev ? 'is-disabled' : ''}`}
                aria-label="Previous"
                disabled={!canPrev}
                onClick={() => canPrev && setQ(q - 1)}
              >
                <IcChevronLeft size={14} stroke={2} />
              </button>
              <button
                type="button"
                className={`nav-arrow active ${!canNext ? 'is-disabled' : ''}`}
                aria-label="Next"
                disabled={!canNext}
                onClick={() => canNext && setQ(q + 1)}
              >
                <IcChevronRight size={14} stroke={2} />
              </button>
            </div>
          </div>
        </div>

        <div className="tpl-modal-foot">
          <button className="btn btn-ghost-sm" type="button" onClick={onClose}>{t.flowEditCancel}</button>
          <button
            className="btn btn-primary"
            type="button"
            onClick={() => {
              if (tab === 'create') {
                onCreate && onCreate(opts.find(o => o.id === selected));
              } else {
                const flow = allExisting.find(f => f.id === existingId);
                if (flow && onUseExisting) onUseExisting(flow);
              }
            }}
          >
            {t.flowTypeSave || t.flowEditCreate}
          </button>
        </div>
      </div>
    </div>
  );
};

// ---- Block-type catalog for the Add Content menu ----
// Flat list (used for collapsed-block label/icon lookups)
const FLOW_BLOCK_TYPES = [
  { kind: 'heading-large', label: 'Large heading', icon: 'IcText' },
  { kind: 'heading-small', label: 'Small heading', icon: 'IcText' },
  { kind: 'body',          label: 'Body',          icon: 'IcText' },
  { kind: 'caption',       label: 'Caption',       icon: 'IcText' },
  { kind: 'paragraph',     label: 'Paragraph',     icon: 'IcCatTextAnswer' },
  { kind: 'image',         label: 'Image',         icon: 'IcImage' },
  { kind: 'short-text',    label: 'Short answer',  icon: 'IcCatTextAnswer' },
  { kind: 'date',          label: 'Date picker',   icon: 'IcCatTextAnswer' },
  { kind: 'multiple',      label: 'Multiple choice', icon: 'IcCatSelection' },
  { kind: 'single',        label: 'Single choice', icon: 'IcCatSelection' },
  { kind: 'dropdown',      label: 'Dropdown',      icon: 'IcCatSelection' },
  { kind: 'opt-in',        label: 'Opt-in',        icon: 'IcCatSelection' },
  { kind: 'contact-group', label: 'Contact group', icon: 'IcContact' },
];

// Two-level catalog used by the new Add Content menu (4 categories → items)
const FLOW_BLOCK_CATEGORIES = [
  { id: 'text', label: 'Text', icon: 'IcCatText', items: [
    { kind: 'heading-large', label: 'Large heading' },
    { kind: 'heading-small', label: 'Small heading' },
    { kind: 'body',          label: 'Body' },
    { kind: 'caption',       label: 'Caption' },
  ]},
  { id: 'media', label: 'Media', icon: 'IcImage', items: [
    { kind: 'image', label: 'Image' },
  ]},
  { id: 'text-answer', label: 'Text Answer', icon: 'IcCatTextAnswer', items: [
    { kind: 'short-text', label: 'Short answer' },
    { kind: 'paragraph',  label: 'Paragraph' },
    { kind: 'date',       label: 'Date picker' },
  ]},
  { id: 'selection', label: 'Selection', icon: 'IcCatSelection', items: [
    { kind: 'single',    label: 'Single choice' },
    { kind: 'multiple',  label: 'Multiple choice' },
    { kind: 'dropdown',  label: 'Dropdown' },
    { kind: 'opt-in',    label: 'Opt-in' },
  ]},
];

// Custom icons used by the menu (not exposed globally)
const IcCatText = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 6h10" /><path d="M9 6v14" />
    <path d="M14 12h6" /><path d="M17 12v8" />
  </svg>
);
const IcCatTextAnswer = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 5h16v11H8l-4 4V5Z" />
    <path d="M9 9h6" /><path d="M12 9v4" />
  </svg>
);
const IcCatSelection = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="5" cy="6" r="1.4" />
    <circle cx="5" cy="12" r="1.4" />
    <circle cx="5" cy="18" r="1.4" />
    <path d="M10 6h11" /><path d="M10 12h11" /><path d="M10 18h11" />
  </svg>
);
const IcBan = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="9" />
    <path d="M5.6 5.6l12.8 12.8" />
  </svg>
);

const flowIconFor = (name) => {
  const map = {
    IcText, IcImage, IcCheckSq,
    IcDot, IcDropdown, IcInputBox,
    IcContact,
    IcCatText, IcCatTextAnswer, IcCatSelection,
  };
  const C = map[name] || IcSquare;
  return <C size={14} stroke={1.7} />;
};

// ---- Required toggle (Meta-style switch) used inside block editors ----
const TplFlowRequiredToggle = ({ value, onChange }) => (
  <label className="tpl-flow-required">
    <span className="tpl-flow-required-lbl">Required</span>
    <span
      className={`tpl-flow-required-switch ${value ? 'on' : ''}`}
      onClick={() => onChange(!value)}
      role="switch"
      aria-checked={!!value}
    >
      <span className="knob" />
    </span>
  </label>
);

// ---- Flow editor (full-screen modal) ----
const TplFlowEditor = ({ flow, onClose, onSave, t }) => {
  // Deep-clone the input flow so edits stay scoped to this editor session.
  const [screens, setScreens] = useStateF(() =>
    JSON.parse(JSON.stringify((flow && flow.screens) || window.defaultSurveyFlow.screens))
  );
  const [activeScreenId, setActiveScreenId] = useStateF(screens[0]?.id || 's1');
  const [addOpen, setAddOpen] = useStateF(false);
  const [hoverCat, setHoverCat] = useStateF(null); // id of category whose submenu is open
  const [expandedBlocks, setExpandedBlocks] = useStateF({}); // id -> bool
  const [dragIdx, setDragIdx] = useStateF(null);
  const [dragOverIdx, setDragOverIdx] = useStateF(null);
  const [dragScreenIdx, setDragScreenIdx] = useStateF(null);
  const [dragOverScreenIdx, setDragOverScreenIdx] = useStateF(null);
  const [expandTitle, setExpandTitle] = useStateF(true);
  const [expandButton, setExpandButton] = useStateF(true);
  const addRef = useRefF();

  useEffectF(() => {
    const onDoc = (e) => { if (addRef.current && !addRef.current.contains(e.target)) setAddOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const active = screens.find(s => s.id === activeScreenId) || screens[0];
  const isLastScreen = screens.findIndex(s => s.id === activeScreenId) === screens.length - 1;
  const defaultCta = isLastScreen ? (t.flowDone || 'Done') : (t.flowContinue || 'Continue');

  // ----- Screen actions -----
  const addScreen = () => {
    const next = { id: 's' + Date.now(), title: `Question ${screens.length + 1}`, content: [] };
    setScreens([...screens, next]);
    setActiveScreenId(next.id);
  };
  const removeScreen = (id) => {
    if (screens.length <= 1) return;
    const next = screens.filter(s => s.id !== id);
    setScreens(next);
    if (activeScreenId === id) setActiveScreenId(next[0].id);
  };
  const renameScreen = (title) => {
    setScreens(screens.map(s => s.id === activeScreenId ? { ...s, title } : s));
  };

  // ----- Block actions -----
  const updScreen = (patch) => {
    setScreens(screens.map(s => s.id === activeScreenId ? { ...s, ...patch } : s));
  };
  const updBlock = (id, patch) => {
    updScreen({ content: (active.content || []).map(c => c.id === id ? { ...c, ...patch } : c) });
  };
  const removeBlock = (id) => {
    updScreen({ content: (active.content || []).filter(c => c.id !== id) });
  };
  const moveBlock = (id, dir) => {
    const list = [...(active.content || [])];
    const i = list.findIndex(c => c.id === id);
    if (i < 0) return;
    const j = dir === 'up' ? i - 1 : i + 1;
    if (j < 0 || j >= list.length) return;
    [list[i], list[j]] = [list[j], list[i]];
    updScreen({ content: list });
  };
  const reorderScreen = (fromIdx, toIdx) => {
    if (fromIdx === toIdx || fromIdx == null || toIdx == null) return;
    setScreens(prev => {
      const tops = prev.filter(s => !s.parentScreenId);
      if (fromIdx < 0 || fromIdx >= tops.length || toIdx < 0 || toIdx >= tops.length) return prev;
      const [moved] = tops.splice(fromIdx, 1);
      tops.splice(toIdx, 0, moved);
      // Rebuild: each top-level screen followed by its sub-screens
      const result = [];
      tops.forEach(t => {
        result.push(t);
        prev.filter(s => s.parentScreenId === t.id).forEach(sub => result.push(sub));
      });
      return result;
    });
  };
  const reorderBlock = (fromIdx, toIdx) => {
    if (fromIdx === toIdx || fromIdx == null || toIdx == null) return;
    const list = [...(active.content || [])];
    if (fromIdx < 0 || fromIdx >= list.length || toIdx < 0 || toIdx >= list.length) return;
    const [moved] = list.splice(fromIdx, 1);
    list.splice(toIdx, 0, moved);
    updScreen({ content: list });
  };
  const MAX_CONTENT = 8;
  const addBlock = (kind) => {
    if ((active.content || []).length >= MAX_CONTENT) {
      setAddOpen(false);
      setHoverCat(null);
      return;
    }
    const id = 'b' + Date.now();
    const defaults = {
      'heading-large': { id, kind, text: 'New heading' },
      'heading-small': { id, kind, text: 'New heading' },
      'body':          { id, kind, text: 'Body text' },
      'caption':       { id, kind, text: 'Caption text' },
      'paragraph':     { id, kind, label: 'Leave a comment', helper: '', required: false },
      'image':         { id, kind, mediaId: '' },
      'multiple':      { id, kind, label: 'Choose all that apply', options: ['Option 1', 'Option 2'], required: false },
      'single':        { id, kind, label: 'Choose one', options: ['Option 1', 'Option 2'], required: false },
      'dropdown':      { id, kind, label: 'Select an option', options: ['Option 1', 'Option 2'], required: false },
      'short-text':    { id, kind, label: 'Short answer', placeholder: '', required: false },
      'date':          { id, kind, label: 'Pick a date', placeholder: 'YYYY-MM-DD', required: false },
      'opt-in':        { id, kind, label: 'Opt-in', text: 'I agree to the terms and conditions.', required: false },
      'contact-group': { id, kind, label: 'Contact group', groupIds: [], required: false },
    };
    updScreen({ content: [...(active.content || []), defaults[kind] || { id, kind }] });
    setExpandedBlocks(prev => ({ ...prev, [id]: true }));
    setAddOpen(false);
    setHoverCat(null);
  };
  const toggleBlock = (id) => setExpandedBlocks(prev => ({ ...prev, [id]: !prev[id] }));

  const blockPreviewText = (c) => {
    if (c.kind === 'heading-large') return (c.text || '').trim();
    if (c.kind === 'paragraph') return (c.label || c.helper || '').trim();
    if (c.kind === 'multiple' || c.kind === 'single' || c.kind === 'dropdown') return (c.label || '').trim();
    if (c.kind === 'short-text') return (c.label || c.placeholder || '').trim();
    if (c.kind === 'image') return (window.mediaSamples || []).find(m => m.id === c.mediaId)?.name || '';
    return '';
  };
  const truncate = (s, n) => (s && s.length > n ? s.slice(0, n - 1) + '…' : s || '');

  return (
    <div className="tpl-modal-overlay">
      <div className="tpl-modal tpl-flow-editor v2">
        <div className="tpl-modal-head">
          <div className="tpl-modal-title">{t.flowTypeTitle}</div>
          <button className="tpl-modal-close" onClick={onClose}><IcClose size={16} stroke={2} /></button>
        </div>

        <div className="tpl-flow-editor-body">
          {/* Screens list — top-level screens render their sub-screens (Read more) nested below */}
          <div className="tpl-flow-screens">
            <h5>{t.flowEditScreens}</h5>
            {screens.filter(s => !s.parentScreenId).map((s, topIdx) => {
              const subs = screens.filter(x => x.parentScreenId === s.id);
              const topCount = screens.filter(x => !x.parentScreenId).length;
              return (
                <React.Fragment key={s.id}>
                  <div
                    className={`tpl-flow-screen-row ${activeScreenId === s.id ? 'active' : ''} ${dragScreenIdx === topIdx ? 'is-dragging' : ''} ${dragOverScreenIdx === topIdx && dragScreenIdx !== topIdx ? 'is-drag-over' : ''}`}
                    onClick={() => setActiveScreenId(s.id)}
                    draggable={dragScreenIdx === topIdx}
                    onDragOver={(e) => { if (dragScreenIdx == null) return; e.preventDefault(); if (dragOverScreenIdx !== topIdx) setDragOverScreenIdx(topIdx); }}
                    onDragLeave={() => { if (dragOverScreenIdx === topIdx) setDragOverScreenIdx(null); }}
                    onDrop={(e) => { e.preventDefault(); reorderScreen(dragScreenIdx, topIdx); setDragScreenIdx(null); setDragOverScreenIdx(null); }}
                    onDragEnd={() => { setDragScreenIdx(null); setDragOverScreenIdx(null); }}
                  >
                    <span
                      className="grip"
                      aria-hidden="true"
                      title="Drag to reorder"
                      onMouseDown={(e) => { e.stopPropagation(); setDragScreenIdx(topIdx); }}
                      onMouseUp={() => { if (dragScreenIdx != null) setDragScreenIdx(null); }}
                      onDragStart={(e) => { setDragScreenIdx(topIdx); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', String(topIdx)); } catch(_) {} }}
                    >⠿</span>
                    <span className="lbl">{s.title}</span>
                    {topCount > 1 && (
                      <span className="x" onClick={(e) => { e.stopPropagation(); removeScreen(s.id); }}>
                        <IcClose size={11} stroke={2} />
                      </span>
                    )}
                  </div>
                  {subs.map(sub => (
                    <div
                      key={sub.id}
                      className={`tpl-flow-screen-row tpl-flow-screen-sub ${activeScreenId === sub.id ? 'active' : ''}`}
                      onClick={() => setActiveScreenId(sub.id)}
                    >
                      <span className="grip" aria-hidden="true">⠿</span>
                      <span className="lbl">{sub.title}</span>
                    </div>
                  ))}
                </React.Fragment>
              );
            })}
            <div className="tpl-flow-add-new" onClick={addScreen}>
              <IcPlus size={12} stroke={2.2} /> {t.flowEditAddNew}
            </div>
          </div>

          {/* Content editor */}
          <div className="tpl-flow-edit">
            <h5>{t.flowEditContent}</h5>

            {/* Screen title section (collapsible) */}
            <div className={`tpl-flow-section ${expandTitle ? 'open' : ''}`}>
              <div className="tpl-flow-section-head" onClick={() => setExpandTitle(o => !o)}>
                <span className="ttl">{t.flowEditScreenTitle}</span>
                <span className="chev">{expandTitle ? <IcChevronUp size={14} stroke={1.7} /> : <IcChevronDown size={14} stroke={1.7} />}</span>
              </div>
              {expandTitle && (
                <div className="tpl-flow-section-body">
                  <input
                    className="tpl-flow-mini-input"
                    value={active.title || ''}
                    onChange={(e) => renameScreen(e.target.value)}
                    placeholder={t.flowEditScreenTitle}
                  />
                </div>
              )}
            </div>

            {(active.content || []).map((c, idx) => {
              const meta = FLOW_BLOCK_TYPES.find(b => b.kind === c.kind);
              const expanded = !!expandedBlocks[c.id];
              const preview = blockPreviewText(c);
              return (
              <div
                key={c.id}
                className={`tpl-flow-block ${expanded ? 'open' : ''} ${dragIdx === idx ? 'is-dragging' : ''} ${dragOverIdx === idx && dragIdx !== idx ? 'is-drag-over' : ''}`}
                draggable={dragIdx === idx}
                onDragOver={(e) => { if (dragIdx == null) return; e.preventDefault(); if (dragOverIdx !== idx) setDragOverIdx(idx); }}
                onDragLeave={() => { if (dragOverIdx === idx) setDragOverIdx(null); }}
                onDrop={(e) => { e.preventDefault(); reorderBlock(dragIdx, idx); setDragIdx(null); setDragOverIdx(null); }}
                onDragEnd={() => { setDragIdx(null); setDragOverIdx(null); }}
              >
                <div className="tpl-flow-block-head" onClick={() => toggleBlock(c.id)}>
                  <span
                    className="grip"
                    aria-hidden="true"
                    title="Drag to reorder"
                    onMouseDown={() => setDragIdx(idx)}
                    onMouseUp={() => { if (dragIdx != null) setDragIdx(null); }}
                    onDragStart={(e) => { setDragIdx(idx); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', String(idx)); } catch(_) {} }}
                  >⠿</span>
                  <span className="ttl">
                    <span className="ic">{flowIconFor(meta?.icon)}</span>
                    <span className="nm">{meta?.label || c.kind}</span>
                    {!expanded && preview && <span className="sub"> . {truncate(preview, 30)}</span>}
                  </span>
                  <span className="acts" onClick={(e) => e.stopPropagation()}>
                    {expanded && (
                      <>
                        <button
                          type="button"
                          className="icon-btn"
                          title="Move up"
                          onClick={() => moveBlock(c.id, 'up')}
                          disabled={idx === 0}
                        ><IcChevronUp size={12} stroke={1.7} /></button>
                        <button
                          type="button"
                          className="icon-btn"
                          title="Move down"
                          onClick={() => moveBlock(c.id, 'down')}
                          disabled={idx === (active.content || []).length - 1}
                        ><IcChevronDown size={12} stroke={1.7} /></button>
                        <button
                          type="button"
                          className="icon-btn danger"
                          title="Delete"
                          onClick={() => removeBlock(c.id)}
                        ><IcTrash size={12} stroke={1.7} /></button>
                      </>
                    )}
                    <span className="chev" onClick={() => toggleBlock(c.id)}>
                      {expanded ? <IcChevronUp size={14} stroke={1.7} /> : <IcChevronDown size={14} stroke={1.7} />}
                    </span>
                  </span>
                </div>
                {expanded && (
                <div className="tpl-flow-block-body">
                  {(c.kind === 'heading-large' || c.kind === 'heading-small' || c.kind === 'body' || c.kind === 'caption') && (
                    <textarea
                      className="tpl-flow-mini-textarea"
                      value={c.text || ''}
                      onChange={(e) => updBlock(c.id, { text: e.target.value })}
                      placeholder="Text"
                    />
                  )}
                  {c.kind === 'paragraph' && (
                    <>
                      <div className="tpl-flow-mini-input-wrap">
                        <input
                          className="tpl-flow-mini-input"
                          value={c.label || ''}
                          maxLength={20}
                          onChange={(e) => updBlock(c.id, { label: e.target.value.slice(0, 20) })}
                          placeholder="Label"
                        />
                        <span className="tpl-flow-mini-counter">{(c.label || '').length}/20</span>
                      </div>
                      <div className="tpl-flow-mini-label">Instructions <span className="opt">· Optional</span></div>
                      <div className="tpl-flow-mini-input-wrap">
                        <input
                          className="tpl-flow-mini-input"
                          value={c.helper || ''}
                          maxLength={80}
                          onChange={(e) => updBlock(c.id, { helper: e.target.value.slice(0, 80) })}
                          placeholder=""
                        />
                        <span className="tpl-flow-mini-counter">{(c.helper || '').length}/80</span>
                      </div>
                      <TplFlowRequiredToggle value={!!c.required} onChange={(v) => updBlock(c.id, { required: v })} />
                    </>
                  )}
                  {c.kind === 'image' && (
                    <div className="tpl-flow-image">
                      <div className="tpl-flow-image-head">
                        <span className="lbl">
                          <span className="ic"><IcImage size={14} stroke={1.7} /></span>
                          <strong>Media</strong>
                          <span className="dot"> . </span>
                          <em>choose JPG or PNG file</em>
                        </span>
                        <button
                          type="button"
                          className="icon-btn"
                          title="Remove media"
                          onClick={() => updBlock(c.id, { mediaId: '' })}
                          aria-label="Remove"
                        ><IcTrash size={14} stroke={1.7} /></button>
                      </div>
                      <div className="tpl-flow-image-drop">
                        <div className="title">
                          Drag and drop your file
                          <br />
                          Or <span className="link">choose file on your device</span>
                        </div>
                        {!c.mediaId && (
                          <div className="err">
                            <IcBan size={16} /> An image must be selected
                          </div>
                        )}
                        <div className="hints">
                          Maximum file size: 300kb
                          <br />
                          Acceptable file types: JPEG, PNG
                        </div>
                      </div>
                    </div>
                  )}
                  {(c.kind === 'multiple' || c.kind === 'single' || c.kind === 'dropdown') && (
                    <>
                      <input
                        className="tpl-flow-mini-input"
                        value={c.label || ''}
                        onChange={(e) => updBlock(c.id, { label: e.target.value })}
                        placeholder={t.flowLabel}
                      />
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>{t.flowOptions}</div>
                      {(c.options || []).map((opt, i) => (
                        <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                          <input
                            className="tpl-flow-mini-input"
                            style={{ flex: 1 }}
                            value={opt}
                            onChange={(e) => {
                              const next = [...c.options];
                              next[i] = e.target.value;
                              updBlock(c.id, { options: next });
                            }}
                          />
                          {c.options.length > 1 && (
                            <button
                              type="button"
                              className="icon-btn danger"
                              onClick={() => updBlock(c.id, { options: c.options.filter((_, j) => j !== i) })}
                              style={{ width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: 'none', background: 'transparent', color: 'var(--text-muted)', cursor: 'pointer', borderRadius: 6 }}
                            ><IcClose size={12} stroke={2} /></button>
                          )}
                        </div>
                      ))}
                      <button
                        type="button"
                        className="tpl-flow-add-content"
                        style={{ alignSelf: 'flex-start' }}
                        onClick={() => updBlock(c.id, { options: [...(c.options || []), `Option ${(c.options || []).length + 1}`] })}
                      >
                        <IcPlus size={12} stroke={2.2} /> {t.flowAddOption}
                      </button>
                      <TplFlowRequiredToggle value={!!c.required} onChange={(v) => updBlock(c.id, { required: v })} />
                    </>
                  )}
                  {c.kind === 'short-text' && (
                    <>
                      <div className="tpl-flow-mini-input-wrap">
                        <input
                          className="tpl-flow-mini-input"
                          value={c.label || ''}
                          maxLength={20}
                          onChange={(e) => updBlock(c.id, { label: e.target.value.slice(0, 20) })}
                          placeholder="Label"
                        />
                        <span className="tpl-flow-mini-counter">{(c.label || '').length}/20</span>
                      </div>
                      <div className="tpl-flow-mini-label">Instructions <span className="opt">· Optional</span></div>
                      <div className="tpl-flow-mini-input-wrap">
                        <input
                          className="tpl-flow-mini-input"
                          value={c.helper || ''}
                          maxLength={80}
                          onChange={(e) => updBlock(c.id, { helper: e.target.value.slice(0, 80) })}
                          placeholder=""
                        />
                        <span className="tpl-flow-mini-counter">{(c.helper || '').length}/80</span>
                      </div>
                      <TplFlowRequiredToggle value={!!c.required} onChange={(v) => updBlock(c.id, { required: v })} />
                    </>
                  )}
                  {c.kind === 'date' && (
                    <>
                      <input
                        className="tpl-flow-mini-input"
                        value={c.label || ''}
                        onChange={(e) => updBlock(c.id, { label: e.target.value })}
                        placeholder={t.flowLabel || 'Label'}
                      />
                      <input
                        className="tpl-flow-mini-input"
                        value={c.helper || ''}
                        onChange={(e) => updBlock(c.id, { helper: e.target.value })}
                        placeholder="Instructions (optional)"
                      />
                      <TplFlowRequiredToggle value={!!c.required} onChange={(v) => updBlock(c.id, { required: v })} />
                    </>
                  )}
                  {c.kind === 'opt-in' && (
                    <>
                      <div className="tpl-flow-mini-input-wrap">
                        <textarea
                          className="tpl-flow-mini-input tpl-flow-optin-textarea"
                          value={c.text || ''}
                          maxLength={300}
                          onChange={(e) => updBlock(c.id, { text: e.target.value.slice(0, 300) })}
                          placeholder="Label"
                          rows={4}
                        />
                        <span className="tpl-flow-mini-counter">{(c.text || '').length}/300</span>
                      </div>
                      <div className="tpl-flow-mini-label">Read more link <span className="opt">· Optional</span></div>
                      <div className="tpl-flow-optin-linkrow">
                        {!c.readMoreScreenId ? (
                          <button
                            type="button"
                            className="tpl-flow-optin-linkbtn"
                            onClick={() => {
                              const newScreenId = 's-rm-' + Date.now();
                              const newScreen = { id: newScreenId, title: 'Read more', content: [{ id: 'b-rm-' + Date.now(), kind: 'body', text: '' }], parentScreenId: activeScreenId, fromBlockId: c.id };
                              setScreens(prev => {
                                const updated = prev.map(s => s.id === activeScreenId
                                  ? { ...s, content: (s.content || []).map(b => b.id === c.id ? { ...b, readMoreScreenId: newScreenId } : b) }
                                  : s);
                                return [...updated, newScreen];
                              });
                              setActiveScreenId(newScreenId);
                            }}
                          >
                            <IcPlus size={12} stroke={2.2} /> Add "Read more" screen
                          </button>
                        ) : (
                          <>
                            <button
                              type="button"
                              className="tpl-flow-optin-linkbtn"
                              onClick={() => setActiveScreenId(c.readMoreScreenId)}
                            >
                              Edit content
                            </button>
                            <button
                              type="button"
                              className="tpl-flow-optin-linkbtn"
                              onClick={() => {
                                const rmId = c.readMoreScreenId;
                                setScreens(prev => prev
                                  .filter(s => s.id !== rmId)
                                  .map(s => s.id === activeScreenId
                                    ? { ...s, content: (s.content || []).map(b => b.id === c.id ? { ...b, readMoreScreenId: null } : b) }
                                    : s));
                              }}
                            >
                              Delete link
                            </button>
                          </>
                        )}
                      </div>
                      <TplFlowRequiredToggle value={!!c.required} onChange={(v) => updBlock(c.id, { required: v })} />
                    </>
                  )}
                  {c.kind === 'contact-group' && (
                    <>
                      <input
                        className="tpl-flow-mini-input"
                        value={c.label || ''}
                        onChange={(e) => updBlock(c.id, { label: e.target.value })}
                        placeholder={t.flowLabel}
                      />
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>Select one or more contact groups</div>
                      {window.TplContactGroupMulti && (
                        <window.TplContactGroupMulti
                          value={c.groupIds || []}
                          onChange={(ids) => updBlock(c.id, { groupIds: ids })}
                          t={t}
                        />
                      )}
                      <TplFlowRequiredToggle value={!!c.required} onChange={(v) => updBlock(c.id, { required: v })} />
                    </>
                  )}
                </div>
                )}
              </div>
              );
            })}

            {/* Button (CTA) section */}
            <div className={`tpl-flow-section ${expandButton ? 'open' : ''}`}>
              <div className="tpl-flow-section-head" onClick={() => setExpandButton(o => !o)}>
                <span className="ttl">{t.flowEditButton}</span>
                <span className="chev">{expandButton ? <IcChevronUp size={14} stroke={1.7} /> : <IcChevronDown size={14} stroke={1.7} />}</span>
              </div>
              {expandButton && (
                <div className="tpl-flow-section-body">
                  <div className="tpl-input-with-counter">
                    <input
                      className="tpl-flow-mini-input"
                      value={active.cta || defaultCta}
                      onChange={(e) => updScreen({ cta: e.target.value.slice(0, 30) })}
                      maxLength={30}
                    />
                    <span className="tpl-input-counter">{(active.cta || defaultCta).length}/30</span>
                  </div>
                </div>
              )}
            </div>

            {/* Add content — 2-level cascading menu (categories → items) */}
            <div className="tpl-flow-add-content-wrap" ref={addRef}>
              {(active.content || []).length >= MAX_CONTENT && (
                <div className="tpl-flow-add-max-note">You can add a maximum of {MAX_CONTENT}.</div>
              )}
              <button
                type="button"
                className={`tpl-flow-add-content ${(active.content || []).length >= MAX_CONTENT ? 'is-disabled' : ''}`}
                disabled={(active.content || []).length >= MAX_CONTENT}
                onClick={() => { if ((active.content || []).length >= MAX_CONTENT) return; setAddOpen(o => !o); setHoverCat(null); }}
              >
                <IcPlus size={14} stroke={2.2} /> <span>{t.flowEditAddContent}</span>
                <IcChevronDown size={14} stroke={1.7} />
              </button>
              {addOpen && (
                <div className="tpl-flow-add-content-menu cascade">
                  {(active && active.parentScreenId
                    ? FLOW_BLOCK_CATEGORIES.filter(c => c.id === 'text' || c.id === 'media')
                    : FLOW_BLOCK_CATEGORIES
                  ).map(cat => (
                    <div
                      key={cat.id}
                      className={`cat ${hoverCat === cat.id ? 'active' : ''}`}
                      onMouseEnter={() => setHoverCat(cat.id)}
                      onClick={() => setHoverCat(cat.id)}
                    >
                      <span className="ic">{flowIconFor(cat.icon)}</span>
                      <span className="lbl">{cat.label}</span>
                      <span className="chev"><IcChevronRight size={12} stroke={1.7} /></span>
                      {hoverCat === cat.id && (
                        <div className="tpl-flow-add-content-submenu" onClick={(e) => e.stopPropagation()}>
                          {cat.items.map(it => (
                            <div
                              key={it.kind}
                              className="sub-item"
                              onClick={() => addBlock(it.kind)}
                            >
                              {it.label}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Right: Preview (matches Flow Type modal preview) */}
          <div className="tpl-flow-edit-preview">
            <div className="tpl-flow-edit-preview-bar" />
            <div className="qcard">
              <div className="qhead">
                <span className="qhead-title">{active.title}</span>
                <span className="acts">
                  <span className="act"><IcMore size={14} stroke={1.7} /></span>
                  <span className="act"><IcClose size={14} stroke={2} /></span>
                </span>
              </div>
              {(active.content || []).map((c) => {
                if (c.kind === 'heading-large') {
                  return <div key={c.id} className="qbig">{c.text}</div>;
                }
                if (c.kind === 'paragraph') {
                  return (
                    <React.Fragment key={c.id}>
                      {c.label && <div className="qsmall">{c.label}{c.required ? ' *' : ''}</div>}
                      <textarea className="qparaInput" rows={3} placeholder={c.helper || ''} readOnly />
                    </React.Fragment>
                  );
                }
                if (c.kind === 'image') {
                  return <div key={c.id} className="qimg" />;
                }
                if (c.kind === 'multiple' || c.kind === 'single') {
                  const lbl = (c.label || '').trim();
                  return (
                    <React.Fragment key={c.id}>
                      {lbl && <div className="qsmall">{lbl}{lbl.endsWith(':') ? '' : ':'}</div>}
                      {(c.options || []).map((opt, i) => (
                        <div key={i} className="qopt">
                          <span className="cb" style={c.kind === 'single' ? { borderRadius: '50%' } : null} />
                          {opt}
                        </div>
                      ))}
                    </React.Fragment>
                  );
                }
                if (c.kind === 'dropdown') {
                  return (
                    <React.Fragment key={c.id}>
                      {c.label && <div className="qsmall">{c.label}</div>}
                      <div className="qdrop">{(c.options || [])[0] || 'Select…'}</div>
                    </React.Fragment>
                  );
                }
                if (c.kind === 'short-text') {
                  return (
                    <React.Fragment key={c.id}>
                      {c.label && <div className="qsmall">{c.label}{c.required ? ' *' : ''}</div>}
                      <div className="qdrop placeholder">{c.placeholder || '—'}</div>
                    </React.Fragment>
                  );
                }
                if (c.kind === 'date') {
                  return (
                    <React.Fragment key={c.id}>
                      {c.label && <div className="qsmall">{c.label}{c.required ? ' *' : ''}</div>}
                      <div className="qdate">
                        <span className="qdate-text">{c.placeholder || 'YYYY-MM-DD'}</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                          <rect x="3" y="4" width="18" height="18" rx="2"/>
                          <line x1="16" y1="2" x2="16" y2="6"/>
                          <line x1="8" y1="2" x2="8" y2="6"/>
                          <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                      </div>
                      {c.helper && <div className="qhelper">{c.helper}</div>}
                    </React.Fragment>
                  );
                }
                if (c.kind === 'contact-group') {
                  return (
                    <React.Fragment key={c.id}>
                      {c.label && <div className="qsmall">{c.label}</div>}
                      <div className="qdrop">{(c.groupIds || []).length} group(s) selected</div>
                    </React.Fragment>
                  );
                }
                return null;
              })}
              <div className="qfoot">{active.cta || defaultCta}</div>
            </div>
          </div>
        </div>

        <div className="tpl-modal-foot with-note">
          <div className="tpl-modal-note"><IcInfo size={12} stroke={1.7} /> {t.flowEditNote}</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-ghost-sm" type="button" onClick={onClose}>{t.flowEditCancel}</button>
            <button
              className="btn btn-primary"
              type="button"
              onClick={() => onSave({ type: 'survey', name: 'Survey-Customer-Feedback', screens })}
            >
              {t.flowEditCreate}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TplFlowTypeModal, TplFlowEditor });