<?php
/**
 * Overlap Alerts
 * View and manage land overlap alerts
 */

define('APP_RUNNING', true);
require_once 'db_connect.php';
require_once 'includes/auth.php';

initSecureSession();

if(!isAuthenticated() || !validateSession()) {
    header('Location: login');
    exit;
}

$user_id = $_SESSION['user_id'];
$user_role = $_SESSION['role'] ?? 'user';

// Mark as resolved
if(isset($_GET['resolve'])) {
    $alert_id = intval($_GET['resolve']);
    mysqli_query($conn, "UPDATE overlap_alerts SET is_resolved = 1 WHERE id = $alert_id");
    header('Location: alerts?success=Alert marked as resolved');
    exit;
}

// Get alerts for user's lands
$alerts = mysqli_query($conn, "
    SELECT oa.*, l1.land_name as land1_name, l2.land_name as land2_name,
           u1.username as user1, u2.username as user2, u1.full_name as user1_name, u2.full_name as user2_name
    FROM overlap_alerts oa
    JOIN lands l1 ON oa.land_id_1 = l1.id
    JOIN lands l2 ON oa.land_id_2 = l2.id
    JOIN users u1 ON l1.user_id = u1.id
    JOIN users u2 ON l2.user_id = u2.id
    WHERE l1.user_id = $user_id OR l2.user_id = $user_id
    ORDER BY oa.is_resolved ASC, oa.created_at DESC
");

$total_alerts = mysqli_num_rows($alerts);
$active_alerts = mysqli_fetch_assoc(mysqli_query($conn, "
    SELECT COUNT(*) as c FROM overlap_alerts oa
    JOIN lands l1 ON oa.land_id_1 = l1.id
    JOIN lands l2 ON oa.land_id_2 = l2.id
    WHERE (l1.user_id = $user_id OR l2.user_id = $user_id) AND oa.is_resolved = 0
"))['c'];
$resolved_alerts = $total_alerts - $active_alerts;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#1a1f2e">
    <title>Overlap Alerts - Land Secure</title>
    <link rel="manifest" href="manifest.json">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/font-awesome/css/all.min.css">
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <?php include 'includes/sidebar.php'; ?>

    <main class="app-main">
        <!-- Page Header -->
        <div class="page-header">
            <div class="page-header-content">
                <div class="page-title">
                    <h1><i class="fas fa-bell"></i> Overlap Alerts</h1>
                    <p>Monitor and resolve land boundary conflicts</p>
                </div>
            </div>
        </div>

        <?php if(isset($_GET['success'])): ?>
        <div class="alert-notification success">
            <i class="fas fa-check-circle"></i>
            <span><?php echo htmlspecialchars($_GET['success']); ?></span>
            <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
        </div>
        <?php endif; ?>

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon total">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="stat-info">
                    <h3><?php echo $total_alerts; ?></h3>
                    <p>Total Alerts</p>
                </div>
            </div>
            <div class="stat-card <?php echo $active_alerts > 0 ? 'warning' : ''; ?>">
                <div class="stat-icon active">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="stat-info">
                    <h3><?php echo $active_alerts; ?></h3>
                    <p>Active Alerts</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon resolved">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-info">
                    <h3><?php echo $resolved_alerts; ?></h3>
                    <p>Resolved</p>
                </div>
            </div>
        </div>

        <!-- Info Card -->
        <div class="info-card">
            <div class="info-icon">
                <i class="fas fa-info-circle"></i>
            </div>
            <div class="info-content">
                <h4>About Overlap Detection</h4>
                <p>The system uses advanced polygon geometry to detect when land parcels overlap. Alerts are generated when land boundaries intersect, one parcel is inside another, or beacon points fall within existing land boundaries. All overlap attempts are logged for investigation.</p>
            </div>
        </div>

        <?php if($total_alerts > 0): ?>
        <!-- Alerts List -->
        <div class="alerts-list">
            <?php while($alert = mysqli_fetch_assoc($alerts)): ?>
            <div class="alert-item <?php echo $alert['is_resolved'] ? 'resolved' : 'active'; ?>">
                <div class="alert-status-bar"></div>
                <div class="alert-content">
                    <div class="alert-header">
                        <div class="alert-icon-box">
                            <?php if($alert['is_resolved']): ?>
                            <i class="fas fa-check"></i>
                            <?php else: ?>
                            <i class="fas fa-exclamation-triangle"></i>
                            <?php endif; ?>
                        </div>
                        <div class="alert-title">
                            <div class="alert-badges">
                                <?php if($alert['is_resolved']): ?>
                                <span class="badge resolved"><i class="fas fa-check"></i> Resolved</span>
                                <?php else: ?>
                                <span class="badge active"><i class="fas fa-exclamation"></i> Active</span>
                                <?php endif; ?>
                            </div>
                            <h3>Potential Overlap Detected</h3>
                        </div>
                        <?php if(!$alert['is_resolved']): ?>
                        <a href="alerts?resolve=<?php echo $alert['id']; ?>" class="btn-resolve"
                           onclick="return confirm('Mark this alert as resolved?')">
                            <i class="fas fa-check"></i>
                            <span>Mark Resolved</span>
                        </a>
                        <?php endif; ?>
                    </div>

                    <p class="alert-message"><?php echo htmlspecialchars($alert['alert_message']); ?></p>

                    <div class="lands-involved">
                        <div class="land-tag">
                            <div class="land-tag-icon"><i class="fas fa-map"></i></div>
                            <div class="land-tag-info">
                                <span class="land-name"><?php echo htmlspecialchars($alert['land1_name']); ?></span>
                                <span class="land-owner"><?php echo htmlspecialchars($alert['user1_name'] ?: $alert['user1']); ?></span>
                            </div>
                        </div>
                        <div class="overlap-indicator">
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="land-tag">
                            <div class="land-tag-icon"><i class="fas fa-map"></i></div>
                            <div class="land-tag-info">
                                <span class="land-name"><?php echo htmlspecialchars($alert['land2_name']); ?></span>
                                <span class="land-owner"><?php echo htmlspecialchars($alert['user2_name'] ?: $alert['user2']); ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="alert-footer">
                        <span class="alert-date">
                            <i class="fas fa-calendar"></i>
                            Detected: <?php echo date('M d, Y H:i', strtotime($alert['created_at'])); ?>
                        </span>
                        <div class="alert-actions">
                            <a href="<?php echo url('land/' . $alert['land_id_1']); ?>" class="btn-view-land">
                                <i class="fas fa-eye"></i> View Land 1
                            </a>
                            <a href="<?php echo url('land/' . $alert['land_id_2']); ?>" class="btn-view-land">
                                <i class="fas fa-eye"></i> View Land 2
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php else: ?>
        <!-- Empty State -->
        <div class="empty-state-card">
            <div class="empty-icon success">
                <i class="fas fa-check-circle"></i>
            </div>
            <h3>No Overlap Alerts</h3>
            <p>All your lands have no detected overlaps with other registered parcels. Keep your boundaries clear!</p>
            <a href="<?php echo url('lands'); ?>" class="btn-action primary">
                <i class="fas fa-map"></i>
                <span>View My Lands</span>
            </a>
        </div>
        <?php endif; ?>
    </main>

    <style>
    /* Page Header */
    .page-header {
        background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        color: white;
    }

    .page-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .page-title h1 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .page-title p {
        margin: 0;
        opacity: 0.9;
        font-size: 15px;
    }

    /* Alert notification */
    .alert-notification {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 24px;
    }

    .alert-notification.success {
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
    }

    .alert-notification button {
        margin-left: auto;
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
    }

    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .stat-card.warning {
        border-left: 4px solid #f59e0b;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
    }

    .stat-icon.total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.active {
        background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    }

    .stat-icon.resolved {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }

    .stat-info h3 {
        font-size: 28px;
        font-weight: 700;
        margin: 0;
        color: #1e293b;
    }

    .stat-info p {
        margin: 4px 0 0 0;
        color: #64748b;
        font-size: 14px;
    }

    /* Info Card */
    .info-card {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
        background: linear-gradient(135deg, rgba(245, 175, 25, 0.1) 0%, rgba(241, 39, 17, 0.1) 100%);
        border-radius: 16px;
        margin-bottom: 30px;
    }

    .info-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        flex-shrink: 0;
    }

    .info-content h4 {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 6px 0;
    }

    .info-content p {
        font-size: 14px;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
    }

    /* Alerts List */
    .alerts-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .alert-item {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        display: flex;
        transition: all 0.3s ease;
    }

    .alert-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .alert-status-bar {
        width: 6px;
        flex-shrink: 0;
    }

    .alert-item.active .alert-status-bar {
        background: linear-gradient(180deg, #f5af19 0%, #f12711 100%);
    }

    .alert-item.resolved .alert-status-bar {
        background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    }

    .alert-item.resolved {
        opacity: 0.7;
    }

    .alert-content {
        flex: 1;
        padding: 24px;
    }

    .alert-header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
    }

    .alert-icon-box {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .alert-item.active .alert-icon-box {
        background: linear-gradient(135deg, rgba(245, 175, 25, 0.15) 0%, rgba(241, 39, 17, 0.15) 100%);
        color: #f12711;
    }

    .alert-item.resolved .alert-icon-box {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
    }

    .alert-title {
        flex: 1;
    }

    .alert-badges {
        margin-bottom: 6px;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge.active {
        background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
        color: white;
    }

    .badge.resolved {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
    }

    .alert-title h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }

    .btn-resolve {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        border-radius: 10px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-resolve:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
        color: white;
        text-decoration: none;
    }

    .alert-message {
        font-size: 14px;
        color: #475569;
        margin: 0 0 20px 0;
        line-height: 1.6;
    }

    /* Lands Involved */
    .lands-involved {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 14px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .land-tag {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 200px;
    }

    .land-tag-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
    }

    .land-tag-info {
        display: flex;
        flex-direction: column;
    }

    .land-name {
        font-weight: 600;
        color: #1e293b;
        font-size: 14px;
    }

    .land-owner {
        font-size: 12px;
        color: #64748b;
    }

    .overlap-indicator {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(241, 39, 17, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f12711;
        font-size: 14px;
    }

    .alert-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid #f1f5f9;
        flex-wrap: wrap;
        gap: 12px;
    }

    .alert-date {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #94a3b8;
    }

    .alert-actions {
        display: flex;
        gap: 10px;
    }

    .btn-view-land {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: #f1f5f9;
        color: #475569;
        border-radius: 8px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-view-land:hover {
        background: #e2e8f0;
        color: #1e293b;
        text-decoration: none;
    }

    /* Empty State */
    .empty-state-card {
        background: white;
        border-radius: 20px;
        padding: 60px 40px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .empty-icon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        font-size: 40px;
    }

    .empty-icon.success {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
    }

    .empty-state-card h3 {
        font-size: 22px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 12px 0;
    }

    .empty-state-card p {
        color: #64748b;
        margin: 0 0 24px 0;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        border-radius: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-action.primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        text-decoration: none;
        color: white;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .page-header {
            padding: 20px;
        }

        .page-title h1 {
            font-size: 22px;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .alert-header {
            flex-direction: column;
        }

        .btn-resolve {
            width: 100%;
            justify-content: center;
        }

        .lands-involved {
            flex-direction: column;
            align-items: stretch;
        }

        .land-tag {
            min-width: auto;
        }

        .overlap-indicator {
            align-self: center;
        }

        .alert-footer {
            flex-direction: column;
            align-items: flex-start;
        }

        .alert-actions {
            width: 100%;
            flex-direction: column;
        }

        .btn-view-land {
            justify-content: center;
        }
    }
    </style>

    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/offline-storage.js"></script>

    <script>
    // Register Service Worker
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js');
    }
    </script>
</body>
</html>
