import Link from 'next/link';
import { auth, signOut } from '../auth';

const linkStyle: React.CSSProperties = {
  padding: '0.5rem 0.75rem',
  background: '#fff',
  border: '1px solid #ddd',
  borderRadius: '4px',
  textDecoration: 'none',
  color: '#0070f3',
  fontSize: '0.9rem',
  fontWeight: 500,
};

export default async function Navigation() {
  const session = await auth();

  return (
    <nav
      style={{
        background: '#f9f9f9',
        borderBottom: '1px solid #ddd',
        padding: '0.75rem 1rem',
        display: 'flex',
        gap: '0.5rem',
        flexWrap: 'wrap',
        marginBottom: '1.5rem',
        alignItems: 'center',
      }}
    >
      <Link href="/" style={linkStyle}>🏠 Hem</Link>
      <Link href="/inventory" style={linkStyle}>🛒 Varor</Link>
      <Link href="/recipes" style={linkStyle}>📖 Recept</Link>
      <Link href="/baslager" style={linkStyle}>🏪 Baslager</Link>
      <Link href="/admin/products" style={linkStyle}>⚙️ Admin</Link>
      <Link href="/import" style={linkStyle}>📥 Importera</Link>
      <Link href="/matplan" style={linkStyle}>📅 Matplan</Link>
      <span style={{ flex: 1 }} />
      {session?.user && (
        <>
          <span style={{ fontSize: '0.9rem', color: '#555' }}>
            👤 {session.user.name}
          </span>
          <form
            action={async () => {
              'use server';
              await signOut({ redirectTo: '/login' });
            }}
          >
            <button
              type="submit"
              style={{
                ...linkStyle,
                cursor: 'pointer',
                color: '#dc2626',
                borderColor: '#dc2626',
              }}
            >
              Logga ut
            </button>
          </form>
        </>
      )}
    </nav>
  );
}