<?php
/**
 * Post-connection Getting Started cards.
 *
 * Rendered on the Overview / Settings page for users who are connected but
 * haven't dismissed the block yet. Dismissal is per-user (stored in user meta).
 *
 * @package TTSWP
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Don't render if the current user has already dismissed the block.
if ( '1' === get_user_meta( get_current_user_id(), 'mementor_tts_getting_started_dismissed', true ) ) {
    return;
}

$tts_gs_nonce = wp_create_nonce( 'mementor_tts_dismiss_getting_started' );
?>
<div class="tts-getting-started" id="tts-getting-started">
    <div class="tts-gs-header">
        <div>
            <h3 class="tts-gs-title"><?php esc_html_e( 'Getting started', 'text-to-speech-tts' ); ?></h3>
            <p class="tts-gs-subtitle"><?php esc_html_e( 'Three quick steps to your first audio.', 'text-to-speech-tts' ); ?></p>
        </div>
        <button type="button" class="tts-gs-dismiss" id="tts-gs-dismiss" aria-label="<?php esc_attr_e( 'Hide Getting Started', 'text-to-speech-tts' ); ?>">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
    </div>

    <div class="tts-gs-cards">
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=text-to-speech-tts-voices' ) ); ?>" class="tts-gs-card">
            <span class="tts-gs-num">1</span>
            <h4><?php esc_html_e( 'Choose language and voice', 'text-to-speech-tts' ); ?></h4>
            <p><?php esc_html_e( 'Pick from 70+ languages and hundreds of natural voices.', 'text-to-speech-tts' ); ?></p>
        </a>
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=text-to-speech-tts-player' ) ); ?>" class="tts-gs-card">
            <span class="tts-gs-num">2</span>
            <h4><?php esc_html_e( 'Customize the audio player', 'text-to-speech-tts' ); ?></h4>
            <p><?php esc_html_e( 'Match the player to your site colors and layout.', 'text-to-speech-tts' ); ?></p>
        </a>
        <a href="<?php echo esc_url( admin_url( 'edit.php' ) ); ?>" class="tts-gs-card">
            <span class="tts-gs-num">3</span>
            <h4><?php esc_html_e( 'Generate your first audio', 'text-to-speech-tts' ); ?></h4>
            <p><?php esc_html_e( 'In your posts list, click Generate in the TTS column next to any post.', 'text-to-speech-tts' ); ?></p>
        </a>
    </div>

    <p class="tts-gs-docs">
        <?php
        printf(
            // translators: %s is a link to the documentation site.
            esc_html__( 'More info: see the %s.', 'text-to-speech-tts' ),
            '<a href="https://ttswp.com/docs" target="_blank" rel="noopener">' . esc_html__( 'documentation', 'text-to-speech-tts' ) . '</a>'
        );
        ?>
    </p>
</div>

<style>
.tts-getting-started { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 24px; margin-bottom: 16px; }
.tts-gs-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 16px; }
.tts-gs-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--tts-text-primary, #0e0e0f); }
.tts-gs-subtitle { font-size: 13px; color: #6b7280; margin: 0; }
.tts-gs-dismiss { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.tts-gs-dismiss:hover { color: var(--tts-text-primary, #0e0e0f); background: #f3f4f6; }
.tts-gs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.tts-gs-card { display: block; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.tts-gs-card:hover { border-color: var(--tts-purple, #6B45D4); box-shadow: 0 2px 8px rgba(107, 69, 212, 0.08); transform: translateY(-1px); }
.tts-gs-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--tts-purple, #6B45D4); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.tts-gs-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--tts-text-primary, #0e0e0f); }
.tts-gs-card p { font-size: 12px; color: #6b7280; margin: 0; line-height: 1.5; }
.tts-gs-docs { font-size: 12px; color: #6b7280; margin: 0; }
.tts-gs-docs a { color: var(--tts-purple, #6B45D4); text-decoration: none; }
.tts-gs-docs a:hover { text-decoration: underline; }
@media (max-width: 782px) {
    .tts-gs-cards { grid-template-columns: 1fr; }
}
</style>

<script>
(function() {
    var block   = document.getElementById('tts-getting-started');
    var dismiss = document.getElementById('tts-gs-dismiss');
    if ( ! block || ! dismiss ) return;
    dismiss.addEventListener('click', function() {
        block.style.display = 'none';
        var body = new FormData();
        body.append('action', 'mementor_tts_dismiss_getting_started');
        body.append('nonce', <?php echo wp_json_encode( $tts_gs_nonce ); ?>);
        fetch(ajaxurl, { method: 'POST', body: body, credentials: 'same-origin' });
    });
})();
</script>
