/* global React */
const { useState: _useStateHostTree } = React;

const HOSTS = [
  { id: 'core',  kind: 'folder', label: 'Core Switches', expanded: true, meta: '2' },
  { id: 'sw1',   kind: 'host',   label: 'core-sw01',         meta: '22/ssh',    parent: 'core' },
  { id: 'sw2',   kind: 'host',   label: 'core-sw02',         meta: '22/ssh',    parent: 'core' },
  { id: 'edge',  kind: 'folder', label: 'Edge / WAN', expanded: true, meta: '3' },
  { id: 'rtr1',  kind: 'host',   label: 'edge-rtr01',        meta: '22/ssh',    parent: 'edge' },
  { id: 'fw1',   kind: 'host',   label: 'fw-01.asa',         meta: '22/ssh',    parent: 'edge' },
  { id: 'jb1',   kind: 'host',   label: 'Jumpbox (bastion)', meta: '22/ssh',    parent: 'edge' },
  { id: 'oob',   kind: 'folder', label: 'Out-of-Band', expanded: true, meta: '2' },
  { id: 'con1',  kind: 'host',   label: 'console-sw07',      meta: '23/telnet', parent: 'oob' },
  { id: 'com3',  kind: 'host',   label: 'COM3 (USB-Serial)', meta: '9600',      parent: 'oob' },
  { id: 'local', kind: 'folder', label: 'Local', expanded: true, meta: '2' },
  { id: 'ps',    kind: 'host',   label: 'PowerShell',        meta: 'pwsh',      parent: 'local' },
  { id: 'gb',    kind: 'host',   label: 'Git Bash',          meta: 'bash',      parent: 'local' },
];

// HoTTY's actual host tree uses emoji glyphs (📁 / 🖥️ / 🔗), NOT stroked SVGs.
const FOLDER_GLYPH = '\u{1F4C1}'; // 📁
const HOST_GLYPH   = '\u{1F5A5}'; // 🖥️ (jumpbox uses 🔗 \u{1F517} in real source)
function Chev({ expanded }) {
  return <svg className={`tree-chevron${expanded ? ' expanded' : ''}`} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>;
}

function HostTree({ selectedId, onConnect, expandedFolders, onToggleFolder }) {
  const visible = HOSTS.filter(h => !h.parent || expandedFolders[h.parent]);
  return (
    <div className="host-tree-container">
      <div className="host-tree-toolbar">
        <button className="tree-toolbar-btn" title="Add Host" style={{ color: 'var(--icon-host)' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="12" y1="6" x2="12" y2="14"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
          </svg>
        </button>
        <button className="tree-toolbar-btn" title="Add Folder" style={{ color: 'var(--icon-folder)' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/>
          </svg>
        </button>
        <button className="tree-toolbar-btn" title="Import .htree" style={{ color: 'var(--success-color)' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
          </svg>
        </button>
        <button className="tree-toolbar-btn" title="Export .htree" style={{ color: 'var(--color-danger)' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
          </svg>
        </button>
      </div>
      <div className="host-tree-body">
        {visible.map(h => {
          const indent = h.parent ? 14 : 0;
          if (h.kind === 'folder') {
            const expanded = !!expandedFolders[h.id];
            return (
              <div key={h.id} className="host-tree-row" onClick={() => onToggleFolder(h.id)}>
                <span style={{width: indent}} />
                <Chev expanded={expanded} />
                <span className="tree-icon tree-icon-emoji">{FOLDER_GLYPH}</span>
                <span className="tree-label">{h.label}</span>
                <span className="tree-meta">{h.meta}</span>
              </div>
            );
          }
          const sel = selectedId === h.id;
          return (
            <div key={h.id} className={`host-tree-row${sel ? ' selected' : ''}`} onClick={() => onConnect(h)}>
              <span style={{width: indent + 14}} />
              <span className="tree-icon tree-icon-emoji">{h.label.includes('Jumpbox') ? '\u{1F517}' : HOST_GLYPH}</span>
              <span className="tree-label">{h.label}</span>
              <span className="tree-meta">{h.meta}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.HostTree = HostTree;
window.HOSTS = HOSTS;