<app-page-header
  title="PRINT_SETTINGS.TITLE"
  subtitle="PRINT_SETTINGS.SUBTITLE"
  [showRefresh]="false"
>
  <p-button
    [label]="'PRINT_SETTINGS.NEW_TEMPLATE' | translate"
    icon="pi pi-plus"
    (onClick)="createNew()"
    severity="success"
    size="small"
  />
</app-page-header>

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

<div class="settings-layout">
  <!-- Left: Document type sidebar -->
  <div class="doc-type-sidebar">
    @for (group of docTypeGroups; track group.labelEn) {
      <div class="group-header">
        <span [class]="group.icon"></span>
        <span>{{ getGroupLabel(group) }}</span>
      </div>
      @for (config of group.configs; track config.documentType) {
        <div
          class="doc-type-item"
          [class.active]="activeDocType().documentType === config.documentType"
          (click)="selectDocType(config)"
        >
          <span [class]="config.icon" class="doc-icon"></span>
          <span class="doc-label">{{ getDocTypeLabel(config) }}</span>
        </div>
      }
    }
  </div>

  <!-- Right: Template list + Preview -->
  <div class="main-content">
    <div class="content-header">
      <h2>
        <span [class]="activeDocType().icon"></span>
        {{ getDocTypeLabel(activeDocType()) }}
      </h2>
    </div>

    <div class="template-preview-layout">
      <!-- Template list -->
      <div class="template-list">
        <h3>{{ 'PRINT_SETTINGS.BUILT_IN_TEMPLATES' | translate }}</h3>
        @for (t of builtInTemplates; track t.id) {
          <div
            class="template-card"
            [class.selected]="selectedId() === t.id"
            (click)="selectTemplate(t.id)"
          >
            <div class="card-info">
              <span class="card-icon pi pi-file"></span>
              <div>
                <div class="card-name">{{ getTemplateLabel(t) }}</div>
                <p-tag [value]="t.id" severity="info" [style]="{ fontSize: '0.7rem' }" />
              </div>
            </div>
            <div class="card-actions">
              @if (activeTemplateId() === t.id) {
                <p-tag [value]="'COMMON.DEFAULT' | translate" severity="success" [style]="{ fontSize: '0.7rem' }" />
              } @else {
                <p-button
                  icon="pi pi-star"
                  [pTooltip]="'PRINT_SETTINGS.SET_AS_DEFAULT' | translate"
                  severity="secondary"
                  [text]="true"
                  size="small"
                  (onClick)="setAsDefault(t.id); $event.stopPropagation()"
                />
              }
              <p-button
                icon="pi pi-copy"
                [pTooltip]="'PRINT_SETTINGS.CLONE_TEMPLATE' | translate"
                severity="secondary"
                [text]="true"
                size="small"
                (onClick)="cloneTemplate(t.id); $event.stopPropagation()"
              />
            </div>
          </div>
        }

        @if (customTemplates().length) {
          <h3 style="margin-top: 1rem">{{ 'PRINT_SETTINGS.CUSTOM_TEMPLATES' | translate }}</h3>
          @for (ct of customTemplates(); track ct.id) {
            <div
              class="template-card"
              [class.selected]="selectedId() === ct.id"
              (click)="selectTemplate(ct.id)"
            >
              <div class="card-info">
                <span class="card-icon pi pi-palette"></span>
                <div>
                  <div class="card-name">{{ isAr() ? ct.label_ar : ct.label_en }}</div>
                  <p-tag [value]="ct.base" severity="warn" [style]="{ fontSize: '0.7rem' }" />
                </div>
              </div>
              <div class="card-actions">
                @if (activeTemplateId() === ct.id) {
                  <p-tag [value]="'COMMON.DEFAULT' | translate" severity="success" [style]="{ fontSize: '0.7rem' }" />
                } @else {
                  <p-button
                    icon="pi pi-star"
                    [pTooltip]="'PRINT_SETTINGS.SET_AS_DEFAULT' | translate"
                    severity="secondary"
                    [text]="true"
                    size="small"
                    (onClick)="setAsDefault(ct.id); $event.stopPropagation()"
                  />
                }
                <p-button
                  icon="pi pi-pencil"
                  severity="secondary"
                  [text]="true"
                  size="small"
                  (onClick)="editTemplate(ct.id); $event.stopPropagation()"
                />
                <p-button
                  icon="pi pi-trash"
                  severity="danger"
                  [text]="true"
                  size="small"
                  (onClick)="deleteTemplate(ct.id); $event.stopPropagation()"
                />
              </div>
            </div>
          }
        }
      </div>

      <!-- Preview -->
      <div class="preview-panel">
        <h3>{{ 'PRINT_SETTINGS.TEMPLATE_PREVIEW' | translate }}</h3>
        <div class="preview-frame">
          <iframe [srcdoc]="previewHtml()" class="preview-iframe"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Edit Dialog -->
