import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { PwaService } from '@/core/services/pwa.service';
import { ButtonDirective } from '../ui/button.directive';
import { ModalComponent } from '../ui/modal/modal.component';

@Component({
	selector: 'app-ios-install-modal',
	standalone: true,
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [ModalComponent, ButtonDirective],
	template: `
		<app-modal
			[isOpen]="pwaService.showIOSPrompt()"
			title="Instala esta app"
			(close)="dismiss()">
			<div class="space-y-6">
				<p class="text-gray-600">
					Instala esta app en tu dispositivo para entrar mas rapido y tener una mejor
					experiencia.
				</p>

				<div class="space-y-4">
					<div class="flex items-start gap-4">
						<div
							class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-white">
							1
						</div>
						<div>
							<p class="font-medium text-gray-900">Toca el boton Compartir</p>
							<p class="text-sm text-gray-500">
								Encuentra el icono de compartir en la parte inferior de Safari
							</p>
						</div>
					</div>

					<div class="flex items-start gap-4">
						<div
							class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-white">
							2
						</div>
						<div>
							<p class="font-medium text-gray-900">Desplazate y toca "Agregar a inicio"</p>
							<p class="text-sm text-gray-500">
								Busca la opcion para agregar la app a tu pantalla de inicio
							</p>
						</div>
					</div>

					<div class="flex items-start gap-4">
						<div
							class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-white">
							3
						</div>
						<div>
							<p class="font-medium text-gray-900">Toca "Agregar" en la esquina superior</p>
							<p class="text-sm text-gray-500">La app aparecera en tu pantalla de inicio</p>
						</div>
					</div>
				</div>

				<div class="flex gap-3 pt-2">
					<button appButton variant="default" class="flex-1" type="button" (click)="dismiss()">
						Entendido
					</button>
					<button
						appButton
						variant="outline"
						class="flex-1"
						type="button"
						(click)="dismissPermanently()">
						No mostrar de nuevo
					</button>
				</div>
			</div>
		</app-modal>
	`,
})
export class IosInstallModalComponent {
	protected readonly pwaService = inject(PwaService);

	protected dismiss(): void {
		this.pwaService.dismissIOSPrompt(false);
	}

	protected dismissPermanently(): void {
		this.pwaService.dismissIOSPrompt(true);
	}
}