<p-toast />

<div class="company-page">
  <app-page-header title="COMPANY.TITLE" subtitle="COMPANY.SUBTITLE" (refresh)="retry()">
    @if (!editMode()) {
      <p-button
        [label]="'COMMON.EDIT' | translate"
        icon="pi pi-pencil"
        (onClick)="enableEdit()"
        [disabled]="!!(loading$ | async)"
      />
    } @else {
      <p-button
        [label]="'COMMON.CANCEL' | translate"
        icon="pi pi-times"
        severity="secondary"
        (onClick)="cancelEdit()"
        [disabled]="!!(saving$ | async)"
      />
      <p-button
        [label]="'COMMON.SAVE' | translate"
        icon="pi pi-check"
        (onClick)="onSave()"
        [loading]="!!(saving$ | async)"
      />
    }
  </app-page-header>

  @if (loading$ | async) {
    <div class="loading-state">
      <p-progressSpinner strokeWidth="3" />
      <p>{{ 'COMMON.LOADING' | translate }}</p>
    </div>
  } @else if (error$ | async; as error) {
    <div class="error-state">
      <i class="pi pi-exclamation-triangle"></i>
      <p>{{ error }}</p>
      <p-button [label]="'COMMON.RETRY' | translate" icon="pi pi-refresh" (onClick)="retry()" severity="secondary" />
    </div>
  } @else {
    <form [formGroup]="companyForm" class="company-layout">
      <!-- Left column -->
      <div class="layout-main">
        <!-- Logo -->
        <div class="form-section">
          <div class="section-title">
            <i class="pi pi-image"></i>
            <span>{{ 'COMPANY.LOGO' | translate }}</span>
          </div>
          <div class="logo-section">
            @if (companyLogo()) {
              <div class="logo-preview">
                <img [src]="companyLogo()" alt="Company Logo" />
              </div>
            }
            @if (editMode()) {
              <div class="logo-actions">
                <label class="upload-label">
                  <i class="pi pi-upload"></i>
                  {{ 'COMPANY.UPLOAD_LOGO' | translate }}
                  <input type="file" accept="image/*" (change)="onLogoSelect($event)" hidden />
                </label>
                @if (companyLogo()) {
                  <p-button
                    [label]="'COMPANY.DELETE_LOGO' | translate"
                    icon="pi pi-trash"
                    severity="danger"
                    [outlined]="true"
                    size="small"
                    (onClick)="removeLogo()"
                  />
                }
                @if (logoUploading()) {
                  <p-progressSpinner strokeWidth="4" [style]="{ width: '24px', height: '24px' }" />
                }
              </div>
            }
          </div>
        </div>

        <!-- Identity -->
        <div class="form-section">
          <div class="section-title">
            <i class="pi pi-building"></i>
            <span>{{ 'COMPANY.BASIC_INFO' | translate }}</span>
          </div>
          <div class="grid-3">
            <div class="form-field span-3">
              <label>{{ 'COMPANY.NAME_AR' | translate }} *</label>
              <input pInputText formControlName="name_ar" [readonly]="!editMode()" />
            </div>
            <div class="form-field span-3">
              <label>{{ 'COMPANY.NAME_EN' | translate }} *</label>
              <input pInputText formControlName="name_en" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.SHORT_NAME' | translate }}</label>
              <input pInputText formControlName="short_name" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.PREFIX' | translate }}</label>
              <input pInputText formControlName="prefix" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.EMAIL' | translate }} *</label>
              <input pInputText formControlName="email" type="email" [readonly]="!editMode()" />
            </div>
          </div>
        </div>

        <!-- Contact & Address -->
        <div class="form-section">
          <div class="section-title">
            <i class="pi pi-map-marker"></i>
            <span>{{ 'COMPANY.CONTACT_INFO' | translate }} & {{ 'COMPANY.ADDRESS_INFO' | translate }}</span>
          </div>
          <div class="grid-3">
            <div class="form-field">
              <label>{{ 'COMPANY.PHONE' | translate }}</label>
              <input pInputText formControlName="phone" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.FAX' | translate }}</label>
              <input pInputText formControlName="fax" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.WEBSITE' | translate }}</label>
              <input pInputText formControlName="website" [readonly]="!editMode()" />
            </div>
            <div class="form-field span-3">
              <label>{{ 'COMPANY.ADDRESS' | translate }}</label>
              <textarea pTextarea formControlName="address" [readonly]="!editMode()" rows="2"></textarea>
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.CITY' | translate }}</label>
              <input pInputText formControlName="city" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.COUNTRY_CODE' | translate }}</label>
              <input pInputText formControlName="country_code" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.POSTAL_CODE' | translate }}</label>
              <input pInputText formControlName="postal_code" [readonly]="!editMode()" />
            </div>
          </div>
        </div>
      </div>

      <!-- Right column -->
      <div class="layout-side">
        <!-- Legal -->
        <div class="form-section">
          <div class="section-title">
            <i class="pi pi-file"></i>
            <span>{{ 'COMPANY.LEGAL_INFO' | translate }}</span>
          </div>
          <div class="grid-1">
            <div class="form-field">
              <label>{{ 'COMPANY.TAX_NUMBER' | translate }}</label>
              <input pInputText formControlName="tax_number" [readonly]="!editMode()" />
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.COMMERCIAL_REGISTER' | translate }}</label>
              <input pInputText formControlName="commercial_register" [readonly]="!editMode()" />
            </div>
          </div>
        </div>

        <!-- System Settings -->
        <div class="form-section">
          <div class="section-title">
            <i class="pi pi-cog"></i>
            <span>{{ 'COMPANY.SYSTEM_SETTINGS' | translate }}</span>
          </div>
          <div class="grid-1">
            <div class="form-field">
              <label>{{ 'COMPANY.CURRENCY' | translate }}</label>
              @if (editMode()) {
                <p-select formControlName="currency" [options]="(currencies$ | async) || []" optionLabel="code" optionValue="code"
                  [filter]="true" filterBy="code,name,name_ar" [placeholder]="'COMMON.SELECT' | translate" appendTo="body">
                  <ng-template #item let-c><span>{{ c.code }} - {{ c.name_ar || c.name }}</span></ng-template>
                  <ng-template #selectedItem let-c><span>{{ c.code }} - {{ c.name_ar || c.name }}</span></ng-template>
                </p-select>
              } @else {
                <input pInputText [value]="companyForm.get('currency')?.value" readonly />
              }
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.LOCALE' | translate }}</label>
              @if (editMode()) {
                <p-select formControlName="locale" [options]="localeOptions" optionLabel="label" optionValue="value" />
              } @else {
                <input pInputText [value]="companyForm.get('locale')?.value === 'ar' ? 'العربية' : 'English'" readonly />
              }
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.TIMEZONE' | translate }}</label>
              @if (editMode()) {
                <p-select formControlName="timezone" [options]="timezoneOptions" optionLabel="label" optionValue="value" />
              } @else {
                <input pInputText [value]="companyForm.get('timezone')?.value" readonly />
              }
            </div>
            <div class="form-field">
              <label>{{ 'COMPANY.FISCAL_YEAR_START' | translate }}</label>
              @if (editMode()) {
                <p-select formControlName="fiscal_year_start_month" [options]="fiscalMonthOptions" optionLabel="label" optionValue="value" />
              } @else {
                <input pInputText [value]="fiscalMonthOptions[(companyForm.get('fiscal_year_start_month')?.value || 1) - 1]?.label" readonly />
              }
            </div>
          </div>
        </div>
      </div>
    </form>
  }
</div>
