{% extends 'core/base.html' %}
{% load static %}

{% block content %}
<style>
  #dashboard_nav:hover { color: #c51d21; }
  .zone-field {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  .zone-field:focus {
    border-color: #f97316;
    outline: none;
    box-shadow: 0 0 0 1px #f97316;
  }
  .country-select + .select2-container { width: 100% !important; }
  .select2-container--default .select2-selection--single {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    min-height: 42px;
    padding: 4px 8px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: 0.875rem;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
  #freight-routes-table_wrapper { width: 100%; }
</style>
<nav>
  <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16"
    style="position: relative;top: -40px;right: -19px;">
    <li class="text-lg leading-normal"><a class="text-white" href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="text-lg pl-2 capitalize leading-normal text-white before:pr-2 before:content-['/']" aria-current="page">Freight routes</li>
  </ol>
</nav>

<div style="margin-top: 30px;" class="mx-auto px-4 mt-16 pb-12">
  <div class="bg-white shadow-lg rounded-lg p-6">
    <div class="flex flex-col gap-4 mb-4 lg:flex-row lg:items-center lg:justify-between">
      <h3 class="text-2xl font-semibold text-gray-800">Freight Rates</h3>
      <div class="flex flex-wrap items-center gap-2">
        <button type="button" id="freight-create-open" style="background-color:#d37f2c"
          class="inline-block rounded-lg px-4 py-2 text-center text-sm font-medium text-white shadow-md transition duration-200">
          + Add route
        </button>
      </div>
    </div>

    <div class="mb-4 grid grid-cols-1 gap-3 md:grid-cols-2">
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="filter-origin">Origin</label>
        <select id="filter-origin" class="country-select zone-field">
          <option value="">All origins</option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="filter-destination">Destination</label>
        <select id="filter-destination" class="country-select zone-field">
          <option value="">All destinations</option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table id="freight-routes-table" class="w-full min-w-[720px] border-collapse text-sm display">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-3 py-2 text-left">Origin</th>
            <th class="px-3 py-2 text-left">Destination</th>
            <th class="px-3 py-2 text-left">Min freight</th>
            <th class="px-3 py-2 text-left">Currency</th>
            <th class="px-3 py-2 text-left">Updated</th>
            <th class="px-3 py-2 text-left">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

<div id="freight-create-modal" class="crud-modal freight-modal fixed inset-0 z-[10050] hidden items-center justify-center overflow-y-auto bg-black/50 px-4 py-6" role="dialog" aria-modal="true">
  <div class="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
    <div class="flex items-start justify-between border-b px-6 py-4">
      <div>
        <h4 class="text-xl font-semibold text-gray-800">Add freight route</h4>
        <p class="mt-1 text-sm text-gray-500">Directional minimum rate between two countries.</p>
      </div>
      <button type="button" class="crud-modal-close rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700" aria-label="Close">&times;</button>
    </div>
    <form id="freight-create-form" method="post" action="{% url 'core:freight_routes_new' %}" class="space-y-4 px-6 py-5">
      {% csrf_token %}
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_origin_country_code">Origin</label>
        <select id="create_origin_country_code" name="origin_country_code" required class="country-select zone-field">
          <option value=""></option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_destination_country_code">Destination</label>
        <select id="create_destination_country_code" name="destination_country_code" required class="country-select zone-field">
          <option value=""></option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_min_freight">Min freight</label>
        <input id="create_min_freight" name="min_freight" type="number" min="0" step="0.01" required
          class="zone-field" placeholder="e.g. 1200.00">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="create_currency">Currency</label>
        <input type="hidden" id="create_currency" name="currency" value="USD">
        <input id="create_currency_display" type="text" readonly
          class="zone-field bg-gray-50 text-gray-700" value="USD — selected from origin"
          title="Currency is set from the origin country">
        <p class="mt-1 text-xs text-gray-500">Auto-set from origin country.</p>
      </div>
      <div class="flex justify-end gap-3 border-t pt-4">
        <button type="button" class="crud-modal-close rounded-lg border px-5 py-2 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
        <button type="submit" id="freight-create-submit" style="background-color:#d37f2c" class="rounded-lg px-5 py-2 text-sm font-medium text-white shadow-sm">Create</button>
      </div>
    </form>
  </div>
</div>

<div id="freight-edit-modal" class="crud-modal freight-modal fixed inset-0 z-[10050] hidden items-center justify-center overflow-y-auto bg-black/50 px-4 py-6" role="dialog" aria-modal="true">
  <div class="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
    <div class="flex items-start justify-between border-b px-6 py-4">
      <div>
        <h4 class="text-xl font-semibold text-gray-800">Edit freight route</h4>
        <p id="freight-edit-subtitle" class="mt-1 text-sm text-gray-500"></p>
      </div>
      <button type="button" class="crud-modal-close rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700" aria-label="Close">&times;</button>
    </div>
    <form id="freight-edit-form" method="post" action="" class="space-y-4 px-6 py-5">
      {% csrf_token %}
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_origin_country_code">Origin</label>
        <select id="edit_origin_country_code" name="origin_country_code" required class="country-select zone-field">
          <option value=""></option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_destination_country_code">Destination</label>
        <select id="edit_destination_country_code" name="destination_country_code" required class="country-select zone-field">
          <option value=""></option>
          {% for code, label in country_choices %}<option value="{{ code }}">{{ label }} ({{ code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_min_freight">Min freight</label>
        <input id="edit_min_freight" name="min_freight" type="number" min="0" step="0.01" required class="zone-field">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="edit_currency">Currency</label>
        <input type="hidden" id="edit_currency" name="currency" value="USD">
        <input id="edit_currency_display" type="text" readonly
          class="zone-field bg-gray-50 text-gray-700" value=""
          title="Currency is set from the origin country">
        <p class="mt-1 text-xs text-gray-500">Auto-set from origin country.</p>
      </div>
      <div class="flex justify-end gap-3 border-t pt-4">
        <button type="button" class="crud-modal-close rounded-lg border px-5 py-2 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
        <button type="submit" id="freight-edit-submit" style="background-color:#d37f2c" class="rounded-lg px-5 py-2 text-sm font-medium text-white shadow-sm">Save changes</button>
      </div>
    </form>
  </div>
</div>

<div id="freight-import-modal" class="crud-modal freight-modal fixed inset-0 z-[10050] hidden items-center justify-center overflow-y-auto bg-black/50 px-4 py-6" role="dialog" aria-modal="true">
  <div class="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
    <div class="flex items-start justify-between border-b px-6 py-4">
      <div>
        <h4 class="text-xl font-semibold text-gray-800">Import freight routes</h4>
        <p class="mt-1 text-sm text-gray-500">CSV columns: origin_code, destination_code, min_freight, currency. Codes must exist in the platform country list.</p>
      </div>
      <button type="button" class="crud-modal-close rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700" aria-label="Close">&times;</button>
    </div>
    <form id="freight-import-form" method="post" action="{% url 'core:freight_routes_import' %}" enctype="multipart/form-data" class="space-y-4 px-6 py-5">
      {% csrf_token %}
      <div>
        <label class="mb-1 block text-sm font-medium text-gray-700" for="import_file">File</label>
        <input id="import_file" name="file" type="file" accept=".csv,.xlsx,.xlsm,text/csv" required class="zone-field">
      </div>
      <div class="flex justify-end gap-3 border-t pt-4">
        <button type="button" class="crud-modal-close rounded-lg border px-5 py-2 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
        <button type="submit" id="freight-import-submit" style="background-color:#d37f2c" class="rounded-lg px-5 py-2 text-sm font-medium text-white shadow-sm">Import</button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const freightEditUrl = "{% url 'core:freight_route_edit' 0 %}";
    const freightDeleteUrl = "{% url 'core:freight_route_delete' 0 %}";
    const csrfToken = '{{ csrf_token }}';
    const currencyByCountry = {{ currency_by_country_json|safe }};
    const currencyLabels = {
      {% for code, label in currency_choices %}"{{ code }}": "{{ label|escapejs }}",{% endfor %}
    };

    const currencyForOrigin = (countryCode) => {
      if (!countryCode) return 'USD';
      return currencyByCountry[countryCode] || 'USD';
    };

    const setCurrencyFields = (hiddenId, displayId, countryCode) => {
      const code = currencyForOrigin(countryCode);
      const hidden = document.getElementById(hiddenId);
      const display = document.getElementById(displayId);
      if (hidden) hidden.value = code;
      if (display) display.value = currencyLabels[code] || code;
    };

    const editIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 0 0-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 0 0 0-2.828Z"/><path fill-rule="evenodd" d="M2 6a2 2 0 0 1 2-2h4a1 1 0 1 1 0 2H4v10h10v-4a1 1 0 1 1 2 0v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" clip-rule="evenodd"/></svg>`;
    const deleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75V4H3.5a.75.75 0 0 0 0 1.5h.3l.69 10.354A3 3 0 0 0 7.48 18.75h5.04a3 3 0 0 0 2.99-2.896L16.2 5.5h.3a.75.75 0 0 0 0-1.5H14v-.25A2.75 2.75 0 0 0 11.25 1h-2.5ZM7.5 4v-.25c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25V4h-5Zm1.25 4a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0V8Zm4 0a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0V8Z" clip-rule="evenodd"/></svg>`;

    const actionButtons = (row) => `
      <div class="flex items-center gap-2">
        <button type="button" class="freight-edit-open inline-flex h-9 w-9 items-center justify-center rounded-full text-orange-600 transition hover:bg-orange-50" data-id="${row.id}" aria-label="Edit">${editIcon}</button>
        <button type="button" class="freight-delete-open inline-flex h-9 w-9 items-center justify-center rounded-full text-red-600 transition hover:bg-red-50" data-id="${row.id}" data-label="${row.origin_country_code} → ${row.destination_country_code}" aria-label="Delete">${deleteIcon}</button>
      </div>`;

    const initCountrySelect = (select, dropdownParent) => {
      if (!select || select.dataset.select2Ready === '1' || typeof jQuery === 'undefined' || !jQuery.fn.select2) return;
      jQuery(select).select2({
        width: '100%',
        placeholder: 'Search country...',
        allowClear: true,
        dropdownParent: dropdownParent ? jQuery(dropdownParent) : jQuery(select).closest('.crud-modal').length
          ? jQuery(select).closest('.crud-modal')
          : jQuery(document.body),
      });
      select.dataset.select2Ready = '1';
    };

    const setSelectValue = (select, value) => {
      if (!select) return;
      if (typeof jQuery !== 'undefined' && jQuery.fn.select2 && select.dataset.select2Ready === '1') {
        jQuery(select).val(value || null).trigger('change');
      } else {
        select.value = value || '';
      }
    };

    const syncDestinationOptions = (originSelect, destinationSelect) => {
      if (!originSelect || !destinationSelect) return;
      const originCode = originSelect.value;
      Array.from(destinationSelect.options).forEach((opt) => {
        if (!opt.value) return;
        opt.disabled = originCode && opt.value === originCode;
      });
      if (destinationSelect.value && destinationSelect.value === originCode) {
        setSelectValue(destinationSelect, '');
      }
    };

    const openModal = (modal) => {
      if (!modal) return;
      modal.classList.remove('hidden');
      modal.classList.add('flex');
      document.body.style.overflow = 'hidden';
      modal.querySelectorAll('.country-select').forEach((select) => initCountrySelect(select, modal));
    };

    const closeModal = (modal) => {
      if (!modal) return;
      modal.classList.add('hidden');
      modal.classList.remove('flex');
      if (!document.querySelector('.crud-modal:not(.hidden)')) document.body.style.overflow = '';
    };

    const submitAjaxForm = async (form, submitButton) => {
      if (submitButton) {
        submitButton.disabled = true;
        submitButton.dataset.originalText = submitButton.textContent;
        submitButton.textContent = 'Saving...';
      }
      try {
        const response = await fetch(form.action, {
          method: 'POST',
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
          body: new FormData(form),
        });
        const payload = await response.json();
        if (!response.ok || !payload.success) throw new Error(payload.message || 'Request failed.');
        return payload;
      } finally {
        if (submitButton) {
          submitButton.disabled = false;
          submitButton.textContent = submitButton.dataset.originalText || 'Save';
        }
      }
    };

    const rowDataFromButton = (table, button) => {
      if (!table) return null;
      let row = table.row(jQuery(button).closest('tr'));
      if (!row.data()) row = table.row(jQuery(button).closest('tr').prev());
      return row.data();
    };

    const confirmDelete = async (title, text, url) => {
      const result = await Swal.fire({
        title, text, icon: 'warning', showCancelButton: true,
        confirmButtonColor: '#dc2626', cancelButtonColor: '#6b7280', confirmButtonText: 'Yes, delete',
      });
      if (!result.isConfirmed) return;
      const formData = new FormData();
      formData.append('csrfmiddlewaretoken', csrfToken);
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData,
      });
      const payload = await response.json();
      if (!response.ok || !payload.success) throw new Error(payload.message || 'Delete failed.');
      return payload;
    };

    ['filter-origin', 'filter-destination'].forEach((id) => {
      const el = document.getElementById(id);
      if (el) initCountrySelect(el, document.body);
    });

    let freightTable = null;
    if (window.jQuery && window.jQuery.fn.DataTable) {
      freightTable = jQuery('#freight-routes-table').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
          url: "{% url 'core:freight_routes' %}",
          data: (d) => {
            d.origin = document.getElementById('filter-origin')?.value || '';
            d.destination = document.getElementById('filter-destination')?.value || '';
          },
        },
        responsive: true,
        pageLength: 10,
        order: [[0, 'asc']],
        language: {
          emptyTable: 'No freight routes match your filters.',
          zeroRecords: 'No freight routes match your filters.',
        },
        columns: [
          { data: null, render: (d, t, row) => `${row.origin_country_name} (${row.origin_country_code})` },
          { data: null, render: (d, t, row) => `${row.destination_country_name} (${row.destination_country_code})` },
          { data: 'min_freight', defaultContent: '—' },
          { data: 'currency', defaultContent: 'USD' },
          { data: 'updated_at', defaultContent: '' },
          { data: null, orderable: false, searchable: false, render: (d, t, row) => actionButtons(row) },
        ],
      });
    }

    const reloadTable = () => freightTable?.ajax.reload(null, false);

    ['filter-origin', 'filter-destination'].forEach((id) => {
      const el = document.getElementById(id);
      if (!el) return;
      const handler = () => reloadTable();
      el.addEventListener('change', handler);
      if (typeof jQuery !== 'undefined') jQuery(el).on('change', handler);
    });

    document.getElementById('freight-create-open')?.addEventListener('click', () => {
      const form = document.getElementById('freight-create-form');
      form.reset();
      setSelectValue(document.getElementById('create_origin_country_code'), '');
      setSelectValue(document.getElementById('create_destination_country_code'), '');
      setCurrencyFields('create_currency', 'create_currency_display', '');
      openModal(document.getElementById('freight-create-modal'));
      syncDestinationOptions(
        document.getElementById('create_origin_country_code'),
        document.getElementById('create_destination_country_code'),
      );
    });

    document.getElementById('freight-import-open')?.addEventListener('click', () => {
      const form = document.getElementById('freight-import-form');
      form.reset();
      openModal(document.getElementById('freight-import-modal'));
    });

    const bindOriginCurrency = (originId, hiddenId, displayId) => {
      const el = document.getElementById(originId);
      if (!el) return;
      const sync = () => setCurrencyFields(hiddenId, displayId, el.value);
      el.addEventListener('change', sync);
      if (typeof jQuery !== 'undefined') jQuery(el).on('change', sync);
    };
    bindOriginCurrency('create_origin_country_code', 'create_currency', 'create_currency_display');
    bindOriginCurrency('edit_origin_country_code', 'edit_currency', 'edit_currency_display');

    document.getElementById('create_origin_country_code')?.addEventListener('change', () => {
      syncDestinationOptions(
        document.getElementById('create_origin_country_code'),
        document.getElementById('create_destination_country_code'),
      );
    });
    document.getElementById('edit_origin_country_code')?.addEventListener('change', () => {
      syncDestinationOptions(
        document.getElementById('edit_origin_country_code'),
        document.getElementById('edit_destination_country_code'),
      );
    });
    if (typeof jQuery !== 'undefined') {
      jQuery('#create_origin_country_code').on('change', () => syncDestinationOptions(
        document.getElementById('create_origin_country_code'),
        document.getElementById('create_destination_country_code'),
      ));
      jQuery('#edit_origin_country_code').on('change', () => syncDestinationOptions(
        document.getElementById('edit_origin_country_code'),
        document.getElementById('edit_destination_country_code'),
      ));
    }

    document.getElementById('freight-routes-table')?.addEventListener('click', async (event) => {
      const editBtn = event.target.closest('.freight-edit-open');
      if (editBtn) {
        const row = rowDataFromButton(freightTable, editBtn);
        if (!row) return;
        const form = document.getElementById('freight-edit-form');
        form.action = freightEditUrl.replace('/0/edit', `/${row.id}/edit`);
        document.getElementById('freight-edit-subtitle').textContent =
          `${row.origin_country_name} (${row.origin_country_code}) → ${row.destination_country_name} (${row.destination_country_code})`;
        setSelectValue(document.getElementById('edit_origin_country_code'), row.origin_country_code);
        setSelectValue(document.getElementById('edit_destination_country_code'), row.destination_country_code);
        document.getElementById('edit_min_freight').value = row.min_freight || '';
        setCurrencyFields('edit_currency', 'edit_currency_display', row.origin_country_code);
        openModal(document.getElementById('freight-edit-modal'));
        syncDestinationOptions(
          document.getElementById('edit_origin_country_code'),
          document.getElementById('edit_destination_country_code'),
        );
        return;
      }
      const deleteBtn = event.target.closest('.freight-delete-open');
      if (deleteBtn) {
        try {
          const payload = await confirmDelete(
            'Delete freight route?',
            `This will permanently delete ${deleteBtn.dataset.label}.`,
            freightDeleteUrl.replace('/0/delete', `/${deleteBtn.dataset.id}/delete`),
          );
          reloadTable();
          Swal.fire({ icon: 'success', title: 'Deleted', text: payload.message, timer: 1600, showConfirmButton: false });
        } catch (error) {
          Swal.fire({ icon: 'error', title: 'Error', text: error.message });
        }
      }
    });

    document.querySelectorAll('.crud-modal-close').forEach((btn) => {
      btn.addEventListener('click', () => closeModal(btn.closest('.crud-modal')));
    });
    document.querySelectorAll('.crud-modal').forEach((modal) => {
      modal.addEventListener('click', (event) => { if (event.target === modal) closeModal(modal); });
    });
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') document.querySelectorAll('.crud-modal:not(.hidden)').forEach(closeModal);
    });

    const bindForm = (formId, submitId, modalId, onSuccess) => {
      document.getElementById(formId)?.addEventListener('submit', async (event) => {
        event.preventDefault();
        const form = event.currentTarget;
        const submitButton = document.getElementById(submitId);
        try {
          const payload = await submitAjaxForm(form, submitButton);
          closeModal(document.getElementById(modalId));
          form.reset();
          onSuccess(payload);
          if (payload.summary && payload.summary.errors && payload.summary.errors.length) {
            const lines = payload.summary.errors.slice(0, 8).map((e) => `Row ${e.row}: ${e.message}`);
            Swal.fire({
              icon: 'warning',
              title: 'Import finished with errors',
              html: `<p class="mb-2 text-left">${payload.message}</p><pre class="text-left text-xs whitespace-pre-wrap">${lines.join('\n')}</pre>`,
            });
          } else {
            Swal.fire({ icon: 'success', title: 'Success', text: payload.message, timer: 1800, showConfirmButton: false });
          }
        } catch (error) {
          Swal.fire({ icon: 'error', title: 'Error', text: error.message });
        }
      });
    };

    bindForm('freight-create-form', 'freight-create-submit', 'freight-create-modal', () => reloadTable());
    bindForm('freight-edit-form', 'freight-edit-submit', 'freight-edit-modal', () => reloadTable());
    bindForm('freight-import-form', 'freight-import-submit', 'freight-import-modal', () => reloadTable());
  });
</script>
{% endblock %}