<?php
session_start();
if (!isset($_SESSION['patient_id'])) {
    header("Location: ../login.php");
    exit();
}
include '../../include/config.php';

$user_id = $_SESSION['patient_id'];
$user_name = $_SESSION['patient_name'];

$consultations = $conn->query("SELECT COUNT(*) as cnt FROM consultations WHERE patient_id = '$user_id'");
$consultations_count = $consultations ? $consultations->fetch_assoc()['cnt'] : 0;

$appointments = $conn->query("SELECT COUNT(*) as cnt FROM appointments WHERE patient_id = '$user_id'");
$appointments_count = $appointments ? $appointments->fetch_assoc()['cnt'] : 0;

$prescriptions = $conn->query("SELECT COUNT(*) as cnt FROM prescriptions WHERE patient_id = '$user_id'");
$prescriptions_count = $prescriptions ? $prescriptions->fetch_assoc()['cnt'] : 0;

$lab_results = $conn->query("SELECT COUNT(*) as cnt FROM lab_results WHERE patient_id = '$user_id'");
$lab_count = $lab_results ? $lab_results->fetch_assoc()['cnt'] : 0;

$vitals = $conn->query("SELECT COUNT(*) as cnt FROM vital_signs WHERE patient_id = '$user_id'");
$vitals_count = $vitals ? $vitals->fetch_assoc()['cnt'] : 0;