<p-dialog
  [header]="dialogTitle"
  [(visible)]="dialogVisible"
  [modal]="true"
  [style]="{ width: '92vw', height: '90vh' }"
  [maximizable]="true"
  (onHide)="closeEditor()"
>
  @if (editing()) {
    <div class="edit-layout">
      <div class="edit-form">
        <p-tabs value="0">
          <p-tablist>
            <p-tab value="0">{{ 'PRINT_SETTINGS.VISUAL_SETTINGS' | translate }}</p-tab>
            <p-tab value="1">{{ 'PRINT_SETTINGS.HTML_EDITOR' | translate }}</p-tab>
          </p-tablist>
          <p-tabpanels>
            <p-tabpanel value="0">
              <div class="form-grid">
                <div class="form-field">
                  <label>{{ 'COMMON.NAME_AR' | translate }}</label>
                  <input pInputText [(ngModel)]="editLabelAr" (ngModelChange)="triggerPreviewUpdate()" />
                </div>
                <div class="form-field">
                  <label>{{ 'COMMON.NAME_EN' | translate }}</label>
                  <input pInputText [(ngModel)]="editLabelEn" (ngModelChange)="triggerPreviewUpdate()" />
                </div>
                <div class="form-field">
                  <label>{{ 'PRINT_SETTINGS.BASE_TEMPLATE' | translate }}</label>
                  <p-select
                    [options]="baseOptions"
                    [(ngModel)]="editBase"
                    (ngModelChange)="triggerPreviewUpdate()"
                    [style]="{ width: '100%' }"
                  />
                </div>
                <div class="form-field">
                  <label>{{ 'PRINT_SETTINGS.PAPER_SIZE' | translate }}</label>
                  <p-select
                    [options]="paperOptions"
                    [(ngModel)]="editConfig.paperSize"
                    (ngModelChange)="triggerPreviewUpdate()"
                    [style]="{ width: '100%' }"
                  />
                </div>
                <div class="form-field">
                  <label>{{ 'PRINT_SETTINGS.PRIMARY_COLOR' | translate }}</label>
                  <div class="color-input">
                    <input type="color" [(ngModel)]="editConfig.primaryColor" (ngModelChange)="triggerPreviewUpdate()" />
                    <input pInputText [(ngModel)]="editConfig.primaryColor" (ngModelChange)="triggerPreviewUpdate()" style="flex:1" />
                  </div>
                </div>
                <div class="form-field">
                  <label>{{ 'PRINT_SETTINGS.ACCENT_COLOR' | translate }}</label>
                  <div class="color-input">
                    <input type="color" [(ngModel)]="editConfig.accentColor" (ngModelChange)="triggerPreviewUpdate()" />
                    <input pInputText [(ngModel)]="editConfig.accentColor" (ngModelChange)="triggerPreviewUpdate()" style="flex:1" />
                  </div>
                </div>
                <div class="form-field">
                  <label>{{ 'PRINT_SETTINGS.FONT_FAMILY' | translate }}</label>
                  <p-select
                    [options]="fontOptions"
                    [(ngModel)]="editConfig.fontFamily"
                    (ngModelChange)="triggerPreviewUpdate()"
                    [style]="{ width: '100%' }"
                  />
                </div>
                <div class="form-field">
                  <label>{{ 'PRINT_SETTINGS.FONT_SIZE' | translate }} (px)</label>
                  <p-inputNumber [(ngModel)]="editConfig.fontSize" (ngModelChange)="triggerPreviewUpdate()" [min]="8" [max]="24" [showButtons]="true" />
                </div>

                <div class="form-field full-width toggles-grid">
                  <div class="toggle-item">
                    <p-toggleSwitch [(ngModel)]="editConfig.showLogo" (ngModelChange)="triggerPreviewUpdate()" />
                    <span>{{ 'PRINT_SETTINGS.SHOW_LOGO' | translate }}</span>
                  </div>
                  <div class="toggle-item">
                    <p-toggleSwitch [(ngModel)]="editConfig.showTaxNumber" (ngModelChange)="triggerPreviewUpdate()" />
                    <span>{{ 'PRINT_SETTINGS.SHOW_TAX_NUMBER' | translate }}</span>
                  </div>
                  <div class="toggle-item">
                    <p-toggleSwitch [(ngModel)]="editConfig.showReference" (ngModelChange)="triggerPreviewUpdate()" />
                    <span>{{ 'PRINT_SETTINGS.SHOW_REFERENCE' | translate }}</span>
                  </div>
                  <div class="toggle-item">
                    <p-toggleSwitch [(ngModel)]="editConfig.showSalesperson" (ngModelChange)="triggerPreviewUpdate()" />
                    <span>{{ 'PRINT_SETTINGS.SHOW_SALESPERSON' | translate }}</span>
                  </div>
                  <div class="toggle-item">
                    <p-toggleSwitch [(ngModel)]="editConfig.showNotes" (ngModelChange)="triggerPreviewUpdate()" />
                    <span>{{ 'PRINT_SETTINGS.SHOW_NOTES' | translate }}</span>
                  </div>
                  <div class="toggle-item">
                    <p-toggleSwitch [(ngModel)]="editConfig.showDiscountCol" (ngModelChange)="triggerPreviewUpdate()" />
                    <span>{{ 'PRINT_SETTINGS.SHOW_DISCOUNT_COL' | translate }}</span>
                  </div>
                </div>

                <div class="form-field full-width">
                  <label>{{ 'PRINT_SETTINGS.HEADER_TEXT' | translate }}</label>
                  <input pInputText [(ngModel)]="editConfig.headerText" (ngModelChange)="triggerPreviewUpdate()" />
                </div>
                <div class="form-field full-width">
                  <label>{{ 'PRINT_SETTINGS.FOOTER_TEXT' | translate }}</label>
                  <input pInputText [(ngModel)]="editConfig.footerText" (ngModelChange)="triggerPreviewUpdate()" />
                </div>
              </div>
            </p-tabpanel>

            <p-tabpanel value="1">
              <div class="html-editor-section">
                <div class="form-field full-width">
                  <label>{{ 'PRINT_SETTINGS.CUSTOM_CSS' | translate }}</label>
                  <small class="hint">{{ 'PRINT_SETTINGS.CSS_OVERRIDES_HINT' | translate }}</small>
                  <textarea
                    pTextarea
                    [(ngModel)]="editCustomCss"
                    (ngModelChange)="triggerPreviewUpdate()"
                    [rows]="8"
                    [style]="{ width: '100%', fontFamily: 'monospace', fontSize: '12px' }"
                    placeholder=".print-header { background: #f00; }&#10;table th { background: #333; }"
                  ></textarea>
                </div>
                <div class="form-field full-width" style="margin-top: 1rem">
                  <label>{{ 'PRINT_SETTINGS.CUSTOM_HTML' | translate }}</label>
                  <small class="hint">{{ 'PRINT_SETTINGS.HTML_TOKENS_HINT' | translate }}</small>
                  <textarea
                    pTextarea
                    [(ngModel)]="editCustomHtml"
                    (ngModelChange)="triggerPreviewUpdate()"
                    [rows]="14"
                    [style]="{ width: '100%', fontFamily: 'monospace', fontSize: '12px' }"
                    [placeholder]="htmlPlaceholder"
                  ></textarea>
                </div>
              </div>
            </p-tabpanel>
          </p-tabpanels>
        </p-tabs>
      </div>

      <div class="edit-preview">
        <h4>{{ 'PRINT_SETTINGS.TEMPLATE_PREVIEW' | translate }}</h4>
        <div class="preview-frame dialog-preview-frame">
          <iframe [srcdoc]="previewHtml()" class="preview-iframe"></iframe>
        </div>
      </div>
    </div>
  }

  <ng-template #footer>
    <div class="dialog-footer">
      <p-button
        [label]="'COMMON.CANCEL' | translate"
        icon="pi pi-times"
        severity="secondary"
        (onClick)="closeEditor()"
      />
      <p-button
        [label]="'COMMON.SAVE' | translate"
        icon="pi pi-check"
        (onClick)="saveTemplate()"
        [loading]="saving()"
      />
    </div>
  </ng-template>
</p-dialog>
