import { Component, inject } from '@angular/core';
import { PwaService } from '@/core/services/pwa.service';
import { IosInstallModalComponent } from './ios-install-modal.component';

@Component({
	selector: 'app-pwa-install-prompt',
	standalone: true,
	imports: [IosInstallModalComponent],
	template: `
		@if (pwaService.promptVisible() && !pwaService.isIOS()) {
			<div
				class="fixed right-4 bottom-4 left-4 z-50 rounded-lg bg-primary p-4 text-white shadow-lg md:right-4 md:left-auto md:max-w-sm">
				<div class="mb-2 flex items-start justify-between gap-3">
					<div>
						<h3 class="font-semibold">Instala esta app</h3>
						<p class="mt-1 text-sm text-white/80">
							Accede mas rapido instalando la app en tu dispositivo
						</p>
					</div>
					<button
						type="button"
						(click)="pwaService.dismissPrompt()"
						class="rounded-lg p-1 hover:bg-white/10"
						aria-label="Cerrar">
						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M6 18L18 6M6 6l12 12" />
						</svg>
					</button>
				</div>
				<div class="flex gap-2">
					<button
						type="button"
						(click)="install()"
						class="flex-1 rounded-lg bg-white px-4 py-2 text-sm font-medium text-primary hover:bg-white/90">
						Instalar
					</button>
					<button
						type="button"
						(click)="pwaService.dismissPrompt()"
						class="flex-1 rounded-lg border border-white/50 px-4 py-2 text-sm font-medium hover:bg-white/10">
						Ahora no
					</button>
				</div>
			</div>
		}

		<app-ios-install-modal />
	`,
})
export class PwaInstallPromptComponent {
	protected readonly pwaService = inject(PwaService);

	protected install(): void {
		this.pwaService.showInstallPrompt();
	}
}