{% extends "base.html" %}

{% block title %}{{ t("data_import.title") }} - IssueDeck{% endblock %}

{% block content %}
{% set values = form | default({}) %}
<div class="space-y-6 max-w-6xl">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
    <div>
      <h1 class="text-2xl font-display font-bold text-gray-900 dark:text-gray-100">
        {{ t("data_import.title") }}
      </h1>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
        {{ t("data_import.description") }}
      </p>
    </div>
    <a href="/dashboard/{{ project_key }}/list"
       class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 transition-colors">
      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
      </svg>
      {{ t("common.back_to_list") }}
    </a>
  </div>

  {% if error %}
    <div class="rounded-md border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950/30 px-4 py-3 text-sm text-red-700 dark:text-red-300">
      <p class="font-semibold">{{ t("data_import.error_title") }}</p>
      <p class="mt-1">{{ error }}</p>
    </div>
  {% endif %}

  <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
    <form method="post"
          enctype="multipart/form-data"
          action="/dashboard/{{ project_key }}/imports/files"
          class="rounded-md border border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-ledger-darkPanel p-5 space-y-5">
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label for="data-import-type" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("data_import.source_type") }}
          </label>
          <select id="data-import-type"
                  name="source_type"
                  class="w-full px-3 py-2 rounded-md text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            {% for option in ["csv", "json", "markdown"] %}
              <option value="{{ option }}"
                      {% if values.get('source_type', 'csv') == option %}selected{% endif %}>
                {{ t("data_import.type_" ~ option) }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label for="data-import-file" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("data_import.source_file") }}
          </label>
          <input id="data-import-file"
                 name="source_file"
                 type="file"
                 required
                 accept=".csv,.json,.md,.markdown,text/csv,application/json,text/markdown"
                 class="w-full px-3 py-2 rounded-md text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
        </div>
      </div>

      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label for="data-import-kind" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("common.kind") }}
          </label>
          <select id="data-import-kind"
                  name="kind"
                  required
                  class="w-full px-3 py-2 rounded-md text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            {% for kind_key, kind_cfg in project.kinds.items() %}
              <option value="{{ kind_key }}"
                      {% if values.get('kind') == kind_key %}selected{% endif %}>
                {{ kind_cfg.label | default(kind_key) }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label for="data-import-status" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("data_import.default_status") }}
          </label>
          <select id="data-import-status"
                  name="default_status"
                  class="w-full px-3 py-2 rounded-md text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            <option value="">{{ t("data_import.default_status_auto") }}</option>
            {% for status_key, status_cfg in project.statuses.items() %}
              <option value="{{ status_key }}"
                      {% if values.get('default_status') == status_key %}selected{% endif %}>
                {{ status_cfg.label | default(status_key) }}
              </option>
            {% endfor %}
          </select>
          <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
            {{ t("data_import.default_status_help") }}
          </p>
        </div>
      </div>

      <div>
        <label for="data-import-tags" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
          {{ t("common.tags") }}
        </label>
        <input id="data-import-tags"
               name="tags"
               value="{{ values.get('tags', '') }}"
               placeholder="imported, backlog"
               class="w-full px-3 py-2 rounded-md text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
          {{ t("data_import.tags_help") }}
        </p>
      </div>

      {% if project.branches %}
        <div>
          <p class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
            {{ t("common.branches") }}
          </p>
          <div class="flex flex-wrap gap-3">
            {% for branch in project.branches %}
              <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                <input type="checkbox"
                       name="applies_to"
                       value="{{ branch.key }}"
                       {% if branch.key in values.get('applies_to', []) %}checked{% endif %}
                       class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                <span>{{ branch.label }}</span>
              </label>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
        <input type="checkbox"
               name="include_checked"
               value="true"
               {% if values.get('include_checked') %}checked{% endif %}
               class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
        <span>{{ t("data_import.include_checked") }}</span>
      </label>

      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label for="data-import-presets" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("data_import.presets") }}
          </label>
          <input id="data-import-presets"
                 name="presets"
                 value="{{ values.get('presets', '') }}"
                 placeholder="github, jira, linear"
                 class="w-full px-3 py-2 rounded-md text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
          <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
            {{ t("data_import.presets_help") }}
          </p>
        </div>

        <div>
          <label for="data-import-status-maps" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("data_import.status_maps") }}
          </label>
          <textarea id="data-import-status-maps"
                    name="status_maps"
                    rows="3"
                    placeholder="closed=done"
                    class="w-full px-3 py-2 rounded-md text-sm font-mono bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-y">{{ values.get('status_maps', '') }}</textarea>
          <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
            {{ t("data_import.status_maps_help") }}
          </p>
        </div>
      </div>

      <div>
        <label for="data-import-field-aliases" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
          {{ t("data_import.field_aliases") }}
        </label>
        <textarea id="data-import-field-aliases"
                  name="field_aliases"
                  rows="4"
                  placeholder="title=summary,name&#10;status=state"
                  class="w-full px-3 py-2 rounded-md text-sm font-mono bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-y">{{ values.get('field_aliases', '') }}</textarea>
        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
          {{ t("data_import.field_aliases_help") }}
        </p>
      </div>

      <div class="flex flex-col-reverse gap-2 pt-2 border-t border-ledger-line dark:border-ledger-darkLine sm:flex-row sm:justify-end">
        <button type="submit"
                name="mode"
                value="dry_run"
                class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.5h16.5m-16.5 15h16.5M6.75 8.25h10.5M6.75 15.75h10.5"/>
          </svg>
          {{ t("data_import.dry_run") }}
        </button>
        <button type="submit"
                name="mode"
                value="import"
                class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-semibold bg-primary-600 text-white hover:bg-primary-700 transition-colors">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
          </svg>
          {{ t("data_import.import") }}
        </button>
      </div>
    </form>

    <aside class="rounded-md border border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-ledger-darkPanel p-5 self-start">
      <h2 class="text-sm font-display font-semibold text-gray-900 dark:text-gray-100">
        {{ t("data_import.result_title") }}
      </h2>
      {% if result %}
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
          {{ t("data_import.type_" ~ result.source_type) }} -
          {{ result.filename }} -
          {{ t("data_import.result_" ~ result.mode) }}
        </p>
        <dl class="mt-4 grid grid-cols-2 gap-3">
          {% for label_key, value in result.stats %}
            <div class="rounded-md border border-ledger-line dark:border-ledger-darkLine px-3 py-2">
              <dt class="text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ t(label_key) }}</dt>
              <dd class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ value }}</dd>
            </div>
          {% endfor %}
        </dl>
        {% if result.triage_url %}
          <div class="mt-4 space-y-2">
            <a href="{{ result.triage_url }}"
               class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold bg-primary-600 text-white hover:bg-primary-700 transition-colors">
              {{ t("data_import.triage_import") }}
            </a>
            <p class="text-xs text-gray-500 dark:text-gray-400">
              {{ t("data_import.triage_import_help") }}
            </p>
            <p class="break-words text-xs text-gray-500 dark:text-gray-400">
              {{ t("data_import.batch_tag") }}:
              <code class="font-mono text-gray-700 dark:text-gray-200">{{ result.batch_tag }}</code>
            </p>
          </div>
        {% endif %}
        <a href="/dashboard/{{ project_key }}/list"
           class="mt-4 inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold bg-ledger-surfaceAlt dark:bg-ledger-darkPanelAlt text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
          {{ t("data_import.view_items") }}
        </a>
      {% else %}
        <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">
          {{ t("data_import.result_empty") }}
        </p>
      {% endif %}
    </aside>
  </div>
</div>
{% endblock %}