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

<div class="dn-page">
  <app-page-header title="SALES.DELIVERY_NOTES" subtitle="SALES.TITLE" (refresh)="retry()">
  </app-page-header>

  <ng-template #bodyTpl let-dn>
    <tr>
      <td class="mono">{{ dn.delivery_number }}</td>
      <td>{{ dn.date }}</td>
      <td class="mono">{{ dn.order_number || '-' }}</td>
      <td>{{ dn.customer_name }}</td>
      <td>{{ dn.warehouse_name }}</td>
      <td>
        <p-tag
          [value]="getStatusLabel(dn.status)"
          [severity]="getStatusSeverity(dn.status)"
        />
      </td>
      <td class="mono">{{ dn.tracking_number || '-' }}</td>
      <td>
        <div class="action-buttons">
          <p-button
            icon="pi pi-eye"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="viewDN(dn)"
            [pTooltip]="'COMMON.VIEW' | translate"
          />
          <p-button
            icon="pi pi-print"
            [rounded]="true"
            [text]="true"
            severity="secondary"
            (onClick)="printDeliveryNote(dn)"
            [pTooltip]="'SALES.PRINT' | translate"
          />
          @if (dn.status === 'draft') {
            <p-button
              icon="pi pi-check"
              [rounded]="true"
              [text]="true"
              severity="success"
              (onClick)="confirmDN(dn)"
              [pTooltip]="'SALES.CONFIRM' | translate"
            />
            <p-button
              icon="pi pi-trash"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="deleteDN(dn)"
              [pTooltip]="'COMMON.DELETE' | translate"
            />
          }
          @if (dn.status === 'confirmed') {
            <p-button
              icon="pi pi-truck"
              [rounded]="true"
              [text]="true"
              severity="warn"
              (onClick)="openShipDialog(dn)"
              [pTooltip]="'SALES.SHIP' | translate"
            />
          }
          @if (dn.status === 'shipped') {
            <p-button
              icon="pi pi-check-circle"
              [rounded]="true"
              [text]="true"
              severity="success"
              (onClick)="openDeliverDialog(dn)"
              [pTooltip]="'SALES.DELIVER' | translate"
            />
          }
          @if (dn.status !== 'cancelled' && dn.status !== 'delivered') {
            <p-button
              icon="pi pi-ban"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="cancelDN(dn)"
              [pTooltip]="'SALES.CANCEL' | translate"
            />
          }
        </div>
      </td>
    </tr>
  </ng-template>

  <ng-template #filtersTpl>
    <app-sales-filter-bar
      [statusOptions]="statusOptions"
      [customers]="filterCustomers()"
      (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 DN Dialog -->
<p-dialog
  [header]="'SALES.DELIVERY_NOTE' | translate"
  [(visible)]="viewDialogVisible"
  [modal]="true"
  [style]="{ width: '900px' }"
  [closable]="true"
>
  @if (viewingDN(); as dn) {
    <div class="view-dn">
      <div class="view-header-info">
        <div class="info-item">
          <label>{{ 'SALES.DN_NUMBER' | translate }}</label>
          <span class="mono">{{ dn.delivery_number }}</span>
        </div>
        <div class="info-item">
          <label>{{ 'SALES.DATE' | translate }}</label>
          <span>{{ dn.date }}</span>
        </div>
        @if (dn.order_number) {
          <div class="info-item">
            <label>{{ 'SALES.ORDER_NUMBER' | translate }}</label>
            <span class="mono">{{ dn.order_number }}</span>
          </div>
        }
        <div class="info-item">
          <label>{{ 'SALES.STATUS' | translate }}</label>
          <p-tag [value]="getStatusLabel(dn.status)" [severity]="getStatusSeverity(dn.status)" />
        </div>
        <div class="info-item">
          <label>{{ 'SALES.CUSTOMER' | translate }}</label>
          <span>{{ dn.customer_name }}</span>
        </div>
        <div class="info-item">
          <label>{{ 'SALES.WAREHOUSE' | translate }}</label>
          <span>{{ dn.warehouse_name }}</span>
        </div>
      </div>

      <!-- Shipping Info -->
      @if (dn.carrier_name || dn.tracking_number) {
        <div class="shipping-card">
          <h4><i class="pi pi-truck"></i> {{ 'SALES.SHIPPING_INFO' | translate }}</h4>
          <div class="shipping-grid">
            @if (dn.carrier_name) {
              <div class="ship-item">
                <label>{{ 'SALES.CARRIER_NAME' | translate }}</label>
                <span>{{ dn.carrier_name }}</span>
              </div>
            }
            @if (dn.tracking_number) {
              <div class="ship-item">
                <label>{{ 'SALES.TRACKING_NUMBER' | translate }}</label>
                <span class="mono">{{ dn.tracking_number }}</span>
              </div>
            }
            @if (dn.shipping_method) {
              <div class="ship-item">
                <label>{{ 'SALES.SHIPPING_METHOD' | translate }}</label>
                <span>{{ dn.shipping_method }}</span>
              </div>
            }
            @if (dn.estimated_delivery) {
              <div class="ship-item">
                <label>{{ 'SALES.ESTIMATED_DELIVERY' | translate }}</label>
                <span>{{ dn.estimated_delivery }}</span>
              </div>
            }
            @if (dn.delivered_at) {
              <div class="ship-item">
                <label>{{ 'SALES.DELIVERED_AT' | translate }}</label>
                <span>{{ dn.delivered_at }}</span>
              </div>
            }
            @if (dn.received_by) {
              <div class="ship-item">
                <label>{{ 'SALES.RECEIVED_BY' | translate }}</label>
                <span>{{ dn.received_by }}</span>
              </div>
            }
          </div>
        </div>
      }

      <!-- Status Timeline -->
      <div class="status-timeline">
        <div class="timeline-step" [class.active]="true" [class.done]="dn.status !== 'draft'">
          <div class="step-dot"></div>
          <span>{{ 'SALES.DRAFT' | translate }}</span>
        </div>
        <div class="timeline-line" [class.active]="dn.status !== 'draft'"></div>
        <div class="timeline-step" [class.active]="dn.status !== 'draft'" [class.done]="dn.status === 'shipped' || dn.status === 'delivered'">
          <div class="step-dot"></div>
          <span>{{ 'SALES.CONFIRMED' | translate }}</span>
        </div>
        <div class="timeline-line" [class.active]="dn.status === 'shipped' || dn.status === 'delivered'"></div>
        <div class="timeline-step" [class.active]="dn.status === 'shipped' || dn.status === 'delivered'" [class.done]="dn.status === 'delivered'">
          <div class="step-dot"></div>
          <span>{{ 'SALES.SHIPPED' | translate }}</span>
        </div>
        <div class="timeline-line" [class.active]="dn.status === 'delivered'"></div>
        <div class="timeline-step" [class.active]="dn.status === 'delivered'">
          <div class="step-dot"></div>
          <span>{{ 'SALES.DELIVERED' | translate }}</span>
        </div>
      </div>

      <!-- Items -->
      <table class="view-lines-table">
        <thead>
          <tr>
            <th>#</th>
            <th>{{ 'SALES.PRODUCT' | translate }}</th>
            <th>{{ 'SALES.UNIT' | translate }}</th>
            <th>{{ 'SALES.WAREHOUSE' | translate }}</th>
            <th>{{ 'SALES.QUANTITY' | translate }}</th>
            @if (dn.items?.[0]?.batch_number) {
              <th>{{ 'SALES.BATCH_NUMBER' | translate }}</th>
            }
          </tr>
        </thead>
        <tbody>
          @for (item of dn.items; track $index) {
            <tr>
              <td>{{ $index + 1 }}</td>
              <td>{{ item.product_name }}</td>
              <td>{{ item.unit_name }}</td>
              <td>{{ item.warehouse_name || '-' }}</td>
              <td class="amount">{{ item.quantity }}</td>
              @if (dn.items?.[0]?.batch_number) {
                <td>{{ item.batch_number || '-' }}</td>
              }
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
  <ng-template #footer>
    <p-button
      [label]="'COMMON.CLOSE' | translate"
      icon="pi pi-times"
      severity="secondary"
      (onClick)="viewDialogVisible.set(false)"
    />
  </ng-template>
</p-dialog>

<!-- Ship Dialog -->
<p-dialog
  [header]="'SALES.SHIP' | translate"
  [(visible)]="shipDialogVisible"
  [modal]="true"
  [style]="{ width: '500px' }"
  [closable]="true"
>
  <form [formGroup]="shipForm" class="ship-form">
    <div class="form-field">
      <label>{{ 'SALES.CARRIER_NAME' | translate }} *</label>
      <input pInputText formControlName="carrier_name" />
    </div>
    <div class="form-field">
      <label>{{ 'SALES.TRACKING_NUMBER' | translate }} *</label>
      <input pInputText formControlName="tracking_number" />
    </div>
    <div class="form-field">
      <label>{{ 'SALES.SHIPPING_METHOD' | translate }}</label>
      <input pInputText formControlName="shipping_method" />
    </div>
    <div class="form-field">
      <label>{{ 'SALES.ESTIMATED_DELIVERY' | translate }}</label>
      <p-datepicker formControlName="estimated_delivery" dateFormat="yy-mm-dd" [showIcon]="true" [style]="{ width: '100%' }" />
    </div>
  </form>
  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="shipDialogVisible.set(false)" />
    <p-button [label]="'SALES.SHIP' | translate" icon="pi pi-truck" (onClick)="onShip()" [loading]="savingShip()" />
  </ng-template>
</p-dialog>

<!-- Deliver Dialog -->
<p-dialog
  [header]="'SALES.DELIVER' | translate"
  [(visible)]="deliverDialogVisible"
  [modal]="true"
  [style]="{ width: '400px' }"
  [closable]="true"
>
  <form [formGroup]="deliverForm" class="ship-form">
    <div class="form-field">
      <label>{{ 'SALES.DELIVERED_AT' | translate }} *</label>
      <p-datepicker formControlName="delivered_at" dateFormat="yy-mm-dd" [showIcon]="true" [style]="{ width: '100%' }" />
    </div>
    <div class="form-field">
      <label>{{ 'SALES.RECEIVED_BY' | translate }}</label>
      <input pInputText formControlName="received_by" />
    </div>
  </form>
  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="deliverDialogVisible.set(false)" />
    <p-button [label]="'SALES.DELIVER' | translate" icon="pi pi-check-circle" (onClick)="onDeliver()" [loading]="savingDeliver()" />
  </ng-template>
</p-dialog>
