'use client';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

export default function Layout({
  children,
  requireAdmin = false,
  requireEmployee = false,
  title,
  subtitle,
}: {
  children: React.ReactNode;
  requireAdmin?: boolean;
  requireEmployee?: boolean;
  title?: string;
  subtitle?: string;
}) {
  const router = useRouter();
  const [ok, setOk] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('token');
    const user = JSON.parse(localStorage.getItem('user') || 'null');
    if (!token || !user) return router.replace('/login');
    if (requireAdmin && user.role !== 'ADMIN') return router.replace('/employee');
    if (requireEmployee && user.role !== 'EMPLOYEE') return router.replace('/admin');
    setOk(true);
  }, [router, requireAdmin, requireEmployee]);

  if (!ok) {
    return (
      <div
        style={{
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: '#0D2B4E',
          color: '#fff',
          fontSize: '16px',
        }}
      >
        Loading…
      </div>
    );
  }

  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        background: '#F7FAFF',
        fontFamily: 'Inter, system-ui, sans-serif',
      }}
    >
      <Navbar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />

      <div style={{ display: 'flex', flex: 1, position: 'relative' }}>
        {/* Sidebar */}
        <div
          style={{
            position: 'fixed',
            top: '52px',
            bottom: 0,
            left: 0,
            zIndex: 40,
            transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)',
            transition: 'transform 0.3s ease',
          }}
          className="md:!static md:!transform-none"
        >
          <Sidebar onNavigate={() => setSidebarOpen(false)} />
        </div>

        {sidebarOpen && (
          <div
            className="md:hidden"
            onClick={() => setSidebarOpen(false)}
            style={{
              position: 'fixed',
              top: '52px',
              left: 0,
              right: 0,
              bottom: 0,
              background: 'rgba(0,0,0,0.4)',
              zIndex: 30,
            }}
          />
        )}

        {/* Main content — CENTERED */}
        <main style={{ flex: 1, width: '100%', padding: '24px' }}>
          <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
            {title && (
              <div style={{ marginBottom: '24px', textAlign: 'center' }}>
                <h1
                  style={{
                    fontSize: '26px',
                    fontWeight: 800,
                    color: '#0D2B4E',
                    margin: 0,
                  }}
                >
                  {title}
                </h1>
                {subtitle && (
                  <p
                    style={{
                      fontSize: '14px',
                      color: '#64748b',
                      marginTop: '6px',
                      margin: 0,
                    }}
                  >
                    {subtitle}
                  </p>
                )}
              </div>
            )}
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}