<?php 
/**
 * MTC - Public Widget
 * Shortcode [mtcam_public_logs] - displays detections on the public page
 * Detection detail is inline (expandable), not via AJAX
 */
if (!defined('ABSPATH')) exit;
$mtcam_show_ip = $tracker->get_cached_option('mtcam_show_ip', 'yes');

?>

<div id="mtcam-container" style="max-width:1200px; margin:0 auto;">
    <?php if (empty($logs)): ?>
        <div style="text-align:center; padding:40px; background:#f9f9f9; border-radius:8px;">
            <p style="color:#666;"><?php esc_html_e( 'No detections yet.', 'my-trail-camera' ); ?></p>
        </div>
    <?php else: ?>
        <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px;">
            <?php foreach ($logs as $mtcam_log):
                $mtcam_cam = $tracker->get_camera_info($mtcam_log->device_id);
                $mtcam_recovery = $tracker->calculate_recovery_chance($mtcam_log);
                $mtcam_recovery_color = $mtcam_recovery['percentage'] >= 70 ? '#4CAF50' : ($mtcam_recovery['percentage'] >= 40 ? '#FF9800' : '#f44336');
            ?>
				<div data-mtcam-public-toggle="<?php echo (int) $mtcam_log->id; ?>"
					 style="border:2px solid <?php echo esc_attr( $mtcam_cam['color'] ); ?>; padding:20px; border-radius:10px; background:#fff; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.08); transition:all 0.3s;"
                     class="mtcam-public-card" role="article">
                    
                    <div style="text-align:center;">
						<strong style="color:<?php echo esc_attr( $mtcam_cam['color'] ); ?>; font-size:18px;">🎯 <?php echo esc_html( sprintf( __( 'Report #%d', 'my-trail-camera' ), (int) $mtcam_log->id ) ); ?></strong><br>
						<small style="color:#888;"><?php echo wp_kses_post( mtcam_format_datetime_html( $mtcam_log->time ) ); ?></small>
                    </div>
                    
                    <div style="margin-top:12px; text-align:center;">
						<span style="background:<?php echo esc_attr( $mtcam_cam['color'] ); ?>; color:#fff; padding:5px 12px; border-radius:15px; font-size:11px; font-weight:bold;">
                            <?php echo esc_html(mtcam_get_camera_display_name($mtcam_log->device_id, $mtcam_cam)); ?>
                        </span>
                    </div>
                    
                    <div style="margin-top:8px; text-align:center;">
						<span style="background:<?php echo esc_attr( $mtcam_recovery_color ); ?>; color:#fff; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:bold;">
							🎯 <?php echo (int) $mtcam_recovery['percentage']; ?>% <?php esc_html_e( 'Chance', 'my-trail-camera' ); ?>
                        </span>
                    </div>
                    
                    <div style="margin-top:15px; text-align:center;">
						<span style="display:block; background:<?php echo esc_attr( $mtcam_cam['color'] ); ?>; color:#fff; padding:10px; border-radius:6px; font-size:14px;">
                            <?php esc_html_e( 'Show Detail →', 'my-trail-camera' ); ?>
                        </span>
                    </div>
                </div>
                
                <!-- Inline Detail (hidden, shown on click) -->
                <div id="mtcam-detail-<?php echo (int) $mtcam_log->id; ?>"
					 style="display:none; grid-column: 1 / -1; background:#fff; border:2px solid <?php echo esc_attr( $mtcam_cam['color'] ); ?>; border-radius:10px; padding:25px; box-shadow:0 10px 20px rgba(0,0,0,0.15); animation:thorFadeIn 0.4s;">
                    
                    <h2 style="color:<?php echo esc_attr( $mtcam_cam['color'] ); ?>; margin-top:0; border-bottom:2px solid #f0f0f0; padding-bottom:10px;">
                        🎯 MTC Detection Report #<?php echo esc_html($mtcam_log->id); ?>
                    </h2>
                    
                    <div style="background:#fff3cd; border-left:4px solid #ffc107; padding:12px; margin-bottom:20px; border-radius:4px;">
                        <strong>⏰ <?php esc_html_e( 'Detection time:', 'my-trail-camera' ); ?></strong> <?php echo wp_kses_post( mtcam_format_datetime_html( $mtcam_log->time, 'j.m.Y - H:i:s', 'Y-m-d\\TH:i:s' ) ); ?>
                    </div>
                    
                    <!-- Recovery Chance -->
					<div style="background:<?php echo esc_attr( $mtcam_recovery_color ); ?>20; border-left:4px solid <?php echo esc_attr( $mtcam_recovery_color ); ?>; padding:20px; margin-bottom:20px; border-radius:6px;">
                        <h3 style="margin-top:0; color:<?php echo esc_attr( $mtcam_recovery_color ); ?>;">🎯 <?php esc_html_e( 'Recovery chance', 'my-trail-camera' ); ?></h3>
                        <div style="font-size:32px; font-weight:bold; color:<?php echo esc_attr( $mtcam_recovery_color ); ?>;">
                            <?php echo (int) $mtcam_recovery['percentage']; ?>%
                        </div>
                        <div style="color:<?php echo esc_attr( $mtcam_recovery_color ); ?>; font-size:18px; margin:10px 0;">
                            <?php echo esc_html( $mtcam_recovery['recommendation']['text'] ); ?>
                        </div>
                    </div>
                    
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:25px; margin-bottom:20px;">
                        <div>
                            <h3 style="color:#333; border-bottom:2px solid <?php echo esc_attr( $mtcam_cam['color'] ); ?>; padding-bottom:8px;">💻 <?php esc_html_e( 'Device', 'my-trail-camera' ); ?></h3>
                            <table style="width:100%; font-size:14px;">
								<tr><td style="padding:8px 0; font-weight:bold;"><?php esc_html_e( 'Camera:', 'my-trail-camera' ); ?></td><td><span style="background:<?php echo esc_attr( $mtcam_cam['color'] ); ?>; color:#fff; padding:4px 10px; border-radius:4px;"><?php echo esc_html( $mtcam_cam['name'] ); ?></span></td></tr>
                                <tr><td style="padding:8px 0; font-weight:bold;"><?php esc_html_e( 'File:', 'my-trail-camera' ); ?></td><td><code><?php echo esc_html($mtcam_log->file_name); ?></code></td></tr>
                                <tr><td style="padding:8px 0; font-weight:bold;">OS:</td><td><?php echo esc_html($mtcam_log->os_info); ?></td></tr>
                                <tr><td style="padding:8px 0; font-weight:bold;"><?php esc_html_e( 'Display:', 'my-trail-camera' ); ?></td><td><?php echo esc_html($mtcam_log->screen_res); ?></td></tr>
                            </table>
                        </div>
                        
                        <div>
                            <h3 style="color:#333; border-bottom:2px solid <?php echo esc_attr( $mtcam_cam['color'] ); ?>; padding-bottom:8px;">🌍 <?php esc_html_e( 'Location', 'my-trail-camera' ); ?></h3>
                            <table style="width:100%; font-size:14px;">
                                <?php if ($mtcam_show_ip == 'yes'): ?>
                                <tr><td style="padding:8px 0; font-weight:bold;">IP:</td><td><code><?php echo esc_html($mtcam_log->ip); ?></code></td></tr>
                                <tr><td style="padding:8px 0; font-weight:bold;">ISP:</td><td><?php echo esc_html($mtcam_log->isp_info); ?></td></tr>
                                <?php endif; ?>
                                <tr><td style="padding:8px 0; font-weight:bold;">GPS:</td><td><?php echo $mtcam_log->lat != '?' ? esc_html("{$mtcam_log->lat}, {$mtcam_log->lon}") : esc_html__( 'Not available', 'my-trail-camera' ); ?></td></tr>
                                <?php if ($mtcam_log->lat != '?' && $mtcam_log->lon != '?'): ?>
                                <tr><td colspan="2" style="padding:12px 0;">
									<a href="<?php echo esc_url( "https://www.google.com/maps/search/?api=1&query=" . $mtcam_log->lat . "," . $mtcam_log->lon ); ?>" target="_blank"
                                      
									   style="display:inline-block; background:<?php echo esc_attr( $mtcam_cam['color'] ); ?>; color:#fff; padding:10px 20px; border-radius:5px; text-decoration:none;">
                                        📍 <?php esc_html_e( 'Open in Google Maps', 'my-trail-camera' ); ?>
                                    </a>
                                </td></tr>
                                <?php endif; ?>
                            </table>
                        </div>
                    </div>
                    
                    <div style="text-align:center; margin-top:25px;">
                        <button data-mtcam-public-close="<?php echo (int) $mtcam_log->id; ?>"
                                style="cursor:pointer; padding:12px 30px; background:#666; color:#fff; border:none; border-radius:6px; font-size:15px;">
                            <?php esc_html_e( '← Close', 'my-trail-camera' ); ?>
                        </button>
                    </div>
                </div>
                
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<?php
$mtcam_public_logs_css = '@keyframes thorFadeIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}'
    . '.mtcam-public-card:hover{transform:translateY(-5px)}';
