<p-toast />

<div class="page-header">
  <div class="header-text">
    <h1>{{ 'THEME.TITLE' | translate }}</h1>
    <p>{{ 'THEME.SUBTITLE' | translate }}</p>
  </div>
  <div class="flex gap-2">
    <p-button
      [label]="'THEME.RESET' | translate"
      icon="pi pi-refresh"
      severity="secondary"
      [outlined]="true"
      (onClick)="reset()"
    />
    <p-button
      [label]="'THEME.SAVE_DEFAULT' | translate"
      icon="pi pi-save"
      (onClick)="saveAsDefault()"
      [loading]="themeService.saving()"
    />
  </div>
</div>

<!-- ═══ Two-column grid: Input Style + Input Layout side by side ═══ -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
  <!-- Input Style -->
  <section>
    <h2 class="section-heading">{{ 'THEME.INPUT_STYLE' | translate }}</h2>
    <div class="flex gap-3">
      @for (style of inputStyles; track style.id) {
        <div
          class="option-card flex-1"
          [class.option-selected]="themeService.inputStyle() === style.id"
          (click)="selectInputStyle(style.id)"
        >
          <div class="input-preview-box">
            <div class="input-mock" [class]="'input-mock-' + style.id">
              <span class="input-mock-label">{{ 'COMMON.NAME' | translate }}</span>
              <span class="input-mock-value">Moon ERP</span>
            </div>
          </div>
          <div class="flex items-center gap-2 mt-2">
            <i [class]="style.icon" class="text-accent text-sm"></i>
            <span class="font-bold text-xs">{{ style.label | translate }}</span>
          </div>
          @if (themeService.inputStyle() === style.id) {
            <div class="selected-badge sm">
              <i class="pi pi-check text-[0.6rem]"></i>
            </div>
          }
        </div>
      }
    </div>
  </section>

  <!-- Input Label Layout -->
  <section>
    <h2 class="section-heading">{{ 'THEME.INPUT_LAYOUT' | translate }}</h2>
    <div class="flex gap-3">
      <!-- Stacked (label on top) -->
      <div
        class="option-card flex-1"
        [class.option-selected]="!themeService.inputLabelSide()"
        (click)="inputLabelSide = false"
      >
        <div class="input-preview-box">
          <div class="layout-mock layout-mock-stacked">
            <div class="lm-label"></div>
            <div class="lm-input"></div>
          </div>
          <div class="layout-mock layout-mock-stacked mt-1.5">
            <div class="lm-label short"></div>
            <div class="lm-input"></div>
          </div>
        </div>
        <div class="flex items-center gap-2 mt-2">
          <i class="pi pi-arrow-down text-accent text-sm"></i>
          <span class="font-bold text-xs">{{ 'THEME.LAYOUT_STACKED' | translate }}</span>
        </div>
        @if (!themeService.inputLabelSide()) {
          <div class="selected-badge sm">
            <i class="pi pi-check text-[0.6rem]"></i>
          </div>
        }
      </div>

      <!-- Side by side (label + input in row) -->
      <div
        class="option-card flex-1"
        [class.option-selected]="themeService.inputLabelSide()"
        (click)="inputLabelSide = true"
      >
        <div class="input-preview-box">
          <div class="layout-mock layout-mock-side">
            <div class="lm-label"></div>
            <div class="lm-input"></div>
          </div>
          <div class="layout-mock layout-mock-side mt-1.5">
            <div class="lm-label short"></div>
            <div class="lm-input"></div>
          </div>
        </div>
        <div class="flex items-center gap-2 mt-2">
          <i class="pi pi-arrow-right text-accent text-sm"></i>
          <span class="font-bold text-xs">{{ 'THEME.LAYOUT_SIDE' | translate }}</span>
        </div>
        @if (themeService.inputLabelSide()) {
          <div class="selected-badge sm">
            <i class="pi pi-check text-[0.6rem]"></i>
          </div>
        }
      </div>
    </div>
  </section>
</div>

<!-- ═══ Two-column grid: Font Size + Font Family side by side ═══ -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
  <!-- Font Size -->
  <section>
    <h2 class="section-heading">{{ 'THEME.FONT_SIZE' | translate }}</h2>
    <div class="flex gap-3">
      @for (size of fontSizes; track size.id) {
        <div
          class="option-card flex-1 text-center"
          [class.option-selected]="themeService.fontSize() === size.id"
          (click)="selectFontSize(size.id)"
        >
          <div class="font-size-preview" [style.font-size]="size.sample">Aa</div>
          <span class="font-bold text-xs block mt-1">{{ size.label | translate }}</span>
          <span class="text-text-muted text-[0.65rem]">{{ size.sample }}</span>
          @if (themeService.fontSize() === size.id) {
            <div class="selected-badge sm">
              <i class="pi pi-check text-[0.6rem]"></i>
            </div>
          }
        </div>
      }
    </div>
  </section>

  <!-- Font Family -->
  <section>
    <h2 class="section-heading">{{ 'THEME.FONT_FAMILY' | translate }}</h2>
    <div class="grid grid-cols-2 gap-3">
      @for (font of fontOptions; track font.id) {
        <div
          class="option-card"
          [class.option-selected]="themeService.fontFamily() === font.id"
          (click)="selectFontFamily(font.id)"
        >
          <div class="font-family-preview" [style.font-family]="font.arFamily">
            <span class="text-lg font-bold">أبجد</span>
            <span class="text-sm text-text-muted" [style.font-family]="font.enFamily">Abcd</span>
          </div>
          <span class="font-bold text-xs block mt-1">{{ font.label | translate }}</span>
          @if (themeService.fontFamily() === font.id) {
            <div class="selected-badge sm">
              <i class="pi pi-check text-[0.6rem]"></i>
            </div>
          }
        </div>
      }
    </div>
  </section>
