import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Modal } from '@mantine/core';
import { __ } from '@wordpress/i18n';
import {
    fetchPromoAnnouncementStatus,
    dismissPromoAnnouncement,
    hideLocally,
} from '../reducers/promoAnnouncementSlice';

const FREE_LICENSE_URL = 'https://lazycoders.co/checkout/?fct_cart_hash=561c3728f9d90dedca593efba0e3382b';
const WP_INSTALL_URL = 'https://pub-df31c5b8360c4944bed15058d93cf4cc.r2.dev/addons/lazytasks-premium-1.0.71.zip';

// Scoped CSS — verbatim port of mobile-app-modal-v3.html, all selectors prefixed
// with .lzt-promo-modal so nothing leaks into the rest of the admin.
const STYLES = `
.lzt-promo-modal {
    --orange: #ED7D31;
    --orange-hover: #D96E25;
    --teal: #39758D;
    --teal-hover: #2A5A6E;
    --teal-lt: rgba(57, 117, 141, 0.10);
    --teal-lt-border: rgba(57, 117, 141, 0.22);
    --ink-900: #1A202C;
    --ink-700: #334155;
    --ink-500: #64748B;
    --ink-100: #EEF1F4;
    --radius-xs: 6px;
    --radius-sm: 999px;
    --radius-md: 12px;
    color: var(--ink-900);
}
.lzt-promo-modal * { box-sizing: border-box; }
.lzt-promo-modal__head { text-align: center; padding: 6px 8px 0; }
.lzt-promo-modal__headline {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--ink-900);
    margin: 0 0 8px;
    line-height: 1.25;
}
.lzt-promo-modal__headline .emoji { margin-right: 6px; }
.lzt-promo-modal__subhead {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--ink-900);
    margin: 0 0 6px;
    line-height: 1.35;
}
.lzt-promo-modal__tagline {
    font-size: 13px;
    font-style: italic;
    color: var(--ink-500);
    margin: 0;
    line-height: 1.4;
}
.lzt-promo-modal__section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-500);
    margin: 24px 0 12px;
    letter-spacing: -0.05px;
}
.lzt-promo-modal__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lzt-promo-modal__bullets li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-700);
    padding: 4px 0;
}
.lzt-promo-modal__bullets li .check {
    color: var(--teal);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
}
.lzt-promo-modal__bullets li.is-emphasized {
    position: relative;
    padding: 8px 10px 8px 14px;
    margin-left: -10px;
    border-left: 3px solid var(--orange);
    background: rgba(237, 125, 49, 0.04);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    color: var(--ink-900);
}
.lzt-promo-modal__closing {
    text-align: center;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-700);
    margin: 24px 0;
    line-height: 1.4;
}
.lzt-promo-modal__info-box {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: flex-start;
    background: var(--teal-lt);
    border: 1px solid var(--teal-lt-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 20px 0;
    color: var(--ink-700);
    font-size: 13px;
    line-height: 1.5;
}
.lzt-promo-modal__info-box-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    flex-shrink: 0;
    margin-top: 1px;
}
.lzt-promo-modal__cta-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.lzt-promo-modal__cta-row.is-single { justify-content: center; }
.lzt-promo-modal__btn {
    appearance: none;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 140ms ease, transform 80ms ease;
    flex: 1;
    line-height: 1.2;
    color: #fff;
}
.lzt-promo-modal__btn:active { transform: translateY(1px); }
.lzt-promo-modal__btn--orange { background: var(--orange); }
.lzt-promo-modal__btn--orange:hover { background: var(--orange-hover); }
.lzt-promo-modal__btn--teal { background: var(--teal); }
.lzt-promo-modal__btn--teal:hover { background: var(--teal-hover); }
.lzt-promo-modal__btn--single { flex: 0 0 auto; min-width: 160px; }
@media (max-width: 480px) {
    .lzt-promo-modal__cta-row { flex-direction: column; }
    .lzt-promo-modal__btn { width: 100%; }
}
`;

