<p-toast />
<p-confirmDialog />

<div class="grns-page">
  <app-page-header title="PURCHASES.GRNS" subtitle="PURCHASES.TITLE" (refresh)="retry()">
  </app-page-header>

  <ng-template #bodyTpl let-g>
    <tr>
      <td class="mono">{{ g.grn_number }}</td>
      <td>{{ g.date }}</td>
      <td class="mono">{{ g.purchase_order_number || '-' }}</td>
      <td>{{ g.supplier_name }}</td>
      <td>{{ g.warehouse_name }}</td>
      <td class="amount">{{ g.total_quantity }}</td>
      <td class="amount">{{ g.total_cost | number:'1.2-2' }}</td>
      <td>
        <p-tag
          [value]="getStatusLabel(g.status)"
          [severity]="getStatusSeverity(g.status)"
        />
      </td>
      <td>
        <div class="action-buttons">
          <p-button
            icon="pi pi-eye"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="viewGrn(g)"
            [pTooltip]="'COMMON.VIEW' | translate"
          />
          <p-button
            icon="pi pi-print"
            [rounded]="true"
            [text]="true"
            severity="secondary"
            (onClick)="printGrn(g)"
            [pTooltip]="'PURCHASES.PRINT' | translate"
          />
          @if (g.status === 'draft') {
            <p-button
              icon="pi pi-check-square"
              [rounded]="true"
              [text]="true"
              severity="warn"
              (onClick)="openQualityCheck(g)"
              [pTooltip]="'PURCHASES.QUALITY_CHECK' | translate"
            />
            <p-button
              icon="pi pi-check-circle"
              [rounded]="true"
              [text]="true"
              severity="success"
              (onClick)="approveGrn(g)"
              [pTooltip]="'PURCHASES.APPROVE' | translate"
            />
            <p-button
              icon="pi pi-trash"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="deleteGrn(g)"
              [pTooltip]="'COMMON.DELETE' | translate"
            />
          }
          @if (g.status !== 'cancelled') {
            <p-button
              icon="pi pi-ban"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="cancelGrn(g)"
              [pTooltip]="'PURCHASES.CANCEL' | translate"
            />
          }
        </div>
      </td>
    </tr>
  </ng-template>

  <ng-template #filtersTpl>
    <app-sales-filter-bar
      [statusOptions]="statusOptions"
      [customers]="filterSuppliers()"
      (filtersChange)="onFiltersChange($event)"
    />
  </ng-template>

  <app-data-table
    [data]="tableData()"
    [lazy]="true"
    [totalRecords]="totalRecords()"
    [first]="first"
    [loading]="tableLoading()"
    [rows]="rows"
    (onLazyLoad)="onPageChange($event)"
    [columns]="columns"
    (retry)="retry()"
    [bodyTpl]="bodyTpl"
    [filtersTpl]="filtersTpl"
  >
  </app-data-table>
</div>

<!-- View GRN Dialog -->
<p-dialog
  [header]="'PURCHASES.GRN' | translate"
  [(visible)]="viewDialogVisible"
  [modal]="true"
  [style]="{ width: '900px' }"
  [closable]="true"
