<?php
/**
 * Land Conflict Detection Page
 * Automatically detects land changes that may indicate conflicts
 */

session_start();
define('APP_RUNNING', true);

require_once 'db_connect.php';
require_once 'includes/SatelliteService.php';

// Check login
if (!isset($_SESSION['user_id'])) {
    header('Location: login');
    exit;
}

$user_id = $_SESSION['user_id'];
$satelliteService = new SatelliteService($conn);

// Handle actions
$message = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';

    if ($action === 'scan_land' && isset($_POST['land_id'])) {
        $land_id = intval($_POST['land_id']);

        // Verify ownership
        $check = mysqli_query($conn, "SELECT id FROM lands WHERE id = $land_id AND user_id = $user_id");
        if (mysqli_num_rows($check) > 0) {
            // Run detection
            $result = $satelliteService->hasApiKey()
                ? $satelliteService->detectChangesReal($land_id)
                : $satelliteService->simulateChangeDetection($land_id);

            if (isset($result['detected']) && $result['detected']) {
                $message = "Mabadiliko yamegunduliwa! Aina: " . SatelliteService::getChangeTypeLabel($result['change_type']);
            } else {
                $message = $result['message'] ?? "Hakuna mabadiliko makubwa yaliyogunduliwa.";
            }
        } else {
            $error = "Ardhi haipatikani au sio yako.";
        }
    }

    if ($action === 'resolve_conflict' && isset($_POST['change_id'])) {
        $change_id = intval($_POST['change_id']);
        $notes = mysqli_real_escape_string($conn, $_POST['notes'] ?? '');
        $status = $_POST['status'] ?? 'resolved';

        // Verify the change belongs to user's land
        $check = mysqli_query($conn, "
            SELECT sc.id FROM satellite_changes sc
            JOIN lands l ON sc.land_id = l.id
            WHERE sc.id = $change_id AND l.user_id = $user_id
        ");

        if (mysqli_num_rows($check) > 0) {
            $satelliteService->reviewChange($change_id, $user_id, $status, $notes);
            $message = "Hali imesasishwa kikamilifu.";
        } else {
            $error = "Taarifa haipatikani.";
        }
    }
}

