<div class="dashboard-container">

  <!-- HERO WELCOME -->
  <div class="hero-banner star-field">
    <div class="hero-bg-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
    <div class="hero-content">
      <div class="hero-icon">
        <img src="assets/moon-crescent.svg" alt="Moon" width="40" height="40" />
      </div>
      <div class="hero-text">
        <h1>{{ 'DASHBOARD.TITLE' | translate }}</h1>
        <p>{{ 'DASHBOARD.WELCOME_MESSAGE' | translate }}</p>
        @if (user(); as u) {
          <span class="hero-user">{{ u.name }}</span>
        }
      </div>
      <div class="hero-date">
        <i class="pi pi-calendar"></i>
        <span>{{ today | date:'fullDate' }}</span>
      </div>
    </div>
  </div>

  @if (loading$ | async) {
    <div class="loading-state">
      <p-progressSpinner strokeWidth="3" />
      <p>{{ 'COMMON.LOADING' | translate }}</p>
    </div>
  } @else if (error$ | async; as error) {
    <div class="error-state">
      <i class="pi pi-exclamation-triangle"></i>
      <p>{{ error }}</p>
      <p-button [label]="'DASHBOARD.RETRY' | translate" icon="pi pi-refresh" (onClick)="retry()" severity="secondary" />
    </div>
  } @else {

    <!-- SETUP BANNER -->
    @if (showSetupBanner()) {
      <div class="setup-banner" (click)="goToSetup()">
        <div class="setup-banner-icon"><i class="pi pi-cog"></i></div>
        <div class="setup-banner-text">
          <strong>{{ 'DASHBOARD.SETUP_NEEDED' | translate }}</strong>
          <span>{{ 'DASHBOARD.SETUP_NEEDED_DESC' | translate }}</span>
        </div>
        <i class="pi pi-arrow-left setup-banner-arrow rtl:rotate-0"></i>
      </div>
    }

    <!-- STATS GRID -->
    @if (stats$ | async; as stats) {
      <div class="stats-grid">
        <div class="stat-card stat-blue">
          <div class="stat-icon-wrap"><i class="pi pi-map-marker"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.branches_count }}</span>
            <span class="stat-label">{{ 'DASHBOARD.BRANCHES_COUNT' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card stat-purple">
          <div class="stat-icon-wrap"><i class="pi pi-users"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.users_count }}</span>
            <span class="stat-label">{{ 'DASHBOARD.USERS_COUNT' | translate }}</span>
            <span class="stat-sub">{{ stats.active_users_count }} {{ 'DASHBOARD.ACTIVE' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card stat-green">
          <div class="stat-icon-wrap"><i class="pi pi-sitemap"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.accounts_count }}</span>
            <span class="stat-label">{{ 'DASHBOARD.ACCOUNTS_COUNT' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card stat-amber">
          <div class="stat-icon-wrap"><i class="pi pi-book"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.posted_entries_count }}</span>
            <span class="stat-label">{{ 'DASHBOARD.ENTRIES_COUNT' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card stat-rose">
          <div class="stat-icon-wrap"><i class="pi pi-calendar"></i></div>
          <div class="stat-info">
            <span class="stat-value stat-text">{{ stats.open_fiscal_year || ('DASHBOARD.NO_FISCAL_YEAR' | translate) }}</span>
            <span class="stat-label">{{ 'DASHBOARD.FISCAL_YEAR' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>
      </div>
    }

    <!-- MODULE STATS ROW -->
    @if (stats$ | async; as stats) {
      <div class="module-stats-row">
        @if (showSalesSection() && stats.invoices_count) {
          <div class="module-card">
            <div class="module-header gradient-emerald">
              <i class="pi pi-shopping-cart"></i>
              <h3>{{ 'DASHBOARD.SALES_OVERVIEW' | translate }}</h3>
            </div>
            <div class="module-body">
              <div class="module-stat-grid">
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-blue"><i class="pi pi-file"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.invoices_count | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.INVOICES_COUNT' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-green"><i class="pi pi-dollar"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.total_revenue | number:'1.0-0' }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.TOTAL_REVENUE' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-amber"><i class="pi pi-clock"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.total_receivable | number:'1.0-0' }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.TOTAL_RECEIVABLE' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-purple"><i class="pi pi-chart-line"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.monthly_revenue | number:'1.0-0' }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.MONTHLY_REVENUE' | translate }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }

        @if (showPosSection() && stats.pos_terminals_count) {
          <div class="module-card">
            <div class="module-header gradient-teal">
              <i class="pi pi-tablet"></i>
              <h3>{{ 'DASHBOARD.POS_OVERVIEW' | translate }}</h3>
            </div>
            <div class="module-body">
              <div class="module-stat-grid">
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-blue"><i class="pi pi-desktop"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.pos_terminals_count | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.POS_TERMINALS_COUNT' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-green"><i class="pi pi-power-off"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.pos_open_sessions | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.POS_OPEN_SESSIONS' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-amber"><i class="pi pi-wallet"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.pos_today_sales | number:'1.0-0' }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.POS_TODAY_SALES' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-purple"><i class="pi pi-receipt"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.pos_today_transactions | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.POS_TODAY_TRANSACTIONS' | translate }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }

        @if (showSupportSection() && stats.total_tasks) {
          <div class="module-card">
            <div class="module-header gradient-rose">
              <i class="pi pi-ticket"></i>
              <h3>{{ 'DASHBOARD.SUPPORT_OVERVIEW' | translate }}</h3>
            </div>
            <div class="module-body">
              <div class="module-stat-grid cols-3">
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-amber"><i class="pi pi-inbox"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.open_tasks | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.OPEN_TASKS' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-blue"><i class="pi pi-spin pi-spinner"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.in_progress_tasks | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.IN_PROGRESS_TASKS' | translate }}</span>
                  </div>
                </div>
                <div class="module-stat">
                  <div class="stat-icon-badge stat-icon-green"><i class="pi pi-check-circle"></i></div>
                  <div class="stat-detail">
                    <span class="stat-num">{{ stats.total_tasks | number }}</span>
                    <span class="stat-lbl">{{ 'DASHBOARD.TOTAL_TASKS' | translate }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    }

    <!-- GUIDES ROW -->
    <div class="guides-row">
      <a routerLink="/core/guide" class="guide-card guide-core">
        <div class="guide-icon">
          <i class="pi pi-box"></i>
        </div>
        <div class="guide-info">
          <h3>{{ 'DASHBOARD.CORE_GUIDE' | translate }}</h3>
          <p>{{ 'DASHBOARD.CORE_GUIDE_DESC' | translate }}</p>
        </div>
        <i class="pi pi-arrow-right rtl:rotate-180 guide-arrow"></i>
      </a>
      <a routerLink="/accounting/guide" class="guide-card guide-accounting">
        <div class="guide-icon">
          <i class="pi pi-chart-line"></i>
        </div>
        <div class="guide-info">
          <h3>{{ 'DASHBOARD.ACCOUNTING_GUIDE' | translate }}</h3>
          <p>{{ 'DASHBOARD.ACCOUNTING_GUIDE_DESC' | translate }}</p>
        </div>
        <i class="pi pi-arrow-right rtl:rotate-180 guide-arrow"></i>
      </a>
    </div>

    <!-- CHARTS ROW -->
    @if (showCharts()) {
      <div class="charts-row">
        <!-- Account Classification Doughnut -->
        @if (accountChartData()) {
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title-wrap">
                <div class="chart-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">
                  <i class="pi pi-chart-pie"></i>
                </div>
                <div>
                  <h3>{{ 'DASHBOARD.CHART_ACCOUNTS_TITLE' | translate }}</h3>
                  <p>{{ 'DASHBOARD.CHART_ACCOUNTS_SUB' | translate }}</p>
                </div>
              </div>
            </div>
            <div class="chart-body doughnut-chart">
              <p-chart type="doughnut" [data]="accountChartData()" [options]="accountChartOptions" [style]="{'height': '280px'}" />
            </div>
          </div>
        }

        <!-- Monthly Entries Bar Chart -->
        @if (entryChartData()) {
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title-wrap">
                <div class="chart-icon" style="background: rgba(59,130,246,0.1); color: #3b82f6;">
                  <i class="pi pi-chart-bar"></i>
                </div>
                <div>
                  <h3>{{ 'DASHBOARD.CHART_ENTRIES_TITLE' | translate }}</h3>
                  <p>{{ 'DASHBOARD.CHART_ENTRIES_SUB' | translate }}</p>
                </div>
              </div>
            </div>
            <div class="chart-body">
              <p-chart type="bar" [data]="entryChartData()" [options]="entryChartOptions" [style]="{'height': '280px'}" />
            </div>
          </div>
        }
      </div>
    }

    <!-- BOTTOM ROW: Company + Recent + Quick Actions -->
    <div class="bottom-row">
      <!-- Company Info -->
      @if (company$ | async; as company) {
        <div class="info-card company-card">
          <div class="card-header gradient-brand">
            <i class="pi pi-building"></i>
            <h3>{{ 'DASHBOARD.COMPANY_INFO' | translate }}</h3>
          </div>
          <div class="card-body">
            <div class="info-row">
              <span class="info-label">{{ 'COMPANY.NAME_EN' | translate }}</span>
              <span class="info-value">{{ company.name_en }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ 'COMPANY.NAME_AR' | translate }}</span>
              <span class="info-value">{{ company.name_ar }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ 'COMPANY.CURRENCY' | translate }}</span>
              <span class="info-value highlight">{{ company.currency }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ 'COMPANY.EMAIL' | translate }}</span>
              <span class="info-value">{{ company.email }}</span>
            </div>
            <div class="info-row last">
              <span class="info-label">{{ 'COMPANY.PHONE' | translate }}</span>
              <span class="info-value">{{ company.phone }}</span>
            </div>
          </div>
          @if (showCompanyLink()) {
            <div class="card-footer">
              <a routerLink="/core/company" class="view-link">
                {{ 'DASHBOARD.VIEW_FULL_PROFILE' | translate }}
                <i class="pi pi-arrow-right rtl:rotate-180"></i>
              </a>
            </div>
          }
        </div>
      }

      <!-- Recent Journal Entries -->
      @if (recentEntries().length > 0) {
        <div class="info-card recent-card">
          <div class="card-header gradient-indigo">
            <i class="pi pi-history"></i>
            <h3>{{ 'DASHBOARD.RECENT_ENTRIES' | translate }}</h3>
          </div>
          <div class="card-body no-padding">
            @for (entry of recentEntries(); track entry.id) {
              <div class="entry-row">
                <div class="entry-left">
                  <div class="entry-badge" [style.background]="getStatusBg(entry.status)" [style.color]="getStatusColor(entry.status)">
                    <i class="pi pi-file-edit"></i>
                  </div>
                  <div class="entry-info">
                    <span class="entry-ref">{{ entry.reference || '#' + entry.id }}</span>
                    <span class="entry-date">{{ entry.date }}</span>
                  </div>
                </div>
                <div class="entry-right">
                  <span class="entry-amount">{{ entry.total_debit | number:'1.0-0' }}</span>
                  <span class="entry-status" [style.background]="getStatusBg(entry.status)" [style.color]="getStatusColor(entry.status)">
                    {{ entry.status }}
                  </span>
                </div>
              </div>
            }
          </div>
        </div>
      }

      <!-- Quick Actions -->
      @if (quickActions().length > 0) {
        <div class="info-card actions-card">
          <div class="card-header gradient-amber">
            <i class="pi pi-bolt"></i>
            <h3>{{ 'DASHBOARD.QUICK_ACTIONS' | translate }}</h3>
          </div>
          <div class="card-body">
            <div class="actions-grid">
              @for (action of quickActions(); track action.route) {
                <a [routerLink]="action.route" class="action-btn" [style.--action-color]="action.color">
                  <div class="action-icon">
                    <i [class]="action.icon"></i>
                  </div>
                  <span class="action-label">{{ action.label | translate }}</span>
                </a>
              }
            </div>
          </div>
        </div>
      }
    </div>

  }
</div>
