<?php
require_once("auth.php");
require_once("../api/config/db.php");

$visitor_id = intval($_GET['id'] ?? 0);

if (!$visitor_id) {
    die("Visitor ID required");
}

$q = $conn->query("
SELECT 
    v.*,
    u1.name AS entry_by_name,
    u2.name AS suspicious_by_name,
    vg.village_name
FROM visitors v
LEFT JOIN users u1 ON v.entry_by = u1.id
LEFT JOIN users u2 ON v.suspicious_by = u2.id
LEFT JOIN villages vg ON v.village_id = vg.id
WHERE v.id='$visitor_id'
LIMIT 1
");

if (!$q || $q->num_rows === 0) {
    die("Visitor not found");
}

$data = $q->fetch_assoc();

$timeline = $conn->query("
SELECT 
    vl.created_at,
    vl.action,
    vlg.village_name,
    u.name AS checked_by_name
FROM visitor_logs vl
LEFT JOIN villages vlg ON vl.village_id = vlg.id
LEFT JOIN users u ON vl.checked_by = u.id
WHERE vl.visitor_id='$visitor_id'
ORDER BY vl.created_at DESC
");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Visitor Detail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{box-sizing:border-box}
body{margin:0;font-family:Arial;background:#f1f5f9;color:#0f172a}
.app{max-width:520px;margin:0 auto;min-height:100vh;background:#f8fafc;padding-bottom:90px}
.header{background:linear-gradient(135deg,#1e3a8a,#2563eb,#38bdf8);color:white;padding:22px 18px 32px;border-bottom-left-radius:30px;border-bottom-right-radius:30px}
.header h2{margin:0;font-size:24px}
.header a{color:white;text-decoration:none;font-weight:700}
.card{background:white;margin:16px;padding:18px;border-radius:24px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.profile{text-align:center}
.selfie{width:120px;height:120px;border-radius:35px;object-fit:cover;background:#e2e8f0;margin-bottom:12px}
.name{font-size:24px;font-weight:900;margin:6px 0}
.mobile{color:#64748b}
.badge{display:inline-block;margin-top:10px;padding:8px 13px;border-radius:999px;font-size:12px;font-weight:900}
.safe{background:#dcfce7;color:#166534}
.danger{background:#fee2e2;color:#991b1b}
.row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid #e5e7eb}
.row span{color:#64748b}
.row b{text-align:right}
.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doc-img{width:100%;height:150px;object-fit:cover;border-radius:18px;background:#e2e8f0}
.timeline{position:relative;padding-left:18px}
.timeline:before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:#bfdbfe}
.t-item{position:relative;margin-bottom:16px;background:#f8fafc;padding:12px;border-radius:16px}
.t-item:before{content:"";position:absolute;left:-17px;top:16px;width:10px;height:10px;background:#2563eb;border-radius:50%}
.t-item h4{margin:0 0 5px}
.t-item p{margin:3px 0;color:#475569;font-size:14px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:520px;width:100%;background:white;display:grid;grid-template-columns:repeat(5,1fr);padding:10px 4px 12px;box-shadow:0 -10px 30px rgba(0,0,0,.08);z-index:10}
.nav a{text-align:center;text-decoration:none;color:#64748b;font-size:20px}
.nav span{display:block;font-size:11px;font-weight:700;margin-top:3px}
.empty{text-align:center;color:#64748b;padding:20px}
</style>
</head>

<body>
<div class="app">

<div class="header">
    <a href="visitors.php">← Back</a>
    <h2>Visitor Detail</h2>
</div>

<div class="card profile">
    <?php if (!empty($data['selfie'])): ?>
        <img class="selfie" src="../<?= htmlspecialchars($data['selfie']) ?>">
    <?php else: ?>
        <div class="selfie" style="display:grid;place-items:center;margin:auto auto 12px;">👤</div>
    <?php endif; ?>

    <div class="name"><?= htmlspecialchars($data['name']) ?></div>
    <div class="mobile">📱 <?= htmlspecialchars($data['mobile']) ?></div>

    <?php if (!empty($data['is_suspicious']) && intval($data['is_suspicious']) === 1): ?>
        <div class="badge danger">Suspicious</div>
    <?php else: ?>
        <div class="badge safe">Normal Visitor</div>
    <?php endif; ?>
</div>

<div class="card">
    <h3>Visitor Information</h3>

    <div class="row"><span>Village</span><b><?= htmlspecialchars($data['village_name'] ?? '-') ?></b></div>
    <div class="row"><span>Entry By</span><b><?= htmlspecialchars($data['entry_by_name'] ?? 'Unknown') ?></b></div>
    <div class="row"><span>Description</span><b><?= htmlspecialchars($data['description'] ?? '-') ?></b></div>
    <div class="row"><span>Suspicious By</span><b><?= htmlspecialchars($data['suspicious_by_name'] ?? '-') ?></b></div>
    <div class="row"><span>Suspicious Note</span><b><?= htmlspecialchars($data['suspicious_note'] ?? '-') ?></b></div>
</div>

<div class="card">
    <h3>Documents</h3>

    <div class="img-grid">
        <div>
            <p><b>Aadhaar Front</b></p>
            <?php if (!empty($data['aadhaar_front'])): ?>
                <img class="doc-img" src="../<?= htmlspecialchars($data['aadhaar_front']) ?>">
            <?php else: ?>
                <div class="empty">No front image</div>
            <?php endif; ?>
        </div>

        <div>
            <p><b>Aadhaar Back</b></p>
            <?php if (!empty($data['aadhaar_back'])): ?>
                <img class="doc-img" src="../<?= htmlspecialchars($data['aadhaar_back']) ?>">
            <?php else: ?>
                <div class="empty">No back image</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<div class="card">
    <h3>Visit Timeline</h3>

    <?php if ($timeline && $timeline->num_rows > 0): ?>
        <div class="timeline">
            <?php while($t = $timeline->fetch_assoc()): ?>
                <div class="t-item">
                    <h4><?= htmlspecialchars($t['village_name'] ?? 'Unknown Village') ?></h4>
                    <p>Checked by: <?= htmlspecialchars($t['checked_by_name'] ?? 'Unknown') ?></p>
                    <p>Action: <?= htmlspecialchars($t['action'] ?? 'visited') ?></p>
                    <p>Time: <?= htmlspecialchars($t['created_at']) ?></p>
                </div>
            <?php endwhile; ?>
        </div>
    <?php else: ?>
        <div class="empty">No visit timeline found.</div>
    <?php endif; ?>
</div>

<div class="nav">
    <a href="dashboard.php">🏠<span>Home</span></a>
    <a href="pending-sub-admins.php">👥<span>Pending</span></a>
    <a href="visitors.php">🧾<span>Visitors</span></a>
    <a href="suspicious-requests.php">⚠️<span>Alerts</span></a>
    <a href="profile.php">👤<span>Profile</span></a>
</div>

</div>
</body>
</html>