<?php

// Exit if accessed directly.
if (! defined('ABSPATH')) {
    exit;
}
global $integrazo_wz_integration_sources;
$integrazo_wz_ordered_plugins  = integrazo_wz_get_plugins_sorted($integrazo_wz_integration_sources['plugins']);
$integrazo_wz_ordered_products = integrazo_wz_get_products_sorted($integrazo_wz_integration_sources['products']);

// Display success or error admin notice based on transient.
if ($integrazo_wz_msg = get_transient('integrazo_wz_integration_message')) : ?>
    <div class="notice notice-success is-dismissible">
        <p><?php echo esc_html($integrazo_wz_msg); ?></p>
    </div>
    <?php delete_transient('integrazo_wz_integration_message'); ?>
<?php elseif ($integrazo_wz_err = get_transient('integrazo_wz_integration_error')) : ?>
    <div class="notice notice-error is-dismissible">
        <p><?php echo esc_html($integrazo_wz_err); ?></p>
    </div>
    <?php delete_transient('integrazo_wz_integration_error'); ?>
<?php endif; ?>

<div class="integrazo-wz-setup-accordion" id="step1">
    <div class="integrazo-wz-setup-accordion-header">
        <span style="display:flex;align-items:center;gap:9px;">
            <?php if ($integrazo_wz_current_step > 1) : ?>
                <span style="display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;font-size:12px;font-weight:700;">1</span>
            <?php elseif ($integrazo_wz_current_step === 1) : ?>
                <span style="display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#2271b1;color:#fff;font-size:12px;font-weight:700;">1</span>
            <?php else : ?>
                <span style="display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e0e0e0;color:#888;font-size:12px;font-weight:700;">1</span>
            <?php endif; ?>
            <?php esc_html_e('Connect Service', 'integrazo-integration-for-zoho-apps'); ?>
            <?php if ($integrazo_wz_current_step > 1) : ?>
                <span style="color:#16a34a;font-size:14px;font-weight:700;">&#10003;</span>
            <?php endif; ?>
        </span>
        <span style="display:flex;align-items:center;gap:6px;">
            <span class="integrazo-wz-setup-toggle-hint"><?php echo ($integrazo_wz_open_step === 1) ? esc_html__('Click to close', 'integrazo-integration-for-zoho-apps') : esc_html__('Click to expand', 'integrazo-integration-for-zoho-apps'); ?></span>
            <span class="integrazo-wz-setup-toggle-icon" title="<?php echo ($integrazo_wz_open_step === 1) ? esc_attr__('Click to close', 'integrazo-integration-for-zoho-apps') : esc_attr__('Click to expand', 'integrazo-integration-for-zoho-apps'); ?>"><?php echo ($integrazo_wz_open_step === 1) ? '−' : '+'; ?></span>
        </span>
    </div>

    <div class="integrazo-wz-setup-accordion-content">
        <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
            <?php wp_nonce_field('integrazo_wz_save_integration_action', 'integrazo_wz_nonce'); ?>

            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <label for="integration_name" class="integrazo-wz-setup-lable">
                    <?php esc_html_e('Integration Name:', 'integrazo-integration-for-zoho-apps'); ?>
                    <div class="integrazo-wz-helpicon-help-icon-wrapper">
                        <span class="integrazo-wz-helpicon-help-icon">?</span>
                        <div class="integrazo-wz-helpicon-help-tooltip">
                            <p><?php esc_html_e('A unique name to identify this Integration.', 'integrazo-integration-for-zoho-apps'); ?></p>
                        </div>
                    </div>
                </label>

                <input type="text" id="integration_name" name="integration_name"
                    class="integrazo-wz-setup-step1-name-input" placeholder="" style="width:340px;height:36px;padding:0 12px;font-size:13px;border:1.5px solid #d0d5dd;border-radius:6px;color:#1a1a1a;outline:none;background:#fff;"
                    value="<?php echo esc_attr(empty($integrazo_wz_integration_name) ? 'Integration #' . ($integrazo_wz_integration_count + 1) : $integrazo_wz_integration_name); ?>" />
            </div>

            <?php
            // Whether this integration has actually been persisted (i.e. we're editing an
            // existing row rather than filling out a brand-new, not-yet-submitted draft).
            $integrazo_wz_is_saved = ! empty($integrazo_wz_integration_id);

