<?php
/**
 * Settings: Freelance Studio Tab
 * Announcements, support CTA, and feature request form.
 *
 * @package Freelance_Studio
 */

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

$plugin_version = JEEB_FS_VERSION;
$support_url    = 'https://freelancestud.io/support';
$docs_url       = 'https://freelancestud.io/docs';
$changelog_url  = 'https://freelancestud.io/changelog/';
?>

<div class="fs-about-page">

    <!-- ── Hero banner ─────────────────────────────────────────── -->
    <div class="fs-about-hero">
        <div class="fs-about-hero-inner">
            <div class="fs-about-hero-logo">
                <img src="<?php echo esc_url( JEEB_FS_PLUGIN_URL . 'admin/img/about-logo.png' ); ?>"
                     alt="Freelance Studio" width="80" height="80">
            </div>
            <div class="fs-about-hero-text">
                <h2><?php esc_html_e( 'Freelance Studio', 'freelance-studio' ); ?></h2>
                <p class="fs-about-version">
                    <?php /* translators: 1. date/time */ ?>
                    <?php echo esc_html( sprintf( __(  'Version %s &mdash; built for freelancers, by freelancers.', 'freelance-studio' ), esc_html( $plugin_version ) ) ); ?>
                </p>
            </div>
        </div>
    </div>

    <!-- ── Quick-links row ──────────────────────────────────────── -->
    <div class="fs-about-links-row">
        <a href="<?php echo esc_url( $support_url ); ?>" target="_blank" rel="noopener" class="fs-about-link-card fs-about-link-card--primary">
            <span class="dashicons dashicons-sos"></span>
            <span class="fs-about-link-card-label"><?php esc_html_e( 'Get Support', 'freelance-studio' ); ?></span>
            <span class="fs-about-link-card-sub"><?php esc_html_e( 'Submit a ticket or browse answers', 'freelance-studio' ); ?></span>
        </a>
        <a href="<?php echo esc_url( $docs_url ); ?>" target="_blank" rel="noopener" class="fs-about-link-card">
            <span class="dashicons dashicons-book-alt"></span>
            <span class="fs-about-link-card-label"><?php esc_html_e( 'Documentation', 'freelance-studio' ); ?></span>
            <span class="fs-about-link-card-sub"><?php esc_html_e( 'Guides, how-tos, and references', 'freelance-studio' ); ?></span>
        </a>
        <a href="<?php echo esc_url( $changelog_url ); ?>" target="_blank" rel="noopener" class="fs-about-link-card">
            <span class="dashicons dashicons-update-alt"></span>
            <span class="fs-about-link-card-label"><?php esc_html_e( "What's New", 'freelance-studio' ); ?></span>
            <span class="fs-about-link-card-sub"><?php esc_html_e( 'Full changelog and release notes', 'freelance-studio' ); ?></span>
        </a>
    </div>

    <!-- ── Announcements ────────────────────────────────────────── -->
    <?php
    // Announcements are stored as a JSON option so you can update them without a plugin update.
    // Format: array of [ 'type' => 'info|new|tip', 'title' => '...', 'body' => '...' ]
    $announcements = get_option( 'fs_announcements', array() );

    // Fall back to a hardcoded default so there's always something to show.
    if ( empty( $announcements ) ) {
        $announcements = array(
            array(
                'type'  => 'new',
                'title' => __( "Built-in Email Delivery", 'freelance-studio' ),
                'body'  => __( "Stop worrying about emails landing in spam. Freelance Studio now has built-in integration with <strong>Brevo</strong> and <strong>Postmark</strong> — set up in minutes with our step-by-step wizard. Go to <strong>Settings → Email Delivery</strong> to get started. Brevo's free plan includes 300 emails/day, which is plenty for most freelancers.", 'freelance-studio' ),
            ),
            array(
                'type'  => 'tip',
                'title' => __( 'Tip: Already using an SMTP plugin?', 'freelance-studio' ),
                'body'  => __( 'If you already have WP Mail SMTP, Post SMTP, or another mail plugin configured, just select "I already use an SMTP plugin" in the Email Delivery wizard and you\'re all set — no extra setup needed.', 'freelance-studio' ),
            ),
        );
    }
    ?>

    <?php if ( ! empty( $announcements ) ) : ?>
    <div class="fs-settings-section">
        <h2><?php esc_html_e( 'Announcements', 'freelance-studio' ); ?></h2>
        <div class="fs-announcements-list">
            <?php foreach ( $announcements as $ann ) :
                $type  = in_array( $ann['type'], array( 'info', 'new', 'tip', 'warning' ), true ) ? $ann['type'] : 'info';
                $icons = array(
                    'info'    => 'dashicons-info-outline',
                    'new'     => 'dashicons-star-filled',
                    'tip'     => 'dashicons-lightbulb',
                    'warning' => 'dashicons-warning',
                );
            ?>
            <div class="fs-announcement fs-announcement--<?php echo esc_attr( $type ); ?>">
                <span class="dashicons <?php echo esc_attr( $icons[ $type ] ); ?> fs-announcement-icon"></span>
                <div class="fs-announcement-body">
                    <?php if ( ! empty( $ann['title'] ) ) : ?>
                        <strong class="fs-announcement-title"><?php echo esc_html( $ann['title'] ); ?></strong>
                    <?php endif; ?>
                    <p><?php echo wp_kses_post( $ann['body'] ); ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── Support CTA ──────────────────────────────────────────── -->
    <div class="fs-about-support-cta">
        <div class="fs-about-support-cta-content">
            <span class="dashicons dashicons-format-chat fs-about-support-cta-icon"></span>
            <div>
                <h3><?php esc_html_e( 'Need help? We&rsquo;ve got you.', 'freelance-studio' ); ?></h3>
                <p><?php esc_html_e( 'Our support centre has step-by-step guides for every feature. If you still can&rsquo;t find what you need, open a ticket and we&rsquo;ll get back to you within 24–48 business hours.', 'freelance-studio' ); ?></p>
            </div>
        </div>
        <a href="<?php echo esc_url( $support_url ); ?>" target="_blank" rel="noopener"
           class="fs-btn fs-btn-primary fs-about-support-btn">
            <?php esc_html_e( 'Visit Support Centre', 'freelance-studio' ); ?>
            <span class="dashicons dashicons-external"></span>
        </a>
    </div>

    <!-- ── Feature request form ─────────────────────────────────── -->
    <div class="fs-settings-section">
        <h2><?php esc_html_e( 'Request a Feature', 'freelance-studio' ); ?></h2>
        <p class="description" style="margin-bottom: 20px;">
            <?php esc_html_e( 'Have an idea that would make Freelance Studio better? We read every submission. Share what you&rsquo;d like to see and how it would help your workflow.', 'freelance-studio' ); ?>
        </p>

        <div id="fs-feature-request-success" class="fs-feature-request-success" style="display:none;">
            <span class="dashicons dashicons-yes-alt"></span>
            <div>
                <strong><?php esc_html_e( 'Thanks for your idea!', 'freelance-studio' ); ?></strong>
                <p><?php esc_html_e( 'Your request has been submitted. We review every suggestion and it may shape a future update.', 'freelance-studio' ); ?></p>
            </div>
        </div>

        <form id="fs-feature-request-form" class="fs-feature-request-form" novalidate>
            <?php wp_nonce_field( 'fs_feature_request', 'fs_feature_request_nonce' ); ?>

            <div class="fs-feature-request-grid">
                <div class="fs-form-group">
                    <label for="fr_name"><?php esc_html_e( 'Your Name', 'freelance-studio' ); ?> <span class="required">*</span></label>
                    <input type="text" id="fr_name" name="fr_name" class="regular-text"
                           placeholder="<?php esc_attr_e( 'e.g. Sarah K.', 'freelance-studio' ); ?>"
                           value="<?php echo esc_attr( wp_get_current_user()->display_name ); ?>"
                           required>
                </div>
                <div class="fs-form-group">
                    <label for="fr_email"><?php esc_html_e( 'Email Address', 'freelance-studio' ); ?></label>
                    <input type="email" id="fr_email" name="fr_email" class="regular-text"
                           placeholder="<?php esc_attr_e( 'optional — if you want a reply', 'freelance-studio' ); ?>"
                           value="<?php echo esc_attr( wp_get_current_user()->user_email ); ?>">
                </div>
            </div>

            <div class="fs-form-group">
                <label for="fr_category"><?php esc_html_e( 'Feature Area', 'freelance-studio' ); ?> <span class="required">*</span></label>
                <select id="fr_category" name="fr_category" required>
                    <option value=""><?php esc_html_e( '— Select an area —', 'freelance-studio' ); ?></option>
                    <option value="Clients"><?php esc_html_e( 'Clients', 'freelance-studio' ); ?></option>
                    <option value="Projects"><?php esc_html_e( 'Projects', 'freelance-studio' ); ?></option>
                    <option value="Tasks"><?php esc_html_e( 'Tasks', 'freelance-studio' ); ?></option>
                    <option value="Invoicing"><?php esc_html_e( 'Invoicing', 'freelance-studio' ); ?></option>
                    <option value="Time Tracking"><?php esc_html_e( 'Time Tracking', 'freelance-studio' ); ?></option>
                    <option value="Proposals"><?php esc_html_e( 'Proposals', 'freelance-studio' ); ?></option>
                    <option value="Contracts"><?php esc_html_e( 'Contracts', 'freelance-studio' ); ?></option>
                    <option value="Expenses"><?php esc_html_e( 'Expenses', 'freelance-studio' ); ?></option>
                    <option value="Scheduling"><?php esc_html_e( 'Scheduling & Bookings', 'freelance-studio' ); ?></option>
                    <option value="Reports"><?php esc_html_e( 'Reports & Tax', 'freelance-studio' ); ?></option>
                    <option value="Client Portal"><?php esc_html_e( 'Client Portal', 'freelance-studio' ); ?></option>
                    <option value="Integrations"><?php esc_html_e( 'Integrations', 'freelance-studio' ); ?></option>
                    <option value="Design & UI"><?php esc_html_e( 'Design & UI', 'freelance-studio' ); ?></option>
                    <option value="Other"><?php esc_html_e( 'Other / General', 'freelance-studio' ); ?></option>
                </select>
            </div>

            <div class="fs-form-group">
                <label for="fr_title"><?php esc_html_e( 'Feature Title', 'freelance-studio' ); ?> <span class="required">*</span></label>
                <input type="text" id="fr_title" name="fr_title" class="large-text"
                       placeholder="<?php esc_attr_e( 'e.g. Export invoices to QuickBooks', 'freelance-studio' ); ?>"
                       maxlength="150" required>
                <p class="description"><?php esc_html_e( 'One clear sentence describing what you want.', 'freelance-studio' ); ?></p>
            </div>

            <div class="fs-form-group">
                <label for="fr_description"><?php esc_html_e( 'Description', 'freelance-studio' ); ?> <span class="required">*</span></label>
                <textarea id="fr_description" name="fr_description" rows="5" class="large-text"
                          placeholder="<?php esc_attr_e( "Describe the feature and why it would help your workflow. The more detail you share, the better we can understand what you need.", 'freelance-studio' ); ?>"
                          required></textarea>
            </div>

            <div class="fs-form-group">
                <label for="fr_priority"><?php esc_html_e( 'How important is this to you?', 'freelance-studio' ); ?></label>
                <div class="fs-priority-radio-group">
                    <label class="fs-priority-radio">
                        <input type="radio" name="fr_priority" value="nice-to-have">
                        <span class="fs-priority-radio-label fs-priority-radio-label--low"><?php esc_html_e( 'Nice to have', 'freelance-studio' ); ?></span>
                    </label>
                    <label class="fs-priority-radio">
                        <input type="radio" name="fr_priority" value="would-use-it" checked>
                        <span class="fs-priority-radio-label fs-priority-radio-label--med"><?php esc_html_e( "Would use it", 'freelance-studio' ); ?></span>
                    </label>
                    <label class="fs-priority-radio">
                        <input type="radio" name="fr_priority" value="need-it-badly">
                        <span class="fs-priority-radio-label fs-priority-radio-label--high"><?php esc_html_e( 'Need it badly', 'freelance-studio' ); ?></span>
                    </label>
                </div>
            </div>

            <div id="fs-feature-request-error" class="fs-feature-request-error" style="display:none;"></div>

            <div class="fs-feature-request-footer">
                <button type="submit" class="fs-btn fs-btn-primary" id="fs-submit-feature-request">
                    <?php esc_html_e( 'Submit Feature Request', 'freelance-studio' ); ?>
                </button>
                <p class="fs-feature-request-note">
                    <?php esc_html_e( 'Submissions are sent directly to the Freelance Studio team. We do not share your details with third parties.', 'freelance-studio' ); ?>
                </p>
            </div>
        </form>
    </div>

