import { useEffect } from 'react';
import { CloseButton } from '@/components/ui/CloseButton';
import { sharedAssets } from '@/components/shared/assets';

export interface AppStoreBadge {
    image: string;
    alt: string;
    url: string;
}

export interface AppModalContent {
    title: string;
    description: string;
    qr: string;
    stores: AppStoreBadge[];
}

const DEFAULT_MODAL: AppModalContent = {
    title: 'Baixe o app Omni',
    description: 'Aponte a câmera do seu celular para o QR Code ou escolha a sua loja.',
    qr: sharedAssets.app.qrSuperapp,
    stores: [
        {
            image: sharedAssets.stores.baixarAppStore,
            alt: 'Baixar na App Store',
            url: '#',
        },
        {
            image: sharedAssets.stores.baixarGooglePlay,
            alt: 'Baixar na Google Play',
            url: '#',
        },
    ],
};

/*
 * Modal "Baixar aplicativo" — exibido ao clicar em "Baixar aplicativo" na seção
 * do app (Home e demais páginas que reusam essa seção). Contém o QR Code para
 * download e os badges das lojas (App Store / Google Play). Fecha no X, no
 * backdrop ou no Esc.
 */
export function AppDownloadModal({
    onClose,
    modal = DEFAULT_MODAL,
}: {
    onClose: () => void;
    modal?: AppModalContent;
}) {
    useEffect(() => {
        const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
        document.addEventListener('keydown', onKey);
        const prev = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        return () => {
            document.removeEventListener('keydown', onKey);
            document.body.style.overflow = prev;
        };
    }, [onClose]);

    return (
        <div
            className="fixed inset-0 z-[100] flex items-center justify-center p-4"
            role="dialog"
            aria-modal="true"
            aria-label="Baixar aplicativo Omni"
        >
            <div className="absolute inset-0 bg-gray-800/50" onClick={onClose} aria-hidden />

            <div className="relative z-10 w-full max-w-[420px] rounded-2xl bg-white p-8 shadow-subtle">
                <div className="flex items-start justify-between gap-6">
                    <div>
                        <h2 className="text-heading-sm font-bold text-gray-800">{modal.title}</h2>
                        <p className="mt-2 text-body text-gray-600">{modal.description}</p>
                    </div>
                    <CloseButton onClick={onClose} />
                </div>

                {modal.qr !== '' && (
                    <div className="mt-6 flex justify-center">
                        <div className="rounded-xl border border-gray-200 p-4">
                            <img src={modal.qr} alt="QR Code para baixar o app Omni" className="size-44" />
                        </div>
                    </div>
                )}

                <div className="mt-6 flex flex-col items-center justify-center gap-3 web:flex-row">
                    {modal.stores.map((store) => (
                        <StoreBadge key={store.alt} store={store} />
                    ))}
                </div>
            </div>
        </div>
    );
}

function StoreBadge({ store }: { store: AppStoreBadge }) {
    const image = <img src={store.image} alt={store.alt} className="h-12 w-auto" />;

    if (store.url === '') {
        return image;
    }

    return (
        <a href={store.url} aria-label={store.alt} className="transition-opacity hover:opacity-90">
            {image}
        </a>
    );
}