<!doctype html>
{% import "_artifact_links.html" as artifact_links %}
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dewey Console</title>
    <link rel="icon" href="{{ static_url('favicon.svg') }}" type="image/svg+xml" />
    <link rel="stylesheet" href="{{ static_url('console.css') }}" />
  </head>
  <body>
    {% if deployment.name and not deployment.is_production %}
    <div class="deployment-banner" style="background: {{ deployment.color }};">{{ deployment.name|upper }}</div>
    {% endif %}
    <div class="shell">
      <header class="topbar">
        <div class="brandline">
          <div class="eyebrow">Dewey Console</div>
          <h1 class="title">Artifact Control Room</h1>
          <div class="subtitle">{{ profile.email }}</div>
        </div>
        <div class="navlinks">
          <a class="navlink" href="/artifacts">Artifacts</a>
          <a class="navlink" href="/literature">Literature Search</a>
          <a class="navlink" href="/search">Unified Search</a>
          <a class="navlink" href="/ui/anomalies">Anomalies</a>
          <a class="navlink" href="/ui/observability">Observability</a>
          {% if is_admin %}
          <a class="navlink" href="/admin">Admin</a>
          {% endif %}
          <form class="logout-form" method="post" action="/auth/logout">
            <button type="submit">Logout</button>
          </form>
        </div>
      </header>

      <main class="page">
        <section class="dashboard-spacer" aria-hidden="true"></section>

        <section class="metrics">
          <article class="metric-card">
            <div class="metric-label">Artifacts</div>
            <div class="metric-value">{{ metrics.artifact_count }}</div>
            <div class="metric-caption">Known artifact records</div>
          </article>
          <article class="metric-card">
            <div class="metric-label">Active Shares</div>
            <div class="metric-value">{{ metrics.active_share_count }}</div>
            <div class="metric-caption">Currently issued access links</div>
          </article>
          <article class="metric-card">
            <div class="metric-label">Recent Imports</div>
            <div class="metric-value">{{ metrics.recent_import_count }}</div>
            <div class="metric-caption">Copy, reference, or upload flows</div>
          </article>
          <article class="metric-card">
            <div class="metric-label">Verification Flags</div>
            <div class="metric-value">{{ metrics.verification_failures }}</div>
            <div class="metric-caption">Artifacts needing storage attention</div>
          </article>
        </section>

        <section class="panel">
          <div class="panel-header">
            <div>
              <h3>Quick Register</h3>
              <div class="panel-copy">
                Register one local file, public URL, or S3 URI. Dewey infers the artifact type from the extension unless you override it.
              </div>
            </div>
            <a class="button" href="/artifacts">Comprehensive Artifact Registry</a>
          </div>
          <form method="post" action="/ui/register" enctype="multipart/form-data">
            <div class="form-grid">
              <div class="field">
                <label for="dashboard_artifact_type">Artifact Type</label>
                <select id="dashboard_artifact_type" name="artifact_type">
                  <option value="n/a" {% if quick_register_form.get("artifact_type", "n/a") in ["", "n/a"] %}selected{% endif %}>Auto detect / n/a</option>
                  {% for item in artifact_types %}
                  {% if item != "n/a" %}
                  <option value="{{ item }}" {% if quick_register_form.get("artifact_type") == item %}selected{% endif %}>{{ item }}</option>
                  {% endif %}
                  {% endfor %}
                </select>
              </div>
              <div class="field">
                <label for="dashboard_file_data">Local File</label>
                <div class="file-picker-stack">
                  <input id="dashboard_file_data" name="file_data" type="file" />
                  <div class="file-picker-actions">
                    <button class="button" type="button" data-file-dialog-target="dashboard_file_data">Choose File</button>
                    <span class="note mono file-picker-selection" data-file-selection-for="dashboard_file_data">No file selected</span>
                  </div>
                </div>
              </div>
              <div class="field">
                <label for="dashboard_source_url">Public URL</label>
                <input
                  id="dashboard_source_url"
                  name="source_url"
                  type="url"
                  placeholder="https://example.com/report.pdf"
                  value="{{ quick_register_form.get("source_url", "") }}"
                />
              </div>
              <div class="field">
                <label for="dashboard_source_s3_uri">S3 URI</label>
                <input
                  id="dashboard_source_s3_uri"
                  name="source_s3_uri"
                  type="text"
                  placeholder="s3://bucket/path/file.bam"
                  value="{{ quick_register_form.get("source_s3_uri", "") }}"
                />
              </div>
            </div>
            <div class="form-actions">
              <button type="submit">Register Source</button>
              <span class="note">Choose exactly one source. Use the full registry for S3 prefixes, bulk TSV, or artifact sets.</span>
            </div>
            {% if quick_register_result %}
            <div class="{% if quick_register_result.state == 'ok' %}status-ok{% else %}status-error{% endif %}">
              {{ quick_register_result.detail }}
              {% if quick_register_result.artifact_euid %}
              {{ artifact_links.artifact_euid_link(quick_register_result.artifact_euid) }}
              {% endif %}
            </div>
            {% endif %}
          </form>
        </section>

        <section class="content-grid">
          <section class="panel">
            <div class="panel-header">
              <div>
                <h3>Recent Artifacts</h3>
                <div class="panel-copy">Latest canonical artifact registrations and imports.</div>
              </div>
              <div class="form-actions" style="margin-top: 0;">
                <a class="button" href="/literature">Open Literature</a>
                <a class="button" href="/artifacts">Open Artifacts</a>
                <a class="button" href="/search">Open Search</a>
                <a class="button" href="/ui/anomalies">Open Anomalies</a>
                <a class="button" href="/ui/observability">Open Observability</a>
              </div>
            </div>
            <div class="table-wrap">
              <table>
                <thead>
                  <tr>
                    <th>Artifact</th>
                    <th>Type</th>
                    <th>Mode</th>
                    <th>Storage</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in artifacts %}
                  <tr>
                    <td>
                      <div>{{ artifact_links.artifact_euid_link(item.artifact_euid) }}</div>
                      <div>{{ item.original_filename or item.key }}</div>
                    </td>
                    <td>{{ item.artifact_type }}</td>
                    <td>{{ item.import_mode or "register" }}</td>
                    <td>{{ artifact_links.artifact_storage_action(item.artifact_euid, item.storage_uri) }}</td>
                    <td>
                      {% if item.storage_status == "verified" %}
                      <span class="pill pill-active">Verified</span>
                      {% elif item.storage_status in ["missing", "error"] %}
                      <span class="pill pill-alert">{{ item.storage_status }}</span>
                      {% else %}
                      <span class="pill">{{ item.storage_status or "registered" }}</span>
                      {% endif %}
                    </td>
                  </tr>
                  {% endfor %}
                  {% if not artifacts %}
                  <tr>
                    <td colspan="5">
                      <div class="empty-state">No artifacts registered yet.</div>
                    </td>
                  </tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          </section>

          <section class="stack">
            <section class="panel">
              <div class="panel-header">
                <div>
                  <h3>Issued Shares</h3>
                  <div class="panel-copy">Most recent artifact access records.</div>
                </div>
              </div>
              {% if share_references %}
              <div class="stack">
                {% for item in share_references %}
                <article class="panel" style="padding: 0.85rem 0.95rem; background: rgba(11, 17, 32, 0.78);">
                  <div class="eyebrow">{{ item.transport or "share" }}</div>
                  <div class="mono">{{ item.share_reference_euid }}</div>
                  <div class="note">Target: {{ item.target_euid }}</div>
                  <div class="results-meta" style="margin-top: 0.55rem;">
                    {% if item.status == "active" %}
                    <span class="pill pill-active">Active</span>
                    {% elif item.status == "error" %}
                    <span class="pill pill-alert">Error</span>
                    {% else %}
                    <span class="pill">{{ item.status or "pending" }}</span>
                    {% endif %}
                    <span class="pill">{{ item.expires_at or "No expiry" }}</span>
                  </div>
                </article>
                {% endfor %}
              </div>
              {% else %}
              <div class="empty-state">No share references issued yet.</div>
              {% endif %}
            </section>

            <section class="panel">
              <div class="panel-header">
                <div>
                  <h3>User Notes</h3>
              <div class="panel-copy">
                    Artifact browser work now lives in the dedicated Artifacts surface, while
                    Unified Search stays available for normalized registry queries.
                  </div>
                </div>
              </div>
              <div class="stack">
                <span class="pill">External links remain first-class</span>
                <span class="pill">Write operations stay idempotent</span>
                <span class="pill">Artifacts has browser intake and download</span>
              </div>
              <div class="note" style="margin-top: 0.85rem;">
                Use Artifacts for browser intake, download, and artifact-set workflows. Unified Search,
                Literature, Observability, and Anomalies remain available as specialized surfaces.
              </div>
            </section>
          </section>
        </section>
      </main>
    </div>
    <script>
      function describeSelectedFiles(input) {
        const files = Array.from(input.files || []);
        if (!files.length) {
          return "No file selected";
        }
        if (files.length === 1) {
          return files[0].name;
        }
        return `${files.length} files selected`;
      }

      function bindFileDialogButtons() {
        document.querySelectorAll("[data-file-dialog-target]").forEach((button) => {
          const targetId = button.dataset.fileDialogTarget;
          const input = targetId ? document.getElementById(targetId) : null;
          if (!input || input.tagName !== "INPUT" || input.type !== "file") {
            return;
          }
          button.addEventListener("click", () => input.click());
        });
      }

      function bindFileSelectionLabels() {
        document.querySelectorAll("[data-file-selection-for]").forEach((label) => {
          const targetId = label.dataset.fileSelectionFor;
          const input = targetId ? document.getElementById(targetId) : null;
          if (!input || input.tagName !== "INPUT" || input.type !== "file") {
            return;
          }
          const update = () => {
            label.textContent = describeSelectedFiles(input);
          };
          input.addEventListener("change", update);
          update();
        });
      }

      document.addEventListener("DOMContentLoaded", () => {
        bindFileDialogButtons();
        bindFileSelectionLabels();
      });
    </script>
  </body>
</html>
