#!/usr/bin/env python3
"""Asset Inventory — what gear is stored where, by site.

Builder-style page (same feel as the Todo page). Hierarchy:
  Site → Container (connex / truck / toolbox / …) → Category → Item.
Categories are per-container and fully custom; items carry a required quantity, and each
category can hold grouped photos. Data model lives in connex.db (containers,
container_categories, items, photos). See connex_db.py.
"""

import cgi
import os
import sys

sys.path.insert(0, '/opt/ngon/apps')
sys.path.insert(0, '/var/www/html/ngon')
from managers.auth_manager import AuthManager, generate_login_modal_html, generate_access_denied_html
from links import generate_dropdown_html, generate_dropdown_css, generate_dropdown_js

# cache-buster for static JS: mtime changes on every deploy, so browsers/phones always
# fetch the current connex.js instead of a stale cached copy.
try:
    _JS_VER = int(os.path.getmtime('/var/www/html/ngon/connex/connex.js'))
except OSError:
    _JS_VER = 0

form = cgi.FieldStorage()
auth = AuthManager('connex')
auth_required, should_exit, headers = auth.require_auth(form)

if should_exit:
    print("Content-Type: application/json")
    if headers:
        print(headers)
    print("")
    if auth_required:
        print('{"success": false, "error": "Authentication required"}')
    else:
        print('{"success": true}')
    sys.exit(0)

print("Content-Type: text/html")
print("Cache-Control: no-cache, no-store, must-revalidate")
print("")

if auth_required:
    print("<!DOCTYPE html><html><head><title>NGON Asset Inventory</title>")
    print(f"<style>{generate_dropdown_css()}</style></head><body>")
    username = auth.is_authenticated()
    if username:
        print(generate_access_denied_html("Asset Inventory"))
    else:
        print(generate_login_modal_html("Asset Inventory"))
    print("</body></html>")
    sys.exit(0)

_user_access = AuthManager.get_user_access()

