import React from 'react';
import { useNavigate } from 'react-router-dom';

/**
 * EmailConfirmNotice — модалка-предупреждение «подтвердите email».
 *
 * Показывается, когда бэкенд вернул ошибку `email_not_confirmed` при
 * попытке заблокированного действия (комментарий, публикация игры, чат).
 *
 * Управляется через проп `open`. Кнопка «Подтвердить email» ведёт на
 * /settingssecur, где есть блок подтверждения.
 *
 * Props:
 *   open      — bool, показывать ли модалку
 *   onClose   — закрыть модалку
 *   action    — короткое описание заблокированного действия (для текста),
 *               напр. 'писать комментарии', 'публиковать игры'
 */

// Самописная inline-SVG иконка письма (правило проекта — без эмодзи).
const MailIcon = ({ size = 40 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"
         strokeLinejoin="round">
        <rect x="2" y="4" width="20" height="16" rx="3" />
        <path d="M3 6l9 7 9-7" />
    </svg>
);

const EmailConfirmNotice = ({ open, onClose, action = 'пользоваться этой функцией' }) => {
    const navigate = useNavigate();
    if (!open) return null;

    const goConfirm = () => {
        onClose?.();
        navigate('/settingssecur');
    };

    return (
        <div
            onClick={onClose}
            style={{
                position: 'fixed', inset: 0, zIndex: 10050,
                background: 'rgba(15, 23, 42, 0.55)',
                backdropFilter: 'blur(4px)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 20,
                fontFamily: '"Roboto Condensed", system-ui, sans-serif',
            }}
        >
            <div
                onClick={(e) => e.stopPropagation()}
                style={{
                    background: '#fff',
                    borderRadius: 18,
                    maxWidth: 420, width: '100%',
                    overflow: 'hidden',
                    boxShadow: '0 24px 60px rgba(15, 23, 42, 0.3)',
                }}
            >
                {/* Шапка */}
                <div style={{
                    background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
                    color: '#fff',
                    padding: '26px 24px 22px',
                    textAlign: 'center',
                }}>
                    <div style={{ marginBottom: 8 }}><MailIcon size={44} /></div>
                    <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.3 }}>
                        Подтвердите email
                    </div>
                </div>

                {/* Тело */}
                <div style={{ padding: 24 }}>
                    <p style={{
                        margin: 0, fontSize: 15, lineHeight: 1.55, color: '#334155',
                        textAlign: 'center',
                    }}>
                        Чтобы {action}, нужно подтвердить адрес электронной
                        почты. Это быстро — мы пришлём код на твой email.
                    </p>
                    <p style={{
                        margin: '12px 0 0', fontSize: 13, lineHeight: 1.5,
                        color: '#94a3b8', textAlign: 'center',
                    }}>
                        Курсы и игры остаются доступны без подтверждения —
                        ограничены только комментарии, чат и публикация игр.
                    </p>

                    <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
                        <button
                            onClick={onClose}
                            style={{
                                flex: 1, height: 44, borderRadius: 10,
                                border: '1px solid #cbd5e1', background: '#fff',
                                color: '#334155', fontSize: 14, fontWeight: 600,
                                cursor: 'pointer', fontFamily: 'inherit',
                            }}
                        >
                            Позже
                        </button>
                        <button
                            onClick={goConfirm}
                            style={{
                                flex: 2, height: 44, borderRadius: 10, border: 'none',
                                background: 'linear-gradient(135deg, #3357ff 0%, #1e2da5 100%)',
                                color: '#fff', fontSize: 14, fontWeight: 700,
                                cursor: 'pointer', fontFamily: 'inherit',
                            }}
                        >
                            Подтвердить email
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EmailConfirmNotice;
