/* global React */

const TERMINAL_SCRIPTS = {
  // core-sw01 — Cisco-style access/distribution switch
  'sw1': [
    { c: 'p',    t: 'core-sw01' }, { c: 'gray', t: '> ' }, { c: '', t: 'enable\n' },
    { c: 'p',    t: 'core-sw01' }, { c: 'gray', t: '# ' }, { c: '', t: 'show interfaces status\n' },
    { c: 'gray', t: 'Port      Name         Status      Vlan   Speed   Type\n' },
    { c: '',     t: 'Gi1/0/1   uplink-core  ' }, { c: 'g', t: 'connected' }, { c: '', t: '  trunk  ' }, { c: 'c', t: 'a-1000' }, { c: '', t: '  10/100/1000\n' },
    { c: '',     t: 'Gi1/0/2   ap-floor3    ' }, { c: 'g', t: 'connected' }, { c: '', t: '  20     ' }, { c: 'c', t: 'a-1000' }, { c: '', t: '  10/100/1000\n' },
    { c: '',     t: 'Gi1/0/3                ' }, { c: 'y', t: 'notconnect' }, { c: '', t: ' 1      auto    10/100/1000\n' },
    { c: '',     t: 'Gi1/0/4   srv-esx1     ' }, { c: 'g', t: 'connected' }, { c: '', t: '  30     ' }, { c: 'c', t: 'a-1000' }, { c: '', t: '  10/100/1000\n' },
    { c: 'p',    t: 'core-sw01' }, { c: 'gray', t: '# ' },
  ],
  // edge-rtr01 — WAN edge router, eBGP
  'rtr1': [
    { c: 'p',    t: 'edge-rtr01' }, { c: 'gray', t: '# ' }, { c: '', t: 'show ip bgp summary\n' },
    { c: '',     t: 'BGP router identifier 203.0.113.1, local AS 65010\n' },
    { c: 'gray', t: 'Neighbor        V    AS   Up/Down    State/PfxRcd\n' },
    { c: 'c',    t: '198.51.100.9' }, { c: '', t: '    4 65000   06w2d      ' }, { c: 'g', t: '142051\n' },
    { c: 'c',    t: '203.0.113.2' }, { c: '', t: '     4 65020   4d11h      ' }, { c: 'g', t: '51002\n' },
    { c: 'c',    t: '192.0.2.10' }, { c: '', t: '      4 65030   00:00:14   ' }, { c: 'r', t: 'Idle\n' },
    { c: 'p',    t: 'edge-rtr01' }, { c: 'gray', t: '# ' },
  ],
  // console-sw07 — legacy switch over Telnet
  'con1': [
    { c: 'gray', t: 'Trying 10.0.7.7...\n' },
    { c: 'g',    t: 'Connected' }, { c: '', t: ' to console-sw07.\n' },
    { c: 'gray', t: "Escape character is '^]'.\n\n" },
    { c: '',     t: 'User Access Verification\n' },
    { c: '',     t: 'Password: \n' },
    { c: 'p',    t: 'console-sw07' }, { c: 'gray', t: '> ' }, { c: '', t: 'show version | include uptime\n' },
    { c: '',     t: 'console-sw07 uptime is 287 days, 4 hours, 12 minutes\n' },
    { c: 'p',    t: 'console-sw07' }, { c: 'gray', t: '> ' },
  ],
};

function Terminal({ tab, active, onActivate }) {
  const lines = TERMINAL_SCRIPTS[tab.hostId] || [
    { c: 'gray', t: `Connecting to ${tab.title}...\n` },
    { c: 'g',    t: '✓ ' }, { c: '', t: 'Connection established\n' },
    { c: 'p',    t: 'user@host' }, { c: 'gray', t: ':~$ ' },
  ];
  return (
    <div className={`pane${active ? ' pane-active' : ''}`} onClick={onActivate}>
      <div className="pane-body">
        <div className="terminal-view">
          <div className="terminal-content">
            {lines.map((seg, i) => (
              <span key={i} className={
                seg.c === 'p' ? 'terminal-prompt-active' :
                seg.c === 'r' ? 'terminal-prompt-default' :
                seg.c ? `term-${seg.c}` : ''
              }>{seg.t}</span>
            ))}
            <span className="term-cursor">&nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function EmptyPane({ index, active, onActivate }) {
  return (
    <div className={`pane${active ? ' pane-active' : ''}`} onClick={onActivate}>
      <div className="pane-body">
        <div className="pane-empty">
          <div className="pane-label">{index}</div>
          <div className="drop-hint">Drag a tab here</div>
        </div>
      </div>
    </div>
  );
}

window.Terminal = Terminal;
window.EmptyPane = EmptyPane;