{% extends "base.html" %}
{% block title %}Data Sources{% endblock %}
{% block heading %}Data Sources{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <p class="text-sm text-slate-500">Connect databases, APIs, CSV uploads, and web scrapers into your Bronze layer.</p>
  <button onclick="document.getElementById('add-modal').classList.remove('hidden')" class="btn-primary">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
    </svg>
    Add Source
  </button>
</div>

<!-- Source cards -->
{% if cfg.sources %}
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
  {% for src in cfg.sources %}
  <div class="card p-5 {% if not src.enabled %}opacity-60{% endif %}">
    <div class="flex items-start justify-between mb-3">
      <div class="flex items-center gap-2">
        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold
          {% if src.source_type.value == 'database' %}bg-blue-100 text-blue-700
          {% elif src.source_type.value == 'api' %}bg-purple-100 text-purple-700
          {% elif src.source_type.value == 'csv' %}bg-green-100 text-green-700
          {% else %}bg-amber-100 text-amber-700{% endif %}">
          {% if src.source_type.value == 'database' %}🗄️ DB
          {% elif src.source_type.value == 'api' %}🌐 API
          {% elif src.source_type.value == 'csv' %}📄 CSV
          {% else %}🕷️ Scrape{% endif %}
        </span>
        <h3 class="font-semibold text-sm">{{ src.name }}</h3>
      </div>
      <span class="{% if src.enabled %}badge-enabled{% else %}badge-disabled{% endif %}">
        {{ "Active" if src.enabled else "Disabled" }}
      </span>
    </div>

    {% if src.description %}
    <p class="text-xs text-slate-500 mb-3">{{ src.description }}</p>
    {% endif %}

    <!-- Source details -->
    <div class="bg-slate-50 rounded-lg p-3 text-xs space-y-1 mb-4">
      {% if src.database_config %}
        <div class="flex justify-between"><span class="text-slate-500">Dialect</span><span class="font-medium">{{ src.database_config.dialect.value }}</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Host</span><span class="font-medium truncate ml-2">{{ src.database_config.host or "—" }}</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Database</span><span class="font-medium">{{ src.database_config.database or "—" }}</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Strategy</span><span class="font-medium">{{ src.database_config.load_strategy.value }}</span></div>
        {% if src.database_config.tables %}
        <div class="flex justify-between"><span class="text-slate-500">Tables</span><span class="font-medium">{{ src.database_config.tables|length }}</span></div>
        {% endif %}
      {% elif src.api_config %}
        <div class="flex justify-between"><span class="text-slate-500">URL</span><span class="font-medium truncate ml-2">{{ src.api_config.base_url or "—" }}</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Auth</span><span class="font-medium">{{ src.api_config.auth_type.value }}</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Strategy</span><span class="font-medium">{{ src.api_config.load_strategy.value }}</span></div>
      {% elif src.csv_config %}
        <div class="flex justify-between"><span class="text-slate-500">Delimiter</span><span class="font-medium">"{{ src.csv_config.delimiter }}"</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Header</span><span class="font-medium">{{ "Yes" if src.csv_config.has_header else "No" }}</span></div>
      {% elif src.webscrape_config %}
        <div class="flex justify-between"><span class="text-slate-500">URL</span><span class="font-medium truncate ml-2">{{ src.webscrape_config.url or "—" }}</span></div>
        <div class="flex justify-between"><span class="text-slate-500">Max pages</span><span class="font-medium">{{ src.webscrape_config.max_pages }}</span></div>
      {% endif %}
      <div class="flex justify-between pt-1 border-t border-slate-200">
        <span class="text-slate-500">Target table</span>
        <span class="font-mono font-medium text-blue-600">{{ src.target_table or src.name }}</span>
      </div>
    </div>

    <div class="flex gap-2">
      <form method="post" action="/sources/toggle/{{ src.id }}">
        <input type="hidden" name="project" value="{{ project }}"/>
        <button class="btn-secondary text-xs py-1.5">{{ "Disable" if src.enabled else "Enable" }}</button>
      </form>
      <form method="post" action="/sources/delete/{{ src.id }}"
            onsubmit="return confirm('Delete {{ src.name }}?')">
        <input type="hidden" name="project" value="{{ project }}"/>
        <button class="btn-danger">Delete</button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card p-12 text-center">
  <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mx-auto mb-4">
    <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
            d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
    </svg>
  </div>
  <h3 class="font-semibold text-slate-700 mb-1">No sources yet</h3>
  <p class="text-sm text-slate-400 mb-4">Add your first data source to start building the pipeline.</p>
  <button onclick="document.getElementById('add-modal').classList.remove('hidden')" class="btn-primary mx-auto">Add Source</button>
</div>
{% endif %}


<!-- ── Add Source Modal ─────────────────────────────────────────────────── -->
<div id="add-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-black/50" onclick="document.getElementById('add-modal').classList.add('hidden')"></div>
  <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 overflow-hidden max-h-[90vh] overflow-y-auto">
    <div class="bg-slate-900 px-6 py-4 flex items-center justify-between">
      <h2 class="text-white font-semibold">Add Data Source</h2>
      <button onclick="document.getElementById('add-modal').classList.add('hidden')"
              class="text-slate-400 hover:text-white">✕</button>
    </div>

    <form method="post" action="/sources/add" class="p-6 space-y-4">
      <input type="hidden" name="project" value="{{ project }}"/>

      <!-- Basic info -->
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Source Name *</label>
          <input name="name" required placeholder="e.g. CRM Salesforce" class="form-input"/>
        </div>
        <div>
          <label class="form-label">Source Type *</label>
          <select name="source_type" id="source_type_select" onchange="showSourceFields(this.value)" class="form-select">
            <option value="database">🗄️ Database</option>
            <option value="api">🌐 REST API</option>
            <option value="csv">📄 CSV Upload</option>
            <option value="webscrape">🕷️ Web Scrape</option>
          </select>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Description</label>
          <input name="description" placeholder="Optional description" class="form-input"/>
        </div>
        <div>
          <label class="form-label">Target Bronze Table</label>
          <input name="target_table" placeholder="auto-generated from name" class="form-input font-mono"/>
        </div>
      </div>

      <!-- Database fields -->
      <div id="fields-database" class="space-y-4 border-t border-slate-100 pt-4">
        <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Database Connection</p>
        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="form-label">Dialect</label>
            <select name="dialect" class="form-select">
              {% for d in dialects %}<option value="{{ d.value }}">{{ d.value }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="form-label">Host</label>
            <input name="host" placeholder="server.database.windows.net" class="form-input"/>
          </div>
          <div>
            <label class="form-label">Port</label>
            <input name="port" type="number" value="1433" class="form-input"/>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="form-label">Database</label>
            <input name="database" placeholder="MyDatabase" class="form-input"/>
          </div>
          <div>
            <label class="form-label">Username</label>
            <input name="db_username" placeholder="sa" class="form-input"/>
          </div>
          <div>
            <label class="form-label">Password</label>
            <input name="db_password" type="password" placeholder="••••••••" class="form-input"/>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="form-label">Schema</label>
            <input name="schema_name" value="dbo" class="form-input"/>
          </div>
          <div>
            <label class="form-label">Load Strategy</label>
            <select name="load_strategy" class="form-select">
              {% for s in load_strategies %}<option value="{{ s.value }}">{{ s.value }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="form-label">Watermark Column</label>
            <input name="watermark_column" placeholder="modified_date" class="form-input"/>
          </div>
        </div>
        <div>
          <label class="form-label">Tables to ingest (comma-separated, leave empty for all)</label>
          <input name="tables" placeholder="dbo.Customer, dbo.Order, dbo.Product" class="form-input font-mono"/>
        </div>
      </div>

      <!-- API fields -->
      <div id="fields-api" class="hidden space-y-4 border-t border-slate-100 pt-4">
        <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">REST API Connection</p>
        <div class="grid grid-cols-2 gap-3">
          <div class="col-span-2">
            <label class="form-label">Base URL</label>
            <input name="base_url" placeholder="https://api.example.com/v2" class="form-input"/>
          </div>
          <div>
            <label class="form-label">Auth Type</label>
            <select name="auth_type" class="form-select">
              {% for a in auth_types %}<option value="{{ a.value }}">{{ a.value }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="form-label">Token / API Key</label>
            <input name="auth_value" type="password" placeholder="••••••••" class="form-input"/>
          </div>
          <div>
            <label class="form-label">Load Strategy</label>
            <select name="load_strategy" class="form-select">
              {% for s in load_strategies %}<option value="{{ s.value }}">{{ s.value }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="form-label">Watermark Field</label>
            <input name="watermark_field" value="updatedAt" class="form-input"/>
          </div>
        </div>
      </div>

      <!-- CSV fields -->
      <div id="fields-csv" class="hidden space-y-4 border-t border-slate-100 pt-4">
        <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">CSV Settings</p>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="form-label">Delimiter</label>
            <input name="delimiter" value="," class="form-input w-20"/>
          </div>
          <div class="flex items-center gap-2 pt-6">
            <input name="has_header" type="checkbox" checked value="true" class="w-4 h-4 rounded"/>
            <label class="text-sm font-medium text-slate-700">File has header row</label>
          </div>
        </div>
        <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <p class="text-sm text-blue-700">📁 CSV files will be uploaded via the CLI command:</p>
          <code class="text-xs text-blue-900 font-mono mt-1 block">pbi-agent source upload path/to/file.csv --source {{ project }}</code>
        </div>
      </div>

      <!-- Scrape fields -->
      <div id="fields-webscrape" class="hidden space-y-4 border-t border-slate-100 pt-4">
        <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Web Scraper</p>
        <div class="grid grid-cols-2 gap-3">
          <div class="col-span-2">
            <label class="form-label">Target URL</label>
            <input name="scrape_url" placeholder="https://example.com/data" class="form-input"/>
          </div>
          <div>
            <label class="form-label">CSS Selector</label>
            <input name="css_selector" placeholder="table.data tr" class="form-input font-mono"/>
          </div>
          <div>
            <label class="form-label">Max Pages</label>
            <input name="max_pages" type="number" value="10" class="form-input"/>
          </div>
        </div>
        <div class="p-3 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-800">
          ⚠️ Ensure you have permission to scrape the target site. Rate limiting (1s default) is applied automatically.
        </div>
      </div>

      <div class="flex gap-3 justify-end pt-2 border-t border-slate-100">
        <button type="button" onclick="document.getElementById('add-modal').classList.add('hidden')" class="btn-secondary">Cancel</button>
        <button type="submit" class="btn-primary">Add Source</button>
      </div>
    </form>
  </div>
</div>

<script>
function showSourceFields(type) {
  ['database','api','csv','webscrape'].forEach(t => {
    document.getElementById('fields-'+t).classList.toggle('hidden', t !== type);
  });
}
</script>
{% endblock %}