<p-toast />

<div class="product-detail-page">
  @if (loading()) {
    <div class="loading-state">
      <i class="pi pi-spin pi-spinner" style="font-size:2.5rem"></i>
      <p>{{ 'COMMON.LOADING' | translate }}</p>
    </div>
  } @else if (product(); as p) {
    <!-- HERO HEADER -->
    <div class="hero-header">
      <div class="hero-right">
        <p-button icon="pi pi-arrow-right" [label]="'PRODUCTS.BACK_TO_PRODUCTS' | translate"
          severity="secondary" [outlined]="true" (onClick)="goBack()" />
        <div class="hero-title-block">
          <h1>{{ p.name_ar || p.name }}</h1>
          <div class="hero-meta">
            <span class="meta-code">{{ p.code }}</span>
            @if (p.sku) {
              <span class="meta-sep">&#8226;</span>
              <span class="meta-sku">SKU: {{ p.sku }}</span>
            }
            @if (p.barcode) {
              <span class="meta-sep">&#8226;</span>
              <span class="meta-barcode">{{ 'PRODUCTS.BARCODE' | translate }}: {{ p.barcode }}</span>
            }
          </div>
        </div>
      </div>
      <div class="hero-badges">
        <p-tag [value]="$any(p.type)?.label || $any(p.type)"
          [severity]="p.type?.value === 'service' ? 'info' : 'warn'" />
        <p-tag [value]="$any(p.status)?.label || $any(p.status)"
          [severity]="p.status?.value === 'active' ? 'success' : p.status?.value === 'inactive' ? 'danger' : 'warn'" />
      </div>
    </div>

    <!-- TOP ROW: Image Gallery + Product Info -->
    <div class="top-row">
      <!-- Image Gallery -->
      <div class="gallery-card">
        <div class="main-image-wrap">
          @if (mainImageBlob()) {
            <img [src]="mainImageBlob()" alt="Product Image" class="main-image" />
          } @else {
            <div class="no-image-placeholder">
              <i class="pi pi-image"></i>
              <span>{{ 'PRODUCTS.NO_IMAGES' | translate }}</span>
            </div>
          }
        </div>
        @if (gallery().length > 0) {
          <div class="thumbnail-strip">
            @for (att of gallery(); track att.id) {
              <div class="thumb-item" (click)="selectGalleryImage(att)"
                [class.active]="mainImageBlob() === galleryBlobUrls()[att.id]">
                @if (galleryBlobUrls()[att.id]) {
                  <img [src]="galleryBlobUrls()[att.id]" [alt]="att.file_name" />
                } @else {
                  <div class="thumb-loading"><i class="pi pi-spin pi-spinner"></i></div>
                }
              </div>
            }
          </div>
        }
      </div>

      <!-- Product Info Card -->
      <div class="info-card">
        <div class="info-card-header">
          <i class="pi pi-info-circle"></i>
          <h3>{{ 'PRODUCTS.PRODUCT_INFO' | translate }}</h3>
        </div>
        <div class="info-grid">
          <div class="info-row">
            <span class="info-label">{{ 'PRODUCTS.CATEGORY' | translate }}</span>
            <span class="info-value">{{ p.category?.name || '—' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">{{ 'PRODUCTS.UNIT' | translate }}</span>
            <span class="info-value">{{ getUnitName(p.base_unit_id) }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">{{ 'PRODUCTS.TRACK_INVENTORY' | translate }}</span>
            <span class="info-value">
              @if (p.track_inventory) {
                <i class="pi pi-check-circle" style="color:#10b981"></i>
              } @else {
                <i class="pi pi-times-circle" style="color:#94a3b8"></i>
              }
            </span>
          </div>
          <div class="info-row">
            <span class="info-label">{{ 'PRODUCTS.REORDER_POINT' | translate }}</span>
            <span class="info-value mono">{{ p.reorder_point || '—' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">{{ 'PRODUCTS.MIN_STOCK' | translate }}</span>
            <span class="info-value mono">{{ p.min_stock_level || '—' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">{{ 'PRODUCTS.MAX_STOCK' | translate }}</span>
            <span class="info-value mono">{{ p.max_stock_level || '—' }}</span>
          </div>
          @if (p.weight) {
            <div class="info-row">
              <span class="info-label">{{ 'PRODUCTS.WEIGHT' | translate }}</span>
              <span class="info-value mono">{{ p.weight }}</span>
            </div>
          }
          @if (p.dimensions) {
            <div class="info-row">
              <span class="info-label">{{ 'PRODUCTS.DIMENSIONS' | translate }}</span>
              <span class="info-value mono">{{ p.dimensions }}</span>
            </div>
          }
          @if (p.brand || p.brand_ar) {
            <div class="info-row">
              <span class="info-label">{{ 'PRODUCTS.BRAND' | translate }}</span>
              <span class="info-value">{{ p.brand_ar || p.brand }}</span>
            </div>
          }
          <div class="info-row">
            <span class="info-label">{{ 'COMMON.CREATED_AT' | translate }}</span>
            <span class="info-value mono">{{ p.created_at | date:'yyyy-MM-dd' }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- PRICING CARDS -->
    <div class="section-label">
      <i class="pi pi-dollar"></i>
      {{ 'PRODUCTS.PRICING' | translate }}
    </div>
    <div class="stats-grid">
      <div class="stat-card stat-blue">
        <div class="stat-icon-wrap"><i class="pi pi-shopping-cart"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ purchasePrice() | number:'1.2-2' }}</span>
          <span class="stat-label">{{ 'PRODUCTS.PURCHASE_PRICE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-green">
        <div class="stat-icon-wrap"><i class="pi pi-tag"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ salePrice() | number:'1.2-2' }}</span>
          <span class="stat-label">{{ 'PRODUCTS.SALE_PRICE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-purple">
        <div class="stat-icon-wrap"><i class="pi pi-truck"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ wholesalePrice() | number:'1.2-2' }}</span>
          <span class="stat-label">{{ 'PRODUCTS.WHOLESALE_PRICE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-amber">
        <div class="stat-icon-wrap"><i class="pi pi-percentage"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ halfWholesalePrice() | number:'1.2-2' }}</span>
          <span class="stat-label">{{ 'PRODUCTS.HALF_WHOLESALE_PRICE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-rose">
        <div class="stat-icon-wrap"><i class="pi pi-arrow-down"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ minSalePrice() | number:'1.2-2' }}</span>
          <span class="stat-label">{{ 'PRODUCTS.MIN_SALE_PRICE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
    </div>

    <!-- INVENTORY STATS CARDS -->
    @if (p.track_inventory) {
      <div class="section-label">
        <i class="pi pi-box"></i>
        {{ 'PRODUCTS.INVENTORY_STATUS' | translate }}
      </div>
      <div class="stats-grid">
        <div class="stat-card stat-blue">
          <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ totalStock() | number:'1.2-2' }}</span>
            <span class="stat-label">{{ 'PRODUCTS.TOTAL_STOCK' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>
        <div class="stat-card stat-green">
          <div class="stat-icon-wrap"><i class="pi pi-download"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ totalIn() | number:'1.2-2' }}</span>
            <span class="stat-label">{{ 'INVENTORY.TOTAL_IN' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>
        <div class="stat-card stat-rose">
          <div class="stat-icon-wrap"><i class="pi pi-upload"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ totalOut() | number:'1.2-2' }}</span>
            <span class="stat-label">{{ 'INVENTORY.TOTAL_OUT' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>
        <div class="stat-card stat-purple">
          <div class="stat-icon-wrap"><i class="pi pi-calculator"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ avgCost() | number:'1.2-2' }}</span>
            <span class="stat-label">{{ 'INVENTORY.AVG_COST' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>
        <div class="stat-card stat-amber">
          <div class="stat-icon-wrap"><i class="pi pi-dollar"></i></div>
          <div class="stat-info">
            <span class="stat-value">{{ totalValue() | number:'1.2-2' }}</span>
            <span class="stat-label">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</span>
          </div>
          <div class="stat-decoration"></div>
        </div>
      </div>
    }

    <!-- VARIANTS SECTION -->
    @if (p.has_variants && variants().length > 0) {
      <div class="section-card">
        <div class="section-header">
          <h3><i class="pi pi-th-large"></i> {{ 'PRODUCTS.VARIANTS' | translate }} ({{ variants().length }})</h3>
        </div>
        <p-table [value]="variants()" styleClass="p-datatable-sm p-datatable-gridlines">
          <ng-template #header>
            <tr>
              <th>#</th>
              <th>{{ 'PRODUCTS.NAME_AR' | translate }}</th>
              <th>{{ 'PRODUCTS.VARIANT_ATTRIBUTES' | translate }}</th>
              <th>{{ 'PRODUCTS.SKU' | translate }}</th>
              <th>{{ 'PRODUCTS.BARCODE' | translate }}</th>
              <th class="text-end">{{ 'PRODUCTS.VARIANT_ADDITIONAL_PRICE' | translate }}</th>
              <th>{{ 'COMMON.STATUS' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template #body let-v let-i="rowIndex">
            <tr>
              <td class="mono" style="width:50px">{{ i + 1 }}</td>
              <td>{{ v.name || '—' }}</td>
              <td>{{ getVariantAttributeText(v) }}</td>
              <td class="mono">{{ v.sku || '—' }}</td>
              <td class="mono">{{ v.barcode || '—' }}</td>
              <td class="text-end mono">{{ v.additional_price || 0 }}</td>
              <td>
                <p-tag [value]="v.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
                  [severity]="v.is_active ? 'success' : 'danger'" />
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    }

    <!-- ALTERNATIVE UNITS SECTION -->
    @if (productUnits().length > 0) {
      <div class="section-card">
        <div class="section-header">
          <h3><i class="pi pi-arrows-h"></i> {{ 'PRODUCTS.ALTERNATIVE_UNITS' | translate }} ({{ productUnits().length }})</h3>
        </div>
        <p-table [value]="productUnits()" styleClass="p-datatable-sm p-datatable-gridlines">
          <ng-template #header>
            <tr>
              <th>{{ 'PRODUCTS.UNIT' | translate }}</th>
              <th class="text-end">{{ 'PRODUCTS.CONVERSION_FACTOR' | translate }}</th>
              <th class="text-end">{{ 'PRODUCTS.PURCHASE_PRICE' | translate }}</th>
              <th class="text-end">{{ 'PRODUCTS.SALE_PRICE' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template #body let-pu>
            <tr>
              <td>{{ pu.unit?.name || getUnitName(pu.unit_id) }}</td>
              <td class="text-end mono">{{ pu.conversion_factor }}</td>
              <td class="text-end mono">{{ pu.purchase_price }}</td>
              <td class="text-end mono">{{ pu.sale_price }}</td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    }

    <!-- CHARTS ROW -->
    @if (p.track_inventory && (stockTrendData() || warehouseChartData())) {
      <div class="charts-row">
        <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)">
                <i class="pi pi-chart-line" style="color:#6366f1"></i>
              </div>
              <h3>{{ 'PRODUCTS.STOCK_TREND' | translate }}</h3>
            </div>
          </div>
          <div class="chart-body">
            @if (stockTrendData()) {
              <p-chart type="line" [data]="stockTrendData()" [options]="stockTrendOptions" height="280px" />
            } @else {
              <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
            }
          </div>
        </div>
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title-wrap">
              <div class="chart-icon" style="background:rgba(16,185,129,0.1)">
                <i class="pi pi-building" style="color:#10b981"></i>
              </div>
              <h3>{{ 'PRODUCTS.QTY_BY_WAREHOUSE' | translate }}</h3>
            </div>
          </div>
          <div class="chart-body">
            @if (warehouseChartData()) {
              <p-chart type="bar" [data]="warehouseChartData()" [options]="warehouseChartOptions" height="280px" />
            } @else {
              <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
            }
          </div>
        </div>
      </div>
    }

    <!-- STOCK BALANCES BY WAREHOUSE -->
    @if (p.track_inventory && balances().length > 0) {
      <div class="section-card">
        <div class="section-header">
          <h3><i class="pi pi-building"></i> {{ 'PRODUCTS.STOCK_BY_WAREHOUSE' | translate }}</h3>
        </div>
        <p-table [value]="balances()" styleClass="p-datatable-sm p-datatable-gridlines">
          <ng-template #header>
            <tr>
              <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
              <th>{{ 'PRODUCTS.VARIANTS' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.QUANTITY' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.AVAILABLE_QTY' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.AVG_COST' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template #body let-b>
            <tr>
              <td>{{ b.warehouse_name }}</td>
              <td>{{ b.product_variant_name || '—' }}</td>
              <td class="text-end mono">{{ +b.quantity | number:'1.2-2' }}</td>
              <td class="text-end mono">{{ b.available_quantity | number:'1.2-2' }}</td>
              <td class="text-end mono">{{ +b.average_cost | number:'1.2-2' }}</td>
              <td class="text-end mono">{{ +b.total_value | number:'1.2-2' }}</td>
            </tr>
          </ng-template>
          <ng-template #emptymessage>
            <tr><td colspan="6" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
          </ng-template>
        </p-table>
      </div>
    }

    <!-- SERIAL NUMBERS SECTION -->
    @if (isSerialTracked() && serials().length > 0) {
      <div class="section-card">
        <div class="section-header">
          <h3><i class="pi pi-hashtag"></i> {{ 'INVENTORY.SERIAL_NUMBERS' | translate }} ({{ serials().length }})</h3>
          <div class="serial-summary">
            <span class="serial-stat serial-available">{{ serialsAvailable() }} {{ 'COMMON.AVAILABLE' | translate }}</span>
            <span class="serial-stat serial-sold">{{ serialsSold() }} {{ 'PRODUCTS.SOLD' | translate }}</span>
          </div>
        </div>
        <p-table [value]="serials()" [paginator]="serials().length > 15" [rows]="15" [rowsPerPageOptions]="[15,30,50]"
          [scrollable]="true" scrollHeight="400px" styleClass="p-datatable-sm p-datatable-gridlines"
          [globalFilterFields]="['serial_number','status.value']">
          <ng-template #header>
            <tr>
              <th>#</th>
              <th>{{ 'PRODUCTS.SERIAL_NUMBER' | translate }}</th>
              <th>{{ 'COMMON.STATUS' | translate }}</th>
              <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
              <th>{{ 'PRODUCTS.EXPIRY_DATE' | translate }}</th>
              <th>{{ 'INVENTORY.UNIT_COST' | translate }}</th>
              <th>{{ 'COMMON.CREATED_AT' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template #body let-serial let-i="rowIndex">
            <tr>
              <td style="width:50px" class="mono">{{ i + 1 }}</td>
              <td class="mono" style="font-weight:700;">{{ serial.serial_number }}</td>
              <td>
                <p-tag [value]="serial.status.label" [severity]="getSerialStatusSeverity(serial.status.value)" />
              </td>
              <td>{{ serial.warehouse_id || '—' }}</td>
              <td class="mono">{{ serial.expiry_date || '—' }}</td>
              <td class="text-end mono">{{ serial.cost || '—' }}</td>
              <td class="mono">{{ serial.created_at | date:'yyyy-MM-dd' }}</td>
            </tr>
          </ng-template>
          <ng-template #emptymessage>
            <tr><td colspan="7" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
          </ng-template>
        </p-table>
      </div>
    }

    <!-- MOVEMENT HISTORY -->
    @if (p.track_inventory && entries().length > 0) {
      <div class="section-card">
        <div class="section-header">
          <h3><i class="pi pi-list"></i> {{ 'PRODUCTS.MOVEMENT_HISTORY' | translate }}</h3>
        </div>
        <p-table [value]="entries()" [paginator]="true" [rows]="15" [rowsPerPageOptions]="[15,30,50]"
          [scrollable]="true" scrollHeight="400px" styleClass="p-datatable-sm p-datatable-gridlines">
          <ng-template #header>
            <tr>
              <th>{{ 'INVENTORY.DATE' | translate }}</th>
              <th>{{ 'INVENTORY.MOVEMENT_TYPE' | translate }}</th>
              <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.QTY_IN' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.QTY_OUT' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.BALANCE' | translate }}</th>
              <th class="text-end">{{ 'INVENTORY.UNIT_COST' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template #body let-entry>
            <tr>
              <td class="mono">{{ entry.date }}</td>
              <td>
                <p-tag [value]="entry.movement_type_label" [severity]="getMovementSeverity(entry.movement_type)" />
              </td>
              <td>{{ entry.warehouse_name }}</td>
              <td class="text-end" [class.text-success]="+entry.quantity_in > 0">
                {{ +entry.quantity_in > 0 ? (+entry.quantity_in | number:'1.2-2') : '—' }}
              </td>
              <td class="text-end" [class.text-danger]="+entry.quantity_out > 0">
                {{ +entry.quantity_out > 0 ? (+entry.quantity_out | number:'1.2-2') : '—' }}
              </td>
              <td class="text-end mono">{{ +entry.balance_after | number:'1.2-2' }}</td>
              <td class="text-end mono">{{ +entry.unit_cost | number:'1.2-2' }}</td>
            </tr>
          </ng-template>
          <ng-template #emptymessage>
            <tr><td colspan="7" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
          </ng-template>
        </p-table>
      </div>
    }

    <!-- DESCRIPTION / NOTES -->
    @if (p.description || p.description_ar || p.notes || p.notes_ar) {
      <div class="section-card">
        <div class="section-header">
          <h3><i class="pi pi-file-edit"></i> {{ 'PRODUCTS.DESCRIPTION_NOTES' | translate }}</h3>
        </div>
        <div class="description-body">
          @if (p.description_ar || p.description) {
            <p>{{ p.description_ar || p.description }}</p>
          }
          @if (p.notes_ar || p.notes) {
            <p class="notes-text">{{ p.notes_ar || p.notes }}</p>
          }
        </div>
      </div>
    }
  }
</div>