</div>

<!-- ═══ Layout Width + Card Style ═══ -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
  <!-- Layout Width -->
  <section>
    <h2 class="section-heading">{{ 'THEME.LAYOUT_WIDTH' | translate }}</h2>
    <div class="flex gap-3">
      @for (lw of layoutWidths; track lw.id) {
        <div
          class="variant-card flex-1"
          [class.variant-selected]="themeService.layoutWidth() === lw.id"
          (click)="selectLayoutWidth(lw.id)"
        >
          <div class="variant-preview">
            <div class="mockup">
              <div class="mockup-sidebar" style="width:18px">
                <div class="mockup-logo"></div>
                <div class="mockup-menu-item"></div>
              </div>
              <div class="mockup-content">
                <div class="mockup-topbar"></div>
                <div class="mockup-body">
                  @if (lw.id === 'fixed') {
                    <div style="max-width:60%;margin:auto">
                      <div class="mockup-line"></div>
                      <div class="mockup-block"></div>
                    </div>
                  } @else {
                    <div class="mockup-line"></div>
                    <div class="mockup-block"></div>
                  }
                </div>
              </div>
            </div>
          </div>
          <div class="variant-info">
            <div class="flex items-center gap-2">
              <i [class]="lw.icon" class="text-accent text-lg"></i>
              <span class="font-bold text-sm">{{ lw.label | translate }}</span>
            </div>
            <p class="text-text-muted text-xs mt-1 mb-0">{{ lw.desc | translate }}</p>
          </div>
          @if (themeService.layoutWidth() === lw.id) {
            <div class="selected-badge">
              <i class="pi pi-check text-[0.7rem]"></i>
            </div>
          }
        </div>
      }
    </div>
  </section>

  <!-- Card Style -->
  <section>
    <h2 class="section-heading">{{ 'THEME.CARD_STYLE' | translate }}</h2>
    <div class="flex gap-3">
      @for (cs of cardStyles; track cs.id) {
        <div
          class="option-card flex-1 text-center"
          [class.option-selected]="themeService.cardStyle() === cs.id"
          (click)="selectCardStyle(cs.id)"
        >
          <div class="card-style-preview" [style.border-radius]="cs.radius">
            <div class="csp-header" [style.border-radius]="cs.radius + ' ' + cs.radius + ' 0 0'"></div>
            <div class="csp-body">
              <div class="csp-line"></div>
              <div class="csp-line short"></div>
            </div>
          </div>
          <span class="font-bold text-xs block mt-2">{{ cs.label | translate }}</span>
          <span class="text-text-muted text-[0.65rem]">{{ cs.radius }}</span>
          @if (themeService.cardStyle() === cs.id) {
            <div class="selected-badge sm">
              <i class="pi pi-check text-[0.6rem]"></i>
            </div>
          }
        </div>
      }
    </div>
  </section>
</div>

<!-- ═══ Table Density ═══ -->
<section class="mb-8">
  <h2 class="section-heading">{{ 'THEME.TABLE_DENSITY' | translate }}</h2>
  <div class="flex gap-3" style="max-width:600px">
    @for (td of tableDensities; track td.id) {
      <div
        class="option-card flex-1 text-center"
        [class.option-selected]="themeService.tableDensity() === td.id"
        (click)="selectTableDensity(td.id)"
      >
        <div class="td-preview">
          @for (row of [1,2,3]; track row) {
            <div class="td-row" [class.td-compact]="td.id === 'compact'" [class.td-spacious]="td.id === 'spacious'">
              <div class="td-cell"></div>
              <div class="td-cell long"></div>
              <div class="td-cell"></div>
            </div>
          }
        </div>
        <div class="flex items-center justify-center gap-2 mt-2">
          <i [class]="td.icon" class="text-accent text-sm"></i>
          <span class="font-bold text-xs">{{ td.label | translate }}</span>
        </div>
        @if (themeService.tableDensity() === td.id) {
          <div class="selected-badge sm">
            <i class="pi pi-check text-[0.6rem]"></i>
          </div>
        }
      </div>
    }
  </div>
</section>

