{% extends "base.html" %}
{% block subheader %}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<style>
.anav{font-size:.82rem;text-decoration:none!important;padding:.25rem .55rem;border-radius:.25rem;transition:all .12s;white-space:nowrap}
.anav.act{color:#2ab870!important;font-weight:700;background:rgba(42,184,112,.12);border:1px solid rgba(42,184,112,.25)}
.anav:not(.act){color:#6c757d!important}
.anav:not(.act):hover{color:#2ab870!important;background:rgba(42,184,112,.08)}
.dhnav{font-size:.78rem;text-decoration:none!important;padding:.2rem .5rem;border-radius:.25rem;transition:all .12s;white-space:nowrap;border:1px solid transparent}
.dhnav.act{background:#198754;color:#fff!important;font-weight:600;border-color:#198754}
.dhnav:not(.act){color:#6c757d!important;background:#f8f9fa;border-color:#e9ecef}
.dhnav:not(.act):hover{color:#212529!important;background:#e9ecef}
</style>

{# ── Main admin nav (same as admin_monolith) ── #}
<div style="background:#ffffff;border-bottom:1px solid #dee2e6" class="py-1">
  <div class="container d-flex flex-wrap align-items-center gap-2 gap-md-3">
    <a href="{{ url_for('admin.admin_dashboard') }}" class="anav">
      <i class="fas fa-tachometer-alt me-1"></i>Dashboard</a>
    <a href="{{ url_for('admin.admin_users') }}" class="anav">
      <i class="fas fa-users me-1"></i>Users</a>
    <a href="{{ url_for('recipe_hub.moderation') }}" class="anav">
      <i class="fas fa-book-open me-1"></i>Recipes</a>
    <a href="{{ url_for('data_hub.dashboard') }}" class="anav act">
      <i class="fas fa-database me-1"></i>Data Hub
      {% if g.flagged_count %}<span class="badge bg-danger rounded-pill" style="font-size:.6rem">{{ g.flagged_count }}</span>{% endif %}
    </a>
    <a href="{{ url_for('admin.admin_logs') }}" class="anav">
      <i class="fas fa-clipboard-list me-1"></i>Logs</a>
    <a href="{{ url_for('admin.admin_settings') }}" class="anav">
      <i class="fas fa-cog me-1"></i>Settings</a>
    <a href="{{ url_for('admin.admin_demo_settings') }}" class="anav">
      <i class="fas fa-flask me-1"></i>Demo</a>
    <a href="{{ url_for('smoketest_report') }}" class="anav">
      <i class="fas fa-vial me-1"></i>QA</a>
  </div>
</div>

{# ── Data Hub sub-nav ── #}
<div style="background:#f8f9fa;border-bottom:1px solid #e9ecef" class="py-1">
  <div class="container d-flex flex-wrap align-items-center gap-1">
    <span class="text-muted me-1" style="font-size:.66rem"><i class="fas fa-database me-1"></i>Data Hub:</span>
    <a href="{{ url_for('data_hub.dashboard') }}" class="dhnav {{ 'act' if active=='dashboard' }}">
      <i class="fas fa-chart-bar me-1"></i>Dashboard</a>
    <a href="{{ url_for('data_hub.import_log') }}" class="dhnav {{ 'act' if active=='imports' }}">
      <i class="fas fa-file-import me-1"></i>Imports</a>
    <a href="{{ url_for('data_hub.flag_queue') }}" class="dhnav {{ 'act' if active=='flags' }}">
      <i class="fas fa-exclamation-triangle me-1"></i>Flags
      {% if flag_count and flag_count > 0 %}<span class="badge bg-danger rounded-pill ms-1" style="font-size:.5rem">{{ flag_count }}</span>{% endif %}
    </a>
    <a href="{{ url_for('data_hub.taxonomy_index') }}" class="dhnav {{ 'act' if active=='taxonomy' }}">
      <i class="fas fa-leaf me-1"></i>Ingredients</a>
    <a href="{{ url_for('data_hub.alias_index') }}" class="dhnav {{ 'act' if active=='aliases' }}">
      <i class="fas fa-link me-1"></i>Aliases</a>
    <a href="{{ url_for('data_hub.product_index') }}" class="dhnav {{ 'act' if active=='products' }}">
      <i class="fas fa-box me-1"></i>Products</a>
    <a href="{{ url_for('data_hub.usda_audit') }}" class="dhnav {{ 'act' if active=='usda' }}">
      <i class="fas fa-search me-1"></i>USDA Audit</a>
    <a href="{{ url_for('data_hub.sources_index') }}" class="dhnav {{ 'act' if active=='sources' }}">
      <i class="fas fa-database me-1"></i>Sources</a>
    <a href="{{ url_for('data_hub.qa_index') }}" class="dhnav {{ 'act' if active=='qa' }}">
      <i class="fas fa-shield-alt me-1"></i>QA</a>
  </div>
</div>
{% endblock %}

{% block content %}
<div class="container py-4">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endfor %}
  {% endwith %}

  {% block data_hub_content %}{% endblock %}
</div>

{# Confirm modal (same as admin) #}
<div class="modal fade" id="confirmModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header py-2 bg-danger bg-opacity-10 border-bottom">
        <h6 class="modal-title mb-0"><i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirm Action</h6>
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body py-3" id="confirmModalMsg">Are you sure?</div>
      <div class="modal-footer py-2 border-top">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger btn-sm" id="confirmModalYes">
          <i class="fas fa-trash me-1"></i>Confirm</button>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  var _m;
  function gM(){if(!_m)_m=new bootstrap.Modal(document.getElementById('confirmModal'));return _m;}
  function fB(cb){var o=document.getElementById('confirmModalYes');var n=o.cloneNode(true);n.id='confirmModalYes';o.parentNode.replaceChild(n,o);n.addEventListener('click',cb);}
  document.addEventListener('submit',function(e){
    var f=e.target.closest('.confirm-form');if(!f)return;e.preventDefault();
    document.getElementById('confirmModalMsg').textContent=f.dataset.confirm||'Are you sure?';
    fB(function(){gM().hide();f.classList.remove('confirm-form');f.submit();f.classList.add('confirm-form');});
    gM().show();
  });
})();
</script>

<div class="container-fluid px-4 py-2 mt-3 border-top" style="background:#f8fafc;font-size:.72rem;color:#9ca3af">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span><i class="fas fa-book-open me-1 text-success opacity-50"></i>KitchenCrate Admin — Data Hub</span>
    <span>
      <a href="{{ url_for('changelog') }}" class="text-muted text-decoration-none" target="_blank">Changelog</a>
    </span>
  </div>
</div>
{% endblock %}