<?php
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div class="site-content">
            <div id="identity-detail">
                <p>Loading identity details...</p>
            </div>
        </div>
    </main>
</div>

<script>
(function($) {
    'use strict';
    
    const uuid = window.location.pathname.match(/identity\/([a-f0-9\-]{36})/);
    
    if (!uuid) {
        $('#identity-detail').html('<p class="error">Invalid identity UUID</p>');
        return;
    }
    
    $.ajax({
        url: momentryApi.root + 'momentry/v1/identities/' + uuid[1],
        method: 'GET',
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-WP-Nonce', momentryApi.nonce);
        },
    }).done(function(response) {
        if (response.success) {
            const identity = response.data;
            
            const html = `
                <div class="identity-detail-page">
                    <h1>${identity.name}</h1>
                    <div class="identity-meta">
                        <span class="badge source-${identity.source}">${identity.source}</span>
                        <span class="type">${identity.type}</span>
                    </div>
                    
                    <section class="detail-section">
                        <h2>Reference Vectors</h2>
                        <div class="info-grid">
                            <div class="info-item">
                                <span class="label">Total Vectors:</span>
                                <span class="value">${identity.reference_vectors.total}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">Quality Avg:</span>
                                <span class="value">${((identity.reference_vectors.quality_avg || 0) * 100).toFixed(1)}%</span>
                            </div>
                            <div class="info-item">
                                <span class="label">Angles:</span>
                                <span class="value">${identity.reference_vectors.angles.join(', ') || 'None'}</span>
                            </div>
                        </div>
                    </section>
                    
                    ${identity.trace_stats ? `
                        <section class="detail-section">
                            <h2>Trace Statistics</h2>
                            <div class="info-grid">
                                <div class="info-item">
                                    <span class="label">Trace ID:</span>
                                    <span class="value">${identity.trace_stats.trace_id}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Duration:</span>
                                    <span class="value">${identity.trace_stats.duration_seconds}s</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Confidence:</span>
                                    <span class="value">${(identity.trace_stats.avg_confidence * 100).toFixed(1)}%</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">Appearances:</span>
                                    <span class="value">${identity.trace_stats.total_appearances} frames</span>
                                </div>
                            </div>
                            <h3>Pose Distribution</h3>
                            <div class="pose-distribution">
                                ${Object.entries(identity.trace_stats.pose_distribution || {}).map(([pose, count]) => `
                                    <div class="pose-item">
                                        <span class="pose-name">${pose.replace('_', ' ')}</span>
                                        <span class="pose-count">${count} frames</span>
                                    </div>
                                `).join('')}
                            </div>
                        </section>
                    ` : ''}
                    
                    <section class="detail-section">
                        <h2>Metadata</h2>
                        <div class="info-grid">
                            <div class="info-item">
                                <span class="label">UUID:</span>
                                <span class="value">${identity.uuid}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">Source:</span>
                                <span class="value">${identity.source}</span>
                            </div>
                            ${identity.tmdb_id ? `
                                <div class="info-item">
                                    <span class="label">TMDB ID:</span>
                                    <span class="value">${identity.tmdb_id}</span>
                                </div>
                            ` : ''}
                            <div class="info-item">
                                <span class="label">Created:</span>
                                <span class="value">${new Date(identity.created_at).toLocaleString()}</span>
                            </div>
                        </div>
                    </section>
                </div>
            `;
            
            $('#identity-detail').html(html);
        }
    }).fail(function(error) {
        $('#identity-detail').html('<p class="error">Failed to load identity details</p>');
        console.error('Error:', error);
    });
    
})(jQuery);
</script>

<?php
get_footer();