</div><!-- .fs-about-page -->

<script>
jQuery(document).ready(function($) {
    $('#fs-feature-request-form').on('submit', function(e) {
        e.preventDefault();

        var $form  = $(this);
        var $btn   = $('#fs-submit-feature-request');
        var $error = $('#fs-feature-request-error');
        var $ok    = $('#fs-feature-request-success');

        $error.hide();

        // Basic client-side validation
        var name  = $.trim($('#fr_name').val());
        var cat   = $('#fr_category').val();
        var title = $.trim($('#fr_title').val());
        var desc  = $.trim($('#fr_description').val());

        if (!name || !cat || !title || !desc) {
            $error.text('<?php echo esc_js(__('Please fill in all required fields.', 'freelance-studio')); ?>').show();
            return;
        }

        $btn.prop('disabled', true).text('<?php echo esc_js(__('Sending…', 'freelance-studio')); ?>');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action:                  'fs_submit_feature_request',
                nonce:                   $('#fs_feature_request_nonce').val(),
                fr_name:                 name,
                fr_email:                $.trim($('#fr_email').val()),
                fr_category:             cat,
                fr_title:                title,
                fr_description:          desc,
                fr_priority:             $('input[name="fr_priority"]:checked').val() || 'would-use-it',
            },
            success: function(response) {
                if (response.success) {
                    $form.hide();
                    $ok.show();
                } else {
                    $error.text(response.data || '<?php echo esc_js(__('Something went wrong. Please try again.', 'freelance-studio')); ?>').show();
                    $btn.prop('disabled', false).text('<?php echo esc_js(__('Submit Feature Request', 'freelance-studio')); ?>');
                }
            },
            error: function() {
                $error.text('<?php echo esc_js(__('Something went wrong. Please try again.', 'freelance-studio')); ?>').show();
                $btn.prop('disabled', false).text('<?php echo esc_js(__('Submit Feature Request', 'freelance-studio')); ?>');
            }
        });
    });
});
</script>
