<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#a0e650">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Iyakku">
    <title>Iyakku - Controller</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="manifest" href="/static/manifest.json">
    <link rel="apple-touch-icon" href="/static/icon-192.png">
</head>
<body class="controller-body">
    <!-- Header -->
    <div class="ctrl-header">
        <button id="back-btn" class="ctrl-back-btn" style="display: none;">&#8592;</button>
        <img src="/static/icon-512.png" alt="" class="ctrl-header-logo">
        <h1 class="ctrl-title">Iyakku</h1>
        <button id="help-btn" class="ctrl-help-btn">?</button>
    </div>

    <!-- PIN Setup Screen (first time) -->
    <div id="pin-setup-screen" class="pin-screen" style="display: none;">
        <div class="pin-screen-content">
            <img src="/static/icon-512.png" alt="Iyakku" class="pin-logo">
            <h2 class="pin-screen-title">Create a PIN</h2>
            <p class="pin-screen-subtitle">This PIN secures your controller access</p>
            <div id="setup-step-1">
                <p class="pin-step-label">Enter a 4-digit PIN</p>
                <div class="pin-input-row">
                    <input class="pin-digit setup-pin-1" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                    <input class="pin-digit setup-pin-1" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                    <input class="pin-digit setup-pin-1" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                    <input class="pin-digit setup-pin-1" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                </div>
            </div>
            <div id="setup-step-2" style="display: none;">
                <p class="pin-step-label">Confirm your PIN</p>
                <div class="pin-input-row">
                    <input class="pin-digit setup-pin-2" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                    <input class="pin-digit setup-pin-2" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                    <input class="pin-digit setup-pin-2" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                    <input class="pin-digit setup-pin-2" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                </div>
                <div id="setup-mismatch" class="pin-error" style="display: none;">PINs don't match. Try again.</div>
            </div>
        </div>
    </div>

    <!-- PIN Entry Screen (returning user) -->
    <div id="pin-screen" class="pin-screen" style="display: none;">
        <div class="pin-screen-content">
            <img src="/static/icon-512.png" alt="Iyakku" class="pin-logo">
            <h2 class="pin-screen-title">Enter PIN</h2>
            <p class="pin-screen-subtitle">Enter your 4-digit PIN to connect</p>
            <div class="pin-input-row">
                <input id="pin-1" class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                <input id="pin-2" class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                <input id="pin-3" class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
                <input id="pin-4" class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">
            </div>
            <div id="pin-error" class="pin-error" style="display: none;">Wrong PIN. Try again.</div>
            <div id="pin-locked" class="pin-error" style="display: none;">Another controller is already connected.</div>
        </div>
    </div>

    <!-- Gesture Guide Modal -->
    <div id="gesture-guide" class="gesture-guide-overlay" style="display: none;">
        <div class="gesture-guide">
            <div class="guide-header">
                <h2 class="guide-title">Gesture Guide</h2>
                <button id="guide-close-btn" class="guide-close-btn">&times;</button>
            </div>
            <div class="guide-content">
                <div class="guide-section-label">Navigation</div>
                <div class="gesture-grid">
                    <div class="gesture-item">
                        <span class="gesture-icon">👆←→</span>
                        <span class="gesture-name">Swipe left / right</span>
                        <span class="gesture-desc">Next / previous media</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">👆↓</span>
                        <span class="gesture-name">Swipe down</span>
                        <span class="gesture-desc">Back to folder browser</span>
                    </div>
                </div>

                <div class="guide-section-label">Zoom & Pan</div>
                <div class="gesture-grid">
                    <div class="gesture-item">
                        <span class="gesture-icon">🤏</span>
                        <span class="gesture-name">Pinch</span>
                        <span class="gesture-desc">Zoom in / out</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">👆👆</span>
                        <span class="gesture-name">Double tap</span>
                        <span class="gesture-desc">Quick zoom 200% / reset</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">☝️↔️</span>
                        <span class="gesture-name">Drag (when zoomed)</span>
                        <span class="gesture-desc">Pan around the photo</span>
                    </div>
                </div>

                <div class="guide-section-label">Photo Controls</div>
                <div class="gesture-grid">
                    <div class="gesture-item">
                        <span class="gesture-icon">👆⏳</span>
                        <span class="gesture-name">Long press</span>
                        <span class="gesture-desc">Start / stop slideshow</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">🤟</span>
                        <span class="gesture-name">Three-finger tap</span>
                        <span class="gesture-desc">Toggle photo info</span>
                    </div>
                </div>

                <div class="guide-section-label">Presentation Controls</div>
                <div class="gesture-grid">
                    <div class="gesture-item">
                        <span class="gesture-icon">&#128196;</span>
                        <span class="gesture-name">Tap presentation file</span>
                        <span class="gesture-desc">Opens in native app (PowerPoint / Keynote)</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">&#128072;&#8594;</span>
                        <span class="gesture-name">Swipe left / right</span>
                        <span class="gesture-desc">Next / previous slide</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">&#129295;</span>
                        <span class="gesture-name">Pinch</span>
                        <span class="gesture-desc">Zoom in / out (PDF)</span>
                    </div>
                </div>

                <div class="guide-section-label">Video / Audio Controls</div>
                <div class="gesture-grid">
                    <div class="gesture-item">
                        <span class="gesture-icon">👆</span>
                        <span class="gesture-name">Tap</span>
                        <span class="gesture-desc">Play / pause</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">👆👆</span>
                        <span class="gesture-name">Double tap left / right</span>
                        <span class="gesture-desc">Skip back / forward 10s</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">👆↕️</span>
                        <span class="gesture-name">Swipe up / down (right side)</span>
                        <span class="gesture-desc">Volume up / down</span>
                    </div>
                    <div class="gesture-item">
                        <span class="gesture-icon">👆⏳↔️</span>
                        <span class="gesture-name">Long press + drag</span>
                        <span class="gesture-desc">Scrub through timeline</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Volume gesture overlay -->
    <div id="volume-overlay" class="volume-overlay" style="display: none;">
        <div class="volume-overlay-icon" id="volume-overlay-icon">&#128266;</div>
        <div class="volume-overlay-bar"><div id="volume-overlay-fill" class="volume-overlay-fill" style="width: 100%"></div></div>
        <div id="volume-overlay-text" class="volume-overlay-text">100%</div>
    </div>

    <!-- Scrub gesture overlay -->
    <div id="scrub-overlay" class="scrub-overlay" style="display: none;">
        <div id="scrub-overlay-time" class="scrub-overlay-time">0:00</div>
        <div class="scrub-overlay-label">Scrubbing</div>
    </div>

    <!-- Loading overlay -->
    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div id="loading-text" class="loading-text">Scanning folders...</div>
    </div>

    <!-- Folder Browser -->
    <div id="browser-view" class="browser-view">
        <!-- Roots / Drives -->
        <div id="roots-section" class="browser-section">
            <div class="section-label">Drives & Locations</div>
            <div id="roots-list" class="file-list"></div>
        </div>

        <!-- Search bar -->
        <div id="search-section" class="search-section" style="display: none;">
            <div class="search-wrapper">
                <input id="search-input" class="search-input" type="text" placeholder="Search media by name..." autocomplete="off">
                <button id="search-clear-btn" class="search-clear-btn" style="display: none;">✕</button>
            </div>
            <div id="search-results" class="file-list"></div>
        </div>

        <!-- Sort & Current folder contents -->
        <div id="folder-section" class="browser-section" style="display: none;">
            <div class="folder-header">
                <div id="current-path" class="current-path"></div>
                <select id="sort-select" class="sort-select">
                    <option value="name">Name</option>
                    <option value="date">Date</option>
                    <option value="size">Size</option>
                </select>
            </div>
            <div id="filter-bar" class="filter-bar">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="image">Photos</button>
                <button class="filter-btn" data-filter="video">Videos</button>
                <button class="filter-btn" data-filter="audio">Audio</button>
                <button class="filter-btn" data-filter="presentation">Docs</button>
            </div>
            <div id="folder-list" class="file-list"></div>
        </div>
    </div>

    <!-- Photo Controller -->
    <div id="photo-view" class="photo-view" style="display: none;">
        <!-- Swipe area -->
        <div id="swipe-area" class="swipe-area">
            <div class="swipe-hint">
                <div class="swipe-arrows">&#8592; Swipe &#8594;</div>
                <div class="swipe-label">Swipe to navigate media</div>
            </div>
            <div id="photo-counter" class="photo-counter">1 / 1</div>
            <div id="current-photo-name" class="current-photo-name"></div>
        </div>

        <!-- Media controls (video/audio) -->
        <div id="media-controls" class="media-controls" style="display: none;">
            <div class="media-progress-row">
                <span id="media-current-time" class="media-time">0:00</span>
                <input id="media-seek-bar" class="media-seek-bar" type="range" min="0" max="100" step="0.1" value="0">
                <span id="media-duration" class="media-time">0:00</span>
            </div>
            <div class="media-buttons-row">
                <button id="skip-back-btn" class="media-btn">-10s</button>
                <button id="play-pause-btn" class="media-btn media-play-btn">&#9654;</button>
                <button id="skip-forward-btn" class="media-btn">+10s</button>
            </div>
            <div class="media-volume-row">
                <button id="mute-btn" class="media-btn media-mute-btn">&#128266;</button>
                <input id="volume-slider" class="media-volume-slider" type="range" min="0" max="100" value="100">
            </div>
        </div>

        <!-- Zoom & Rotate controls -->
        <div id="zoom-controls" class="zoom-controls">
            <button id="zoom-out-btn" class="zoom-btn">&#8722;</button>
            <span id="zoom-level" class="zoom-level">100%</span>
            <button id="zoom-in-btn" class="zoom-btn">&#43;</button>
            <button id="zoom-reset-btn" class="zoom-btn zoom-reset">Reset</button>
            <button id="rotate-btn" class="zoom-btn rotate-btn">&#8635;</button>
        </div>

        <!-- Slideshow & Shuffle controls -->
        <div id="slideshow-controls" class="slideshow-controls">
            <button id="slideshow-btn" class="slideshow-btn">Slideshow</button>
            <button id="shuffle-btn" class="shuffle-btn">Shuffle</button>
            <div id="slideshow-options" class="slideshow-options" style="display: none;">
                <button class="slideshow-interval-btn" data-interval="3">3s</button>
                <button class="slideshow-interval-btn" data-interval="5">5s</button>
                <button class="slideshow-interval-btn" data-interval="10">10s</button>
            </div>
        </div>

        <!-- Thumbnail strip -->
        <div id="thumbnail-strip" class="thumbnail-strip"></div>

        <!-- Back to folders button -->
        <button id="browse-btn" class="browse-btn">Browse Folders</button>
    </div>

    <!-- Presentation Controller -->
    <div id="presentation-view" class="presentation-view" style="display: none;">
        <div class="pres-file-info">
            <div class="pres-icon">&#128196;</div>
            <div id="pres-file-name" class="pres-file-name"></div>
            <div class="pres-status">Presenting</div>
        </div>
        <div id="pres-swipe-area" class="pres-swipe-area">
            <div class="pres-swipe-hint">
                <div class="pres-arrows">&#8592; Swipe &#8594;</div>
                <div class="pres-hint-text">Swipe or tap to navigate slides</div>
            </div>
        </div>
        <div class="pres-nav-buttons">
            <button id="pres-prev-btn" class="pres-nav-btn">&#9664; Prev</button>
            <button id="pres-next-btn" class="pres-nav-btn pres-nav-primary">Next &#9654;</button>
        </div>
        <button id="pres-exit-btn" class="pres-exit-btn">Exit Presentation</button>
    </div>

    <!-- Toast notification -->
    <div id="toast" class="toast" style="display: none;"></div>

    <!-- Controller Mini Player (visible while browsing when media is playing) -->
    <div id="ctrl-mini-player" class="ctrl-mini-player" style="display: none;">
        <button id="cmp-play" class="cmp-btn cmp-play-btn">&#9654;</button>
        <div class="cmp-info">
            <div id="cmp-title" class="cmp-title"></div>
            <div class="cmp-progress-wrap">
                <span id="cmp-time" class="cmp-time">0:00</span>
                <div class="cmp-progress-bar"><div id="cmp-progress-fill" class="cmp-progress-fill"></div></div>
                <span id="cmp-duration" class="cmp-time">0:00</span>
            </div>
        </div>
        <button id="cmp-expand" class="cmp-btn cmp-expand-btn">&#9650;</button>
    </div>

    <script src="/static/socket.io.min.js"></script>
    <script src="/static/controller.js"></script>
    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("/static/sw.js");
      }
    </script>
</body>
</html>