<!-- ═══ Sidebar Layout ═══ -->
<section class="mb-8">
  <h2 class="section-heading">{{ 'THEME.SIDEBAR_LAYOUT' | translate }}</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    @for (variant of sidebarVariants; track variant.id) {
      <div
        class="variant-card"
        [class.variant-selected]="themeService.sidebarStyle() === variant.id"
        (click)="selectSidebar(variant.id)"
      >
        <div class="variant-preview">
          <div class="mockup">
            <div class="mockup-sidebar" [class.mockup-sidebar-full]="variant.id === 'full'"
                 [class.mockup-sidebar-mini]="variant.id === 'mini'">
              <div class="mockup-logo"></div>
              <div class="mockup-menu-item"></div>
              <div class="mockup-menu-item short"></div>
              <div class="mockup-menu-item"></div>
            </div>
            <div class="mockup-content">
              <div class="mockup-topbar"></div>
              <div class="mockup-body">
                <div class="mockup-line"></div>
                <div class="mockup-line short"></div>
                <div class="mockup-block"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="variant-info">
          <div class="flex items-center gap-2">
            <i [class]="variant.icon" class="text-accent text-lg"></i>
            <span class="font-bold text-sm">{{ variant.label | translate }}</span>
          </div>
          <p class="text-text-muted text-xs mt-1 mb-0">{{ variant.desc | translate }}</p>
        </div>
        @if (themeService.sidebarStyle() === variant.id) {
          <div class="selected-badge">
            <i class="pi pi-check text-[0.7rem]"></i>
          </div>
        }
      </div>
    }
  </div>
</section>

<!-- ═══ Color Scheme ═══ -->
<section class="mb-8">
  <h2 class="section-heading">{{ 'THEME.COLOR_SCHEME' | translate }}</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    @for (scheme of colorSchemes; track scheme.id) {
      <div
        class="scheme-card"
        [class.scheme-selected]="themeService.colorSchemeId() === scheme.id"
        (click)="selectScheme(scheme.id)"
      >
        <div class="scheme-swatches">
          <div class="swatch-brand" [style.background]="scheme.brand"></div>
          <div class="swatch-accent" [style.background]="scheme.accent"></div>
        </div>
        <div class="scheme-colors">
          <div class="color-dot" [style.background]="scheme.brandDark"></div>
          <div class="color-dot" [style.background]="scheme.brand"></div>
          <div class="color-dot" [style.background]="scheme.brandLight"></div>
          <div class="color-dot" [style.background]="scheme.accent"></div>
          <div class="color-dot" [style.background]="scheme.accentLight"></div>
        </div>
        <span class="text-xs font-bold mt-2 block">{{ scheme.label | translate }}</span>
        @if (themeService.colorSchemeId() === scheme.id) {
          <div class="selected-badge">
            <i class="pi pi-check text-[0.7rem]"></i>
          </div>
        }
      </div>
    }
  </div>
</section>

<!-- ═══ Dark Mode + Navigation Toggles ═══ -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
  <section>
    <h2 class="section-heading">{{ 'THEME.DARK_MODE' | translate }}</h2>
    <div class="dark-mode-card">
      <div class="flex items-center gap-4">
        <div class="dark-mode-icon">
          <i class="pi" [class.pi-moon]="darkMode" [class.pi-sun]="!darkMode"></i>
        </div>
        <div>
          <span class="font-bold text-sm block">{{ 'THEME.DARK_MODE' | translate }}</span>
          <span class="text-text-muted text-xs">{{ 'THEME.DARK_MODE_DESC' | translate }}</span>
        </div>
      </div>
      <p-toggleSwitch [(ngModel)]="darkMode" />
    </div>
  </section>

  <section>
    <h2 class="section-heading">{{ 'THEME.MODULE_NAV' | translate }}</h2>
    <div class="dark-mode-card">
      <div class="flex items-center gap-4">
        <div class="dark-mode-icon">
          <i class="pi pi-bars"></i>
        </div>
        <div>
          <span class="font-bold text-sm block">{{ 'THEME.MODULE_NAV' | translate }}</span>
          <span class="text-text-muted text-xs">{{ 'THEME.MODULE_NAV_DESC' | translate }}</span>
        </div>
      </div>
      <p-toggleSwitch [(ngModel)]="showModuleNav" />
    </div>
  </section>

  <section>
    <h2 class="section-heading">{{ 'THEME.MEGA_MENU' | translate }}</h2>
    <div class="dark-mode-card">
      <div class="flex items-center gap-4">
        <div class="dark-mode-icon">
          <i class="pi pi-objects-column"></i>
        </div>
        <div>
          <span class="font-bold text-sm block">{{ 'THEME.MEGA_MENU' | translate }}</span>
          <span class="text-text-muted text-xs">{{ 'THEME.MEGA_MENU_DESC' | translate }}</span>
        </div>
      </div>
      <p-toggleSwitch [(ngModel)]="showMegaMenu" />
    </div>
  </section>
</div>
