<p-confirmdialog />
<app-crud-dialog
    [title]="'sites.exclusions.addAction' | transloco"
    [visible]="isAddDialogVisible()"
    (visibleChange)="onAddDialogVisibleChange($event)"
    [submitLabel]="'sites.exclusions.addAction' | transloco"
    [cancelLabel]="'common.actions.cancel' | transloco"
    [saving]="isSaving()"
    (submitted)="addRule()"
>
    <form [formGroup]="form" class="site-exclusions__form" (ngSubmit)="addRule()">
        <div class="site-settings-field-grid site-exclusions__field-grid">
            <div class="site-settings-field">
                <label for="site-exclusion-type">{{ "sites.exclusions.typeLabel" | transloco }}</label>
                <p-select inputId="site-exclusion-type" [options]="ruleTypeOptions()" formControlName="type" optionLabel="label" optionValue="value" appendTo="body" class="w-full" (onChange)="onRuleTypeChange()" />
            </div>

            @if (form.controls.type.value === "country") {
            <div class="site-settings-field">
                <label for="site-exclusion-country">{{ "sites.exclusions.countryLabel" | transloco }}</label>
                <p-select
                    inputId="site-exclusion-country"
                    [options]="countryOptions()"
                    formControlName="countryCode"
                    optionLabel="label"
                    optionValue="code"
                    appendTo="body"
                    [filter]="true"
                    filterBy="searchText"
                    [placeholder]="'sites.exclusions.countryPlaceholder' | transloco"
                    class="w-full"
                >
                    <ng-template #selectedItem let-selectedOption>
                        @if (selectedOption) {
                        <div class="flex items-center gap-2">
                            <img [ngSrc]="selectedOption.flagUrl" class="size-4 shrink-0 rounded-full" width="16" height="16" alt="" />
                            <span>{{ selectedOption.label }} ({{ selectedOption.code }})</span>
                        </div>
                        }
                    </ng-template>
                    <ng-template #item let-option>
                        <div class="flex items-center gap-3">
                            <img [ngSrc]="option.flagUrl" class="size-4 shrink-0 rounded-full" width="16" height="16" alt="" />
                            <div class="flex flex-col">
                                <span>{{ option.label }}</span>
                                <span class="text-xs text-[var(--p-text-muted-color)]">{{ option.code }}</span>
                            </div>
                        </div>
                    </ng-template>
                </p-select>
                @if (form.controls.countryCode.touched && form.controls.countryCode.invalid) {
                <small class="site-exclusions__error-text">{{ "sites.exclusions.errors.invalidCountry" | transloco }}</small>
                }
            </div>
            } @else {
            <div class="site-settings-field">
                <label for="site-exclusion-cidr">{{ "sites.exclusions.cidrLabel" | transloco }}</label>
                <input id="site-exclusion-cidr" pInputText formControlName="cidr" [placeholder]="'sites.exclusions.cidrPlaceholder' | transloco" />
                @if (form.controls.cidr.touched && form.controls.cidr.invalid) {
                <small class="site-exclusions__error-text">{{ "sites.exclusions.errors.invalidCidr" | transloco }}</small>
                }
            </div>
            }

            <div class="site-settings-field">
                <label for="site-exclusion-description">{{ "sites.exclusions.descriptionLabel" | transloco }}</label>
                <input id="site-exclusion-description" pInputText formControlName="description" [placeholder]="'sites.exclusions.descriptionPlaceholder' | transloco" />
                @if (form.controls.description.touched && form.controls.description.invalid) {
                <small class="site-exclusions__error-text">{{ "sites.exclusions.errors.descriptionTooLong" | transloco }}</small>
                }
            </div>
        </div>

        @if (createError(); as errorKey) {
        <div class="hk-feedback-message hk-feedback-message--error">{{ errorKey | transloco }}</div>
        }
    </form>
</app-crud-dialog>

