import React from 'react';
import { User } from '../../services/membershipService';
import ProfileMenu from '../ProfileMenu';
import PortalBrand from '../layout/PortalBrand';

interface DashboardTopbarProps {
  activeTab: 'overview' | 'questions' | 'settings' | 'admin';
  isAdmin: boolean;
  isAdminWorkspace: boolean;
  navigateToTab: (tab: 'overview' | 'questions' | 'settings' | 'admin') => void;
  enterAdminArea: () => void;
  exitAdminArea: () => void;
  onEditProfile: () => void;
  subtitle?: string;
  user: User | null;
}

const userTabs: Array<{ key: 'overview' | 'questions' | 'settings'; label: string }> = [
  { key: 'overview', label: 'Overview' },
  { key: 'questions', label: 'Profile Questions' },
  { key: 'settings', label: 'Profile Settings' }
];

const DashboardTopbar: React.FC<DashboardTopbarProps> = ({
  activeTab,
  isAdmin,
  isAdminWorkspace,
  navigateToTab,
  enterAdminArea,
  exitAdminArea,
  onEditProfile,
  subtitle,
  user
}) => (
  <nav className={isAdminWorkspace ? 'portal-topbar portal-topbar-admin' : 'portal-topbar member-topbar'}>
    <PortalBrand
      title={isAdminWorkspace ? 'SASA Admin' : 'SASA Member Portal'}
      subtitle={subtitle || (isAdminWorkspace ? 'Operations network' : `Welcome, ${user?.first_name || 'Member'}`)}
      admin={isAdminWorkspace}
    />

    {!isAdminWorkspace && (
      <div className="portal-nav">
        {userTabs.map((tab) => (
          <button
            key={tab.key}
            className={activeTab === tab.key ? 'portal-tab active' : 'portal-tab'}
            onClick={() => navigateToTab(tab.key)}
          >
            {tab.label}
          </button>
        ))}
        {isAdmin && (
          <button className="portal-switch-button" onClick={enterAdminArea}>
            Enter Admin Area
          </button>
        )}
      </div>
    )}

    <div className="portal-meta">
      {isAdminWorkspace && (
        <button className="portal-exit-button" onClick={exitAdminArea}>
          Back to User Space
        </button>
      )}
      <ProfileMenu
        userName={`${user?.first_name || ''} ${user?.last_name || ''}`.trim()}
        userRole={user?.role || ''}
        user={user}
        onEditProfile={onEditProfile}
      />
    </div>
  </nav>
);

export default DashboardTopbar;