// Get user's lands
$lands_result = mysqli_query($conn, "
    SELECT l.id, l.land_name, l.area_sqm, l.village_id,
           sm.monitoring_status, sm.last_check_date, sm.next_check_date,
           (SELECT COUNT(*) FROM satellite_changes sc WHERE sc.land_id = l.id AND sc.status = 'detected') as pending_alerts
    FROM lands l
    LEFT JOIN satellite_monitoring sm ON l.id = sm.land_id
    WHERE l.user_id = $user_id
    ORDER BY pending_alerts DESC, l.land_name
");

$lands = [];
while ($row = mysqli_fetch_assoc($lands_result)) {
    $lands[] = $row;
}

// Get recent conflicts/changes
$conflicts_result = mysqli_query($conn, "
    SELECT sc.*, l.land_name
    FROM satellite_changes sc
    JOIN lands l ON sc.land_id = l.id
    WHERE l.user_id = $user_id
    ORDER BY sc.detection_date DESC
    LIMIT 20
");

$conflicts = [];
while ($row = mysqli_fetch_assoc($conflicts_result)) {
    $conflicts[] = $row;
}

// Count stats
$total_lands = count($lands);
$active_monitoring = 0;
$pending_conflicts = 0;
$critical_conflicts = 0;

foreach ($lands as $land) {
    if ($land['monitoring_status'] === 'active') $active_monitoring++;
    $pending_conflicts += intval($land['pending_alerts']);
}

foreach ($conflicts as $conflict) {
    if ($conflict['status'] === 'detected' && in_array($conflict['severity'], ['high', 'critical'])) {
        $critical_conflicts++;
    }
}

$page_title = "Gundua Migogoro ya Ardhi";
?>
<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $page_title; ?> - Land Secure</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <?php include 'includes/sidebar.php'; ?>

    <main class="app-main">
        <!-- Page Header -->
        <div class="page-header">
            <div class="header-content">
                <h1><i class="fas fa-search-location"></i> Gundua Migogoro ya Ardhi</h1>
                <p>Mfumo wa kiotomatiki wa kugundua mabadiliko kwenye ardhi yako</p>
            </div>
            <div class="header-actions">
                <button class="btn btn-primary" onclick="scanAllLands()">
                    <i class="fas fa-satellite-dish"></i> Scan Ardhi Zote
                </button>
            </div>
        </div>

        <?php if ($message): ?>
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($message); ?>
        </div>
        <?php endif; ?>

        <?php if ($error): ?>
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($error); ?>
        </div>
        <?php endif; ?>

        <!-- Detection Types Info -->
        <div class="detection-types">
            <h3><i class="fas fa-info-circle"></i> Aina za Mabadiliko Tunayogundua</h3>
            <div class="detection-grid">
                <div class="detection-card">
                    <div class="detection-icon building">
                        <i class="fas fa-home"></i>
                    </div>
                    <div class="detection-info">
                        <h4>Jengo Jipya</h4>
                        <p>Ujenzi mpya ndani ya ardhi yako</p>
                    </div>
                </div>
                <div class="detection-card">
                    <div class="detection-icon farming">
                        <i class="fas fa-tractor"></i>
                    </div>
                    <div class="detection-info">
                        <h4>Kilimo Kipya</h4>
                        <p>Shughuli za kilimo bila ruhusa</p>
                    </div>
                </div>
                <div class="detection-card">
                    <div class="detection-icon clearing">
                        <i class="fas fa-tree"></i>
                    </div>
                    <div class="detection-info">
                        <h4>Kukata Miti</h4>
                        <p>Kusafisha ardhi au kukata miti</p>
                    </div>
                </div>
                <div class="detection-card">
                    <div class="detection-icon boundary">
                        <i class="fas fa-expand-arrows-alt"></i>
                    </div>
                    <div class="detection-info">
                        <h4>Uvamizi wa Mpaka</h4>
                        <p>Kupanuka kwa mpaka bila ruhusa</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon lands">
                    <i class="fas fa-map"></i>
                </div>
                <div class="stat-info">
                    <span class="stat-value"><?php echo $total_lands; ?></span>
                    <span class="stat-label">Ardhi Zangu</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon monitoring">
                    <i class="fas fa-satellite"></i>
                </div>
                <div class="stat-info">
                    <span class="stat-value"><?php echo $active_monitoring; ?></span>
                    <span class="stat-label">Zinafuatiliwa</span>
                </div>
            </div>
            <div class="stat-card warning">
                <div class="stat-icon conflicts">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="stat-info">
                    <span class="stat-value"><?php echo $pending_conflicts; ?></span>
                    <span class="stat-label">Mabadiliko Yanasubiri</span>
                </div>
            </div>
            <div class="stat-card danger">
                <div class="stat-icon critical">
                    <i class="fas fa-radiation"></i>
                </div>
                <div class="stat-info">
                    <span class="stat-value"><?php echo $critical_conflicts; ?></span>
                    <span class="stat-label">Hatari Kubwa</span>
                </div>
            </div>
        </div>

        <!-- My Lands for Scanning -->
        <div class="content-card">
            <div class="card-header">
                <h2><i class="fas fa-search"></i> Scan Ardhi Yangu</h2>
            </div>
            <div class="card-body">
                <?php if (empty($lands)): ?>
                <div class="empty-state">
                    <i class="fas fa-map-marker-alt"></i>
                    <h3>Hakuna Ardhi</h3>
                    <p>Huna ardhi iliyosajiliwa bado.</p>
                    <a href="add-land" class="btn btn-primary">Sajili Ardhi Mpya</a>
                </div>
                <?php else: ?>
                <div class="lands-scan-grid">
                    <?php foreach ($lands as $land): ?>
                    <div class="land-scan-card <?php echo $land['pending_alerts'] > 0 ? 'has-alerts' : ''; ?>">
                        <div class="land-info">
                            <h4><?php echo htmlspecialchars($land['land_name']); ?></h4>
                            <p>
                                <?php if ($land['area_sqm']): ?>
                                <span><i class="fas fa-ruler-combined"></i> <?php echo number_format($land['area_sqm']); ?> m²</span>
                                <?php endif; ?>
                            </p>
                            <?php if ($land['monitoring_status'] === 'active'): ?>
                            <span class="status-badge active">
                                <i class="fas fa-check-circle"></i> Inafuatiliwa
                            </span>
                            <?php else: ?>
                            <span class="status-badge inactive">
                                <i class="fas fa-minus-circle"></i> Haifuatiliwi
                            </span>
                            <?php endif; ?>
                        </div>
                        <div class="land-alerts">
                            <?php if ($land['pending_alerts'] > 0): ?>
                            <div class="alert-count">
                                <span class="count"><?php echo $land['pending_alerts']; ?></span>
                                <span class="label">Mabadiliko</span>
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="land-actions">
                            <form method="POST" style="display: inline;">
                                <input type="hidden" name="action" value="scan_land">
                                <input type="hidden" name="land_id" value="<?php echo $land['id']; ?>">
                                <button type="submit" class="btn btn-scan">
                                    <i class="fas fa-radar"></i> Scan Sasa
                                </button>
                            </form>
                            <a href="view-land/<?php echo $land['id']; ?>" class="btn btn-outline">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Recent Conflicts -->
        <div class="content-card">
            <div class="card-header">
                <h2><i class="fas fa-history"></i> Mabadiliko Yaliyogunduliwa</h2>
            </div>
            <div class="card-body">
                <?php if (empty($conflicts)): ?>
                <div class="empty-state">
                    <i class="fas fa-shield-check"></i>
                    <h3>Hakuna Mabadiliko</h3>
                    <p>Ardhi zako ziko salama. Hakuna mabadiliko yaliyogunduliwa.</p>
                </div>
                <?php else: ?>
                <div class="conflicts-list">
                    <?php foreach ($conflicts as $conflict): ?>
                    <div class="conflict-item severity-<?php echo $conflict['severity']; ?> status-<?php echo $conflict['status']; ?>">
                        <div class="conflict-icon">
                            <?php
                            $icon = 'question-circle';
                            switch ($conflict['change_type']) {
                                case 'new_structure': $icon = 'home'; break;
                                case 'vegetation_loss':
                                case 'land_clearing': $icon = 'tree'; break;
                                case 'vegetation_gain': $icon = 'seedling'; break;
                                case 'soil_disturbance': $icon = 'tractor'; break;
                                case 'boundary_encroachment': $icon = 'expand-arrows-alt'; break;
                                case 'fire_damage': $icon = 'fire'; break;
                                case 'flooding': $icon = 'water'; break;
                                case 'erosion': $icon = 'mountain'; break;
                            }
                            ?>
                            <i class="fas fa-<?php echo $icon; ?>"></i>
                        </div>
                        <div class="conflict-details">
                            <h4><?php echo SatelliteService::getChangeTypeLabel($conflict['change_type']); ?></h4>
                            <p class="land-name">
                                <i class="fas fa-map-marker-alt"></i>
                                <?php echo htmlspecialchars($conflict['land_name']); ?>
                            </p>
                            <p class="conflict-meta">
                                <span class="severity severity-<?php echo $conflict['severity']; ?>">
                                    <?php echo SatelliteService::getSeverityLabel($conflict['severity']); ?>
                                </span>
                                <span class="date">
                                    <i class="fas fa-clock"></i>
                                    <?php echo date('d M Y, H:i', strtotime($conflict['detection_date'])); ?>
                                </span>
                            </p>
                            <?php if ($conflict['affected_percentage']): ?>
                            <p class="affected">
                                <i class="fas fa-percentage"></i>
                                Eneo lililoathirika: <?php echo number_format($conflict['affected_percentage'], 1); ?>%
                            </p>
                            <?php endif; ?>
                        </div>
                        <div class="conflict-status">
                            <?php if ($conflict['status'] === 'detected'): ?>
                            <span class="badge badge-warning">Inasubiri</span>
                            <?php elseif ($conflict['status'] === 'confirmed'): ?>
                            <span class="badge badge-danger">Imethibitishwa</span>
                            <?php elseif ($conflict['status'] === 'false_positive'): ?>
                            <span class="badge badge-secondary">Kosa la Mfumo</span>
                            <?php elseif ($conflict['status'] === 'resolved'): ?>
                            <span class="badge badge-success">Imetatuliwa</span>
                            <?php endif; ?>
                        </div>
                        <div class="conflict-actions">
                            <?php if ($conflict['status'] === 'detected'): ?>
                            <button class="btn btn-sm btn-success" onclick="resolveConflict(<?php echo $conflict['id']; ?>, 'false_positive')">
                                <i class="fas fa-times"></i> Kosa
                            </button>
                            <button class="btn btn-sm btn-warning" onclick="resolveConflict(<?php echo $conflict['id']; ?>, 'confirmed')">
                                <i class="fas fa-check"></i> Thibitisha
                            </button>
                            <?php endif; ?>
                            <a href="view-land/<?php echo $conflict['land_id']; ?>" class="btn btn-sm btn-outline">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Alert Example -->
        <div class="alert-example">
            <div class="phone-mockup">
                <div class="phone-screen">
                    <div class="notification-preview">
                        <div class="notif-icon">
                            <i class="fas fa-bell"></i>
                        </div>
                        <div class="notif-content">
                            <strong>LandSecure Alert</strong>
                            <p>Mabadiliko yamegunduliwa kwenye ardhi yako "Shamba la Nyumbani". Jengo jipya limegunduliwa.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert-info">
                <h3>Utaarifiwa Moja kwa Moja</h3>
                <p>Unapowasha ufuatiliaji wa satellite, utapokea arifa moja kwa moja unapogundulika mabadiliko yoyote kwenye ardhi yako:</p>
                <ul>
                    <li><i class="fas fa-mobile-alt"></i> Arifa kwenye App</li>
                    <li><i class="fas fa-sms"></i> SMS kwa hatari kubwa</li>
                    <li><i class="fas fa-envelope"></i> Email na ripoti kamili</li>
                </ul>
            </div>
        </div>
    </main>

    <!-- Resolve Modal -->
    <div class="modal-overlay" id="resolveModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-clipboard-check"></i> Tatua Mgogoro</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <form method="POST" id="resolveForm">
                <input type="hidden" name="action" value="resolve_conflict">
                <input type="hidden" name="change_id" id="resolve_change_id">
                <input type="hidden" name="status" id="resolve_status">
                <div class="form-group">
                    <label>Maelezo:</label>
                    <textarea name="notes" rows="3" placeholder="Andika maelezo yako hapa..."></textarea>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Ghairi</button>
                    <button type="submit" class="btn btn-primary">Wasilisha</button>
                </div>
            </form>
        </div>
    </div>

    <style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .header-content h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .header-content h1 i {
        color: #ef4444;
    }

    .header-content p {
        color: #64748b;
        margin: 4px 0 0 0;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-primary {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    }

    .btn-outline {
        background: transparent;
        border: 2px solid #e2e8f0;
        color: #64748b;
    }

    .btn-outline:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .btn-scan {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 13px;
    }

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

    .alert-success {
        background: #dcfce7;
        color: #166534;
    }

    .alert-danger {
        background: #fee2e2;
        color: #991b1b;
    }

    /* Detection Types */
    .detection-types {
        background: white;
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .detection-types h3 {
        font-size: 16px;
        color: #1e293b;
        margin: 0 0 20px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .detection-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }

    .detection-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }

    .detection-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .detection-icon.building {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
        color: #ef4444;
    }

    .detection-icon.farming {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
        color: #22c55e;
    }

    .detection-icon.clearing {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));
        color: #f97316;
    }

    .detection-icon.boundary {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
        color: #8b5cf6;
    }

    .detection-info h4 {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }

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

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

    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

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

    .stat-card.danger {
        border-left: 4px solid #ef4444;
    }

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

    .stat-icon.lands {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.1));
        color: #667eea;
    }

    .stat-icon.monitoring {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
        color: #22c55e;
    }

    .stat-icon.conflicts {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));
        color: #f97316;
    }

    .stat-icon.critical {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
        color: #ef4444;
    }

    .stat-value {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: #1e293b;
    }

    .stat-label {
        font-size: 13px;
        color: #64748b;
    }

    /* Content Cards */
    .content-card {
        background: white;
        border-radius: 16px;
        margin-bottom: 24px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .card-header {
        padding: 20px 24px;
        border-bottom: 1px solid #e2e8f0;
    }

    .card-header h2 {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .card-body {
        padding: 24px;
    }

    /* Lands Scan Grid */
    .lands-scan-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
    }

    .land-scan-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }

    .land-scan-card.has-alerts {
        border-color: #f97316;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(249, 115, 22, 0.02));
    }

    .land-scan-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .land-info {
        flex: 1;
    }

    .land-info h4 {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 4px 0;
    }

    .land-info p {
        font-size: 13px;
        color: #64748b;
        margin: 0;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        margin-top: 8px;
    }

    .status-badge.active {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
    }

    .status-badge.inactive {
        background: rgba(100, 116, 139, 0.1);
        color: #64748b;
    }

    .land-alerts {
        text-align: center;
    }

    .alert-count {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        padding: 8px 16px;
        border-radius: 10px;
    }

    .alert-count .count {
        display: block;
        font-size: 24px;
        font-weight: 700;
    }

    .alert-count .label {
        font-size: 11px;
        opacity: 0.9;
    }

    .land-actions {
        display: flex;
        gap: 8px;
    }

    /* Conflicts List */
    .conflicts-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .conflict-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 12px;
        border-left: 4px solid #64748b;
    }

    .conflict-item.severity-low {
        border-left-color: #22c55e;
    }

    .conflict-item.severity-medium {
        border-left-color: #f97316;
    }

    .conflict-item.severity-high {
        border-left-color: #ef4444;
    }

    .conflict-item.severity-critical {
        border-left-color: #dc2626;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
    }

    .conflict-item.status-resolved {
        opacity: 0.6;
    }

    .conflict-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .conflict-details {
        flex: 1;
    }

    .conflict-details h4 {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 4px 0;
    }

    .conflict-details .land-name {
        font-size: 13px;
        color: #64748b;
        margin: 0 0 8px 0;
    }

    .conflict-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        margin: 0;
    }

    .severity {
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 600;
    }

    .severity-low {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
    }

    .severity-medium {
        background: rgba(249, 115, 22, 0.1);
        color: #f97316;
    }

    .severity-high {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .severity-critical {
        background: rgba(220, 38, 38, 0.2);
        color: #dc2626;
    }

    .conflict-status .badge {
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-warning {
        background: rgba(249, 115, 22, 0.1);
        color: #f97316;
    }

    .badge-danger {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

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

    .badge-secondary {
        background: rgba(100, 116, 139, 0.1);
        color: #64748b;
    }

    .conflict-actions {
        display: flex;
        gap: 8px;
    }

    .btn-success {
        background: #22c55e;
        color: white;
    }

    .btn-warning {
        background: #f97316;
        color: white;
    }

    .btn-secondary {
        background: #64748b;
        color: white;
    }

    /* Alert Example */
    .alert-example {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 16px;
        padding: 32px;
        display: flex;
        align-items: center;
        gap: 40px;
        color: white;
        margin-bottom: 24px;
    }

    .phone-mockup {
        width: 200px;
        min-width: 200px;
        background: #1e293b;
        border-radius: 24px;
        padding: 12px;
    }

    .phone-screen {
        background: white;
        border-radius: 16px;
        padding: 16px;
    }

    .notification-preview {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .notif-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .notif-content strong {
        display: block;
        font-size: 13px;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .notif-content p {
        font-size: 11px;
        color: #64748b;
        margin: 0;
        line-height: 1.4;
    }

    .alert-info h3 {
        font-size: 22px;
        margin: 0 0 12px 0;
    }

    .alert-info p {
        opacity: 0.9;
        margin: 0 0 16px 0;
    }

    .alert-info ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .alert-info li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 48px 24px;
    }

    .empty-state i {
        font-size: 64px;
        color: #cbd5e1;
        margin-bottom: 16px;
    }

    .empty-state h3 {
        font-size: 18px;
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .empty-state p {
        color: #64748b;
        margin: 0 0 20px 0;
    }

    /* Modal */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1100;
        align-items: center;
        justify-content: center;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 16px;
        width: 90%;
        max-width: 400px;
        overflow: hidden;
    }

    .modal-header {
        padding: 20px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .modal-close {
        width: 32px;
        height: 32px;
        border: none;
        background: #f1f5f9;
        border-radius: 8px;
        cursor: pointer;
        font-size: 20px;
    }

    .form-group {
        padding: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 14px;
        resize: vertical;
    }

    .modal-actions {
        padding: 20px;
        border-top: 1px solid #e2e8f0;
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    @media (max-width: 768px) {
        .alert-example {
            flex-direction: column;
            text-align: center;
        }

        .phone-mockup {
            width: 180px;
            min-width: 180px;
        }

        .conflict-item {
            flex-wrap: wrap;
        }

        .conflict-actions {
            width: 100%;
            justify-content: flex-end;
            margin-top: 12px;
        }

        .lands-scan-grid {
            grid-template-columns: 1fr;
        }
    }
    </style>

    <script>
    function scanAllLands() {
        if (confirm('Ungependa kuscan ardhi zote? Hii inaweza kuchukua muda.')) {
            // Submit forms sequentially
            const forms = document.querySelectorAll('form[style="display: inline;"]');
            let index = 0;

            function submitNext() {
                if (index < forms.length) {
                    // For demo, just reload with a message
                    alert('Scan inaendelea... Ardhi ' + (index + 1) + ' ya ' + forms.length);
                    index++;
                    setTimeout(submitNext, 500);
                } else {
                    location.reload();
                }
            }

            submitNext();
        }
    }

    function resolveConflict(changeId, status) {
        document.getElementById('resolve_change_id').value = changeId;
        document.getElementById('resolve_status').value = status;
        document.getElementById('resolveModal').classList.add('active');
    }

    function closeModal() {
        document.getElementById('resolveModal').classList.remove('active');
    }

    // Close modal on outside click
    document.getElementById('resolveModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
    </script>
</body>
</html>
