<?php
/**
 * Default Numerology Form Template - Dynamic & Admin-Styled
 *
 * Variables expected:
 *   - $endpoint (string)
 *   - $params (array)
 *   - $param_desc (array)   <-- NEW: descriptions for each param
 *   - $styles (array)
 *   - $template (string, optional)
 */

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

$dakidarts_styles         = isset( $styles ) && is_array( $styles ) ? $styles : get_option( 'dakidarts_numerology_style_settings', [] );
$dakidarts_params         = isset( $params ) && is_array( $params ) ? $params : [];
$dakidarts_param_desc     = isset( $param_desc ) && is_array( $param_desc ) ? $param_desc : [];
$dakidarts_endpoint       = isset( $endpoint ) ? $endpoint : '';
$dakidarts_template       = isset( $template ) ? $template : 'default';
$dakidarts_required_params = isset( $required_params ) ? $required_params : $dakidarts_params;

// Form container styles
$dakidarts_form_style = sprintf(
    'background:%s;padding:%s;margin:%s;border-radius:%s;',
    esc_attr( $dakidarts_styles['form_bg'] ?? '#fff' ),
    esc_attr( $dakidarts_styles['form_padding'] ?? '15px' ),
    esc_attr( $dakidarts_styles['form_margin'] ?? '10px auto' ),
    esc_attr( $dakidarts_styles['form_radius'] ?? '8px' )
);

// Button text & style mode
$dakidarts_button_text = ! empty( $dakidarts_styles['calculate_text'] ) ? $dakidarts_styles['calculate_text'] : __( 'Calculate', 'dakidarts-numerology-core' );
$dakidarts_button_mode = $dakidarts_styles['button_style_mode'] ?? 'inherit';

// Button inline styles
$dakidarts_button_inline_style = '';
if ( $dakidarts_button_mode === 'custom' ) {
    $dakidarts_button_inline_style = sprintf(
        'background:%s;color:%s;padding:%s;border:%s %s %s;border-radius:%s;display:block;margin:%s;text-align:center;',
        esc_attr( $dakidarts_styles['button_bg'] ?? '#0073aa' ),
        esc_attr( $dakidarts_styles['button_color'] ?? '#fff' ),
        esc_attr( $dakidarts_styles['button_padding'] ?? '10px 20px' ),
        esc_attr( $dakidarts_styles['button_border_width'] ?? '1px' ),
        esc_attr( $dakidarts_styles['button_border_style'] ?? 'solid' ),
        esc_attr( $dakidarts_styles['button_border_color'] ?? '#0073aa' ),
        esc_attr( $dakidarts_styles['button_radius'] ?? '4px' ),
        ( $dakidarts_styles['button_position'] ?? 'center' ) === 'center' ? '0 auto' :
        ( ( $dakidarts_styles['button_position'] ?? 'center' ) === 'right' ? '0 0 0 auto' : '0 0 0 0' )
    );
}
?>

