<?php
/**
 * Shared Lands
 * View all lands that have been shared
 */

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';
$user_email = $_SESSION['email'] ?? '';

// Ensure land_shares table exists
$tableCheck = mysqli_query($conn, "SHOW TABLES LIKE 'land_shares'");
if (mysqli_num_rows($tableCheck) == 0) {
    mysqli_query($conn, "
        CREATE TABLE `land_shares` (
            `id` INT(11) NOT NULL AUTO_INCREMENT,
            `land_id` INT(11) NOT NULL,
            `owner_id` INT(11) NOT NULL,
            `shared_with_email` VARCHAR(255) NOT NULL,
            `shared_with_user_id` INT(11) DEFAULT NULL,
            `share_token` VARCHAR(100) NOT NULL,
            `can_edit` TINYINT(1) DEFAULT 0,
            `message` TEXT DEFAULT NULL,
            `shared_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            `viewed_at` TIMESTAMP NULL,
            `status` ENUM('pending', 'accepted', 'declined', 'revoked') DEFAULT 'pending',
            PRIMARY KEY (`id`),
            UNIQUE KEY `unique_share` (`land_id`, `shared_with_email`),
            KEY `land_id` (`land_id`),
            KEY `owner_id` (`owner_id`),
            KEY `shared_with_user_id` (`shared_with_user_id`),
            KEY `share_token` (`share_token`)
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
    ");
}

// Get all user's lands with share tokens (lands I shared)
$lands = mysqli_query($conn, "SELECT * FROM lands WHERE user_id = $user_id AND share_token IS NOT NULL ORDER BY created_at DESC");
$shared_count = mysqli_num_rows($lands);

// Get lands shared WITH this user (by user_id or by email)
$shared_with_me = [];
$sql = "
    SELECT ls.*, l.land_name, l.total_area, l.area_unit, l.location_address, l.created_at as land_created,
           u.full_name as owner_name, u.email as owner_email, u.phone as owner_phone,
           (SELECT COUNT(*) FROM beacon_points WHERE land_id = l.id) as beacon_count
    FROM land_shares ls
    JOIN lands l ON ls.land_id = l.id
    JOIN users u ON ls.owner_id = u.id
    WHERE (ls.shared_with_user_id = $user_id OR ls.shared_with_email = '$user_email')
    AND ls.status != 'revoked'
    ORDER BY ls.shared_at DESC
";
$result = mysqli_query($conn, $sql);
if ($result) {
    while ($row = mysqli_fetch_assoc($result)) {
        $shared_with_me[] = $row;
    }
}
$received_count = count($shared_with_me);

// Handle accept/decline actions
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action'])) {
    $share_id = intval($_POST['share_id'] ?? 0);

    if ($_POST['action'] == 'accept') {
        mysqli_query($conn, "UPDATE land_shares SET status = 'accepted', shared_with_user_id = $user_id WHERE id = $share_id AND (shared_with_user_id = $user_id OR shared_with_email = '$user_email')");
        header('Location: shared_lands.php?success=Umekubali kushirikiwa ardhi');
        exit;
    } elseif ($_POST['action'] == 'decline') {
        mysqli_query($conn, "UPDATE land_shares SET status = 'declined' WHERE id = $share_id AND (shared_with_user_id = $user_id OR shared_with_email = '$user_email')");
        header('Location: shared_lands.php?success=Umekataa kushirikiwa ardhi');
        exit;
    }
}
?>
<!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>Shared Lands - 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-share-alt"></i> Shared Lands</h1>
                    <p>Manage and share your land parcels with others</p>
                </div>
                <div class="header-actions">
                    <a href="<?php echo url('lands'); ?>" class="btn-action secondary">
                        <i class="fas fa-map"></i>
                        <span>My Lands</span>
                    </a>
                </div>
            </div>
        </div>

        <?php if(isset($_GET['success'])): ?>
        <div class="alert alert-success alert-dismissible fade show" style="border-radius: 12px; margin-bottom: 20px;">
            <i class="fas fa-check-circle mr-2"></i><?php echo htmlspecialchars($_GET['success']); ?>
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
        <?php endif; ?>

        <!-- Tab Navigation -->
        <div class="share-tabs">
            <button class="share-tab active" onclick="switchTab('shared-by-me')">
                <i class="fas fa-share"></i>
                <span>Nimeshiriki / I Shared</span>
                <span class="tab-count"><?php echo $shared_count; ?></span>
            </button>
            <button class="share-tab" onclick="switchTab('shared-with-me')">
                <i class="fas fa-inbox"></i>
                <span>Nimeshirikiwa / Shared With Me</span>
                <span class="tab-count"><?php echo $received_count; ?></span>
            </button>
        </div>

        <!-- Tab: Lands I Shared -->
        <div id="tab-shared-by-me" class="tab-content active">
            <!-- Info Card -->
            <div class="info-card">
                <div class="info-icon">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div class="info-content">
                    <h4>How Sharing Works</h4>
                    <p>Share your land details with anyone using a unique link. They can view the land boundaries, area, and location without needing an account.</p>
                </div>
            </div>

        <?php if($shared_count > 0): ?>
        <!-- Shared Lands List -->
        <div class="shared-lands-grid">
            <?php while($land = mysqli_fetch_assoc($lands)):
                $share_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'] . "/uhakikimadalali/land/share/" . $land['share_token'];
            ?>
            <div class="share-card">
                <div class="share-card-header">
                    <div class="share-icon">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                    <div class="share-title">
                        <h3><?php echo htmlspecialchars($land['land_name']); ?></h3>
                        <span class="share-meta">
                            <i class="fas fa-ruler-combined"></i>
                            <?php echo number_format($land['total_area'], 2) . ' ' . $land['area_unit']; ?>
                        </span>
                    </div>
                </div>

                <div class="share-location">
                    <i class="fas fa-map-marker-alt"></i>
                    <span><?php echo htmlspecialchars($land['location_address'] ?: 'No address specified'); ?></span>
                </div>

                <div class="share-url-box">
                    <label>Share Link</label>
                    <div class="url-input-group">
                        <input type="text" value="<?php echo htmlspecialchars($share_url); ?>" readonly id="url-<?php echo $land['id']; ?>">
                        <button onclick="copyLink(<?php echo $land['id']; ?>)" class="btn-copy" title="Copy Link">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>

                <div class="share-actions">
                    <button onclick="copyLink(<?php echo $land['id']; ?>)" class="btn-share-action copy">
                        <i class="fas fa-copy"></i>
                        <span>Copy</span>
                    </button>
                    <a href="https://wa.me/?text=<?php echo urlencode('Check out my land: ' . $share_url); ?>"
                       target="_blank" class="btn-share-action whatsapp">
                        <i class="fab fa-whatsapp"></i>
                        <span>WhatsApp</span>
                    </a>
                    <a href="<?php echo url('land/' . $land['id']); ?>" class="btn-share-action view">
                        <i class="fas fa-eye"></i>
                        <span>View</span>
                    </a>
                    <a href="<?php echo url('share-land/' . $land['id']); ?>" class="btn-share-action manage">
                        <i class="fas fa-cog"></i>
                        <span>Manage</span>
                    </a>
                </div>

                <div class="share-footer">
                    <span class="created-date">
                        <i class="fas fa-calendar"></i>
                        Created <?php echo date('M d, Y', strtotime($land['created_at'])); ?>
                    </span>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php else: ?>
        <!-- Empty State -->
        <div class="empty-state-card">
            <div class="empty-icon">
                <i class="fas fa-share-alt"></i>
            </div>
            <h3>No Shared Lands</h3>
            <p>You haven't shared any lands yet. Share your lands to let others view their boundaries and details.</p>
            <a href="<?php echo url('lands'); ?>" class="btn-action primary">
                <i class="fas fa-map"></i>
                <span>Go to My Lands</span>
            </a>
        </div>
        <?php endif; ?>
        </div><!-- End tab-shared-by-me -->

        <!-- Tab: Lands Shared With Me -->
        <div id="tab-shared-with-me" class="tab-content">
            <!-- Info Card -->
            <div class="info-card" style="background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);">
                <div class="info-icon" style="background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);">
                    <i class="fas fa-inbox"></i>
                </div>
                <div class="info-content">
                    <h4>Ardhi Uliyoshirikiwa / Lands Shared With You</h4>
                    <p>Hapa utaona ardhi ambazo wamiliki wengine wamekushiriki. Unaweza kuziona na kuziangalia kwenye ramani.</p>
                </div>
            </div>

            <?php if($received_count > 0): ?>
            <div class="shared-lands-grid">
                <?php foreach($shared_with_me as $share): ?>
                <div class="share-card received-card <?php echo $share['status']; ?>">
                    <div class="share-status-badge <?php echo $share['status']; ?>">
                        <?php if($share['status'] == 'pending'): ?>
                            <i class="fas fa-clock"></i> Inasubiri
                        <?php elseif($share['status'] == 'accepted'): ?>
                            <i class="fas fa-check"></i> Imekubaliwa
                        <?php elseif($share['status'] == 'declined'): ?>
                            <i class="fas fa-times"></i> Imekataliwa
                        <?php endif; ?>
                    </div>

                    <div class="share-card-header">
                        <div class="share-icon received">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <div class="share-title">
                            <h3><?php echo htmlspecialchars($share['land_name']); ?></h3>
                            <span class="share-meta">
                                <i class="fas fa-ruler-combined"></i>
                                <?php echo number_format($share['total_area'], 2) . ' ' . $share['area_unit']; ?>
                            </span>
                        </div>
                    </div>

                    <div class="owner-info">
                        <i class="fas fa-user"></i>
                        <div>
                            <strong>Mmiliki / Owner</strong>
                            <span><?php echo htmlspecialchars($share['owner_name']); ?></span>
                        </div>
                    </div>

                    <?php if($share['location_address']): ?>
                    <div class="share-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span><?php echo htmlspecialchars($share['location_address']); ?></span>
                    </div>
                    <?php endif; ?>

                    <?php if($share['message']): ?>
                    <div class="share-message">
                        <i class="fas fa-quote-left"></i>
                        <span><?php echo htmlspecialchars($share['message']); ?></span>
                    </div>
                    <?php endif; ?>

                    <div class="share-stats-row">
                        <div class="share-stat">
                            <i class="fas fa-map-pin"></i>
                            <span><?php echo $share['beacon_count']; ?> Beacon Points</span>
                        </div>
                        <div class="share-stat">
                            <i class="fas fa-calendar"></i>
                            <span><?php echo date('M d, Y', strtotime($share['shared_at'])); ?></span>
                        </div>
                        <?php if($share['can_edit']): ?>
                        <div class="share-stat edit">
                            <i class="fas fa-edit"></i>
                            <span>Can Edit</span>
                        </div>
                        <?php endif; ?>
                    </div>

                    <div class="share-actions-received">
                        <?php if($share['status'] == 'pending'): ?>
                        <form method="POST" style="display: flex; gap: 10px; width: 100%;">
                            <input type="hidden" name="share_id" value="<?php echo $share['id']; ?>">
                            <button type="submit" name="action" value="accept" class="btn-share-action accept">
                                <i class="fas fa-check"></i>
                                <span>Kubali / Accept</span>
                            </button>
                            <button type="submit" name="action" value="decline" class="btn-share-action decline">
                                <i class="fas fa-times"></i>
                                <span>Kataa / Decline</span>
                            </button>
                        </form>
                        <?php else: ?>
                        <a href="<?php echo url('shared_view.php?token=' . $share['share_token']); ?>" class="btn-share-action view-full">
                            <i class="fas fa-eye"></i>
                            <span>Tazama Ardhi / View Land</span>
                        </a>
                        <?php endif; ?>
                    </div>

                    <div class="share-footer">
                        <span class="created-date">
                            <i class="fas fa-clock"></i>
                            Shared <?php echo date('M d, Y H:i', strtotime($share['shared_at'])); ?>
                        </span>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <?php else: ?>
            <!-- Empty State for Received -->
            <div class="empty-state-card">
                <div class="empty-icon" style="background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%); color: #22c55e;">
                    <i class="fas fa-inbox"></i>
                </div>
                <h3>Hakuna Ardhi Uliyoshirikiwa / No Lands Shared With You</h3>
                <p>Wakati mtu atakushiriki ardhi yake, utaiona hapa. Unaweza kuikubali au kuikataa.</p>
            </div>
            <?php endif; ?>
        </div><!-- End tab-shared-with-me -->
    </main>

    <!-- Toast Notification -->
    <div class="toast-notification" id="toast">
        <i class="fas fa-check-circle"></i>
        <span>Link copied to clipboard!</span>
    </div>

    <style>
    /* Page Header */
    .page-header {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 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;
    }

    .btn-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        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.secondary {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

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

    /* Stats Mini */
    .stats-mini {
        display: flex;
        gap: 20px;
        margin-bottom: 24px;
    }

    .stat-mini-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: white;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #475569;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .stat-mini-item i {
        color: #4facfe;
    }

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

    .info-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 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;
    }

    /* Shared Lands Grid */
    .shared-lands-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 24px;
    }

    /* Share Card */
    .share-card {
        background: white;
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .share-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }

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

    .share-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 22px;
        flex-shrink: 0;
    }

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

    .share-meta {
        font-size: 13px;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .share-location {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #f8fafc;
        border-radius: 10px;
        margin-bottom: 16px;
        font-size: 14px;
        color: #64748b;
    }

    .share-location i {
        color: #94a3b8;
    }

    /* Share URL Box */
    .share-url-box {
        margin-bottom: 16px;
    }

    .share-url-box label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #64748b;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .url-input-group {
        display: flex;
        gap: 8px;
    }

    .url-input-group input {
        flex: 1;
        padding: 12px 14px;
        background: #f1f5f9;
        border: none;
        border-radius: 10px;
        font-size: 12px;
        font-family: monospace;
        color: #475569;
    }

    .btn-copy {
        width: 44px;
        height: 44px;
        border: none;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-copy:hover {
        transform: scale(1.05);
    }

    /* Share Actions */
    .share-actions {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .btn-share-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 8px;
        border: none;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-share-action i {
        font-size: 18px;
    }

    .btn-share-action.copy {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
    }

    .btn-share-action.whatsapp {
        background: rgba(37, 211, 102, 0.1);
        color: #25d366;
    }

    .btn-share-action.view {
        background: rgba(6, 182, 212, 0.1);
        color: #0891b2;
    }

    .btn-share-action.manage {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .btn-share-action:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

    .share-footer {
        padding-top: 16px;
        border-top: 1px solid #f1f5f9;
    }

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

    /* 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%;
        background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        font-size: 40px;
        color: #4facfe;
    }

    .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;
    }

    /* Toast */
    .toast-notification {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        padding: 14px 24px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 10px 40px rgba(34, 197, 94, 0.3);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 9999;
    }

    .toast-notification.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    /* Share Tabs */
    .share-tabs {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .share-tab {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 24px;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .share-tab:hover {
        border-color: #4facfe;
        color: #4facfe;
    }

    .share-tab.active {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        border-color: transparent;
        color: white;
    }

    .tab-count {
        background: rgba(0,0,0,0.1);
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 12px;
    }

    .share-tab.active .tab-count {
        background: rgba(255,255,255,0.3);
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    /* Received Card Styles */
    .received-card {
        border-left: 4px solid #22c55e;
    }

    .received-card.pending {
        border-left-color: #f59e0b;
    }

    .received-card.declined {
        border-left-color: #ef4444;
        opacity: 0.7;
    }

    .share-status-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .share-status-badge.pending {
        background: rgba(245, 158, 11, 0.15);
        color: #d97706;
    }

    .share-status-badge.accepted {
        background: rgba(34, 197, 94, 0.15);
        color: #16a34a;
    }

    .share-status-badge.declined {
        background: rgba(239, 68, 68, 0.15);
        color: #dc2626;
    }

    .share-card {
        position: relative;
    }

    .share-icon.received {
        background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    }

    .owner-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .owner-info i {
        font-size: 20px;
        color: #22c55e;
    }

    .owner-info div {
        display: flex;
        flex-direction: column;
    }

    .owner-info strong {
        font-size: 11px;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .owner-info span {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
    }

    .share-message {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
        background: #fefce8;
        border-radius: 10px;
        margin-bottom: 12px;
        font-size: 13px;
        font-style: italic;
        color: #854d0e;
    }

    .share-message i {
        color: #eab308;
        margin-top: 2px;
    }

    .share-stats-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .share-stat {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #64748b;
    }

    .share-stat i {
        color: #94a3b8;
    }

    .share-stat.edit {
        background: rgba(59, 130, 246, 0.1);
        padding: 4px 10px;
        border-radius: 6px;
        color: #3b82f6;
    }

    .share-stat.edit i {
        color: #3b82f6;
    }

    .share-actions-received {
        display: flex;
        gap: 10px;
        margin-bottom: 16px;
    }

    .btn-share-action.accept {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-share-action.accept:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
    }

    .btn-share-action.decline {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-share-action.decline:hover {
        background: rgba(239, 68, 68, 0.2);
    }

    .btn-share-action.view-full {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-share-action.view-full:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        color: white;
        text-decoration: none;
    }

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

        .page-header-content {
            flex-direction: column;
            align-items: flex-start;
        }

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

        .shared-lands-grid {
            grid-template-columns: 1fr;
        }

        .share-actions {
            grid-template-columns: repeat(2, 1fr);
        }

        .share-tabs {
            flex-direction: column;
        }

        .share-tab {
            justify-content: center;
        }

        .share-actions-received {
            flex-direction: column;
        }
    }
    </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>
    function copyLink(landId) {
        const input = document.getElementById('url-' + landId);
        input.select();
        input.setSelectionRange(0, 99999);

        navigator.clipboard.writeText(input.value).then(() => {
            showToast();
        }).catch(() => {
            document.execCommand('copy');
            showToast();
        });
    }

    function showToast() {
        const toast = document.getElementById('toast');
        toast.classList.add('show');
        setTimeout(() => {
            toast.classList.remove('show');
        }, 2000);
    }

    function switchTab(tabId) {
        // Remove active from all tabs
        document.querySelectorAll('.share-tab').forEach(tab => tab.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

        // Add active to clicked tab
        event.currentTarget.classList.add('active');
        document.getElementById('tab-' + tabId).classList.add('active');

        // Save preference
        localStorage.setItem('shared_lands_tab', tabId);
    }

    // Restore tab preference
    document.addEventListener('DOMContentLoaded', function() {
        const savedTab = localStorage.getItem('shared_lands_tab');
        if (savedTab) {
            const tabBtn = document.querySelector(`.share-tab[onclick*="${savedTab}"]`);
            if (tabBtn) tabBtn.click();
        }
    });

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