const PromoAnnouncementModal = () => {
    const dispatch = useDispatch();
    const { shouldShow, fetched } = useSelector((s) => s.promoAnnouncement);
    const { loggedInUser } = useSelector((s) => s.auth.session);
    const isWpAdmin = !!loggedInUser?.roles?.includes('administrator');

    useEffect(() => {
        if (!fetched) {
            dispatch(fetchPromoAnnouncementStatus());
        }
    }, [fetched, dispatch]);

    const handleClose = () => {
        dispatch(hideLocally());
        dispatch(dismissPromoAnnouncement());
    };

    const handleInstall = () => {
        window.open(WP_INSTALL_URL, '_blank', 'noopener,noreferrer');
        handleClose();
    };

    const handleGetLicense = () => {
        window.open(FREE_LICENSE_URL, '_blank', 'noopener,noreferrer');
        handleClose();
    };

    if (!shouldShow) {
        return null;
    }

    return (
        <Modal
            opened={true}
            onClose={handleClose}
            centered
            size={520}
            radius={16}
            withCloseButton={false}
            padding={0}
            styles={{ body: { padding: '28px 32px 24px' } }}
        >
            <style>{STYLES}</style>
            <div className="lzt-promo-modal">
                <div className="lzt-promo-modal__head">
                    <h2 className="lzt-promo-modal__headline">
                        <span className="emoji">📱</span>
                        {isWpAdmin
                            ? __('LazyTasks Mobile App', 'lazytasks-project-task-management')
                            : __('Want LazyTasks on your phone?', 'lazytasks-project-task-management')}
                    </h2>
                    <p className="lzt-promo-modal__subhead">
                        {isWpAdmin
                            ? __('Free for a limited time — check it out!', 'lazytasks-project-task-management')
                            : __('Free for a limited time — ask your admin!', 'lazytasks-project-task-management')}
                    </p>
                    <p className="lzt-promo-modal__tagline">
                        {__('Get things done on the go.', 'lazytasks-project-task-management')}
                    </p>
                </div>

                <p className="lzt-promo-modal__section-label">
                    {isWpAdmin
                        ? __("Here's what you get:", 'lazytasks-project-task-management')
                        : __("Here's what you'd get:", 'lazytasks-project-task-management')}
                </p>

                <ul className="lzt-promo-modal__bullets">
                    <li>
                        <span className="check">✓</span>
                        <span>{__('Your full project board, right in your pocket', 'lazytasks-project-task-management')}</span>
                    </li>
                    <li className="is-emphasized">
                        <span className="check">✓</span>
                        <span>{__('Built-in push notifications — never miss a mention, comment, or update', 'lazytasks-project-task-management')}</span>
                    </li>
                    <li>
                        <span className="check">✓</span>
                        <span>{__('Reply and update task status in seconds, no laptop needed', 'lazytasks-project-task-management')}</span>
                    </li>
                    <li>
                        <span className="check">✓</span>
                        <span>{__('Approve, comment, or move work forward in a single tap', 'lazytasks-project-task-management')}</span>
                    </li>
                    <li>
                        <span className="check">✓</span>
                        <span>{__('Stay on top of every project, between meetings or on the move', 'lazytasks-project-task-management')}</span>
                    </li>
                </ul>

                <p className="lzt-promo-modal__closing">
                    {__("Work doesn't wait at your desk.", 'lazytasks-project-task-management')}
                </p>

                {!isWpAdmin && (
                    <div className="lzt-promo-modal__info-box">
                        <span className="lzt-promo-modal__info-box-icon" aria-hidden="true">i</span>
                        <span>
                            {__('The mobile app runs on LazyTasks Premium — ask your site admin to install it for the team before the free window closes.', 'lazytasks-project-task-management')}
                        </span>
                    </div>
                )}

                {isWpAdmin ? (
                    <div className="lzt-promo-modal__cta-row">
                        <button type="button" className="lzt-promo-modal__btn lzt-promo-modal__btn--orange" onClick={handleInstall}>
                            {__('Install Plugin', 'lazytasks-project-task-management')}
                        </button>
                        <button type="button" className="lzt-promo-modal__btn lzt-promo-modal__btn--teal" onClick={handleGetLicense}>
                            {__('Get Free License', 'lazytasks-project-task-management')}
                        </button>
                    </div>
                ) : (
                    <div className="lzt-promo-modal__cta-row is-single">
                        <button
                            type="button"
                            className="lzt-promo-modal__btn lzt-promo-modal__btn--teal lzt-promo-modal__btn--single"
                            onClick={handleClose}
                        >
                            {__('Got it', 'lazytasks-project-task-management')}
                        </button>
                    </div>
                )}
            </div>
        </Modal>
    );
};

export default PromoAnnouncementModal;