// T2 Falcon Admin — Template Management page

const { useState: useStateTM, useEffect: useEffectTM, useRef: useRefTM, useMemo: useMemoTM } = React;

// ---- Picker (first screen): Falcon vs Client ----
const TmPicker = ({ t, onPick }) => (
  <div className="tpl-picker-page tm-picker-page">
    <div className="tpl-picker-card">
      <div className="tpl-picker-head">
        <div>
          <h2>{t.tmPickerTitle}</h2>
          <p>{t.tmPickerSubtitle}</p>
        </div>
      </div>
      <div className="tpl-picker-grid">
        <button className="tpl-picker-tile falcon" onClick={() => onPick('falcon')}>
          <span className="ic-wrap"><T2Mark size={28} color="white" /></span>
          <span className="ttl">{t.tmViewAsFalcon}</span>
          <span className="dsc">{t.tmViewAsFalconDesc}</span>
          <span className="cta">{t.tmViewAsFalcon} <IcChevronRight size={14} stroke={2} /></span>
        </button>
        <button className="tpl-picker-tile client" onClick={() => onPick('client')}>
          <span className="ic-wrap"><IcBuildingS size={26} stroke={1.7} /></span>
          <span className="ttl">{t.tmViewAsClient}</span>
          <span className="dsc">{t.tmViewAsClientDesc}</span>
          <span className="cta">{t.tmViewAsClient} <IcChevronRight size={14} stroke={2} /></span>
        </button>
      </div>
    </div>
  </div>
);