<form method="post" action="<?php echo esc_url( get_permalink() ); ?>" class="dakidarts-form dakidarts-form-<?php echo esc_attr( $dakidarts_template ); ?>" style="<?php echo esc_attr( $dakidarts_form_style ); ?>">
<?php wp_nonce_field( 'dakidarts_numerology_submit', 'dakidarts_nonce' ); ?>
<?php if ( ! empty( $dakidarts_params ) ) : ?>
        <?php
        $dakidarts_is_compatibility = $dakidarts_endpoint === 'compatibility-score';

        $dakidarts_render_field = function( $dakidarts_param ) use ( $dakidarts_param_desc, $dakidarts_required_params ) {
            $dakidarts_required = in_array( $dakidarts_param, $dakidarts_required_params ?? [], true );
            ?>
            <p>
                <label for="<?php echo esc_attr( $dakidarts_param ); ?>">
                    <?php echo esc_html( ucfirst( str_replace( '_', ' ', $dakidarts_param ) ) ); ?><?php echo $dakidarts_required ? ':' : ' (' . esc_html__( 'optional', 'dakidarts-numerology-core' ) . '):'; ?>
                </label>
                <?php if ( in_array( $dakidarts_param, [ 'reduce', 'include_gaps', 'expanded', 'allow_masters' ], true ) ) : ?>
                    <select name="<?php echo esc_attr( $dakidarts_param ); ?>" <?php echo $dakidarts_required ? 'required' : ''; ?>>
                        <option value=""><?php esc_html_e( 'Select', 'dakidarts-numerology-core' ); ?></option>
                        <option value="true"><?php esc_html_e( 'True', 'dakidarts-numerology-core' ); ?></option>
                        <option value="false"><?php esc_html_e( 'False', 'dakidarts-numerology-core' ); ?></option>
                    </select>
                    <?php if ( $dakidarts_param === 'expanded' ) : ?>
                        <span class="dakidarts-param-desc dakidarts-param-tip">
                            <span class="dakidarts-info-dot">i</span>
                            <?php echo esc_html__( 'Tip: expanded=true returns full cycles and detailed meanings. expanded=false keeps output brief.', 'dakidarts-numerology-core' ); ?>
                        </span>
                    <?php endif; ?>
                    <?php if ( $dakidarts_param === 'allow_masters' ) : ?>
                        <span class="dakidarts-param-desc dakidarts-param-tip">
                            <span class="dakidarts-info-dot">i</span>
                            <?php echo esc_html__( 'Tip: allow_masters is reserved for future master-number support. Keep false for now.', 'dakidarts-numerology-core' ); ?>
                        </span>
                    <?php endif; ?>
                <?php else : ?>
                    <input type="text" name="<?php echo esc_attr( $dakidarts_param ); ?>" <?php echo $dakidarts_required ? 'required' : ''; ?> />
                <?php endif; ?>
                <?php if ( ! empty( $dakidarts_param_desc[ $dakidarts_param ] ) ) : ?>
                    <span class="dakidarts-param-desc"><?php echo esc_html( $dakidarts_param_desc[ $dakidarts_param ] ); ?></span>
                <?php endif; ?>
            </p>
            <?php
        };

        if ( $dakidarts_is_compatibility ) :
            $dakidarts_person1 = array_filter( $dakidarts_params, fn( $p ) => str_ends_with( $p, '_1' ) );
            $dakidarts_person2 = array_filter( $dakidarts_params, fn( $p ) => str_ends_with( $p, '_2' ) );
            ?>
            <div class="dakidarts-compatibility-grid">
                <div class="dakidarts-compatibility-card">
                    <h3><?php esc_html_e( 'Person 1', 'dakidarts-numerology-core' ); ?></h3>
                    <?php foreach ( $dakidarts_person1 as $dakidarts_param ) { $dakidarts_render_field( $dakidarts_param ); } ?>
                </div>
                <div class="dakidarts-compatibility-card">
                    <h3><?php esc_html_e( 'Person 2', 'dakidarts-numerology-core' ); ?></h3>
                    <?php foreach ( $dakidarts_person2 as $dakidarts_param ) { $dakidarts_render_field( $dakidarts_param ); } ?>
                </div>
            </div>
        <?php else : ?>
            <?php foreach ( $dakidarts_params as $dakidarts_param ) { $dakidarts_render_field( $dakidarts_param ); } ?>
        <?php endif; ?>
    <?php endif; ?>

    <input type="hidden" name="dakidarts_endpoint" value="<?php echo esc_attr( $dakidarts_endpoint ); ?>" />
    <button type="submit" name="dakidarts_submit" class="dakidarts-submit" <?php echo $dakidarts_button_mode === 'custom' ? 'style="' . esc_attr( $dakidarts_button_inline_style ) . '"' : ''; ?>>
        <?php echo esc_html( $dakidarts_button_text ); ?>
    </button>
</form>

<style>
.dakidarts-form input[type="text"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0 4px 0; /* reduce bottom margin to fit description */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.dakidarts-form label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}
.dakidarts-param-desc {
    display: block;
    font-style: italic;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 8px;
    font-family: inherit; /* use default theme font */
}
.dakidarts-param-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dakidarts-info-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dakidarts-inline-error {
    margin-top: 6px;
    color: #b42318;
    font-size: 0.9em;
    font-weight: 600;
}
.dakidarts-compatibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.dakidarts-compatibility-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    background: #f9fafb;
}
.dakidarts-compatibility-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #111827;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.dakidarts-form-<?php echo esc_attr( $dakidarts_template ); ?>');
    if (!form) return;

    const selects = Array.from(form.querySelectorAll('select[name="reduce"], select[name="include_gaps"]'));
    if (!selects.length) return;

    const validateSelect = (select) => {
        const existing = select.parentElement.querySelector('.dakidarts-inline-error');
        if (select.value) {
            if (existing) existing.remove();
            return true;
        }
        if (!existing) {
            const error = document.createElement('div');
            error.className = 'dakidarts-inline-error';
            error.textContent = '<?php echo esc_js( __( 'Please choose True or False.', 'dakidarts-numerology-core' ) ); ?>';
            select.parentElement.appendChild(error);
        }
        return false;
    };

    selects.forEach(select => {
        select.addEventListener('change', () => validateSelect(select));
    });

    form.addEventListener('submit', function(e) {
        let hasError = false;
        selects.forEach(select => {
            if (!validateSelect(select)) hasError = true;
        });
        if (hasError) {
            e.preventDefault();
        }
    });
});
</script>
