import React from 'react';
import { Outlet, Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const Layout = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  if (!user) return null; // Or a loading spinner

  return (
    <div className="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <div className="w-64 bg-blue-900 text-white flex flex-col">
        <div className="p-4 text-xl font-bold border-b border-blue-800">SJH - PES Admin</div>
        <nav className="flex-1 p-4 space-y-2">
          <Link to="/" className="block p-2 hover:bg-blue-800 rounded">Dashboard</Link>
          <Link to="/tasks" className="block p-2 hover:bg-blue-800 rounded">Task List</Link>
          <Link to="/rocks" className="block p-2 hover:bg-blue-800 rounded">90-Day Rocks (EOS)</Link>
          <Link to="/okrs" className="block p-2 hover:bg-blue-800 rounded">OKRs</Link>
          <Link to="/scorecard" className="block p-2 hover:bg-blue-800 rounded">Balanced Scorecard</Link>
        </nav>
        <button onClick={() => { logout(); navigate('/login'); }} className="p-4 bg-red-800 hover:bg-red-700 text-sm">
          Logout
        </button>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="bg-white shadow p-4 flex justify-between items-center">
          <h1 className="text-gray-700 font-semibold uppercase tracking-wider text-sm">Sheetal Jewellery People Strategy</h1>
          <div className="text-gray-600">Welcome, {user.firstName}</div>
        </header>
        <main className="flex-1 overflow-x-hidden overflow-y-auto p-6">
          <Outlet />
        </main>
      </div>
    </div>
  );
};

export default Layout;