// ---- Multi-select with chips + search dropdown ----
const TmCheckerSelect = ({ value = [], onChange, candidates = [], placeholder = 'Add checker', readOnly = false, hasError = false, t }) => {
  const [open, setOpen] = useStateTM(false);
  const [search, setSearch] = useStateTM('');
  const ref = useRefTM(null);

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

  const selectedItems = candidates.filter(c => value.includes(c.id));
  const filtered = candidates.filter(c =>
    !search || (c.name || '').toLowerCase().includes(search.toLowerCase()) ||
    (c.username || '').toLowerCase().includes(search.toLowerCase())
  );
  const toggle = (id) => {
    if (readOnly) return;
    const next = value.includes(id) ? value.filter(x => x !== id) : [...value, id];
    onChange(next);
  };

  if (readOnly) {
    return (
      <div className="tm-checker-readonly">
        {selectedItems.length === 0
          ? <span className="empty">—</span>
          : selectedItems.map(c => <span key={c.id} className="tm-readonly-chip">{c.name}</span>)
        }
      </div>
    );
  }

  return (
    <div className={`tm-checker-select ${open ? 'open' : ''} ${selectedItems.length ? 'has-values' : ''} ${hasError ? 'has-error' : ''}`} ref={ref}>
      <div className="tm-checker-control" onClick={() => setOpen(o => !o)}>
        <div className="tm-checker-chips">
          {selectedItems.length === 0 && <span className="placeholder">{placeholder}</span>}
          {selectedItems.map(c => (
            <span key={c.id} className="tm-checker-chip">
              {c.name}
              <span className="x" onClick={(e) => { e.stopPropagation(); toggle(c.id); }}>
                <IcClose size={10} stroke={2.4} />
              </span>
            </span>
          ))}
        </div>
        <span className="tm-checker-chev"><IcChevronDown size={14} stroke={1.7} /></span>
      </div>
      {open && (
        <div className="tm-checker-menu" onClick={(e) => e.stopPropagation()}>
          <div className="tm-checker-search">
            <IcSearch size={14} stroke={1.7} />
            <input
              type="text"
              placeholder={t.tmSearch || 'Search'}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          <div className="tm-checker-list">
            {filtered.map(c => {
              const checked = value.includes(c.id);
              return (
                <div
                  key={c.id}
                  className={`tm-checker-row ${checked ? 'checked' : ''}`}
                  onClick={() => toggle(c.id)}
                >
                  <span className="tm-checker-cb">{checked && <IcCheck size={10} stroke={3} />}</span>
                  <div className="meta">
                    <div className="name">{c.name}</div>
                    <div className="un">{c.username}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

// ---- Channel tab body (Body Type + Checker Levels) ----
const TmChannelBody = ({ value, onChange, readOnly, candidates, t, errors = {} }) => {
  const bodyType = value.bodyType || 'unrestricted';
  const levels = value.levels || 'one';
  const upd = (patch) => onChange({ ...value, ...patch });

  const isUnrestricted = bodyType === 'unrestricted';

  // Mutual exclusion: hide users already selected at the other level from this picker's dropdown
  const lvl1 = value.level1 || [];
  const lvl2 = value.level2 || [];
  const candidatesForLevel1 = candidates.filter(c => !lvl2.includes(c.id));
  const candidatesForLevel2 = candidates.filter(c => !lvl1.includes(c.id));

  return (
    <div className="tm-channel-card">
      <div className="tm-channel-section">
        <div className="tm-channel-section-title">{t.tmBodyType}</div>
        {readOnly ? (
          <div className="tm-readonly-value">{isUnrestricted ? t.tmUnrestricted : t.tmRestricted}</div>
        ) : (
          <div className="tm-radio-row">
            <label className={`tm-radio-opt ${bodyType === 'restricted' ? 'on' : ''}`}>
              <span className="tm-radio" onClick={() => upd({ bodyType: 'restricted' })} />
              <span onClick={() => upd({ bodyType: 'restricted' })}>{t.tmRestricted}</span>
            </label>
            <label className={`tm-radio-opt ${isUnrestricted ? 'on' : ''}`}>
              <span className="tm-radio" onClick={() => upd({ bodyType: 'unrestricted' })} />
              <span onClick={() => upd({ bodyType: 'unrestricted' })}>{t.tmUnrestricted}</span>
            </label>
          </div>
        )}

        {isUnrestricted && (
          <div className="tm-unrestricted-notice">{t.tmUnrestrictedNotice}</div>
        )}
      </div>

      {!isUnrestricted && (
        <>
          <div className="tm-channel-divider" />

          <div className="tm-channel-section">
            <div className="tm-channel-section-title with-icon">
              <IcLock size={14} stroke={1.7} /> {t.tmCheckerLevels}
            </div>
            {readOnly ? (
              <div className="tm-readonly-value bold">{levels === 'two' ? t.tmTwoLevels : t.tmOneLevel}</div>
            ) : (
              <div className="tm-radio-row">
                <label className={`tm-radio-opt ${levels === 'one' ? 'on' : ''}`}>
                  <span className="tm-radio" onClick={() => upd({ levels: 'one' })} />
                  <span onClick={() => upd({ levels: 'one' })}>{t.tmOneLevel}</span>
                </label>
                <label className={`tm-radio-opt ${levels === 'two' ? 'on' : ''}`}>
                  <span className="tm-radio" onClick={() => upd({ levels: 'two' })} />
                  <span onClick={() => upd({ levels: 'two' })}>{t.tmTwoLevels}</span>
                </label>
              </div>
            )}

            {levels === 'one' ? (
              <div className={`tm-checker-block ${errors.level1 ? 'has-error' : ''}`}>
                <label className="tm-checker-label">
                  {t.tmLevelCheckers} <span className="opt">({t.tmMultipleSelect})</span>
                </label>
                <TmCheckerSelect
                  value={value.level1 || []}
                  onChange={(ids) => upd({ level1: ids })}
                  candidates={candidatesForLevel1}
                  placeholder={(t.tmAddLevelChecker || 'Add Level {n} checker').replace('{n}', '1')}
                  readOnly={readOnly}
                  hasError={!!errors.level1}
                  t={t}
                />
                {errors.level1 && <div className="tm-checker-error">{t.tmCheckerRequired}</div>}
              </div>
            ) : (
              <div className="tm-checker-grid">
                <div className={`tm-checker-block ${errors.level1 ? 'has-error' : ''}`}>
                  <label className="tm-checker-label">
                    {t.tmFirstLevelCheckers} <span className="opt">({t.tmMultipleSelect})</span>
                  </label>
                  <TmCheckerSelect
                    value={value.level1 || []}
                    onChange={(ids) => upd({ level1: ids })}
                    candidates={candidatesForLevel1}
                    placeholder={(t.tmAddLevelChecker || 'Add Level {n} checker').replace('{n}', '1')}
                    readOnly={readOnly}
                    hasError={!!errors.level1}
                    t={t}
                  />
                  {errors.level1 && <div className="tm-checker-error">{t.tmCheckerRequired}</div>}
                </div>
                <div className={`tm-checker-block ${errors.level2 ? 'has-error' : ''}`}>
                  <label className="tm-checker-label">
                    {t.tmSecondLevelCheckers} <span className="opt">({t.tmMultipleSelect})</span>
                  </label>
                  <TmCheckerSelect
                    value={value.level2 || []}
                    onChange={(ids) => upd({ level2: ids })}
                    candidates={candidatesForLevel2}
                    placeholder={(t.tmAddLevelChecker || 'Add Level {n} checker').replace('{n}', '2')}
                    readOnly={readOnly}
                    hasError={!!errors.level2}
                    t={t}
                  />
                  {errors.level2 && <div className="tm-checker-error">{t.tmCheckerRequired}</div>}
                </div>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
};

// ---- Right side: scope header + tabs + body ----
const TmContent = ({ scopeNode, t, pushToast, onChangeView }) => {
  const candidates = window.sharedWithCandidates || [];
  const channels = ['whatsapp', 'voice', 'push', 'sms'];
  const channelLabel = {
    whatsapp: t.tmTabWhatsApp,
    voice: t.tmTabVoice,
    push: t.tmTabPush,
    sms: t.tmTabSMS,
  };
  const [tab, setTab] = useStateTM('whatsapp');
  const [mode, setMode] = useStateTM('view'); // 'view' | 'edit'

  // Per-scope, per-channel saved values
  const seed = () => ({
    whatsapp: { bodyType: 'unrestricted', levels: 'one', level1: [], level2: [] },
    voice:    { bodyType: 'unrestricted', levels: 'one', level1: [], level2: [] },
    push:     { bodyType: 'unrestricted', levels: 'one', level1: [], level2: [] },
    sms:      { bodyType: 'unrestricted', levels: 'one', level1: [], level2: [] },
  });
  const [saved, setSaved] = useStateTM(seed());
  const [draft, setDraft] = useStateTM(seed());
  const [errors, setErrors] = useStateTM({}); // { whatsapp: { level1: true, level2: true }, ... }

  // Reset when scope changes
  useEffectTM(() => {
    setSaved(seed());
    setDraft(seed());
    setMode('view');
    setErrors({});
  // eslint-disable-next-line
  }, [scopeNode?.id]);

  // Compute validation errors for the current draft (only restricted channels need checker levels)
  const computeErrors = (d) => {
    const out = {};
    for (const ch of channels) {
      const v = d[ch];
      if (!v || v.bodyType !== 'restricted') continue;
      const e = {};
      if (v.levels === 'one') {
        if (!v.level1 || v.level1.length === 0) e.level1 = true;
      } else {
        if (!v.level1 || v.level1.length === 0) e.level1 = true;
        if (!v.level2 || v.level2.length === 0) e.level2 = true;
      }
      if (e.level1 || e.level2) out[ch] = e;
    }
    return out;
  };

  const onEdit = () => { setDraft(JSON.parse(JSON.stringify(saved))); setMode('edit'); setErrors({}); };
  const onCancel = () => { setDraft(JSON.parse(JSON.stringify(saved))); setMode('view'); setErrors({}); };
  const onSave = () => {
    const errs = computeErrors(draft);
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      // Jump to the first channel that has an error so the user sees it
      const firstBad = channels.find(c => errs[c]);
      if (firstBad && firstBad !== tab) setTab(firstBad);
      pushToast && pushToast(t.tmSaveBlocked);
      return;
    }
    setErrors({});
    setSaved(JSON.parse(JSON.stringify(draft)));
    setMode('view');
    pushToast && pushToast(t.tmToastSaved);
  };

  const value = mode === 'edit' ? draft[tab] : saved[tab];
  const onChange = (next) => {
    setDraft(d => ({ ...d, [tab]: next }));
    // Clear errors for this tab as the user edits
    if (errors[tab]) {
      setErrors(e => {
        const { [tab]: _, ...rest } = e;
        return rest;
      });
    }
  };

  return (
    <>
      {/* Channel tabs — same chrome as Hierarchy's .tabs-bar.tabs-bar-with-toggle */}
      <div className="tabs-bar tabs-bar-with-toggle">
        <div className="tabs-bar-left">
          {channels.map(c => (
            <button
              key={c}
              type="button"
              className={`tab ${tab === c ? 'active' : ''}`}
              onClick={() => setTab(c)}
            >{channelLabel[c]}</button>
          ))}
        </div>
        {onChangeView && (
          <button
            type="button"
            className="tpl-back-to-picker tm-back-link"
            onClick={onChangeView}
            title={t.tplBackToPicker || 'Change view'}
          >
            <IcArrowLeft size={12} stroke={1.7} /> {t.tplBackToPicker || 'Change view'}
          </button>
        )}
      </div>

      <div className="content-body">
        <div className="node-header">
          <div className="node-title">
            {scopeNode && scopeNode.type === 'client'
              ? <BrandLogo brand={scopeNode.brand} size={32} />
              : <span className="node-avatar" style={{ background: 'white', border: '1px solid var(--border)', color: 'var(--teal)' }}><IcFalcon size={18} /></span>
            }
            <span>{scopeNode?.name || ''}</span>
          </div>
          <div className="node-actions">
            {mode === 'view' ? (
              <button className="btn btn-primary" type="button" onClick={onEdit}>{t.tmEdit}</button>
            ) : (
              <>
                <button className="btn btn-secondary" type="button" onClick={onCancel}>{t.tmCancel}</button>
                <button className="btn btn-primary" type="button" onClick={onSave}>{t.tmSave}</button>
              </>
            )}
          </div>
        </div>

        <TmChannelBody
          value={value}
          onChange={onChange}
          readOnly={mode === 'view'}
          candidates={candidates}
          errors={mode === 'edit' ? (errors[tab] || {}) : {}}
          t={t}
        />
      </div>
    </>
  );
};

// ---- Falcon-view tree (clients only, no drill-down) ----
const TmClientsTree = ({ tree, selected, onSelect, t }) => {
  // Only show the direct children of the Falcon root (i.e. clients)
  const clients = (tree?.children || []).filter(c => c.type === 'client');

  return (
    <div className="clients-panel tm-clients-panel with-falcon-head">
      <div className="clients-root">
        <div className="clients-root-inner" style={{ cursor: 'default' }}>
          <span className="clients-root-icon"><IcFalcon size={20} /></span>
          <span title={tree?.name || 'Falcon'}>{tree?.name || 'Falcon'}</span>
        </div>
      </div>
      <div className="clients-section-label">{t.falconClients || 'Clients'}</div>
      <div className="tm-clients-list">
        {clients.map(c => (
          <div
            key={c.id}
            className={`tm-client-row ${selected === c.id ? 'selected' : ''}`}
            onClick={() => onSelect(c.id)}
          >
            <BrandLogo brand={c.brand} size={24} />
            <span className="nm">{c.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---- Top-level Template Management page ----
const TemplateManagementPage = ({ tree, selected, selectNode, t, pushToast }) => {
  const [viewAs, setViewAs] = useStateTM(null); // null | 'falcon' | 'client'

  // For Falcon view: track which client is selected (start with current `selected` or first client)
  const clientList = useMemoTM(() => (tree?.children || []).filter(c => c.type === 'client'), [tree]);
  const initialClient = clientList.find(c => c.id === selected) ? selected : (clientList[0]?.id || null);
  const [activeClientId, setActiveClientId] = useStateTM(initialClient);

  useEffectTM(() => {
    if (viewAs === 'falcon' && !clientList.find(c => c.id === activeClientId) && clientList.length > 0) {
      setActiveClientId(clientList[0].id);
    }
  }, [viewAs, clientList, activeClientId]);

  if (viewAs === null) {
    return <TmPicker t={t} onPick={(v) => setViewAs(v)} />;
  }

  // Client view: hide the tree, show the client's own scope (default aramco)
  const clientScope = clientList.find(c => c.id === selected) || clientList.find(c => c.id === 'aramco') || clientList[0];
  const falconScope = clientList.find(c => c.id === activeClientId) || clientList[0];
  const scope = viewAs === 'client' ? clientScope : falconScope;

  return (
    <div className={`templates-page tm-page ${viewAs === 'falcon' ? 'with-tree' : 'no-tree'}`}>
      {viewAs === 'falcon' && (
        <TmClientsTree
          tree={tree}
          selected={activeClientId}
          onSelect={(id) => { setActiveClientId(id); selectNode && selectNode(id); }}
          t={t}
        />
      )}
      <div className="content-panel tm-main">
        {scope && (
          <TmContent
            scopeNode={scope}
            t={t}
            pushToast={pushToast}
            onChangeView={() => setViewAs(null)}
          />
        )}
      </div>
    </div>
  );
};

Object.assign(window, { TemplateManagementPage, TmClientsTree });