/* global React, ReactDOM, AppSidebar, TabBar, HostTree, Terminal, EmptyPane, AIChatPane, SettingsModal, HOSTS */
const { useState, useEffect } = React;

const INITIAL_TABS = [
  { id: 't1', title: 'core-sw01',    kind: 'ssh',    hostId: 'sw1' },
  { id: 't2', title: 'edge-rtr01',   kind: 'ssh',    hostId: 'rtr1' },
  { id: 't3', title: 'console-sw07', kind: 'telnet', hostId: 'con1', geminiLinked: true },
  { id: 't4', title: 'AI Chat',      kind: 'ai' },
];

function App() {
  const [theme, setTheme] = useState('dark');
  const [layout, setLayout] = useState('2x2');
  const [edges, setEdges] = useState({ left: false, right: false, top: false, bottom: false });
  const [wrap, setWrap] = useState(true);
  const [tabs, setTabs] = useState(INITIAL_TABS);
  const [activeTabId, setActiveTabId] = useState('t1');
  const [activePane, setActivePane] = useState(0);
  const [expandedFolders, setExpandedFolders] = useState({ core: true, edge: true, oob: true, local: true });
  const [paneAssignments, setPaneAssignments] = useState({ 0: 't1', 1: 't2', 2: 't3', 3: 't4' });
  const [showNewSession, setShowNewSession] = useState(false);
  const [selectedHostId, setSelectedHostId] = useState(null);
  const [formHost, setFormHost] = useState('');
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [settingsTab, setSettingsTab] = useState('Appearance');

  useEffect(() => {
    document.documentElement.classList.remove('theme-dark', 'theme-medium', 'theme-light');
    document.documentElement.classList.add(`theme-${theme}`);
  }, [theme]);

  const closeTab = (id) => {
    setTabs(tabs.filter(t => t.id !== id));
    if (activeTabId === id && tabs.length > 1) {
      const next = tabs.find(t => t.id !== id);
      if (next) setActiveTabId(next.id);
    }
    setPaneAssignments(Object.fromEntries(Object.entries(paneAssignments).map(([k, v]) => [k, v === id ? null : v])));
  };

  const newTabFromHost = (host) => {
    const id = 't' + (Date.now() % 100000);
    const t = { id, title: host.label.split('.')[0], kind: 'ssh', hostId: host.id, connecting: true };
    const newTabs = [...tabs, t];
    setTabs(newTabs);
    setActiveTabId(id);
    setPaneAssignments({ ...paneAssignments, [activePane]: id });
    setTimeout(() => setTabs(prev => prev.map(x => x.id === id ? { ...x, connecting: false } : x)), 1200);
  };

  const newBlankTab = () => {
    const id = 't' + (Date.now() % 100000);
    const newTabs = [...tabs, { id, title: 'New Session', kind: 'ssh', hostId: null }];
    setTabs(newTabs);
    setActiveTabId(id);
    setPaneAssignments({ ...paneAssignments, [activePane]: id });
  };

  const connectFromForm = () => {
    const id = 't' + (Date.now() % 100000);
    const title = (formHost || 'New Session').split('.')[0];
    setTabs(prev => [...prev, { id, title, kind: 'ssh', hostId: selectedHostId, connecting: true }]);
    setActiveTabId(id);
    setPaneAssignments({ ...paneAssignments, [activePane]: id });
    setShowNewSession(false);
    setTimeout(() => setTabs(prev => prev.map(x => x.id === id ? { ...x, connecting: false } : x)), 1200);
  };

  const toggleFolder = (folderId) => setExpandedFolders({ ...expandedFolders, [folderId]: !expandedFolders[folderId] });
  const toggleEdge = (edge) => setEdges({ ...edges, [edge]: !edges[edge] });

  // Layout grid template
  const gridStyle = (() => {
    switch (layout) {
      case '1x1': return { gridTemplateColumns: '1fr', gridTemplateRows: '1fr' };
      case '1x2': return { gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr' };
      case '2x1': return { gridTemplateColumns: '1fr', gridTemplateRows: '1fr 1fr' };
      case '2x2': return { gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr' };
      default:    return { gridTemplateColumns: '1fr', gridTemplateRows: '1fr' };
    }
  })();

  const paneCount = layout === '1x1' ? 1 : (layout === '1x2' || layout === '2x1') ? 2 : 4;

  const renderPane = (i) => {
    const tabId = paneAssignments[i];
    const tab = tabs.find(t => t.id === tabId);
    const isActive = activePane === i;
    if (!tab) return <EmptyPane key={i} index={i + 1} active={isActive} onActivate={() => setActivePane(i)} />;
    if (tab.kind === 'ai') return <AIChatPane key={i} active={isActive} onActivate={() => setActivePane(i)} />;
    return <Terminal key={i} tab={tab} active={isActive} onActivate={() => { setActivePane(i); setActiveTabId(tab.id); }} />;
  };

  const activePaneTabId = paneAssignments[activePane];

  return (
    <div className="app-root">
      <div className="titlebar">
        <img src="hotty-icon.png" alt="" />
        <div className="title">HoTTY — {tabs.find(t => t.id === activeTabId)?.title || 'No session'}</div>
        <div className="win-btns"><span /><span /><span style={{ background: 'var(--color-danger)' }} /></div>
      </div>
      <div className="app-container">
        <AppSidebar layout={layout} setLayout={setLayout} edges={edges} toggleEdge={toggleEdge} wrap={wrap} setWrap={setWrap} onOpenSettings={() => { setSettingsTab('Appearance'); setSettingsOpen(true); }} />
        {settingsOpen && <SettingsModal initialTab={settingsTab} onClose={() => setSettingsOpen(false)} />}
        {edges.left && (
          <div className="sidebar-rail">
            <HostTree
              selectedId={tabs.find(t => t.id === activeTabId)?.hostId}
              onConnect={newTabFromHost}
              expandedFolders={expandedFolders}
              onToggleFolder={toggleFolder}
            />
          </div>
        )}
        <div className="main-layout">
          <TabBar
            tabs={tabs}
            activeId={activeTabId}
            activePaneTabId={activePaneTabId}
            onActivate={setActiveTabId}
            onClose={closeTab}
            onNew={() => { setSelectedHostId(null); setFormHost(''); setShowNewSession(true); }}
            onNewLogViewer={() => {}}
            onNewPingMonitor={() => {}}
            onNewTextEditor={() => {}}
            onNewFileExplorer={() => {}}
            onNewAiChat={() => {}}
          />
          <div className="content-area">
            <div className="center-column">
              <div className="pane-grid" style={gridStyle}>
                {Array.from({ length: paneCount }, (_, i) => renderPane(i))}
              </div>
            </div>
          </div>
        </div>
      </div>
      {showNewSession && (
        <div className="connection-dialog-overlay" onClick={() => setShowNewSession(false)}>
          <div className="connection-dialog" onClick={(e) => e.stopPropagation()}>
            <button className="session-dialog-close" onClick={() => setShowNewSession(false)} aria-label="Close">✕</button>
            <h2 className="session-dialog-title">New Session</h2>
            <div className="dialog-body">
              <div className="host-panel">
                <div className="host-panel-tabs">
                  <button className="host-panel-tab active" type="button"><span aria-hidden="true">📡 </span>Hosts</button>
                  <button className="host-panel-tab" type="button"><span aria-hidden="true">☁ </span>GCP</button>
                </div>
                <div className="hosts-tab-tree">
                  <HostTree
                    selectedId={selectedHostId}
                    onConnect={(h) => { setSelectedHostId(h.id); setFormHost(h.label); }}
                    expandedFolders={expandedFolders}
                    onToggleFolder={toggleFolder}
                  />
                </div>
              </div>
              <div className="panel-divider" />
              <div className="form-panel">
                <div className="form-status-banner"><span className="banner-new"><span aria-hidden="true">🆕 </span>New Connection</span></div>
                <form onSubmit={(e) => { e.preventDefault(); connectFromForm(); }}>
                  <div className="form-group">
                    <label>Protocol</label>
                    <select defaultValue="ssh">
                      <option value="ssh">SSH</option>
                      <option value="telnet">Telnet</option>
                      <option value="serial">Serial</option>
                      <option value="wsl">WSL</option>
                      <option value="cmd">Command Prompt</option>
                      <option value="powershell">PowerShell</option>
                      <option value="git-bash">Git Bash</option>
                    </select>
                  </div>
                  <div className="form-row">
                    <div className="form-group" style={{ flex: 3 }}>
                      <label>Host / IP</label>
                      <input type="text" value={formHost} onChange={(e) => setFormHost(e.target.value)} placeholder="10.0.0.1" />
                    </div>
                    <div className="form-group" style={{ flex: 1 }}>
                      <label>Port</label>
                      <input type="text" defaultValue="22" />
                    </div>
                  </div>
                  <div className="form-group">
                    <label>Username</label>
                    <input type="text" placeholder="admin" />
                  </div>
                  <div className="form-group">
                    <label>Password</label>
                    <input type="password" placeholder="••••••••" />
                  </div>
                  <button type="submit" className="dialog-connect-btn">Connect</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);