{% extends "contacts_base.html" %}

{% block title %}Add Contact - mc-webui{% endblock %}

{% block extra_head %}
<!-- html5-qrcode for QR scanning -->
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
{% endblock %}

{% block page_content %}
<div id="addPageContent" class="p-3">
    <!-- Page Header -->
    <div class="mb-3">
        <h4 class="mb-2">
            <i class="bi bi-person-plus"></i> Add Contact
        </h4>
    </div>

    <!-- Action Buttons -->
    <div class="d-flex gap-2 mb-3">
        <button class="btn btn-outline-secondary btn-sm" onclick="navigateTo('/contacts/manage');">
            <i class="bi bi-arrow-left"></i> Back
        </button>
    </div>

    <!-- Input Mode Tabs -->
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-uri" data-bs-toggle="tab" data-bs-target="#pane-uri" type="button" role="tab">
                <i class="bi bi-link-45deg"></i> URI
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-qr" data-bs-toggle="tab" data-bs-target="#pane-qr" type="button" role="tab">
                <i class="bi bi-qr-code-scan"></i> QR Code
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-manual" data-bs-toggle="tab" data-bs-target="#pane-manual" type="button" role="tab">
                <i class="bi bi-pencil"></i> Manual
            </button>
        </li>
    </ul>

    <div class="tab-content">
        <!-- URI Paste Tab -->
        <div class="tab-pane fade show active" id="pane-uri" role="tabpanel">
            <div class="mb-3">
                <label for="uriInput" class="form-label">MeshCore URI:</label>
                <textarea class="form-control font-monospace" id="uriInput" rows="3"
                    placeholder="meshcore://contact/add?name=...&public_key=...&type=..."></textarea>
                <small class="form-text text-muted">Paste a meshcore:// URI from the MeshCore mobile app</small>
            </div>
            <!-- URI Preview -->
            <div id="uriPreview" class="alert alert-info d-none mb-3">
                <strong>Preview:</strong>
                <div><span class="text-muted">Name:</span> <span id="uriPreviewName"></span></div>
                <div><span class="text-muted">Key:</span> <span id="uriPreviewKey" class="font-monospace small" style="word-break: break-all;"></span></div>
                <div><span class="text-muted">Type:</span> <span id="uriPreviewType"></span></div>
            </div>
            <button class="btn btn-success" id="addFromUriBtn" disabled>
                <i class="bi bi-plus-circle"></i> Add Contact
            </button>
        </div>

        <!-- QR Code Tab -->
        <div class="tab-pane fade" id="pane-qr" role="tabpanel">
            <!-- Camera Scanner -->
            <div id="qrScannerContainer" class="mb-3">
                <div id="qrReader" style="width: 100%; max-width: 500px;"></div>
                <div id="qrCameraButtons" class="d-flex gap-2 mt-2">
                    <button class="btn btn-primary btn-sm" id="startCameraBtn">
                        <i class="bi bi-camera-video"></i> Start Camera
                    </button>
                    <button class="btn btn-outline-secondary btn-sm d-none" id="stopCameraBtn">
                        <i class="bi bi-stop-circle"></i> Stop Camera
                    </button>
                </div>
            </div>
            <!-- File Upload Fallback -->
            <div class="mb-3">
                <label for="qrFileInput" class="form-label">Or upload a QR code image:</label>
                <input type="file" class="form-control" id="qrFileInput" accept="image/*">
            </div>
            <!-- QR Result -->
            <div id="qrResult" class="alert alert-success d-none mb-3">
                <strong>Scanned:</strong>
                <div><span class="text-muted">Name:</span> <span id="qrResultName"></span></div>
                <div><span class="text-muted">Key:</span> <span id="qrResultKey" class="font-monospace small" style="word-break: break-all;"></span></div>
                <div><span class="text-muted">Type:</span> <span id="qrResultType"></span></div>
            </div>
            <div id="qrError" class="alert alert-danger d-none mb-3"></div>
            <button class="btn btn-success d-none" id="addFromQrBtn">
                <i class="bi bi-plus-circle"></i> Add Contact
            </button>
        </div>

        <!-- Manual Entry Tab -->
        <div class="tab-pane fade" id="pane-manual" role="tabpanel">
            <div class="mb-3">
                <label for="manualName" class="form-label">Name:</label>
                <input type="text" class="form-control" id="manualName" placeholder="Contact name" maxlength="32">
            </div>
            <div class="mb-3">
                <label for="manualKey" class="form-label">Public Key (64 hex chars):</label>
                <input type="text" class="form-control font-monospace" id="manualKey"
                    placeholder="e.g. a1b2c3d4..." maxlength="64" pattern="[0-9a-fA-F]{64}">
                <small class="form-text text-muted" id="manualKeyCount">0 / 64 characters</small>
            </div>
            <div class="mb-3">
                <label for="manualType" class="form-label">Contact Type:</label>
                <select class="form-select" id="manualType">
                    <option value="1" selected>COM (Companion)</option>
                    <option value="2">REP (Repeater)</option>
                    <option value="3">ROOM (Room Server)</option>
                    <option value="4">SENS (Sensor)</option>
                </select>
            </div>
            <button class="btn btn-success" id="addManualBtn" disabled>
                <i class="bi bi-plus-circle"></i> Add Contact
            </button>
        </div>
    </div>

    <!-- Status Messages -->
    <div id="addStatus" class="mt-3 d-none"></div>
</div>
{% endblock %}