import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ReactNode } from 'react';
import { useAuth } from '../lib/auth-context';

export default function Layout({ children, title }: { children: ReactNode; title?: string }) {
  const { user, memberships, activeOrg, setActiveOrgId, logout } = useAuth();
  const router = useRouter();

  return (
    <>
      <Head>
        <title>{title ? `${title} · UlHub` : 'UlHub'}</title>
      </Head>
      <header
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '1.5rem',
          padding: '0.75rem 1.5rem',
          borderBottom: '1px solid #ddd',
          fontFamily: 'sans-serif',
        }}
      >
        <Link href="/" style={{ fontWeight: 700, fontSize: '1.1rem', textDecoration: 'none', color: '#111' }}>
          UlHub
        </Link>
        {user && (
          <>
            <nav style={{ display: 'flex', gap: '1rem' }}>
              <Link href="/">Jobs</Link>
              <Link href="/settings/devices">Devices</Link>
              <Link href="/settings/members">Members</Link>
              <Link href="/settings/api-keys">API Keys</Link>
              <Link href="/settings/mqtt-certs">MQTT Certs</Link>
            </nav>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              {memberships.length > 1 ? (
                <select value={activeOrg?.org.id ?? ''} onChange={(e) => setActiveOrgId(e.target.value)}>
                  {memberships.map((m) => (
                    <option key={m.org.id} value={m.org.id}>
                      {m.org.name}
                    </option>
                  ))}
                </select>
              ) : (
                <span style={{ color: '#555' }}>{activeOrg?.org.name}</span>
              )}
              <span style={{ color: '#888', fontSize: '0.9rem' }}>{user.email}</span>
              <button
                onClick={async () => {
                  await logout();
                  router.push('/login');
                }}
              >
                Log out
              </button>
            </div>
          </>
        )}
      </header>
      <main style={{ fontFamily: 'sans-serif', padding: '1.5rem', maxWidth: 1100, margin: '0 auto' }}>{children}</main>
    </>
  );
}