// Selected plugin.
$integrazo_wz_selected_plugin = null;
if (! empty($integrazo_wz_from_plugin)) {
    foreach ($integrazo_wz_integration_sources['plugins'] as $plugin) {
        if ($plugin['id'] === $integrazo_wz_from_plugin) {
            $integrazo_wz_selected_plugin = $plugin;
            break;
        }
    }
}

// Selected product.
$integrazo_wz_selected_product = null;
if (! empty($integrazo_wz_to_product)) {
    foreach ($integrazo_wz_integration_sources['products'] as $integrazo_wz_product) {
        if ($integrazo_wz_product['id'] === $integrazo_wz_to_product) {
            $integrazo_wz_selected_product = $integrazo_wz_product;
            break;
        }
    }
}
?>

            <?php
// Before the integration is first saved, a picked tile is just a draft choice —
// nothing has actually been "locked" yet, so the tooltip shouldn't say so.
$integrazo_wz_locked_tooltip = esc_attr__('Locked', 'integrazo-integration-for-zoho-apps');
$integrazo_wz_both_selected  = $integrazo_wz_selected_plugin && $integrazo_wz_selected_product;

// Guide the user through the two cards in order: exactly one card carries the
// "act on me next" highlight, and the card whose turn hasn't come is dimmed.
// The trigger has to be picked first, so it owns the highlight until it's set.
$integrazo_wz_plugin_is_next  = ! $integrazo_wz_selected_plugin;
$integrazo_wz_product_is_next = $integrazo_wz_selected_plugin && ! $integrazo_wz_selected_product;

$integrazo_wz_plugin_state_class = $integrazo_wz_plugin_is_next
    ? 'integrazo-wz-setup-step1-box-attention'
    : 'integrazo-wz-setup-step1-box-filled';

if ($integrazo_wz_selected_product) {
    $integrazo_wz_product_state_class = 'integrazo-wz-setup-step1-box-filled';
} elseif ($integrazo_wz_product_is_next) {
    $integrazo_wz_product_state_class = 'integrazo-wz-setup-step1-box-attention';
} else {
    $integrazo_wz_product_state_class = 'integrazo-wz-setup-step1-box-waiting';
}
?>
            <?php
            // Small inline icons (currentColor) kept local since the bolt/send glyphs
            // aren't part of the dashicons set already used elsewhere on this page.
            $integrazo_wz_icon_bolt  = '<svg class="integrazo-wz-setup-step1-badge-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"/></svg>';
