import * as React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { clearToken } from '../api';

/**
 * Top-of-page nav + outlet. Terminal-style dark theme so the UI feels
 * adjacent to the CLI rather than a separate product.
 */
export function Layout(): React.JSX.Element {
  return (
    <div style={styles.shell}>
      <header style={styles.header}>
        <div style={styles.brand}>mcpctl <span style={styles.dim}>· prompt editor</span></div>
        <nav style={styles.nav}>
          <NavLink to="/projects" style={navStyle}>Projects</NavLink>
          <NavLink to="/agents" style={navStyle}>Agents</NavLink>
          <button
            style={styles.logout}
            onClick={() => { clearToken(); window.location.assign('/ui/'); }}
          >
            Logout
          </button>
        </nav>
      </header>
      <main style={styles.main}>
        <Outlet />
      </main>
    </div>
  );
}

function navStyle({ isActive }: { isActive: boolean }): React.CSSProperties {
  return {
    color: isActive ? '#58a6ff' : '#c9d1d9',
    textDecoration: 'none',
    padding: '6px 12px',
    borderBottom: isActive ? '2px solid #58a6ff' : '2px solid transparent',
  };
}

const styles: Record<string, React.CSSProperties> = {
  shell: {
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '12px 24px',
    background: '#161b22',
    borderBottom: '1px solid #30363d',
  },
  brand: {
    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
    fontWeight: 700,
    fontSize: 16,
  },
  dim: { color: '#7d8590', fontWeight: 400 },
  nav: {
    display: 'flex',
    gap: 8,
    alignItems: 'center',
  },
  logout: {
    background: 'transparent',
    color: '#c9d1d9',
    border: '1px solid #30363d',
    padding: '4px 12px',
    borderRadius: 4,
    cursor: 'pointer',
    marginLeft: 12,
  },
  main: {
    flex: 1,
    padding: 24,
    overflowY: 'auto',
  },
};