print(f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>NGON Asset Inventory</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <style>
        {generate_dropdown_css()}

        * {{ -webkit-tap-highlight-color: transparent; }}
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        textarea:-webkit-autofill,
        select:-webkit-autofill {{
            -webkit-text-fill-color: #e0e0e0;
            -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset;
            box-shadow: 0 0 0 1000px #0d0d0d inset;
            caret-color: #e0e0e0;
            transition: background-color 9999s ease-in-out 0s;
        }}
        body {{
            background: #1a1a1a;
            color: #e0e0e0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.4;
            margin: 0;
            padding: 0;
            padding-bottom: 90px;
            overflow-x: hidden;
        }}

        /* Header — floating box style */
        .header {{
            background-color: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 20px 24px;
            margin: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }}
        .header h1.dropdown-title {{ font-size: 1.6em; font-weight: 600; margin: 0; line-height: 1.2; }}

        /* Sticky toolbar */
        .toolbar {{
            position: sticky; top: 0; z-index: 50; background: #1a1a1a;
            padding: 8px 14px; display: flex; gap: 8px; align-items: center;
            flex-wrap: wrap; border-bottom: 1px solid #2a2a2a;
        }}
        .toolbar .grow {{ flex: 1; min-width: 120px; }}
        .tb-label {{ font-size: 12px; color: #888; }}
        select.tb-select, .search-box {{
            background: #0d0d0d; color: #e0e0e0; border: 1px solid #2a2a2a;
            border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit;
        }}
        select.tb-select:focus, .search-box:focus {{ outline: none; border-color: #4a9eff; }}
        .search-box {{ width: 100%; box-sizing: border-box; }}

        .btn {{
            background: #2a2a2a; color: #e0e0e0; border: 1px solid #3a3a3a;
            padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
            transition: all 0.15s; white-space: nowrap;
        }}
        .btn:hover {{ background: #3a3a3a; }}
        .btn-primary {{ background: #00ff00; color: #000; border-color: #00ff00; font-weight: 600; }}
        .btn-primary:hover {{ background: #00cc00; }}
        .btn-sm {{ padding: 5px 9px; font-size: 12px; }}

        .main-content {{ padding: 0 14px 20px 14px; max-width: 1600px; margin: 0 auto; }}

        /* Site group */
        .group {{ margin-top: 14px; }}
        .group-header {{ display: flex; align-items: center; gap: 10px; padding: 8px 4px; cursor: pointer; user-select: none; }}
        .site-drag {{ color: #555; cursor: grab; padding: 2px 2px; font-size: 13px; touch-action: none; }}
        .site-drag:active {{ cursor: grabbing; }}
        .sortable-ghost {{ opacity: 0.4; }}
        .sortable-chosen .group-header {{ background: rgba(74,158,255,0.08); border-radius: 8px; }}
        .group-caret {{ color: #666; font-size: 12px; width: 12px; transition: transform 0.15s; }}
        .group.collapsed .group-caret {{ transform: rotate(-90deg); }}
        .group-title {{ font-weight: 600; font-size: 16px; color: #e0e0e0; }}
        .group-count {{ font-size: 12px; color: #777; }}
        .group.collapsed .group-body {{ display: none; }}

        /* Container card */
        .connex-card {{
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-left: 3px solid #4a9eff; border-radius: 10px; padding: 12px 14px; margin: 10px 0;
        }}
        .connex-head {{ display: flex; align-items: center; gap: 10px; cursor: pointer; }}
        .connex-caret {{ color: #666; font-size: 11px; width: 11px; transition: transform 0.15s; }}
        .connex-card.collapsed .connex-caret {{ transform: rotate(-90deg); }}
        .connex-card.collapsed .connex-body {{ display: none; }}
        .connex-name {{ font-weight: 600; font-size: 15px; }}
        .type-badge {{
            font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
            color: #9ecbff; background: #1c2733; border: 1px solid #2f4a63;
            border-radius: 10px; padding: 2px 7px;
        }}
        .connex-spacer {{ flex: 1; }}
        .connex-meta {{ font-size: 12px; color: #888; }}
        .connex-edit {{ color: #666; cursor: pointer; padding: 4px 6px; }}
        .connex-edit:hover {{ color: #4a9eff; }}

        /* Category subsection */
        .cat-section {{ margin-top: 12px; }}
        .cat-head {{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }}
        .cat-name {{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #4a9eff; }}
        .cat-name .dot {{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align: middle; }}
        .cat-spacer {{ flex: 1; }}
        .cat-remove {{ color: #664; cursor: pointer; font-size: 12px; padding: 3px 6px; }}
        .cat-remove:hover {{ color: #ff6666; }}
        .add-cat-btn {{ margin-top: 12px; color: #888; border-style: dashed; }}
        .add-cat-btn:hover {{ color: #4a9eff; border-color: #4a9eff; }}
        .cat-empty-note {{ color:#666; font-size:12px; padding: 4px 0; }}

        .item-row {{
            display: flex; align-items: center; gap: 8px; padding: 6px 8px;
            border-bottom: 1px solid #1f1f1f; font-size: 14px; cursor: pointer; border-radius: 6px;
        }}
        .item-row:hover {{ background: rgba(255,255,255,0.04); }}
        .item-desc {{ flex: 1; word-break: break-word; }}
        .item-qty {{ color: #00ff00; font-weight: 600; font-variant-numeric: tabular-nums; }}

        /* Photo strip */
        .photo-strip {{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }}
        .photo-thumb {{
            width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
            border: 1px solid #333; cursor: pointer; background: #0d0d0d;
        }}
        .photo-add {{
            width: 64px; height: 64px; border-radius: 8px; border: 1px dashed #3a3a3a;
            background: transparent; color: #888; cursor: pointer; font-size: 18px;
            display: flex; align-items: center; justify-content: center;
        }}
        .photo-add:hover {{ border-color: #4a9eff; color: #4a9eff; }}

        .empty-state {{ text-align: center; color: #666; padding: 50px 20px; font-size: 14px; }}

        /* FAB */
        .fab {{
            position: fixed; right: 18px; bottom: 18px; z-index: 60;
            background: #00ff00; color: #000; border: none; width: 56px; height: 56px;
            border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
        }}

        /* Bottom sheets */
        .sheet-overlay {{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: flex-end; justify-content: center; }}
        .sheet-overlay.active {{ display: flex; }}
        .sheet {{
            background: #1c1c1c; border-top: 1px solid #333; border-radius: 16px 16px 0 0;
            width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
            padding: 16px 16px 28px 16px; box-sizing: border-box; animation: slideUp 0.18s ease-out;
        }}
        @keyframes slideUp {{ from {{ transform: translateY(100%); }} to {{ transform: translateY(0); }} }}
        .sheet-grip {{ width: 40px; height: 4px; background: #444; border-radius: 2px; margin: 0 auto 12px auto; }}
        .sheet h3 {{ margin: 0 0 14px 0; color: #00ff00; font-size: 18px; }}
        .sheet-section {{ margin-bottom: 16px; }}
        .sheet-section > label {{ display: block; font-size: 12px; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }}
        .sheet input[type=text], .sheet input[type=number], .sheet textarea, .sheet select {{
            width: 100%; box-sizing: border-box; background: #0d0d0d; color: #e0e0e0;
            border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit;
        }}
        .sheet textarea {{ resize: vertical; min-height: 60px; }}
        .sheet input:focus, .sheet textarea:focus, .sheet select:focus {{ outline: none; border-color: #00ff00; }}

        .chip-row {{ display: flex; flex-wrap: wrap; gap: 6px; }}
        .chip-sel {{
            font-size: 13px; padding: 6px 11px; border-radius: 16px; border: 1px solid #3a3a3a;
            background: #232323; color: #ccc; cursor: pointer; user-select: none;
        }}
        .chip-sel.on {{ background: #4a9eff; color: #000; border-color: #4a9eff; font-weight: 600; }}
        .chip-sel.cat.on {{ background: #00ff00; border-color: #00ff00; }}
        .chip-add {{ border-style: dashed; color: #888; background: transparent; }}

        /* quantity stepper */
        .qty-stepper {{ display: flex; align-items: center; gap: 10px; }}
        .sheet .qty-stepper input {{ width: 84px; text-align: center; font-size: 18px; -moz-appearance: textfield; }}
        .qty-btn {{
            width: 48px; height: 48px; flex-shrink: 0; padding: 0; font-size: 22px; line-height: 1;
            display: flex; align-items: center; justify-content: center;
        }}

        .sheet-buttons {{ display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }}
        .sheet-buttons .right {{ display: flex; gap: 8px; }}
        .btn-danger {{ background: transparent; color: #ff6666; border-color: #553333; }}
        .btn-danger:hover {{ background: #3a1a1a; }}

        /* Lightbox */
        .lightbox {{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 150; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 20px; box-sizing: border-box; }}
        .lightbox.active {{ display: flex; }}
        .lightbox img {{ max-width: 100%; max-height: 78vh; border-radius: 10px; }}
        .lightbox-bar {{ display: flex; gap: 10px; }}

        /* upload progress toast */
        .toast {{
            display: none; position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
            background: #232a33; border: 1px solid #34465a; color: #cfe3ff; padding: 10px 18px;
            border-radius: 8px; font-size: 13px; z-index: 210; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }}
        .toast.show {{ display: block; }}

        /* page-changed banner */
        .changed-banner {{
            display: none; position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
            background: #ff6600; color: #000; padding: 10px 20px; border-radius: 8px;
            font-weight: 600; cursor: pointer; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }}
        .changed-banner.show {{ display: block; }}

        @media (max-width: 768px) {{
            .header {{ padding: 14px 16px; margin: 10px; }}
            .header h1.dropdown-title {{ font-size: 1.3em; }}
        }}
    </style>
</head>
<body>

<div class="header">
    <div class="dropdown">
        <h1 class="dropdown-title">NGON Mining - Asset Inventory</h1>
        <div class="dropdown-content">{generate_dropdown_html(_user_access)}</div>
    </div>
</div>

<div class="toolbar">
    <span class="tb-label">Site</span>
    <select id="siteFilter" class="tb-select" onchange="onSiteFilter(this.value)"><option value="">All sites</option></select>
    <span class="tb-label">Category</span>
    <select id="catFilter" class="tb-select" onchange="onCatFilter(this.value)"><option value="">All</option></select>
    <div class="grow"><input id="searchBox" class="search-box" type="text" placeholder="Search items..." oninput="onSearch(this.value)"></div>
</div>

<div id="changedBanner" class="changed-banner" onclick="refresh()">Updated elsewhere — tap to reload</div>

<div class="main-content">
    <div id="groupsContainer"></div>
    <div id="emptyState" class="empty-state" style="display:none;">No containers yet. Tap + to add one.</div>
</div>

<button class="fab" onclick="openContainerSheet()" title="New container"><i class="fas fa-plus"></i></button>

<div id="containerSheet" class="sheet-overlay"><div class="sheet" id="containerSheetBody"></div></div>
<div id="itemSheet" class="sheet-overlay"><div class="sheet" id="itemSheetBody"></div></div>
<div id="catSheet" class="sheet-overlay"><div class="sheet" id="catSheetBody"></div></div>
<div id="lightbox" class="lightbox">
    <img id="lightboxImg" src="" alt="">
    <div class="lightbox-bar">
        <button class="btn btn-primary" id="lightboxReplace"><i class="fas fa-arrows-rotate"></i> Replace</button>
        <button class="btn btn-danger" id="lightboxDelete"><i class="fas fa-trash"></i> Delete</button>
        <button class="btn" onclick="closeLightbox()">Close</button>
    </div>
</div>
<div id="toast" class="toast"></div>

<!-- hidden file inputs: multi for category uploads, single for replacing one photo -->
<input type="file" id="photoInput" accept="image/*" multiple style="display:none">
<input type="file" id="photoReplaceInput" accept="image/*" style="display:none">

<script>
    window.CURRENT_USER = {repr(AuthManager.get_current_user() or 'unknown')};
</script>
<script src="/connex/connex.js?v={_JS_VER}"></script>
<script>{generate_dropdown_js()}</script>
</body>
</html>""")
