import React, { useState } from 'react';
import { Group, Text, Button, ActionIcon } from '@mantine/core';
import { IconX } from '@tabler/icons-react';
import { translate } from '../../utils/i18n';
import { useDispatch } from 'react-redux';
import { sendReviewAction } from '../../reducers/dashboardSlice';

const ReviewWidget = () => {
    // wp_localize_script passes booleans as strings — handle both
    const showNotice = appLocalizer?.show_review_notice == true
        || appLocalizer?.show_review_notice === '1'
        || appLocalizer?.show_review_notice === 1;
    const [isVisible, setIsVisible] = useState(showNotice);

    if (!isVisible) {
        return null;
    }

    const dispatch = useDispatch();

    const handleAction = async (action) => {
        setIsVisible(false);

        try {
            await dispatch(sendReviewAction(action)).unwrap();
        } catch (error) {
            console.error('Failed to update review status', error);
        }

        if (action === 'love') {
            window.open('https://wordpress.org/support/plugin/lazytasks-project-task-management/reviews/#new-post', '_blank');
        }
    };

    return (
        <div
            style={{
                borderTop: '4px solid #ed7d31',
                padding: '12px',
                marginBottom: '20px',
                backgroundColor: '#fff',
                boxShadow: '0 1px 1px rgba(0, 0, 0, 0.04)',
                display: 'flex',
                alignItems: 'center',
                gap: '15px',
                position: 'relative'
            }}
        >
            {/* Left: Logo */}
            <div style={{ flexShrink: 0, width: '40px', height: '40px' }}>
                <img
                    src={`${appLocalizer?.homeUrl}/wp-content/plugins/lazytasks-project-task-management/admin/img/lazytask-logo.png`}
                    alt="LazyTasks Logo"
                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                />
            </div>

            {/* Middle: Content */}
            <div style={{ flex: 1 }}>
                <Text size="sm" color="#202020" style={{ margin: 0 }}>
                    <strong>{translate('Enjoying LazyTasks?')}</strong>{' '}
                    {translate('Share your feedback please, it helps us improve and inspire new ideas! 😊')}
                </Text>
            </div>

            {/* Right: Actions */}
            <Group spacing="xs" style={{ flexShrink: 0, paddingRight: '20px' }}>
                <Button
                    variant="filled"
                    style={{ backgroundColor: '#ed7d31', color: '#fff', height: '28px', padding: '0 12px', fontSize: '13px', fontWeight: 'normal' }}
                    onClick={() => handleAction('love')}
                >
                    {translate('Leave a Review')}
                </Button>
                <Button
                    variant="subtle"
                    style={{ color: '#0073aa', height: '28px', padding: '0 8px', fontSize: '13px', fontWeight: 'normal', backgroundColor: 'transparent', border: 'none' }}
                    onClick={() => handleAction('later')}
                >
                    {translate('Remind Me Later')}
                </Button>
                <Button
                    variant="subtle"
                    style={{ color: '#999', height: '28px', padding: '0 8px', fontSize: '13px', fontWeight: 'normal', backgroundColor: 'transparent', border: 'none' }}
                    onClick={() => handleAction('never')}
                >
                    {translate("Don't Ask Again")}
                </Button>
                <ActionIcon
                    variant="subtle"
                    color="gray"
                    onClick={() => handleAction('dismiss')}
                    style={{ position: 'absolute', top: '12px', right: '12px' }}
                >
                    <IconX size={16} />
                </ActionIcon>
            </Group>
        </div>
    );
};

export default ReviewWidget;