>
  @if (viewingGrn(); as g) {
    <div class="view-grn">
      <div class="view-header-info">
        <div class="info-item">
          <label>{{ 'PURCHASES.GRN_NUMBER' | translate }}</label>
          <span class="mono">{{ g.grn_number }}</span>
        </div>
        <div class="info-item">
          <label>{{ 'PURCHASES.DATE' | translate }}</label>
          <span>{{ g.date }}</span>
        </div>
        <div class="info-item">
          <label>{{ 'PURCHASES.STATUS' | translate }}</label>
          <p-tag
            [value]="getStatusLabel(g.status)"
            [severity]="getStatusSeverity(g.status)"
          />
        </div>
        <div class="info-item">
          <label>{{ 'PURCHASES.SUPPLIER' | translate }}</label>
          <span>{{ g.supplier_name }}</span>
        </div>
        <div class="info-item">
          <label>{{ 'PURCHASES.WAREHOUSE' | translate }}</label>
          <span>{{ g.warehouse_name }}</span>
        </div>
        @if (g.purchase_order_number) {
          <div class="info-item">
            <label>{{ 'PURCHASES.ORDER_NUMBER' | translate }}</label>
            <span class="mono">{{ g.purchase_order_number }}</span>
          </div>
        }
        @if (g.reference) {
          <div class="info-item">
            <label>{{ 'PURCHASES.REFERENCE' | translate }}</label>
            <span>{{ g.reference }}</span>
          </div>
        }
      </div>

      @if (g.notes || g.notes_ar) {
        <div class="view-description">
          @if (g.notes) {
            <label>{{ 'PURCHASES.NOTES' | translate }}</label>
            <p>{{ g.notes }}</p>
          }
          @if (g.notes_ar) {
            <label>{{ 'PURCHASES.NOTES_AR' | translate }}</label>
            <p>{{ g.notes_ar }}</p>
          }
        </div>
      }

      <table class="view-lines-table">
        <thead>
          <tr>
            <th>#</th>
            <th>{{ 'PURCHASES.PRODUCT' | translate }}</th>
            <th>{{ 'PURCHASES.UNIT' | translate }}</th>
            <th>{{ 'PURCHASES.QUANTITY' | translate }}</th>
            <th>{{ 'PURCHASES.ACCEPTED_QTY' | translate }}</th>
            <th>{{ 'PURCHASES.REJECTED_QTY' | translate }}</th>
            <th>{{ 'PURCHASES.UNIT_COST' | translate }}</th>
            <th>{{ 'PURCHASES.LINE_TOTAL' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          @for (item of g.items; track $index) {
            <tr>
              <td>{{ $index + 1 }}</td>
              <td>{{ item.product_name }}</td>
              <td>{{ item.unit_name }}</td>
              <td class="amount">{{ item.quantity }}</td>
              <td class="amount accepted">{{ item.accepted_quantity || item.quantity }}</td>
              <td class="amount rejected">{{ item.rejected_quantity || '0' }}</td>
              <td class="amount">{{ item.unit_cost | number:'1.2-2' }}</td>
              <td class="amount">{{ item.total_cost | number:'1.2-2' }}</td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr class="grand-total-row">
            <td colspan="6"></td>
            <td><strong>{{ 'PURCHASES.TOTAL' | translate }}</strong></td>
            <td class="amount"><strong>{{ g.total_cost | number:'1.2-2' }}</strong></td>
          </tr>
        </tfoot>
      </table>

      @if (g.quality_notes) {
        <div class="quality-notes-section">
          <h4>{{ 'PURCHASES.QUALITY_CHECK' | translate }}</h4>
          <p>{{ g.quality_notes }}</p>
        </div>
      }

      <!-- Timeline -->
      <div class="approval-timeline">
        <h4>{{ 'PURCHASES.TIMELINE' | translate }}</h4>
        @if (g.created_by_name) {
          <div class="timeline-item">
            <i class="pi pi-plus-circle"></i>
            <span>{{ 'PURCHASES.CREATED_BY' | translate }}: {{ g.created_by_name }} ({{ g.created_at }})</span>
          </div>
        }
        @if (g.quality_checked_at) {
          <div class="timeline-item">
            <i class="pi pi-check-square"></i>
            <span>{{ 'PURCHASES.QUALITY_CHECK' | translate }}: {{ g.quality_checked_at }}</span>
          </div>
        }
        @if (g.approved_by_name) {
          <div class="timeline-item">
            <i class="pi pi-check-circle"></i>
            <span>{{ 'PURCHASES.APPROVED_BY' | translate }}: {{ g.approved_by_name }} ({{ g.approved_at }})</span>
          </div>
        }
        @if (g.cancelled_at) {
          <div class="timeline-item">
            <i class="pi pi-ban"></i>
            <span>{{ 'PURCHASES.CANCELLED' | translate }}: {{ g.cancelled_at }}</span>
          </div>
        }
      </div>
    </div>
  }
  <ng-template #footer>
    <p-button
      [label]="'COMMON.CLOSE' | translate"
      icon="pi pi-times"
      severity="secondary"
      (onClick)="viewDialogVisible.set(false)"
    />
  </ng-template>
</p-dialog>

<!-- Quality Check Dialog -->
<p-dialog
  [header]="'PURCHASES.QUALITY_CHECK' | translate"
  [(visible)]="qualityDialogVisible"
  [modal]="true"
  [style]="{ width: '750px' }"
  [closable]="true"
>
  <table class="view-lines-table" style="width: 100%;">
    <thead>
      <tr>
        <th>{{ 'PURCHASES.PRODUCT' | translate }}</th>
        <th>{{ 'PURCHASES.RECEIVED' | translate }}</th>
        <th>{{ 'PURCHASES.ACCEPTED_QTY' | translate }}</th>
        <th>{{ 'PURCHASES.REJECTED_QTY' | translate }}</th>
        <th>{{ 'PURCHASES.REJECTION_REASON' | translate }}</th>
      </tr>
    </thead>
    <tbody>
      @for (item of qualityItems(); track item.item_id; let i = $index) {
        <tr>
          <td>{{ item.product_name }}</td>
          <td class="amount">{{ item.received }}</td>
          <td>
            <p-inputNumber
              [ngModel]="item.accepted"
              (ngModelChange)="onAcceptedChange(i, $event)"
              [min]="0"
              [max]="item.received"
              [style]="{ width: '100%' }"
            />
          </td>
          <td class="amount rejected">{{ item.rejected }}</td>
          <td>
            <input pInputText
              [ngModel]="item.rejection_reason"
              (ngModelChange)="qualityItems()[i].rejection_reason = $event"
              [placeholder]="'PURCHASES.REJECTION_REASON' | translate"
              style="width: 100%"
            />
          </td>
        </tr>
      }
    </tbody>
  </table>

  <div style="margin-top: 1rem;">
    <label style="display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 600;">{{ 'PURCHASES.QUALITY_NOTES' | translate }}</label>
    <textarea pTextarea
      [ngModel]="qualityNotes()"
      (ngModelChange)="qualityNotes.set($event)"
      rows="3"
      style="width: 100%"
    ></textarea>
  </div>

  <ng-template #footer>
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      severity="secondary"
      (onClick)="qualityDialogVisible.set(false)"
    />
    <p-button
      [label]="'PURCHASES.SUBMIT_QUALITY' | translate"
      icon="pi pi-check"
      (onClick)="submitQualityResults()"
      [loading]="qualitySaving()"
    />
  </ng-template>
</p-dialog>