$integrazo_wz_icon_send  = '<svg class="integrazo-wz-setup-step1-badge-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3.478 2.404a.75.75 0 00-.926.941l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.404z"/></svg>';
// Allowed markup for the inline icons above — svg/path aren't part of wp_kses' post defaults.
$integrazo_wz_svg_allowed_html = [
    'svg'  => ['class' => true, 'viewbox' => true, 'fill' => true, 'aria-hidden' => true],
    'path' => ['d' => true, 'fill-rule' => true, 'clip-rule' => true],
];
?>
            <div class="integrazo-wz-setup-step1-wrapper">
                <!-- Plugin Box -->
                <div class="integrazo-wz-setup-step1-box <?php echo $integrazo_wz_selected_plugin ? '' : 'integrazo-wz-setup-step1-expand-toggle'; ?> <?php echo esc_attr($integrazo_wz_plugin_state_class); ?>"
                    <?php echo $integrazo_wz_selected_plugin ? '' : 'data-target="#integrazo-wz-plugin-popup"'; ?>
                    <?php echo ($integrazo_wz_selected_plugin && $integrazo_wz_is_saved) ? 'title="' . esc_attr($integrazo_wz_locked_tooltip) . '"' : ''; ?>>
                    <?php if (! $integrazo_wz_selected_plugin) : ?>
                        <span class="integrazo-wz-setup-step1-coach"><?php esc_html_e('Start here', 'integrazo-integration-for-zoho-apps'); ?></span>
                        <span class="integrazo-wz-setup-step1-badge integrazo-wz-setup-step1-badge-trigger">
                            <?php echo wp_kses($integrazo_wz_icon_bolt, $integrazo_wz_svg_allowed_html); ?>
                            <?php esc_html_e('Step 1 · Trigger', 'integrazo-integration-for-zoho-apps'); ?>
                        </span>
                        <div class="integrazo-wz-setup-step1-add-icon"></div>
                        <span class="integrazo-wz-setup-step1-hint"><?php esc_html_e('Click to select', 'integrazo-integration-for-zoho-apps'); ?></span>
                    <?php else : ?>
                        <div class="integrazo-wz-setup-step1-plugin-thumb <?php echo esc_attr($integrazo_wz_selected_plugin['id']); ?>"></div>
                        <span class="integrazo-wz-setup-step1-plugin-title"><?php echo esc_html($integrazo_wz_selected_plugin['name']); ?></span>
                        <span class="integrazo-wz-setup-step1-status integrazo-wz-setup-step1-status-connected">
                            <span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
                            <?php esc_html_e('Connected', 'integrazo-integration-for-zoho-apps'); ?>
                        </span>
                    <?php endif; ?>
                </div>

                <div class="integrazo-wz-setup-step1-arrow">&#8594;</div>

                <!-- Product Box -->
                <div class="integrazo-wz-setup-step1-box <?php echo $integrazo_wz_selected_product ? '' : 'integrazo-wz-setup-step1-expand-toggle'; ?> <?php echo esc_attr($integrazo_wz_product_state_class); ?>"
                    <?php echo $integrazo_wz_selected_product ? '' : 'data-target="#integrazo-wz-product-popup"'; ?>
                    <?php echo ($integrazo_wz_selected_product && $integrazo_wz_is_saved) ? 'title="' . esc_attr($integrazo_wz_locked_tooltip) . '"' : ''; ?>>
                    <?php if (! $integrazo_wz_selected_product) : ?>
                        <span class="integrazo-wz-setup-step1-coach"><?php esc_html_e('Now pick the destination', 'integrazo-integration-for-zoho-apps'); ?></span>
                        <span class="integrazo-wz-setup-step1-badge integrazo-wz-setup-step1-badge-destination">
                            <?php echo wp_kses($integrazo_wz_icon_send, $integrazo_wz_svg_allowed_html); ?>
                            <?php esc_html_e('Step 2 · Destination', 'integrazo-integration-for-zoho-apps'); ?>
                        </span>
                        <div class="integrazo-wz-setup-step1-add-icon"></div>
                        <?php
                        // Both wordings ship in the markup; CSS shows whichever matches the card's
                        // current state, so the JS handoff never has to build translated strings.
                        ?>
                        <span class="integrazo-wz-setup-step1-hint integrazo-wz-setup-step1-hint-waiting"><?php esc_html_e('Then click to select', 'integrazo-integration-for-zoho-apps'); ?></span>
                        <span class="integrazo-wz-setup-step1-hint integrazo-wz-setup-step1-hint-ready"><?php esc_html_e('Click to select', 'integrazo-integration-for-zoho-apps'); ?></span>
                    <?php else : ?>
                        <div class="integrazo-wz-setup-step1-plugin-thumb <?php echo esc_attr($integrazo_wz_selected_product['id']); ?>"></div>
                        <span class="integrazo-wz-setup-step1-plugin-title"><?php echo esc_html($integrazo_wz_selected_product['name']); ?></span>
                        <span class="integrazo-wz-setup-step1-status integrazo-wz-setup-step1-status-connected">
                            <span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
                            <?php esc_html_e('Connected', 'integrazo-integration-for-zoho-apps'); ?>
                        </span>
                    <?php endif; ?>
                </div>
            </div>

            <input type="hidden" name="from_plugin" value="<?php echo esc_attr($integrazo_wz_from_plugin ?? ''); ?>">
            <input type="hidden" name="to_product" value="<?php echo esc_attr($integrazo_wz_to_product ?? ''); ?>">

            <?php if (empty($integrazo_wz_integration_name)) : ?>
                <input type="hidden" name="action" value="integrazo_wz_save_integration">
                <div class="integrazo-wz-setup-next-btn-wrapper">
                    <button type="submit" class="button button-primary" id="step1_next" <?php echo $integrazo_wz_both_selected ? '' : 'disabled'; ?>><?php esc_html_e('Save and Next', 'integrazo-integration-for-zoho-apps'); ?></button>
                </div>
            <?php else : ?>
                <input type="hidden" name="integration_id" value="<?php echo esc_attr($integrazo_wz_integration_id ?? ''); ?>" />
                <input type="hidden" name="action" value="integrazo_wz_save_only">
                <div class="integrazo-wz-setup-next-btn-wrapper">
                    <button type="submit" class="button button-primary" id="step1_save_only"><?php esc_html_e('Save', 'integrazo-integration-for-zoho-apps'); ?></button>
                </div>
            <?php endif; ?>
        </form>
    </div>
