@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Cortes de efectivo Glovo')

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const endpoints = {
    periods: @json(route('admin.api.prefacturas.periods')),
    entries: (id, params = '') => `/admin/api/cashouts/periods/${id}/entries${params}`,
    sync: (id) => `/admin/api/cashouts/periods/${id}/entries/sync`,
    update: (id) => `/admin/api/cashouts/entries/${id}`,
  };

  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';

  const state = {
    periods: [],
    selectedPeriodId: null,
    periodMeta: null,
    entries: [],
    summary: null,
    loadingPeriods: false,
    loadingEntries: false,
    filters: {
      pendingOnly: false,
      q: '',
    },
    debounceHandle: null,
  };

  const elements = {
    periodSelect: document.getElementById('periodSelect'),
    refreshPeriods: document.getElementById('refreshPeriods'),
    filterSearch: document.getElementById('filterSearch'),
    filterPending: document.getElementById('filterPending'),
    summaryCollected: document.getElementById('summaryCollected'),
    summaryPrefactura: document.getElementById('summaryPrefactura'),
    summaryDifference: document.getElementById('summaryDifference'),
    summaryEntries: document.getElementById('summaryEntries'),
    periodLabel: document.getElementById('periodLabel'),
    periodCompany: document.getElementById('periodCompany'),
    periodStatus: document.getElementById('periodStatus'),
    entriesLoading: document.getElementById('entriesLoading'),
    entriesEmpty: document.getElementById('entriesEmpty'),
    entriesTableBody: document.getElementById('entriesTableBody'),
    openImportModal: document.getElementById('openImportModal'),
    importModalEl: document.getElementById('importModal'),
    importForm: document.getElementById('importForm'),
    importTextarea: document.getElementById('importRawData'),
    importReplace: document.getElementById('importReplace'),
    importError: document.getElementById('importError'),
    importSubmit: document.getElementById('importSubmit'),
  };

  const importModal = elements.importModalEl && typeof bootstrap !== 'undefined'
    ? bootstrap.Modal.getOrCreateInstance(elements.importModalEl)
    : null;

  const notify = (message, type = 'success') => {
    if (!message) return;
    if (window.Swal && typeof window.Swal.fire === 'function') {
      window.Swal.fire({
        toast: true,
        position: 'top-end',
        timer: 2600,
        showConfirmButton: false,
        icon: type === 'error' ? 'error' : type === 'warning' ? 'warning' : 'success',
        title: message,
      });
      return;
    }
    window.alert(message);
  };

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

  const formatCurrency = (value, currency = 'EUR') => {
    if (value === null || value === undefined || Number.isNaN(Number(value))) {
      return '—';
    }
    try {
      return new Intl.NumberFormat('es-ES', { style: 'currency', currency }).format(Number(value));
    } catch (error) {
      const numeric = Number(value) || 0;
      return `${numeric.toFixed(2)} ${currency}`;
    }
  };

  const fetchJson = async (url, options = {}) => {
    const opts = { ...options };
    opts.headers = opts.headers || { Accept: 'application/json' };
    opts.credentials = 'same-origin';

    if (opts.method && opts.method.toUpperCase() !== 'GET') {
      opts.headers['Content-Type'] = 'application/json';
      if (csrfToken) {
        opts.headers['X-CSRF-TOKEN'] = csrfToken;
      }
    }

    const response = await fetch(url, opts);
    let data = null;

    try {
      data = await response.json();
    } catch (_) {
      data = null;
    }

    if (!response.ok) {
      const message = data?.message ?? `Error ${response.status}`;
      const error = new Error(message);
      error.details = data;
      throw error;
    }

    return data;
  };

  const loadPeriods = async () => {
    state.loadingPeriods = true;
    try {
      const params = new URLSearchParams({ limit: 20 });
      const res = await fetchJson(`${endpoints.periods}?${params.toString()}`);
      state.periods = Array.isArray(res?.data) ? res.data : [];
      renderPeriods();
      if (!state.selectedPeriodId && state.periods.length) {
        selectPeriod(state.periods[0].id);
      }
    } catch (error) {
      console.error(error);
      notify(error.message || 'No se pudieron cargar los periodos.', 'error');
    } finally {
      state.loadingPeriods = false;
    }
  };

  const renderPeriods = () => {
    if (!elements.periodSelect) return;
    elements.periodSelect.innerHTML = '';

    if (!state.periods.length) {
      const option = document.createElement('option');
      option.value = '';
      option.textContent = 'No hay periodos disponibles';
      elements.periodSelect.appendChild(option);
      elements.periodSelect.disabled = true;
      return;
    }

    elements.periodSelect.disabled = false;
    state.periods.forEach((period) => {
      const option = document.createElement('option');
      option.value = period.id;
      const companyName = period.company?.name ? ` · ${period.company.name}` : '';
      option.textContent = `${period.label}${companyName}`;
      if (Number(state.selectedPeriodId) === Number(period.id)) {
        option.selected = true;
      }
      elements.periodSelect.appendChild(option);
    });
  };

  const selectPeriod = (id) => {
    const numericId = Number(id);
    if (!Number.isFinite(numericId) || numericId <= 0) {
      state.selectedPeriodId = null;
      state.periodMeta = null;
      state.entries = [];
      state.summary = null;
      renderSummary();
      renderTable();
      return;
    }
    state.selectedPeriodId = numericId;
    renderPeriods();
    loadEntries();
  };

  const loadEntries = async () => {
    if (!state.selectedPeriodId) {
      state.entries = [];
      state.summary = null;
      state.periodMeta = null;
      renderSummary();
      renderTable();
      return;
    }

    state.loadingEntries = true;
    renderTable();

    try {
      const params = new URLSearchParams();
      if (state.filters.pendingOnly) {
        params.append('pending_only', '1');
      }
      if (state.filters.q) {
        params.append('q', state.filters.q);
      }

      const res = await fetchJson(endpoints.entries(state.selectedPeriodId, params.toString() ? `?${params.toString()}` : ''));

      state.entries = Array.isArray(res?.data?.rows) ? res.data.rows : [];
      state.summary = res?.data?.totals ?? null;
      state.periodMeta = res?.data?.period ?? null;
    } catch (error) {
      console.error(error);
      notify(error.message || 'No se pudieron cargar los cortes.', 'error');
      state.entries = [];
      state.summary = null;
    } finally {
      state.loadingEntries = false;
      renderSummary();
      renderTable();
    }
  };

  const renderSummary = () => {
    if (elements.periodLabel) {
      elements.periodLabel.textContent = state.periodMeta?.label ?? 'Selecciona un periodo';
    }
    if (elements.periodCompany) {
      const company = state.periodMeta?.company?.name ?? '—';
      const city = state.periodMeta?.city?.name ?? '';
      elements.periodCompany.textContent = city ? `${company} · ${city}` : company;
    }
    if (elements.periodStatus) {
      elements.periodStatus.textContent = state.periodMeta?.status_label ?? '—';
      elements.periodStatus.classList.remove('badge-light-primary', 'badge-light-warning', 'badge-light-success', 'badge-light-secondary');
      const status = (state.periodMeta?.status ?? '').toString();
      if (status === 'closed') {
        elements.periodStatus.classList.add('badge-light-success');
      } else if (status === 'processing') {
        elements.periodStatus.classList.add('badge-light-warning');
      } else {
        elements.periodStatus.classList.add('badge-light-secondary');
      }
    }

    const summary = state.summary || {
      amount_collected: 0,
      prefactura_cash_out_deduction: 0,
      difference_vs_prefactura: 0,
      entries: 0,
    };

    if (elements.summaryCollected) {
      elements.summaryCollected.textContent = formatCurrency(summary.amount_collected);
    }
    if (elements.summaryPrefactura) {
      elements.summaryPrefactura.textContent = formatCurrency(summary.prefactura_cash_out_deduction);
    }
    if (elements.summaryDifference) {
      elements.summaryDifference.textContent = formatCurrency(summary.difference_vs_prefactura);
      elements.summaryDifference.classList.remove('text-success', 'text-danger', 'text-warning', 'text-muted');
      if (summary.difference_vs_prefactura === null) {
        elements.summaryDifference.classList.add('text-muted');
      } else if (Math.abs(summary.difference_vs_prefactura) < 0.5) {
        elements.summaryDifference.classList.add('text-success');
      } else if (summary.difference_vs_prefactura > 0) {
        elements.summaryDifference.classList.add('text-warning');
      } else {
        elements.summaryDifference.classList.add('text-danger');
      }
    }
    if (elements.summaryEntries) {
      elements.summaryEntries.textContent = `${summary.entries ?? 0}`;
    }
  };

  const aggregateEntries = () => {
    if (!Array.isArray(state.entries)) {
      return [];
    }

    const groups = new Map();

    state.entries.forEach((entry) => {
      const keyParts = [
        entry.period_rider_total_id ? `prt:${entry.period_rider_total_id}` : null,
        entry.company_id ? `comp:${entry.company_id}` : null,
        entry.courier_id ? `courier:${entry.courier_id}` : null,
        entry.rider_user_id ? `rider:${entry.rider_user_id}` : null,
        entry.id ? `entry:${entry.id}` : null,
      ].filter(Boolean);
      const key = keyParts.join('|') || `entry:${entry.id}`;

      let group = groups.get(key);
      if (!group) {
        group = {
          key,
          cuts: [],
          rider_name: entry.rider_name ?? 'Sin asignar',
          rider_email: entry.rider_email ?? '',
          rider_user_id: entry.rider_user_id ?? null,
          period_rider_total_id: entry.period_rider_total_id ?? null,
          courier_id: entry.courier_id ?? null,
          company: entry.company ?? '',
          city: entry.city ?? '',
          needs_assignment: Boolean(entry.needs_assignment),
          amount_collected: 0,
          prefactura: entry.prefactura_cash_out_deduction ?? null,
        };
        groups.set(key, group);
      }

      group.cuts.push(entry);
      group.amount_collected += Number(entry.amount_collected ?? 0);
      if (group.prefactura === null && entry.prefactura_cash_out_deduction !== null) {
        group.prefactura = entry.prefactura_cash_out_deduction;
      }
      if (entry.needs_assignment === false) {
        group.needs_assignment = false;
      }
    });

    return Array.from(groups.values()).map((group) => {
      const amount = Number(group.amount_collected.toFixed(2));
      const prefactura = group.prefactura !== null ? Number(group.prefactura) : null;
      const difference = prefactura !== null ? Number((prefactura - amount).toFixed(2)) : null;
      const lastCut = group.cuts
        .map((cut) => cut.cut_date)
        .filter(Boolean)
        .sort()
        .pop() ?? null;

      return {
        ...group,
        amount_collected: amount,
        prefactura,
        difference,
        last_cut: lastCut,
      };
    }).sort((a, b) => {
      const diffA = Math.abs(a.difference ?? 0);
      const diffB = Math.abs(b.difference ?? 0);
      if (diffA === diffB) {
        return (b.amount_collected ?? 0) - (a.amount_collected ?? 0);
      }
      return diffB - diffA;
    });
  };

  const renderTable = () => {
    if (!elements.entriesTableBody) {
      return;
    }

    const loadingEl = elements.entriesLoading;
    const emptyEl = elements.entriesEmpty;

    if (state.loadingEntries) {
      if (loadingEl) loadingEl.classList.remove('d-none');
      if (emptyEl) emptyEl.classList.add('d-none');
      elements.entriesTableBody.innerHTML = '';
      return;
    }

    if (loadingEl) loadingEl.classList.add('d-none');

    const groups = aggregateEntries();

    if (!groups.length) {
      elements.entriesTableBody.innerHTML = '';
      if (emptyEl) {
        emptyEl.classList.remove('d-none');
        emptyEl.textContent = state.filters.pendingOnly
          ? 'No hay cortes pendientes de asignar.'
          : 'No hay cortes registrados en este periodo.';
      }
      return;
    }

    if (emptyEl) emptyEl.classList.add('d-none');

    const rowsHtml = groups.map((group) => {
      const riderInfo = `
        <div class="fw-semibold">${escapeHtml(group.rider_name)}</div>
        <div class="text-muted small">${escapeHtml(group.rider_email || 'Sin email')}</div>
        ${group.city ? `<div class="text-muted small">${escapeHtml(group.city)}</div>` : ''}
      `;

      const diffClass = (() => {
        if (group.difference === null) return 'text-muted';
        if (Math.abs(group.difference) < 0.5) return 'text-success fw-semibold';
        if (group.difference > 0) return 'text-warning fw-semibold';
        return 'text-danger fw-semibold';
      })();

      const statusBadge = group.needs_assignment
        ? '<span class="badge bg-label-warning">Asignar rider</span>'
        : '<span class="badge bg-label-success">Asignado</span>';

      const cutsList = group.cuts.map((cut) => {
        const date = cut.cut_date ? escapeHtml(cut.cut_date) : '—';
        return `<div><span class="fw-medium">${date}</span> · ${formatCurrency(cut.amount_collected)}</div>`;
      }).join('');

      return `
        <tr>
          <td>${riderInfo}</td>
          <td>${escapeHtml(group.courier_id ?? '—')}</td>
          <td>${escapeHtml(group.company ?? '—')}</td>
          <td>${formatCurrency(group.amount_collected)}</td>
          <td>${group.prefactura !== null ? formatCurrency(group.prefactura) : '<span class="badge bg-label-secondary">Sin prefactura</span>'}</td>
          <td class="${diffClass}">${group.difference !== null ? formatCurrency(group.difference) : '—'}</td>
          <td>
            <div class="fw-medium">${group.cuts.length} cortes</div>
            <div class="small text-muted">${cutsList}</div>
          </td>
          <td>${statusBadge}</td>
        </tr>
      `;
    }).join('');

    elements.entriesTableBody.innerHTML = rowsHtml;
  };

  const parseRawData = (rawText) => {
    if (!rawText) return [];

    const lines = rawText
      .split(/\r?\n/)
      .map((line) => line.trim())
      .filter((line) => line !== '');

    if (!lines.length) {
      return [];
    }

    if (/rider\s*id/i.test(lines[0]) || /usuario/i.test(lines[0])) {
      lines.shift();
    }

    const rows = [];

    lines.forEach((line) => {
      const parts = line.includes('\t')
        ? line.split('\t')
        : line.split(/\s{2,}/);

      if (parts.length < 6) {
        return;
      }

      const values = parts.map((value) => (value ?? '').trim());
      if (values.length < 6) {
        return;
      }

      const courier = values.shift();
      const name = values.shift();
      const city = values.shift();
      const balancePre = values.shift();
      const collected = values.shift();
      const balancePost = values.shift();
      let cutDate = '';
      let company = '';

      if (values.length) {
        cutDate = values.pop() ?? '';
        company = values.join(' ').trim();
      }

      rows.push({
        courier_id: courier,
        rider_name: name,
        city_name: city,
        balance_precut: balancePre,
        amount_collected: collected,
        balance_post: balancePost,
        company_name: company,
        cut_date: cutDate,
      });
    });

    return rows;
  };

  const handleImportSubmit = async (event) => {
    event.preventDefault();
    if (!state.selectedPeriodId) {
      notify('Selecciona un periodo antes de importar.', 'warning');
      return;
    }

    const rawText = elements.importTextarea?.value ?? '';
    const rows = parseRawData(rawText);

    if (!rows.length) {
      if (elements.importError) {
        elements.importError.textContent = 'No se pudieron detectar filas. Revisa el formato del reporte.';
        elements.importError.classList.remove('d-none');
      }
      return;
    }

    if (elements.importError) {
      elements.importError.classList.add('d-none');
      elements.importError.textContent = '';
    }

    elements.importSubmit?.setAttribute('disabled', 'disabled');

    try {
      const payload = {
        rows,
        replace: Boolean(elements.importReplace?.checked),
      };

      await fetchJson(endpoints.sync(state.selectedPeriodId), {
        method: 'POST',
        body: JSON.stringify(payload),
      });

      notify('Cortes importados correctamente.');
      if (importModal) {
        importModal.hide();
      }
      elements.importTextarea.value = '';
      elements.importReplace.checked = false;
      await loadEntries();
    } catch (error) {
      console.error(error);
      if (elements.importError) {
        const details = error.details?.data?.unmatched;
        const detailMsg = Array.isArray(details) && details.length
          ? ` · ${details.length} filas sin asignar`
          : '';
        elements.importError.textContent = `${error.message || 'No se pudo importar el archivo.'}${detailMsg}`;
        elements.importError.classList.remove('d-none');
      }
    } finally {
      elements.importSubmit?.removeAttribute('disabled');
    }
  };

  if (elements.periodSelect) {
    elements.periodSelect.addEventListener('change', (event) => {
      selectPeriod(event.target.value);
    });
  }

  if (elements.refreshPeriods) {
    elements.refreshPeriods.addEventListener('click', () => {
      loadPeriods();
    });
  }

  if (elements.filterPending) {
    elements.filterPending.addEventListener('change', (event) => {
      state.filters.pendingOnly = Boolean(event.target.checked);
      loadEntries();
    });
  }

  if (elements.filterSearch) {
    elements.filterSearch.addEventListener('input', (event) => {
      const value = event.target.value || '';
      window.clearTimeout(state.debounceHandle);
      state.debounceHandle = window.setTimeout(() => {
        state.filters.q = value.trim();
        loadEntries();
      }, 360);
    });
  }

  if (elements.openImportModal && importModal) {
    elements.openImportModal.addEventListener('click', () => {
      if (!state.selectedPeriodId) {
        notify('Selecciona un periodo antes de importar.', 'warning');
        return;
      }
      elements.importTextarea.value = '';
      elements.importReplace.checked = false;
      if (elements.importError) {
        elements.importError.classList.add('d-none');
        elements.importError.textContent = '';
      }
      importModal.show();
    });
  }

  if (elements.importForm) {
    elements.importForm.addEventListener('submit', handleImportSubmit);
  }

  loadPeriods();
});
</script>
@endsection