<div class="site-settings-stack site-exclusions">
    @if (error(); as errorKey) {
    <div class="site-settings-alert site-settings-alert--error">{{ errorKey | transloco }}</div>
    }

    <section class="site-settings-card">
        <header class="site-settings-card__header">
            <div class="site-settings-card__title-row">
                <span class="site-settings-card__icon"><i class="pi pi-map-marker" aria-hidden="true"></i></span>
                <div>
                    <h3>{{ "sites.exclusions.suggestionsTitle" | transloco }}</h3>
                    <p>{{ "sites.exclusions.suggestionsHint" | transloco }}</p>
                </div>
            </div>
            <app-copy-control [value]="currentIPCIDR()" [text]="true" [disabled]="isCurrentIPLoading() || !currentIPCIDR()" />
        </header>
        <div class="site-settings-card__body">
            <code class="site-exclusions__code">
                @if (isCurrentIPLoading()) { {{ "sites.exclusions.currentIpLoading" | transloco }} } @else if (currentIPCIDR(); as currentIPCIDR) { {{ currentIPCIDR }} } @else { {{ "sites.exclusions.currentIpUnavailable" | transloco }} }
            </code>
        </div>
    </section>

    <section class="site-settings-card">
        <header class="site-settings-card__header">
            <div class="site-settings-card__title-row">
                <span class="site-settings-card__icon"><i class="pi pi-list-check" aria-hidden="true"></i></span>
                <div>
                    <h3>{{ "sites.settings.tabs.filtering" | transloco }}</h3>
                    <p>{{ "sites.exclusions.description" | transloco }}</p>
                </div>
            </div>
            <p-button styleClass="site-settings-action-btn" [label]="'sites.exclusions.addAction' | transloco" icon="pi pi-plus" [type]="'button'" (onClick)="openAddDialog()" />
        </header>
        <div class="site-settings-card__body">
            @if (actionStatus(); as status) {
            <p-message [severity]="status.severity" styleClass="w-full" [text]="actionStatusMessage()" />
            } @if (isLoading()) {
            <div class="site-settings-empty">
                <i class="pi pi-spin pi-spinner" aria-hidden="true"></i>
                <span>{{ "sites.exclusions.loading" | transloco }}</span>
            </div>
            } @else if (exclusions().length === 0) {
            <div class="site-settings-empty">
                <i class="pi pi-filter-slash" aria-hidden="true"></i>
                <span>{{ "sites.exclusions.empty" | transloco }}</span>
                <p-button [label]="'sites.exclusions.addAction' | transloco" icon="pi pi-plus" [outlined]="true" [type]="'button'" (onClick)="openAddDialog()" />
            </div>
            } @else {
            <div class="site-settings-table-shell">
                <div class="site-settings-table-toolbar">
                    <span class="site-settings-chip">{{ exclusions().length }}</span>
                    <span class="p-input-icon-left hk-crud-search">
                        <i class="pi pi-search"></i>
                        <input pInputText #siteExclusionsSearch [placeholder]="'common.searchPlaceholder' | transloco" (input)="siteExclusionsTable.filterGlobal($any($event.target).value, 'contains')" class="w-full" />
                    </span>
                </div>
                <div class="hk-crud-table-wrap">
                    <p-table
                        #siteExclusionsTable
                        [value]="exclusionRows()"
                        [globalFilterFields]="['type_label', 'value_label', 'country_name', 'search_value', 'description', 'created_at']"
                        [sortField]="'created_at'"
                        [sortOrder]="-1"
                        [paginator]="true"
                        [rows]="10"
                        [rowsPerPageOptions]="[10, 25, 50]"
                        [rowHover]="true"
                        responsiveLayout="scroll"
                        styleClass="hk-crud-table p-datatable-sm"
                        [tableStyle]="{ 'min-width': '680px' }"
                    >
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="type_label">
                                    {{ "sites.exclusions.columns.type" | transloco }}
                                    <p-sortIcon field="type_label" />
                                </th>
                                <th pSortableColumn="value_label">
                                    {{ "sites.exclusions.columns.value" | transloco }}
                                    <p-sortIcon field="value_label" />
                                </th>
                                <th pSortableColumn="description">
                                    {{ "sites.exclusions.columns.description" | transloco }}
                                    <p-sortIcon field="description" />
                                </th>
                                <th pSortableColumn="created_at">
                                    {{ "sites.exclusions.columns.created" | transloco }}
                                    <p-sortIcon field="created_at" />
                                </th>
                                <th>{{ "common.columns.actions" | transloco }}</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rule>
                            <tr>
                                <td>{{ rule.type_label }}</td>
                                <td>
                                    @if (rule.type === "country" && rule.country_code) {
                                    <span class="inline-flex items-center gap-2">
                                        <img [ngSrc]="countryFlagUrl(rule.country_code)" class="size-4 shrink-0 rounded-full" width="16" height="16" alt="" />
                                        <span>{{ rule.value_label }}</span>
                                    </span>
                                    } @else {
                                    <code>{{ rule.cidr }}</code>
                                    }
                                </td>
                                <td>{{ rule.description || "-" }}</td>
                                <td><app-relative-date-time [value]="rule.created_at" /></td>
                                <td>
                                    <app-table-row-actions [items]="ruleActions(rule)" [loading]="deletingRuleID() === rule.id" />
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr>
                                <td colspan="5" class="text-center text-muted-color py-4">{{ "sites.exclusions.empty" | transloco }}</td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
            }
        </div>
    </section>
</div>