$page_title = 'Medical Hub | UHD';
include '../../include/header.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Medical Hub | UHD</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: radial-gradient(circle at 10% 20%, #0a3d2f, #032217);
            min-height: 100vh;
        }
        
        /* Hero section – fresh */
        .hero-section {
            background: linear-gradient(135deg, rgba(10,61,47,0.9), rgba(3,34,23,0.95)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1200');
            background-size: cover;
            background-position: center;
            border-radius: 2rem;
            padding: 2.5rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(212,160,23,0.3);
            backdrop-filter: blur(2px);
        }
        .hero-section h1 {
            font-size: 2.2rem;
            font-weight: 800;
            letter-spacing: -0.02em;
        }
        .hero-section .badge {
            background: #d4a017;
            color: #0a3d2f;
            font-weight: 600;
            padding: 0.4rem 1rem;
        }
        
        /* Quick stats – minimal but bold */
        .stats-wrapper {
            display: flex;
            justify-content: space-between;
            gap: 1.5rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }
        .stat-block {
            flex: 1;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 1.5rem;
            padding: 1.2rem;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.2s;
            cursor: pointer;
        }
        .stat-block:hover {
            background: rgba(212,160,23,0.15);
            transform: translateY(-4px);
        }
        .stat-number {
            font-size: 2rem;
            font-weight: 800;
            color: #d4a017;
            line-height: 1.2;
        }
        .stat-label {
            font-size: 0.8rem;
            color: #e2e8f0;
            letter-spacing: 0.3px;
        }
        
        /* Card grid – 3 columns with instructive description */
        .insight-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            margin-bottom: 3rem;
        }
        .insight-card {
            background: white;
            border-radius: 1.8rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1);
            border: 1px solid rgba(220,53,69,0.2);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .insight-card:hover {
            transform: translateY(-8px);
            border-color: #d4a017;
            box-shadow: 0 20px 30px -12px rgba(0,0,0,0.2);
        }
        .card-icon {
            width: 55px;
            height: 55px;
            background: #0a3d2f10;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }
        .card-icon i {
            font-size: 1.8rem;
            color: #d4a017;
        }
        .insight-card h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #0a3d2f;
            margin-bottom: 0.5rem;
        }
        .insight-card p {
            font-size: 0.85rem;
            color: #4a5568;
            line-height: 1.4;
            margin-bottom: 1rem;
            flex-grow: 1;
        }
        .instruction {
            font-size: 0.7rem;
            color: #dc3545;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 0.5rem;
            border-top: 1px dashed #e2e8f0;
            padding-top: 0.8rem;
        }
        
        /* Video consult callout */
        .video-cta {
            background: linear-gradient(95deg, #1a1a2e, #0f172a);
            border-radius: 2rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid #d4a01740;
            transition: 0.2s;
            cursor: pointer;
        }
        .video-cta:hover {
            border-color: #d4a017;
            transform: scale(1.01);
        }
        
        /* Bottom quick links */
        .quick-links {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin-top: 1rem;
        }
        .quick-link {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(8px);
            border-radius: 3rem;
            padding: 0.5rem 1.2rem;
            font-size: 0.8rem;
            color: white;
            text-decoration: none;
            transition: 0.2s;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .quick-link:hover {
            background: #d4a017;
            color: #0a3d2f;
            border-color: #d4a017;
        }
        
        @media (max-width: 992px) {
            .insight-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .insight-grid { grid-template-columns: 1fr; }
            .stats-wrapper { flex-direction: column; }
            .hero-section h1 { font-size: 1.6rem; }
        }
    </style>
</head>
<body>

<div class="container mt-4">
    <!-- Hero - fresh, welcoming -->
    <div class="hero-section text-white">
        <div class="row align-items-center">
            <div class="col-md-8">
                <span class="badge mb-3"><i class="fas fa-stethoscope me-1"></i> Your Medical Hub</span>
                <h1 class="mb-2">Hello, <?= htmlspecialchars(explode(' ', $user_name)[0]) ?> 👋</h1>
                <p class="mb-0 opacity-75">Manage consultations, track prescriptions, review lab results, and stay connected with your healthcare team – all from one smart dashboard.</p>
            </div>
            <div class="col-md-4 text-center d-none d-md-block">
                <i class="fas fa-notes-medical fa-4x" style="color: #d4a017; opacity: 0.8;"></i>
            </div>
        </div>
    </div>

    <!-- Quick stats – 3 blocks (clean) -->
    <div class="stats-wrapper">
        <div class="stat-block" onclick="location.href='consultations.php'">
            <div class="stat-number"><?= $consultations_count ?></div>
            <div class="stat-label">Total Consultations</div>
        </div>
        <div class="stat-block" onclick="location.href='appointments.php'">
            <div class="stat-number"><?= $appointments_count ?></div>
            <div class="stat-label">Upcoming Appointments</div>
        </div>
        <div class="stat-block" onclick="location.href='view_prescription.php'">
            <div class="stat-number"><?= $prescriptions_count ?></div>
            <div class="stat-label">Active Prescriptions</div>
        </div>
    </div>

    <!-- Video consultation – eye catching -->
    <div class="video-cta text-white" onclick="location.href='join_consultation.php'">
        <div class="row align-items-center">
            <div class="col-md-9">
                <i class="fas fa-video fa-2x mb-2" style="color: #d4a017;"></i>
                <h4 class="mb-1">Need to see a doctor right now?</h4>
                <p class="mb-0 opacity-75">Start a secure, HIPAA‑compliant video consultation – no appointment needed. Doctors are available 24/7.</p>
            </div>
            <div class="col-md-3 text-md-end mt-3 mt-md-0">
                <span class="btn-gold d-inline-block px-4 py-2 rounded-pill">Launch Video Call →</span>
            </div>
        </div>
    </div>

    <!-- Main cards – 3 per row, each with an instructive description -->
    <div class="insight-grid">
        <!-- 1. Consultations -->
        <div class="insight-card" onclick="location.href='consultations.php'">
            <div class="card-icon"><i class="fas fa-user-md"></i></div>
            <h3>Video Consultations</h3>
            <p>Talk face‑to‑face with a licensed doctor from your phone or computer. Get prescriptions, referrals, and medical advice instantly.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Click to see your past consultations</div>
        </div>
        <!-- 2. Appointments -->
        <div class="insight-card" onclick="location.href='appointments.php'">
            <div class="card-icon"><i class="fas fa-calendar-check"></i></div>
            <h3>Manage Appointments</h3>
            <p>Schedule, reschedule, or cancel in‑person or virtual visits. Receive email/SMS reminders so you never miss a date.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> View all appointments</div>
        </div>
        <!-- 3. Prescriptions -->
        <div class="insight-card" onclick="location.href='view_prescription.php'">
            <div class="card-icon"><i class="fas fa-prescription-bottle"></i></div>
            <h3>Your Medications</h3>
            <p>View active prescriptions, dosages, and refill status. Request renewal directly from your doctor.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Manage prescriptions</div>
        </div>
        <!-- 4. Lab Results -->
        <div class="insight-card" onclick="location.href='view_lab_results.php'">
            <div class="card-icon"><i class="fas fa-flask"></i></div>
            <h3>Lab & Diagnostic Results</h3>
            <p>Access blood tests, radiology reports, and other lab results as soon as they are released. Track trends over time.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Review lab results</div>
        </div>
        <!-- 5. Vital Signs -->
        <div class="insight-card" onclick="location.href='view_vitals.php'">
            <div class="card-icon"><i class="fas fa-heartbeat"></i></div>
            <h3>Vital Signs History</h3>
            <p>Monitor your blood pressure, heart rate, temperature, and oxygen levels. Share trends with your doctor.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Track vitals</div>
        </div>
        <!-- 6. Daily Activity -->
        <div class="insight-card" onclick="location.href='daily_activity.php'">
            <div class="card-icon"><i class="fas fa-walking"></i></div>
            <h3>Daily Wellness</h3>
            <p>Log steps, sleep, water intake, and mood. Get personalized wellness insights powered by AI.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Update activity log</div>
        </div>
        <!-- 7. Home Hospital -->
        <div class="insight-card" onclick="location.href='home_hospital.php'">
            <div class="card-icon"><i class="fas fa-home"></i></div>
            <h3>Home Hospital</h3>
            <p>Your primary healthcare facility where your master medical record is stored. Manage your health home base.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> View home hospital</div>
        </div>
        <!-- 8. Medical Records -->
        <div class="insight-card" onclick="location.href='medical_record.php'">
            <div class="card-icon"><i class="fas fa-folder-open"></i></div>
            <h3>Full Medical Records</h3>
            <p>Access your complete clinical history – diagnoses, surgeries, immunizations, and visit summaries.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Browse records</div>
        </div>
        <!-- 9. Request Consultation -->
        <div class="insight-card" onclick="location.href='request_consultation.php'">
            <div class="card-icon"><i class="fas fa-stethoscope"></i></div>
            <h3>Request a Consultation</h3>
            <p>Need specialist advice? Send a request to any doctor in the UHD network. Get a response within hours.</p>
            <div class="instruction"><i class="fas fa-arrow-right"></i> Request now</div>
        </div>
    </div>

    <!-- Bottom quick links (clean navigation) -->
    <div class="quick-links">
        <a href="link_hospital.php" class="quick-link"><i class="fas fa-link me-1"></i> Link Hospital</a>
        <a href="list_hospital.php" class="quick-link"><i class="fas fa-building me-1"></i> Partner Hospitals</a>
        <a href="chat.php" class="quick-link"><i class="fas fa-comments me-1"></i> Doctor Chat</a>
        <a href="../messages.php" class="quick-link"><i class="fas fa-envelope me-1"></i> Messages</a>
        <a href="../notifications.php" class="quick-link"><i class="fas fa-bell me-1"></i> Notifications</a>
        <a href="../dashboard.php" class="quick-link"><i class="fas fa-arrow-left me-1"></i> Main Dashboard</a>
    </div>

    <!-- Footer info -->
    <div class="text-center mt-4 pb-4">
        <small class="text-white-50"><i class="fas fa-shield-alt me-1"></i> Encrypted & secure | <i class="fas fa-clock ms-2 me-1"></i> 24/7 access to your medical data</small>
    </div>
</div>

<style>
    .btn-gold {
        background: #d4a017;
        color: #0a3d2f;
        border: none;
        transition: 0.2s;
        font-weight: 600;
    }
    .btn-gold:hover {
        background: #b8860b;
        color: white;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<?php include '../../include/footer.php'; ?>