@section('content')
<div class="row g-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header py-3">
        <div class="d-flex flex-wrap align-items-center gap-3">
          <div class="flex-grow-1">
            <label for="periodSelect" class="form-label mb-1">Periodo de prefactura</label>
            <select id="periodSelect" class="form-select"></select>
          </div>
          <div class="d-flex align-items-center gap-2 ms-auto">
            <div class="input-group">
              <span class="input-group-text"><i class="ri-search-line"></i></span>
              <input type="search" id="filterSearch" class="form-control" placeholder="Buscar rider o ID...">
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" id="filterPending">
              <label class="form-check-label" for="filterPending">Sólo pendientes</label>
            </div>
            <button type="button" class="btn btn-outline-secondary" id="refreshPeriods">
              <i class="ri-refresh-line me-1"></i>Actualizar periodos
            </button>
            <button type="button" class="btn btn-primary" id="openImportModal">
              <i class="ri-upload-2-line me-1"></i>Importar corte semanal
            </button>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row g-3 mb-4">
          <div class="col-sm-6 col-lg-3">
            <div class="card border h-100">
              <div class="card-body">
                <small class="text-uppercase text-muted fw-semibold">Periodo</small>
                <h5 class="mb-1" id="periodLabel">Selecciona un periodo</h5>
                <div class="d-flex align-items-center gap-2">
                  <span class="text-muted small" id="periodCompany">—</span>
                  <span class="badge badge-light-secondary" id="periodStatus">—</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="card border h-100">
              <div class="card-body">
                <small class="text-uppercase text-muted fw-semibold">Importe recogido</small>
                <h4 class="mb-0" id="summaryCollected">—</h4>
                <small class="text-muted">Total cortes semanales</small>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="card border h-100">
              <div class="card-body">
                <small class="text-uppercase text-muted fw-semibold">Prefactura</small>
                <h4 class="mb-0" id="summaryPrefactura">—</h4>
                <small class="text-muted">Total cash-out prefactura</small>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="card border h-100">
              <div class="card-body">
                <small class="text-uppercase text-muted fw-semibold">Diferencia</small>
                <h4 class="mb-0" id="summaryDifference">—</h4>
                <small class="text-muted">Prefactura vs cortes</small>
              </div>
            </div>
          </div>
        </div>

        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Rider</th>
                <th>ID Glovo</th>
                <th>Delegación</th>
                <th>Cobrado semanal</th>
                <th>Prefactura</th>
                <th>Diferencia</th>
                <th>Cortes</th>
                <th>Estado</th>
              </tr>
            </thead>
            <tbody id="entriesTableBody"></tbody>
          </table>
        </div>

        <div id="entriesLoading" class="text-center py-5 d-none">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Cargando...</span>
          </div>
        </div>
        <div id="entriesEmpty" class="text-center text-muted py-5 d-none">No hay datos para mostrar.</div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="importModalLabel">Importar reporte semanal de Glovo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small">
          Pega el contenido del reporte semanal enviado por Glovo. El sistema reconocerá las columnas
          <strong>Rider ID</strong>, <strong>Usuario</strong>, <strong>Ciudad</strong>, <strong>Balance Precorte</strong>,
          <strong>Balance Recogido</strong>, <strong>Balance Final</strong>, <strong>Delegación</strong> y <strong>Fecha Corte</strong>.
        </p>
        <form id="importForm">
          <div class="mb-3">
            <label for="importRawData" class="form-label">Datos del reporte</label>
            <textarea id="importRawData" class="form-control" rows="10" placeholder="Pega aquí el contenido del reporte semanal..."></textarea>
          </div>
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="importReplace">
            <label class="form-check-label" for="importReplace">Reemplazar datos existentes del periodo</label>
          </div>
          <div class="text-danger small d-none" id="importError"></div>
          <div class="d-flex justify-content-end gap-2">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary" id="importSubmit">
              <i class="ri-upload-2-line me-1"></i>Importar
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection