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

{% block content %}
<style>
  #dashboard_nav:hover { color: #c51d21; }
  .kyc-doc-review-modal-panel {
    max-height: min(90vh, calc(100dvh - 2rem));
  }
  .kyc-doc-review-modal-body {
    overscroll-behavior: contain;
  }
  .kyc-doc-preview-panel {
    margin-top: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #f9fafb;
    padding: 0.75rem;
  }
  .kyc-doc-preview-panel img,
  .kyc-doc-preview-panel iframe {
    width: 100%;
    max-height: 24rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
  }
  .kyc-doc-preview-panel iframe {
    height: 24rem;
  }
  .admin-kyc-status-badge.badge-success {
    color: #166534;
    background: #dcfce7;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .admin-kyc-status-badge.badge-warning {
    color: #92400e;
    background: #fef3c7;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .admin-kyc-status-badge.badge-danger {
    color: #991b1b;
    background: #fee2e2;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .kyc-ownership-status-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    color: #fff;
  }
  .kyc-ownership-status-badge.badge-success {
    background-color: #198754;
  }
  .kyc-ownership-status-badge.badge-secondary {
    background-color: #6c757d;
  }
  .kyc-ownership-badge {
    cursor: pointer;
    border: 0;
  }
  .kyc-ownership-badge:hover {
    filter: brightness(0.92);
  }
</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">KYC documents</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-wrap items-center justify-between gap-4 mb-6">
      <h3 class="text-2xl font-semibold text-gray-800">KYC documents</h3>
      <div class="flex flex-wrap items-center gap-3 text-sm">
        <a href="{% url 'core:kyc_documents' %}?pending=1"
          class="rounded-lg px-4 py-2 {% if pending_only %}font-medium text-white shadow-sm{% else %}border text-gray-700 hover:bg-gray-50{% endif %}"
          {% if pending_only %}style="background-color:#d37f2c"{% endif %}>Pending only</a>
        {% if pending_only %}
        <a href="{% url 'core:kyc_documents' %}" class="rounded-lg border px-4 py-2 text-gray-700 hover:bg-gray-50">Show all</a>
        {% endif %}
      </div>
    </div>
    <div class="overflow-x-auto">
      <table id="kyc-documents-table" class="w-full min-w-[900px] border-collapse text-sm">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-3 py-2 text-left">User</th>
            <th class="px-3 py-2 text-left">Ownership</th>
            <th class="px-3 py-2 text-left">Documents</th>
            <th class="px-3 py-2 text-left">Status</th>
            <th class="px-3 py-2 text-left">Last submitted</th>
            <th class="px-3 py-2 text-left">Last reviewed</th>
            <th class="px-3 py-2 text-left">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <div id="kyc-doc-modals-root"></div>
    <div id="kyc-owner-modals-root"></div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const pendingOnly = {% if pending_only %}true{% else %}false{% endif %};
    const kycDocModalsUrlTemplate = "{% url 'core:kyc_documents_modal' 0 %}";
    const kycDocModalsUrl = (userId) => kycDocModalsUrlTemplate.replace('/0/', `/${userId}/`);
    const ownerModalsUrlTemplate = "{% url 'core:vehicle_owner_modal' 0 %}";
    const ownerModalsUrl = (userId) => ownerModalsUrlTemplate.replace('/0/', `/${userId}/`);
    const loadedKycDocModals = new Set();

    const escapeHtml = (value) => String(value || '')
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');

    const viewIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" /><path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd" /></svg>`;

    const ownershipBadge = (value, row) => {
      const label = value || '—';
      if (!row.user_id || label === '—') return label;
      let badgeClass = 'badge-secondary';
      if (label === 'Company') badgeClass = 'badge-success';
      return `<button type="button"
        class="kyc-ownership-badge kyc-ownership-status-badge ${badgeClass} kyc-owner-open"
        data-owner-id="${row.user_id}"
        data-modal-id="vehicle-owner-modal-${row.user_id}"
        aria-label="View owner details">${escapeHtml(label)}</button>`;
    };

    const renderStatusBadge = (status, label) => {
      const text = escapeHtml(label || status || '—');
      if (status === 'APPROVED') {
        return `<span class="admin-kyc-status-badge badge-success">${text}</span>`;
      }
      if (status === 'REJECTED') {
        return `<span class="admin-kyc-status-badge badge-danger">${text}</span>`;
      }
      return `<span class="admin-kyc-status-badge badge-warning">${text}</span>`;
    };

    const renderKycDocActions = (row) => `
      <button type="button"
        class="kyc-doc-review-open inline-flex h-9 w-9 items-center justify-center rounded-full text-orange-600 transition hover:bg-orange-50"
        data-user-id="${row.user_id}"
        data-modal-id="kyc-user-modal-${row.user_id}"
        aria-label="View documents for ${row.user_email}">${viewIcon}</button>`;

    const openModal = (modal) => {
      if (!modal) return;
      modal.classList.remove('hidden');
      modal.classList.add('flex');
    };

    const closeModal = (modal) => {
      if (!modal) return;
      modal.classList.add('hidden');
      modal.classList.remove('flex');
      modal.querySelectorAll('.kyc-doc-preview-panel').forEach((panel) => {
        panel.classList.add('hidden');
        panel.innerHTML = '';
      });
      modal.querySelectorAll('.kyc-doc-preview-btn').forEach((button) => {
        button.textContent = 'Preview';
      });
    };

    const renderPreview = (url) => {
      const cleanUrl = url.split('?')[0];
      const ext = cleanUrl.split('.').pop().toLowerCase();
      const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
      if (imageTypes.includes(ext)) {
        return `<img src="${url}" alt="Document preview">`;
      }
      if (ext === 'pdf') {
        return `<iframe src="${url}" title="Document preview"></iframe>`;
      }
      return `<p class="text-sm text-gray-600">Preview is not available for this file type. <a href="${url}" target="_blank" rel="noopener" class="font-medium text-orange-600 hover:underline">Open file</a></p>`;
    };

    const bindKycDocModalEvents = (modal) => {
      if (!modal || modal.dataset.bound === '1') return;
      modal.dataset.bound = '1';
      modal.querySelectorAll('.kyc-doc-review-close').forEach((button) => {
        button.addEventListener('click', () => closeModal(modal));
      });
      modal.addEventListener('click', (event) => {
        if (event.target === modal) closeModal(modal);
      });
    };

    const bindOwnerModalEvents = (modal) => {
      if (!modal || modal.dataset.bound === '1') return;
      modal.dataset.bound = '1';
      modal.querySelectorAll('.vehicle-owner-modal-close').forEach((button) => {
        button.addEventListener('click', () => closeModal(modal));
      });
      modal.addEventListener('click', (event) => {
        if (event.target === modal) closeModal(modal);
      });
    };

    const ensureKycDocModal = async (userId) => {
      const cacheKey = String(userId);
      const modalId = `kyc-user-modal-${userId}`;
      const existing = document.getElementById(modalId);
      if (existing) {
        existing.remove();
        loadedKycDocModals.delete(cacheKey);
      }
      const response = await fetch(kycDocModalsUrl(userId), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        cache: 'no-store',
      });
      if (!response.ok) throw new Error('Could not load KYC documents.');
      const html = await response.text();
      document.getElementById('kyc-doc-modals-root').insertAdjacentHTML('beforeend', html);
      const modal = document.getElementById(modalId);
      bindKycDocModalEvents(modal);
      loadedKycDocModals.add(cacheKey);
      return modal;
    };

    const ensureOwnerModal = async (ownerId) => {
      const existing = document.getElementById(`vehicle-owner-modal-${ownerId}`);
      if (existing) existing.remove();
      const response = await fetch(ownerModalsUrl(ownerId), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        cache: 'no-store',
      });
      if (!response.ok) throw new Error('Could not load owner details.');
      const html = await response.text();
      document.getElementById('kyc-owner-modals-root').insertAdjacentHTML('beforeend', html);
      const modal = document.getElementById(`vehicle-owner-modal-${ownerId}`);
      bindOwnerModalEvents(modal);
      return modal;
    };

    if (window.jQuery && window.jQuery.fn.DataTable) {
      window.adminDataTable = window.jQuery('#kyc-documents-table').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
          url: "{% url 'core:kyc_documents' %}",
          data: (params) => {
            if (pendingOnly) params.pending = '1';
          },
        },
        responsive: true,
        pageLength: 10,
        order: [[4, 'desc']],
        columns: [
          { data: 'user_email', defaultContent: '' },
          {
            data: 'ownership',
            defaultContent: '—',
            orderable: false,
            searchable: false,
            render: (value, type, row) => ownershipBadge(value, row),
          },
          {
            data: 'document_count',
            defaultContent: '0',
            searchable: false,
          },
          {
            data: 'verified_display',
            defaultContent: '',
            searchable: false,
            render: (value, type, row) => renderStatusBadge(row.review_status, value),
          },
          { data: 'submitted_at', defaultContent: '' },
          { data: 'reviewed_at', defaultContent: '' },
          {
            data: null,
            orderable: false,
            searchable: false,
            render: (data, type, row) => renderKycDocActions(row),
          },
        ],
        language: {
          emptyTable: 'No users with KYC documents yet.',
        },
      });
    }

    document.addEventListener('click', async (event) => {
      const ownerButton = event.target.closest('.kyc-owner-open');
      if (ownerButton) {
        try {
          const modal = await ensureOwnerModal(ownerButton.dataset.ownerId);
          openModal(modal);
        } catch (error) {
          console.error(error);
          alert(error.message || 'Could not load owner details.');
        }
        return;
      }

      const reviewButton = event.target.closest('.kyc-doc-review-open');
      if (reviewButton) {
        const userId = reviewButton.dataset.userId;
        const modalId = reviewButton.dataset.modalId;
        try {
          await ensureKycDocModal(userId);
          openModal(document.getElementById(modalId));
        } catch (error) {
          console.error(error);
          alert(error.message || 'Could not load KYC documents.');
        }
        return;
      }

      const previewButton = event.target.closest('.kyc-doc-preview-btn');
      if (!previewButton) return;
      const panel = document.getElementById(previewButton.dataset.previewId);
      if (!panel) return;
      const isHidden = panel.classList.contains('hidden');
      const modal = previewButton.closest('.kyc-doc-review-modal');
      if (modal) {
        modal.querySelectorAll('.kyc-doc-preview-panel').forEach((otherPanel) => {
          if (otherPanel !== panel) {
            otherPanel.classList.add('hidden');
            otherPanel.innerHTML = '';
          }
        });
        modal.querySelectorAll('.kyc-doc-preview-btn').forEach((otherButton) => {
          if (otherButton !== previewButton) otherButton.textContent = 'Preview';
        });
      }
      if (isHidden) {
        panel.innerHTML = renderPreview(previewButton.dataset.fileUrl);
        panel.classList.remove('hidden');
        previewButton.textContent = 'Hide preview';
      } else {
        panel.classList.add('hidden');
        panel.innerHTML = '';
        previewButton.textContent = 'Preview';
      }
    });

    document.addEventListener('keydown', (event) => {
      if (event.key !== 'Escape') return;
      document.querySelectorAll('.kyc-doc-review-modal:not(.hidden), .vehicle-owner-modal:not(.hidden)').forEach(closeModal);
    });
  });
</script>
{% endblock %}