{% extends "base.html" %}
{% block title %}Import Upstream Keys - Janus{% endblock %}
{% block inventory_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-4">Key Inventory</h1>
{% with active='import' %}{% include "inventory_nav.html" %}{% endwith %}

<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6">
    <h2 class="text-lg font-bold text-white mb-2">Expected JSON format</h2>
    <p class="text-gray-400 text-sm mb-4">
        Upload a <code class="text-gray-300">.json</code> export from another key manager
        (e.g. Dashboard_For_Apis) or any file that matches the shape below.
        Janus accepts either a top-level <code class="text-gray-300">keys</code> array or a bare array of key objects.
    </p>

    <div class="grid lg:grid-cols-2 gap-4 mb-6">
        <div>
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Wrapped export</p>
            <pre class="bg-gray-900 border border-gray-700 rounded-lg p-4 text-xs text-gray-300 overflow-x-auto"><code>{
  "keys": [
    {
      "key_value": "sk-proj-...",
      "provider_id": "openai",
      "key_label": "work account",
      "status": "active",
      "is_valid": true,
      "credits_remaining": 42.5
    }
  ]
}</code></pre>
        </div>
        <div>
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Bare array</p>
            <pre class="bg-gray-900 border border-gray-700 rounded-lg p-4 text-xs text-gray-300 overflow-x-auto"><code>[
  {
    "key": "gsk_...",
    "provider_id": "groq",
    "priority": 0
  },
  {
    "key_value": "sk-or-...",
    "node_id": "laptop-1"
  }
]</code></pre>
        </div>
    </div>

    <div class="overflow-x-auto mb-6">
        <table class="w-full text-sm text-left">
            <thead>
                <tr class="text-gray-500 border-b border-gray-700">
                    <th class="py-2 pr-4 font-medium">Field</th>
                    <th class="py-2 pr-4 font-medium">Required</th>
                    <th class="py-2 font-medium">Notes</th>
                </tr>
            </thead>
            <tbody class="text-gray-300">
                <tr class="border-b border-gray-700/60">
                    <td class="py-2 pr-4 font-mono text-gray-200">key_value</td>
                    <td class="py-2 pr-4">Yes*</td>
                    <td class="py-2 text-gray-400">API key string. Alias: <code class="text-gray-300">key</code></td>
                </tr>
                <tr class="border-b border-gray-700/60">
                    <td class="py-2 pr-4 font-mono text-gray-200">provider_id</td>
                    <td class="py-2 pr-4">No</td>
                    <td class="py-2 text-gray-400">e.g. <code class="text-gray-300">openai</code>, <code class="text-gray-300">groq</code>. Auto-detected from key prefix when omitted.</td>
                </tr>
                <tr class="border-b border-gray-700/60">
                    <td class="py-2 pr-4 font-mono text-gray-200">key_label</td>
                    <td class="py-2 pr-4">No</td>
                    <td class="py-2 text-gray-400">Friendly name shown in the key list.</td>
                </tr>
                <tr class="border-b border-gray-700/60">
                    <td class="py-2 pr-4 font-mono text-gray-200">custom_base_url</td>
                    <td class="py-2 pr-4">No</td>
                    <td class="py-2 text-gray-400">Override upstream base URL for custom/proxy endpoints.</td>
                </tr>
                <tr class="border-b border-gray-700/60">
                    <td class="py-2 pr-4 font-mono text-gray-200">node_id / source_node</td>
                    <td class="py-2 pr-4">No</td>
                    <td class="py-2 text-gray-400">Source machine or node label from the export.</td>
                </tr>
                <tr class="border-b border-gray-700/60">
                    <td class="py-2 pr-4 font-mono text-gray-200">priority</td>
                    <td class="py-2 pr-4">No</td>
                    <td class="py-2 text-gray-400">Integer routing priority (default <code class="text-gray-300">0</code>).</td>
                </tr>
                <tr>
                    <td class="py-2 pr-4 font-mono text-gray-200">status, credits_*, health_*</td>
                    <td class="py-2 pr-4">No</td>
                    <td class="py-2 text-gray-400">Optional metadata from the source export. Janus re-validates keys after import.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="text-gray-500 text-xs mb-6">
        * Each object must include <code class="text-gray-400">key_value</code> or <code class="text-gray-400">key</code>.
        Duplicate keys (same hash) are skipped or updated per ingestion rules.
    </p>

    <h2 class="text-lg font-bold text-white mb-4">Upload file</h2>
    <form hx-post="/dashboard/api/inventory/import"
          hx-target="#import-results"
          hx-swap="innerHTML"
          hx-encoding="multipart/form-data"
          class="space-y-4">
        <div>
            <label class="block text-sm text-gray-300 mb-2">Export JSON file</label>
            <input type="file" name="export_file" accept=".json,application/json" required
                   class="block w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-gray-700 file:text-white hover:file:bg-gray-600">
        </div>
        <label class="flex items-center gap-2 text-sm text-gray-300">
            <input type="checkbox" name="verify" value="true" checked
                   class="rounded border-gray-600 bg-gray-900 text-blue-600">
            Show verification summary after import
        </label>
        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium cursor-pointer">
            Import Keys
        </button>
    </form>
</div>

<div id="import-results" class="space-y-4"></div>
{% endblock %}