'use client';

import { useTranslations, useLocale } from 'next-intl';
import type { ExternalPuzzle } from '@/lib/externalPuzzles';

interface ExtraPuzzlesPopoverProps {
    puzzle: ExternalPuzzle;
    onClose: () => void;
}

export default function ExtraPuzzlesPopover({ puzzle, onClose }: ExtraPuzzlesPopoverProps) {
    const t = useTranslations('ExtraPuzzles');
    const locale = useLocale();

    const name = locale === 'de' ? puzzle.nameDe : puzzle.nameEn;

    const handleClick = () => {
        if (typeof window !== 'undefined' && window.plausible) {
            window.plausible('extra_puzzles_click', {
                props: {
                    partner: puzzle.id,
                    url: puzzle.url,
                },
            });
        }
        onClose();
    };

    return (
        <div
            style={{
                position: 'fixed',
                bottom: '1.5rem',
                right: '1.5rem',
                zIndex: 1100,
                maxWidth: '320px',
                boxShadow: '0 10px 30px rgba(0,0,0,0.25)',
                borderRadius: '0.75rem',
                background: 'white',
                padding: '1rem 1.25rem',
                display: 'flex',
                flexDirection: 'column',
                gap: '0.75rem',
            }}
        >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }}>
                <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 700 }}>
                    {t('title')}
                </h3>
                <button
                    onClick={onClose}
                    aria-label={t('close')}
                    style={{
                        border: 'none',
                        background: 'transparent',
                        cursor: 'pointer',
                        fontSize: '1.1rem',
                        lineHeight: 1,
                        color: '#6b7280',
                    }}
                >
                    ×
                </button>
            </div>

            <p style={{ margin: 0, fontSize: '0.9rem', color: '#4b5563' }}>
                {t('message', { name })}
            </p>

            <a
                href={puzzle.url}
                target="_blank"
                rel="noopener noreferrer"
                onClick={handleClick}
                style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: '0.4rem',
                    marginTop: '0.25rem',
                    padding: '0.5rem 0.75rem',
                    borderRadius: '999px',
                    border: 'none',
                    background: 'linear-gradient(135deg, #4f46e5, #ec4899)',
                    color: 'white',
                    fontSize: '0.9rem',
                    fontWeight: 600,
                    textDecoration: 'none',
                    cursor: 'pointer',
                }}
            >
                {t('cta', { name })}
            </a>
        </div>
    );
}