</div>

<!-- Plugin Overlay Popup -->
<div class="integrazo-wz-setup-step1-overlay" id="integrazo-wz-plugin-popup" style="display: none;">
    <div class="integrazo-wz-setup-step1-popup">
        <span class="integrazo-wz-setup-step1-popup-close" id="integrazo-wz-plugin-popup-close">×</span>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
            <input type="text" id="integrazo-wz-plugin-popup-search" placeholder="<?php esc_attr_e('Search plugins...', 'integrazo-integration-for-zoho-apps'); ?>" class="integrazo-wz-setup-step1-input-search" style="width: 75%;">
        </div>

        <div class="integrazo-wz-setup-step1-plugin-grid" id="integrazo-wz-plugin-popup-list">
            <?php foreach ($integrazo_wz_ordered_plugins as $plugin) : ?>
                <?php
    $integrazo_wz_is_pro = !empty($plugin['pro']) && $plugin['pro'];
                $integrazo_wz_class_name = ($integrazo_wz_is_pro && !$session) ? 'integrazo-wz-pro-plugin' : 'integrazo-wz-setup-step1-plugin-item';
                ?>
                <div class="<?php echo esc_attr($integrazo_wz_class_name); ?>"
                    data-group="plugin"
                    data-name="<?php echo esc_attr($plugin['name']); ?>"
                    data-id="<?php echo esc_attr($plugin['id']); ?>"
                    data-source="from">
                    <div class="integrazo-wz-setup-step1-plugin-thumb <?php echo esc_attr($plugin['id']); ?>"></div>
                    <span class="integrazo-wz-setup-step1-plugin-title"><?php echo esc_html($plugin['name']); ?></span>
                </div>
            <?php endforeach; ?>
        </div>



    </div>
</div>

<!-- Product Overlay Popup -->
<div class="integrazo-wz-setup-step1-overlay" id="integrazo-wz-product-popup" style="display: none;">
    <div class="integrazo-wz-setup-step1-popup">
        <span class="integrazo-wz-setup-step1-popup-close" id="integrazo-wz-product-popup-close">×</span>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
            <input type="text" id="integrazo-wz-product-popup-search" placeholder="<?php esc_attr_e('Search products...', 'integrazo-integration-for-zoho-apps'); ?>" class="integrazo-wz-setup-step1-input-search" style="width: 75%;">
        </div>
        <div class="integrazo-wz-setup-step1-plugin-grid" id="integrazo-wz-product-popup-list">
            <?php foreach ($integrazo_wz_ordered_products as $integrazo_wz_product) : ?>
                <?php
                $integrazo_wz_is_pro = !empty($integrazo_wz_product['pro']) && $integrazo_wz_product['pro'];
                $integrazo_wz_class_name = ($integrazo_wz_is_pro && !$session) ? 'integrazo-wz-pro-plugin' : 'integrazo-wz-setup-step1-plugin-item';
                ?>
                <div class="<?php echo esc_attr($integrazo_wz_class_name); ?>"
                    data-group="product"
                    data-name="<?php echo esc_attr($integrazo_wz_product['name']); ?>"
                    data-id="<?php echo esc_attr($integrazo_wz_product['id']); ?>"
                    data-source="to">
                    <div class="integrazo-wz-setup-step1-plugin-thumb <?php echo esc_attr($integrazo_wz_product['id']); ?>"></div>
                    <span class="integrazo-wz-setup-step1-plugin-title"><?php echo esc_html($integrazo_wz_product['name']); ?></span>
                </div>
            <?php endforeach; ?>
        </div>

    </div>
</div>