<?php
session_start();

$dir = __DIR__ . '/uploads/glasses/';
$existingGlasses = [];
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' && $file != '..' && strtolower(pathinfo($file, PATHINFO_EXTENSION)) == 'png') {
                $existingGlasses[] = $file;
            }
        }
        closedir($dh);
        rsort($existingGlasses);
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glasses Try-On | Admin Panel</title>
    <link rel="stylesheet" href="css/style.css?v=<?= time() ?>">
    <style>
        body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background: #0f172a; color: #f8fafc; font-family: 'Inter', sans-serif; padding: 2rem; }
        .admin-card { background: #1e293b; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); width: 100%; max-width: 800px; margin-bottom: 2rem; }
        h1, h2 { margin-top: 0; text-align: center; margin-bottom: 1.5rem; }
        .upload-area { border: 2px dashed #475569; padding: 2rem; text-align: center; border-radius: 0.5rem; margin-bottom: 1.5rem; cursor: pointer; transition: all 0.2s; }
        .upload-area:hover { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); }
        .btn { background: #3b82f6; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; width: 100%; font-weight: 600; font-size: 1rem; transition: background 0.2s; }
        .btn:hover { background: #2563eb; }
        .btn-danger { background: #ef4444; width: auto; padding: 0.5rem 1rem; font-size: 0.875rem; margin-top: 0.5rem; }
        .btn-danger:hover { background: #dc2626; }
        .alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; }
        .alert.success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid #10b981; }
        .alert.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid #ef4444; }
        input[type="file"] { display: none; }
        .glasses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
        .glass-card { background: #0f172a; padding: 1rem; border-radius: 0.5rem; border: 1px solid #334155; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
        .glass-card img { max-width: 100%; height: 80px; object-fit: contain; margin-bottom: 1rem; }
    </style>
</head>
<body>

<div class="admin-card">
    <h1>Manage Eyeglasses</h1>

    <?php if (isset($_SESSION['success'])): ?>
        <div class="alert success"><?= $_SESSION['success']; unset($_SESSION['success']); ?></div>
    <?php endif; ?>
    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert error"><?= $_SESSION['error']; unset($_SESSION['error']); ?></div>
    <?php endif; ?>

    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <label for="glasses_image">
            <div class="upload-area" id="upload-area">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #64748b; margin-bottom: 1rem;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                <div id="file-name" style="color: #94a3b8;">Click or drag to upload a transparent PNG</div>
            </div>
        </label>
        <input type="file" name="glasses_image" id="glasses_image" accept=".png" required>
        <button type="submit" class="btn">Upload New Glasses</button>
    </form>
    
    <div style="text-align: center; margin-top: 1.5rem; margin-bottom: 2rem;">
        <a href="index.php" style="color: #3b82f6; text-decoration: none;">&larr; Go back to Try-On App</a>
    </div>
</div>

<div class="admin-card">
    <h2>Uploaded Glasses</h2>
    <?php if (empty($existingGlasses)): ?>
        <p style="text-align: center; color: #94a3b8;">No glasses uploaded yet.</p>
    <?php else: ?>
        <div class="glasses-grid">
            <?php foreach ($existingGlasses as $glass): ?>
                <div class="glass-card">
                    <img src="uploads/glasses/<?= htmlspecialchars($glass) ?>" alt="Glasses">
                    <a href="delete.php?delete=<?= urlencode($glass) ?>" onclick="return confirm('Are you sure you want to delete this?');" class="btn btn-danger">Delete</a>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<script>
    const fileInput = document.getElementById('glasses_image');
    const fileNameDisplay = document.getElementById('file-name');
    
    fileInput.addEventListener('change', function() {
        if(this.files && this.files.length > 0) {
            fileNameDisplay.textContent = this.files[0].name;
            fileNameDisplay.style.color = '#f8fafc';
        } else {
            fileNameDisplay.textContent = 'Click or drag to upload a transparent PNG';
            fileNameDisplay.style.color = '#94a3b8';
        }
    });
</script>

</body>
</html>
