import React from 'react';
import { useAuth } from '../context/AuthContext.tsx';
import UserManagementPage from './UserManagementPage.tsx';

const AccountAdminShell: React.FC = () => {
  const { user, logout } = useAuth();
  const roleLabel = user?.is_superuser ? 'Superuser' : 'Account Admin';

  return (
    <div className="flex h-screen bg-gray-100">
      <aside className="flex flex-col w-64 bg-white border-r border-gray-200 z-20">
        <div className="flex items-center h-16 border-b border-gray-200 px-4">
          <img
            src="/favicon.png"
            alt="Logo Charoen Pokphand"
            className="object-contain h-10"
          />
        </div>
        <nav className="flex-grow p-2">
          <ul className="space-y-1">
            <li>
              <div className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium bg-red-50 text-red-700">
                <i className="fa-solid fa-users" aria-hidden />
                Manajemen Akun
              </div>
            </li>
          </ul>
        </nav>
        <div className="border-t border-gray-200 p-4 space-y-2">
          <p className="text-xs text-gray-500 truncate">
            {user?.display_name} · {roleLabel}
          </p>
          <button
            type="button"
            onClick={() => void logout()}
            className="w-full rounded-md border border-gray-300 text-sm px-3 py-2 hover:bg-gray-50"
          >
            Keluar
          </button>
        </div>
      </aside>
      <div className="flex-1 overflow-x-hidden overflow-y-auto">
        <div className="px-4 sm:px-6 lg:px-8 pt-4 sm:pt-6 lg:pt-8 pb-8">
          <UserManagementPage />
        </div>
      </div>
    </div>
  );
};

export default AccountAdminShell;