<div class="workspace-shell" [attr.dir]="i18n.dir()" [class.rtl]="i18n.isArabic()" [class.login-mode]="isLoginRoute()">
  <ng-container *ngIf="isLoginRoute(); else routedShell">
    <main class="login-mode-shell">
      <header class="utility-bar login-utility-bar">
        <div class="utility-bar__brand">
          <img class="cashline-logo cashline-logo--compact" src="assets/cashline-logo.png" alt="CashLine Logo">
          <div class="utility-bar__copy">
            <strong>{{ t('CashLine ERP') }}</strong>
          </div>
        </div>

        <div class="utility-bar__actions">
          <button type="button" class="language-pill" [class.active]="i18n.language() === 'en'" (click)="i18n.setLanguage('en')">EN</button>
          <button type="button" class="language-pill" [class.active]="i18n.language() === 'ar'" (click)="i18n.setLanguage('ar')">ع</button>
        </div>
      </header>

      <router-outlet />
    </main>
  </ng-container>

  <ng-template #routedShell>
    <main class="application-shell">
      <app-workspace-side-nav
        [currentPackage]="currentPackage"
        [visibleJourneyLinks]="visibleJourneyLinks"
        [currentJourney]="currentJourney"
        [currentFeatureLinks]="currentFeatureLinks"
        [journeyFeatureLinks]="featureLinkMap"
        [currentFeatureStepId]="currentFeatureStepId"
        >
      </app-workspace-side-nav>

      <section class="content-area">
        <header class="utility-bar">
          <div class="utility-bar__context">
            <div class="breadcrumbs" [attr.aria-label]="t('Breadcrumbs')">
              <ng-container *ngFor="let crumb of breadcrumbs; let last = last">
                <a *ngIf="crumb.route && !last" [routerLink]="crumb.route">{{ t(crumb.label) }}</a>
                <span *ngIf="!crumb.route || last" [class.current]="last">{{ t(crumb.label) }}</span>
                <span class="breadcrumbs__separator" *ngIf="!last">/</span>
              </ng-container>
            </div>
          </div>

          <div class="utility-bar__actions">
            <button type="button" class="language-pill" [class.active]="i18n.language() === 'en'" (click)="i18n.setLanguage('en')">EN</button>
            <button type="button" class="language-pill" [class.active]="i18n.language() === 'ar'" (click)="i18n.setLanguage('ar')">ع</button>
            <button type="button" class="notification-pill" *ngIf="session" (click)="toggleNotificationCenter()" [class.active]="notificationCenterOpen">
              <span class="notification-pill__icon">◉</span>
              <span>{{ t('Notifications') }}</span>
              <span class="notification-pill__count" *ngIf="unreadNotificationCount">{{ unreadNotificationCount }}</span>
            </button>
            <button type="button" class="notification-pill" *ngIf="session && (isAdministrator() || isSystemOwner())" (click)="openUserAdministration()">
              <span class="notification-pill__icon">UA</span>
              <span>{{ t('User Administration') }}</span>
            </button>
            <span class="pill topbar__status" *ngIf="session">{{ session.displayName }}</span>
            <button type="button" class="signout-pill" *ngIf="session" (click)="signOut()">{{ t('Sign out') }}</button>
          </div>
        </header>

        <section class="notification-drawer" *ngIf="notificationCenterOpen">
          <div class="notification-drawer__head">
            <div>
              <span class="meta-label">{{ t('Notification Center') }}</span>
              <strong>{{ t('Live updates and actions for your role') }}</strong>
            </div>
            <button type="button" class="notification-refresh" (click)="refreshNotifications()">{{ t('Refresh notifications') }}</button>
          </div>

          <div class="notification-drawer__state" *ngIf="notificationLoading">{{ t('Loading notifications...') }}</div>
          <div class="notification-drawer__state notification-drawer__state--error" *ngIf="notificationErrorText">{{ t(notificationErrorText) }}</div>

          <div class="notification-list" *ngIf="!notificationLoading && !notificationErrorText && notificationItems.length">
            <button
              type="button"
              class="notification-item"
              *ngFor="let item of notificationItems"
              [attr.data-status]="item.status"
              (click)="openNotification(item)">
              <div class="notification-item__top">
                <span class="notification-item__source">{{ t(item.source) }}</span>
                <span class="notification-item__badge">{{ t(item.status === 'action' ? 'Action required' : item.status === 'attention' ? 'Needs attention' : item.status === 'success' ? 'Updated' : 'Informational') }}</span>
              </div>
              <strong>{{ t(item.title) }}</strong>
              <p>{{ t(item.summary) }}</p>
            </button>
          </div>

          <div class="notification-drawer__state" *ngIf="!notificationLoading && !notificationErrorText && !notificationItems.length">
            {{ t('No current notifications. Live updates and workflow actions will appear here as they become available for your role.') }}
          </div>
        </section>

        <div class="content-frame">
          <router-outlet />
        </div>
      </section>
    </main>
  </ng-template>
</div>
