import { NgClass } from '@angular/common'
import { Component, inject } from '@angular/core'
import { DialogRef } from '@ngneat/dialog'
import { merge } from 'es-toolkit/compat'

export interface ConfirmationModalConfig {
	title?: string
	message?: string
	icon?: {
		show?: boolean
		name?: string
		color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error'
	}
	actions?: {
		confirm?: {
			show?: boolean
			label?: string
			color?: 'primary' | 'secondary' | 'danger'
		}
		cancel?: {
			show?: boolean
			label?: string
		}
	}
}

const DEFAULT_CONFIG: ConfirmationModalConfig = {
	title: 'Confirm action',
	message: 'Are you sure you want to confirm this action?',
	icon: {
		show: true,
		name: 'exclamation-triangle',
		color: 'warn',
	},
	actions: {
		confirm: {
			show: true,
			label: 'Confirm',
			color: 'primary',
		},
		cancel: {
			show: true,
			label: 'Cancel',
		},
	},
}

@Component({
	selector: 'kadi-confirmation-modal',
	imports: [NgClass],
	template: `
		<div class="relative flex flex-col w-full h-full">
			<!-- Content -->
			<div class="flex flex-col sm:flex-row flex-auto items-center sm:items-start p-8 pb-6 sm:pb-8">
				<!-- Icon -->
				@if (data.icon && data.icon.show) {
					<div
						class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
						[ngClass]="{
							'text-blue-600 bg-blue-100': data.icon.color === 'primary',
							'text-orage-600 bg-orange-100': data.icon.color === 'accent',
							'text-yellow-600 bg-yellow-100': data.icon.color === 'warn',
							'text-gray-600 bg-gray-100 ': data.icon.color === 'basic',
							'text-blue-600 bg-blue-100 ': data.icon.color === 'info',
							'text-green-500 bg-green-100 ': data.icon.color === 'success',
							'text-amber-500 bg-amber-100 ': data.icon.color === 'warning',
							'text-red-600 bg-red-100 ': data.icon.color === 'error',
						}">
						<i class="far fa-{{ data.icon.name }}"></i>
					</div>
				}

				@if (data.title || data.message) {
					<div
						class="flex flex-col items-center sm:items-start mt-4 sm:mt-0 sm:pr-8 space-y-1 text-center sm:text-left">
						<!-- Title -->
						@if (data.title) {
							<div
								class="text-xl leading-6 font-medium"
								[innerHTML]="data.title"></div>
						}

						<!-- Message -->
						@if (data.message) {
							<div
								class="text-secondary"
								[innerHTML]="data.message"></div>
						}
					</div>
				}
			</div>

			<!-- Actions -->
			@if (data.actions) {
				<div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50/50">
					<!-- Cancel -->
					@if (data.actions.cancel && data.actions.cancel.show) {
						<button
							(click)="close()"
							class="btn">
							{{ data.actions.cancel.label }}
						</button>
					}

					<!-- Confirm -->
					@if (data.actions.confirm && data.actions.confirm.show) {
						<button
							(click)="close(true)"
							class="btn btn-{{ data.actions.confirm.color }}">
							{{ data.actions.confirm.label }}
						</button>
					}
				</div>
			}
		</div>
	`,
})
export class ConfirmationModalComponent {
	protected readonly _dialogRef: DialogRef<ConfirmationModalConfig> = inject(DialogRef)
	protected readonly data: ConfirmationModalConfig

	constructor() {
		this.data = merge({}, DEFAULT_CONFIG, this._dialogRef.data)
	}

	/**
	 * Close the modal with confirmation state
	 * @param confirmed Whether the confirmation was accepted
	 */
	close(confirmed = false): void {
		this._dialogRef.close(confirmed)
	}
}