<?php
if ( ! defined( 'ABSPATH' ) ) exit;
class IntegratePalace_Properties_Templates {

    public static function register_templates() {
        register_setting(
            'IntegratePalace_Properties_Templates',
            'ipp_select_template',
            array(
                'sanitize_callback' => 'sanitize_text_field',
                'default'           => 'palace-property',
            )
        );

        add_settings_section(
            'ipp_select_template_section',
            __( 'Choose Template', 'integrate-palace-properties' ),
            array( __CLASS__, 'render_section_description' ),
            'IntegratePalace_Properties_Templates'
        );

        add_settings_field(
            'ipp_select_template',
            '',
            array( __CLASS__, 'render_template_fields' ),
            'IntegratePalace_Properties_Templates',
            'ipp_select_template_section'
        );
    }

    public static function render_section_description() {
        echo '<p>' . esc_html__( 'Select a template for your property listings. Each template provides a unique look for both the archive (listings) and single property pages.', 'integrate-palace-properties' ) . '</p>';
    }

    public static function render_template_fields() {
        $current = get_option( 'ipp_select_template', 'palace-property' );

        $templates = array(
            'palace-property' => array(
                'name'  => __( 'Palace Property', 'integrate-palace-properties' ),
                'desc'  => __( 'Clean, modern design with balanced layout. Our default template.', 'integrate-palace-properties' ),
                'icon'  => '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="40" height="40" rx="4"/><rect x="8" y="8" width="32" height="16" rx="2"/><rect x="8" y="28" width="14" height="4" rx="1"/><rect x="8" y="36" width="20" height="2" rx="1"/><circle cx="36" cy="32" r="4"/></svg>',
                'color' => '#1a1a2e',
            ),
            'classic' => array(
                'name'  => __( 'Classic', 'integrate-palace-properties' ),
                'desc'  => __( 'Traditional real estate listing layout with sidebar details.', 'integrate-palace-properties' ),
                'icon'  => '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="40" height="40" rx="4"/><rect x="8" y="8" width="16" height="32" rx="2"/><rect x="28" y="8" width="12" height="6" rx="1"/><rect x="28" y="18" width="12" height="4" rx="1"/><rect x="28" y="26" width="12" height="4" rx="1"/><rect x="28" y="34" width="12" height="6" rx="1"/></svg>',
                'color' => '#2d3436',
            ),
            'modern' => array(
                'name'  => __( 'Modern', 'integrate-palace-properties' ),
                'desc'  => __( 'Bold, image-forward design with full-width gallery and large typography.', 'integrate-palace-properties' ),
                'icon'  => '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="40" height="40" rx="4"/><rect x="4" y="4" width="40" height="24" rx="4"/><rect x="12" y="32" width="24" height="4" rx="1"/><rect x="16" y="40" width="16" height="2" rx="1"/></svg>',
                'color' => '#e94560',
            ),
            'minimal' => array(
                'name'  => __( 'Minimal', 'integrate-palace-properties' ),
                'desc'  => __( 'Typography-focused, elegant and professional. Magazine-like layout.', 'integrate-palace-properties' ),
                'icon'  => '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="40" height="40" rx="4"/><line x1="12" y1="12" x2="36" y2="12"/><line x1="12" y1="20" x2="36" y2="20"/><line x1="12" y1="28" x2="28" y2="28"/><line x1="12" y1="36" x2="24" y2="36"/></svg>',
                'color' => '#636e72',
            ),
            'grid-gallery' => array(
                'name'  => __( 'Grid Gallery', 'integrate-palace-properties' ),
                'desc'  => __( 'Masonry-style grid emphasizing photography. Great for visual listings.', 'integrate-palace-properties' ),
                'icon'  => '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="18" height="14" rx="2"/><rect x="26" y="4" width="18" height="20" rx="2"/><rect x="4" y="22" width="18" height="22" rx="2"/><rect x="26" y="28" width="18" height="16" rx="2"/></svg>',
                'color' => '#00b894',
            ),
            'developer' => array(
                'name'  => __( 'Developer', 'integrate-palace-properties' ),
                'desc'  => __( 'Barebone semantic HTML. For theme developers to fully customize via CSS.', 'integrate-palace-properties' ),
                'icon'  => '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="40" height="40" rx="4"/><polyline points="16,16 10,24 16,32"/><polyline points="32,16 38,24 32,32"/><line x1="22" y1="12" x2="26" y2="36"/></svg>',
                'color' => '#6c5ce7',
            ),
        );
        ?>
        <div class="ipp-template-selector">
            <style>
                .ipp-template-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
                .ipp-template-option { position: relative; border: 2px solid #e0e0e0; border-radius: 12px; overflow: hidden; transition: all 0.2s ease; cursor: pointer; background: #fff; }
                .ipp-template-option:hover { border-color: #999; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
                .ipp-template-option.active { border-color: #2271b1; box-shadow: 0 0 0 2px #2271b1; }
                .ipp-template-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
                .ipp-template-option__preview { display: flex; align-items: center; justify-content: center; height: 140px; padding: 20px; }
                .ipp-template-option__preview svg { width: 64px; height: 64px; opacity: 0.7; }
                .ipp-template-option__info { padding: 16px; border-top: 1px solid #f0f0f0; }
                .ipp-template-option__name { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: #1d2327; }
                .ipp-template-option__desc { font-size: 12px; color: #646970; margin: 0; line-height: 1.5; }
                .ipp-template-option__check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #2271b1; display: none; align-items: center; justify-content: center; }
                .ipp-template-option.active .ipp-template-option__check { display: flex; }
                .ipp-template-option__check svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; }
            </style>

            <?php foreach ( $templates as $slug => $tpl ) : ?>
                <label class="ipp-template-option <?php echo $current === $slug ? 'active' : ''; ?>" data-template="<?php echo esc_attr( $slug ); ?>">
                    <input type="radio" name="ipp_select_template" value="<?php echo esc_attr( $slug ); ?>" <?php checked( $current, $slug ); ?> />
                    <div class="ipp-template-option__check">
                        <svg viewBox="0 0 24 24" fill="none"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div class="ipp-template-option__preview" style="background: <?php echo esc_attr( $tpl['color'] ); ?>10;">
                        <?php echo $tpl['icon']; // phpcs:ignore -- Safe SVG markup ?>
                    </div>
                    <div class="ipp-template-option__info">
                        <p class="ipp-template-option__name"><?php echo esc_html( $tpl['name'] ); ?></p>
                        <p class="ipp-template-option__desc"><?php echo esc_html( $tpl['desc'] ); ?></p>
                    </div>
                </label>
            <?php endforeach; ?>
        </div>

        <script>
        document.querySelectorAll('.ipp-template-option').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelectorAll('.ipp-template-option').forEach(function(o) { o.classList.remove('active'); });
                el.classList.add('active');
                el.querySelector('input[type="radio"]').checked = true;
            });
        });
        </script>
        <?php
    }
}
