<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thru My Lens :) - Rosy's Photography</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #f5f0eb;
            --ink: #2c2825;
            --ink-light: #5a534d;
            --ink-faint: #8a847d;
            --accent: #7a6348;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
        }

        /* Header */
        header {
            text-align: center;
            padding: 40px 20px 30px;
        }

        .site-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(2.5rem, 8vw, 4rem);
            font-weight: 300;
            font-style: italic;
            color: var(--ink-light);
            letter-spacing: 0.05em;
        }

        /* Navigation */
        nav {
            display: flex;
            justify-content: center;
            gap: 40px;
            padding: 20px;
            border-top: 1px solid rgba(0,0,0,0.08);
            border-bottom: 1px solid rgba(0,0,0,0.08);
            background: rgba(245, 240, 235, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        nav a {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.1rem;
            color: var(--ink-light);
            text-decoration: none;
            transition: color 0.3s;
        }

        nav a:hover {
            color: var(--accent);
        }

        /* Sections */
        section {
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 30px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 300;
            color: var(--ink);
            margin-bottom: 10px;
        }

        .section-description {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.1rem;
            font-style: italic;
            color: var(--ink-light);
        }

        /* Photo Grid */
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .photo-frame {
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            position: relative;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .photo-frame:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .photo-frame:hover img {
            transform: scale(1.05);
        }

        .photo-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px 15px 15px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .photo-frame:hover .photo-caption {
            opacity: 1;
        }

        .photo-caption h3 {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.1rem;
            color: white;
            font-weight: 400;
        }

        /* Edit button */
        .edit-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255,255,255,0.9);
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .photo-frame:hover .edit-btn {
            opacity: 1;
        }

        /* Section footer */
        .section-footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .section-footer a {
            color: var(--accent);
            text-decoration: none;
            font-size: 0.9rem;
        }

        .section-footer a:hover {
            text-decoration: underline;
        }

        /* Empty state */
        .empty-message {
            text-align: center;
            padding: 60px 20px;
            color: var(--ink-faint);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-size: 1.2rem;
        }

        .empty-message a {
            color: var(--accent);
        }

        /* About section */
        #about {
            text-align: center;
            background: white;
            margin-top: 40px;
        }

        #about p {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.2rem;
            color: var(--ink-light);
            max-width: 600px;
            margin: 0 auto 15px;
            line-height: 1.8;
        }

        #about .signature {
            font-style: italic;
            margin-top: 30px;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 40px 20px;
            color: var(--ink-faint);
            font-size: 0.85rem;
        }

        footer a {
            color: var(--accent);
            text-decoration: none;
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(20, 18, 16, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
        }

        .lightbox img {
            max-width: 100%;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 4px;
        }

        .lightbox-caption {
            text-align: center;
            margin-top: 15px;
            color: rgba(255,255,255,0.7);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
        }

        .lightbox-close {
            position: fixed;
            top: 20px;
            right: 30px;
            font-size: 2.5rem;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            z-index: 1001;
        }

        .lightbox-close:hover {
            color: white;
        }

        .lightbox-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            font-size: 3rem;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            padding: 20px;
        }

        .lightbox-nav:hover {
            color: white;
        }

        .lightbox-prev { left: 20px; }
        .lightbox-next { right: 20px; }

        /* Edit modal */
        .edit-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

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

        .edit-modal-content {
            background: var(--bg);
            padding: 30px;
            border-radius: 12px;
            max-width: 400px;
            width: 90%;
        }

        .edit-modal h3 {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--ink);
        }

        .edit-modal label {
            display: block;
            margin-bottom: 5px;
            color: var(--ink-light);
            font-size: 0.9rem;
        }

        .edit-modal input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--ink-faint);
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 1rem;
        }

        .edit-modal-buttons {
            display: flex;
            gap: 10px;
        }

        .edit-modal button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .edit-modal .save-btn {
            background: var(--accent);
            color: white;
        }

        .edit-modal .cancel-btn {
            background: var(--ink-faint);
            color: white;
        }

        .edit-modal .delete-btn {
            background: #c0392b;
            color: white;
            margin-top: 15px;
            width: 100%;
        }

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

            nav {
                gap: 25px;
            }

            section {
                padding: 40px 20px;
            }

            .photo-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1 class="site-title">Thru My Lens :)</h1>
    </header>

    <nav>
        <a href="#nature">Nature</a>
        <a href="#city">City</a>
        <a href="#about">About</a>
    </nav>

    <section id="nature">
        <div class="section-header">
            <h2 class="section-title">Nature</h2>
            <p class="section-description">Moments of stillness found in nature</p>
        </div>
        <div id="nature-gallery" class="photo-grid">
            <div class="empty-message">Loading...</div>
        </div>
        <div class="section-footer" id="nature-footer"></div>
    </section>

    <section id="city">
        <div class="section-header">
            <h2 class="section-title">City</h2>
            <p class="section-description">Urban stories and street moments</p>
        </div>
        <div id="city-gallery" class="photo-grid">
            <div class="empty-message">Loading...</div>
        </div>
        <div class="section-footer" id="city-footer"></div>
    </section>

    <section id="about">
        <div class="section-header">
            <h2 class="section-title">About</h2>
        </div>
        <p>Light falls softly on quiet corners,</p>
        <p>and I try to hold it still.</p>
        <p>These are the moments that whispered to me—</p>
        <p>now they whisper to you.</p>
        <p class="signature">— Rosy</p>
    </section>

    <footer>
        <p>&copy; 2025 Rosy. All rights reserved.</p>
        <a href="/photography/upload.html">Upload Photos</a>
    </footer>

    <!-- Lightbox -->
    <div class="lightbox" id="lightbox">
        <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
        <span class="lightbox-nav lightbox-prev" onclick="prevImage()">&#8249;</span>
        <span class="lightbox-nav lightbox-next" onclick="nextImage()">&#8250;</span>
        <div class="lightbox-content">
            <img src="" alt="Full size" id="lightbox-img">
            <p class="lightbox-caption" id="lightbox-caption"></p>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="edit-modal" id="editModal">
        <div class="edit-modal-content">
            <h3>Edit Photo</h3>
            <label for="editTitle">Title</label>
            <input type="text" id="editTitle" placeholder="Photo title">
            <label for="editPassword">Password</label>
            <input type="password" id="editPassword" placeholder="Enter password">
            <div class="edit-modal-buttons">
                <button class="cancel-btn" onclick="closeEditModal()">Cancel</button>
                <button class="save-btn" onclick="saveEdit()">Save</button>
            </div>
            <button class="delete-btn" onclick="deletePhoto()">Delete Photo</button>
            <input type="hidden" id="editFilename">
            <input type="hidden" id="editCategory">
        </div>
    </div>

    <script>
        // Lightbox
        let currentImageIndex = 0;
        let images = [];

        function openLightbox(src, caption, index) {
            document.getElementById('lightbox-img').src = src;
            document.getElementById('lightbox-caption').textContent = caption || '';
            document.getElementById('lightbox').classList.add('active');
            currentImageIndex = index;
            document.body.style.overflow = 'hidden';
        }

        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('active');
            document.body.style.overflow = '';
        }

        function nextImage() {
            if (images.length === 0) return;
            currentImageIndex = (currentImageIndex + 1) % images.length;
            document.getElementById('lightbox-img').src = images[currentImageIndex].src;
            document.getElementById('lightbox-caption').textContent = images[currentImageIndex].caption;
        }

        function prevImage() {
            if (images.length === 0) return;
            currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
            document.getElementById('lightbox-img').src = images[currentImageIndex].src;
            document.getElementById('lightbox-caption').textContent = images[currentImageIndex].caption;
        }

        document.getElementById('lightbox').addEventListener('click', (e) => {
            if (e.target.id === 'lightbox') closeLightbox();
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeLightbox();
                closeEditModal();
            }
            if (e.key === 'ArrowRight') nextImage();
            if (e.key === 'ArrowLeft') prevImage();
        });

        // Edit modal
        function openEditModal(filename, category, currentTitle) {
            document.getElementById('editFilename').value = filename;
            document.getElementById('editCategory').value = category;
            document.getElementById('editTitle').value = currentTitle;
            document.getElementById('editPassword').value = '';
            document.getElementById('editModal').classList.add('active');
        }

        function closeEditModal() {
            document.getElementById('editModal').classList.remove('active');
        }

        async function saveEdit() {
            const filename = document.getElementById('editFilename').value;
            const category = document.getElementById('editCategory').value;
            const title = document.getElementById('editTitle').value;
            const password = document.getElementById('editPassword').value;

            if (!password) { alert('Please enter the password'); return; }

            try {
                const response = await fetch('/upload-api/edit', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filename, category, title, password })
                });
                const result = await response.json();
                if (result.success) {
                    closeEditModal();
                    loadPhotos();
                } else {
                    alert(result.error || 'Failed to save');
                }
            } catch (err) {
                alert('Connection error');
            }
        }

        async function deletePhoto() {
            if (!confirm('Delete this photo?')) return;

            const filename = document.getElementById('editFilename').value;
            const category = document.getElementById('editCategory').value;
            const password = document.getElementById('editPassword').value;

            if (!password) { alert('Please enter the password'); return; }

            try {
                const response = await fetch('/upload-api/delete', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filename, category, password })
                });
                const result = await response.json();
                if (result.success) {
                    closeEditModal();
                    loadPhotos();
                } else {
                    alert(result.error || 'Failed to delete');
                }
            } catch (err) {
                alert('Connection error');
            }
        }

        // Format filename to title
        function formatTitle(filename) {
            let name = filename.replace(/\.[^.]+$/, '');
            name = name.replace(/_\d{13}_[a-f0-9]+$/, '');
            name = name.replace(/_/g, ' ');
            return name.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
        }

        // Create photo frame
        function createPhotoFrame(photo, index) {
            const frame = document.createElement('div');
            frame.className = 'photo-frame';

            const title = photo.title || formatTitle(photo.filename);

            const img = document.createElement('img');
            img.src = photo.path;
            img.alt = title;
            img.loading = 'lazy';

            const caption = document.createElement('div');
            caption.className = 'photo-caption';
            caption.innerHTML = `<h3>${title}</h3>`;

            const editBtn = document.createElement('button');
            editBtn.className = 'edit-btn';
            editBtn.innerHTML = '&#9998;';
            editBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openEditModal(photo.filename, photo.category, title);
            });

            frame.appendChild(img);
            frame.appendChild(caption);
            frame.appendChild(editBtn);

            images.push({ src: photo.path, caption: title });
            frame.addEventListener('click', () => {
                openLightbox(photo.path, title, index);
            });

            return frame;
        }

        // Load photos
        async function loadPhotos() {
            try {
                const response = await fetch('/upload-api/photos');
                const photos = await response.json();
                images = [];
                let globalIndex = 0;

                // Nature gallery
                const natureGallery = document.getElementById('nature-gallery');
                natureGallery.innerHTML = '';
                if (photos.landscapes && photos.landscapes.length > 0) {
                    photos.landscapes.forEach(photo => {
                        natureGallery.appendChild(createPhotoFrame(photo, globalIndex++));
                    });
                    document.getElementById('nature-footer').innerHTML =
                        `${photos.landscapes.length} photo${photos.landscapes.length !== 1 ? 's' : ''} &middot; <a href="/photography/upload.html?category=landscapes">Add more</a>`;
                } else {
                    natureGallery.innerHTML = '<p class="empty-message">No photos yet. <a href="/photography/upload.html?category=landscapes">Upload first photo</a></p>';
                }

                // City gallery
                const cityGallery = document.getElementById('city-gallery');
                cityGallery.innerHTML = '';
                if (photos.historic && photos.historic.length > 0) {
                    photos.historic.forEach(photo => {
                        cityGallery.appendChild(createPhotoFrame(photo, globalIndex++));
                    });
                    document.getElementById('city-footer').innerHTML =
                        `${photos.historic.length} photo${photos.historic.length !== 1 ? 's' : ''} &middot; <a href="/photography/upload.html?category=historic">Add more</a>`;
                } else {
                    cityGallery.innerHTML = '<p class="empty-message">No photos yet. <a href="/photography/upload.html?category=historic">Upload first photo</a></p>';
                }

            } catch (err) {
                console.error('Failed to load photos:', err);
            }
        }

        loadPhotos();
    </script>
</body>
</html>