wp_register_style( 'mtc-public-logs', false, array(), MTCAM_VERSION );
wp_enqueue_style( 'mtc-public-logs' );
wp_add_inline_style( 'mtc-public-logs', $mtcam_public_logs_css );
?>

<?php
wp_register_script( 'mtcam-public', false, array(), MTCAM_VERSION, true );
wp_enqueue_script( 'mtcam-public' );
wp_add_inline_script( 'mtcam-public', '(function(){' .
    'var container=document.getElementById("mtcam-container");' .
    'if(!container)return;' .
    'function thorToggleDetail(id){' .
        'var detail=document.getElementById("mtcam-detail-"+id);' .
        'if(!detail)return;' .
        'var allDetails=container.querySelectorAll("[id^=\\"mtcam-detail-\\"]");' .
        'for(var i=0;i<allDetails.length;i++){' .
            'if(allDetails[i].id!=="mtcam-detail-"+id)allDetails[i].style.display="none";' .
        '}' .
        'detail.style.display=detail.style.display==="none"?"block":"none";' .
        'if(detail.style.display==="block")detail.scrollIntoView({behavior:"smooth",block:"start"});' .
    '}' .
    'container.addEventListener("click",function(e){' .
        'var card=e.target.closest("[data-mtcam-public-toggle]");' .
        'if(card&&!e.target.closest("a, button")){thorToggleDetail(card.getAttribute("data-mtcam-public-toggle"));return;}' .
        'var close=e.target.closest("[data-mtcam-public-close]");' .
        'if(close){e.stopPropagation();thorToggleDetail(close.getAttribute("data-mtcam-public-close"));}' .
    '});' .
'})();' );
?>
