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

@extends('layouts/layoutMaster')

@section('title', 'Cierres y prefacturas')

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const endpoints = {
    periods: @json(route('admin.api.prefacturas.periods')),
    createPeriod: @json(route('admin.api.prefacturas.periods.store')),
    ridersBase: @json(url('/admin/api/prefacturas/periods')),
    companies: @json(route('admin.api.companies')),
    cities: @json(route('admin.api.cities')),
    assignBase: @json(url('/admin/api/prefacturas/riders')),
    searchRiders: @json(route('admin.api.prefacturas.riders.search')),
  };

  const getPeriodUrl = (id) => `${endpoints.ridersBase}/${id}`;
  const getSyncUrl = (id) => `${endpoints.ridersBase}/${id}/sync-totals`;
  const getAssignUrl = (id) => `${endpoints.assignBase}/${id}`;
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

  const state = {
    periods: [],
    selectedPeriodId: null,
    filters: { companyId: null, q: '', pendingOnly: false },
    groups: { auto: [], suggested: [], pending: [], assigned: [] },
    rowsById: new Map(),
    currency: 'EUR',
    assign: {
      selectedRiderId: null,
      debounceHandle: null,
      suggestions: [],
    },
    debounceHandle: null,
  };

  const catalogs = {
    companies: null,
    cities: null,
  };

  const elements = {
    companySelect: document.getElementById('companySelect'),
    periodSelect: document.getElementById('billingPeriodSelect'),
    periodLoading: document.getElementById('periodLoading'),
    periodError: document.getElementById('periodError'),
    ridersLoading: document.getElementById('ridersLoading'),
    ridersEmpty: document.getElementById('ridersEmpty'),
    ridersTableBody: document.getElementById('ridersTableBody'),
    refreshBtn: document.getElementById('refreshPeriods'),
    searchInput: document.getElementById('filterSearch'),
    pendingSwitch: document.getElementById('filterPendingOnly'),
    summary: {
      tips: document.getElementById('summaryTips'),
      cashDeduction: document.getElementById('summaryCashDeduction'),
      cashPending: document.getElementById('summaryCashPending'),
      net: document.getElementById('summaryNet'),
      riders: document.getElementById('summaryRiders'),
      pending: document.getElementById('summaryPending'),
    },
    periodInfo: {
      range: document.getElementById('periodRange'),
      status: document.getElementById('periodStatus'),
      company: document.getElementById('periodCompany'),
      city: document.getElementById('periodCity'),
    },
    create: {
      modalEl: document.getElementById('createPeriodModal'),
      form: document.getElementById('createPeriodForm'),
      error: document.getElementById('createPeriodError'),
      company: document.getElementById('createCompany'),
      city: document.getElementById('createCity'),
      start: document.getElementById('createStartDate'),
      end: document.getElementById('createEndDate'),
      cycle: document.getElementById('createCycle'),
      status: document.getElementById('createStatus'),
      submitBtn: document.querySelector('#createPeriodForm button[type="submit"]'),
    },
    edit: {
      modalEl: document.getElementById('editPeriodModal'),
      form: document.getElementById('editPeriodForm'),
      error: document.getElementById('editPeriodError'),
      label: document.getElementById('editPeriodLabel'),
      company: document.getElementById('editCompany'),
      city: document.getElementById('editCity'),
      start: document.getElementById('editStartDate'),
      end: document.getElementById('editEndDate'),
      cycle: document.getElementById('editCycle'),
      status: document.getElementById('editStatus'),
      submitBtn: document.querySelector('#editPeriodForm button[type="submit"]'),
    },
    import: {
      modalEl: document.getElementById('importDataModal'),
      form: document.getElementById('importDataForm'),
      dataset: document.getElementById('importDataset'),
      replace: document.getElementById('importReplace'),
      textarea: document.getElementById('importRawData'),
      error: document.getElementById('importDataError'),
      info: document.getElementById('importDataInfo'),
      success: document.getElementById('importDataSuccess'),
      unmatched: document.getElementById('importDataUnmatched'),
      previewCard: document.getElementById('importPreviewCard'),
      preview: document.getElementById('importDataPreview'),
      submitBtn: document.querySelector('#importDataForm button[type="submit"]'),
    },
    assign: {
      modalEl: document.getElementById('assignRiderModal'),
      form: document.getElementById('assignRiderForm'),
      recordId: document.getElementById('assignRecordId'),
      current: document.getElementById('assignCurrentInfo'),
      search: document.getElementById('assignRiderSearch'),
      results: document.getElementById('assignRiderResults'),
      empty: document.getElementById('assignRiderEmpty'),
      submitBtn: document.getElementById('assignRiderSubmit'),
      clearBtn: document.getElementById('assignRiderClear'),
    },
    buttons: {
      openImport: document.getElementById('openImportModal'),
      openCreate: document.getElementById('openCreatePeriodModal'),
      openEdit: document.getElementById('openEditPeriodModal'),
    },
  };

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

  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;
    }
    // Fallback simple alert
    window.alert(message);
  };

  const createModal = elements.create.modalEl && typeof bootstrap !== 'undefined'
    ? bootstrap.Modal.getOrCreateInstance(elements.create.modalEl)
    : null;
  const editModal = elements.edit.modalEl && typeof bootstrap !== 'undefined'
    ? bootstrap.Modal.getOrCreateInstance(elements.edit.modalEl)
    : null;
  const importModal = elements.import.modalEl && typeof bootstrap !== 'undefined'
    ? bootstrap.Modal.getOrCreateInstance(elements.import.modalEl)
    : null;
  const assignModal = elements.assign.modalEl && typeof bootstrap !== 'undefined'
    ? bootstrap.Modal.getOrCreateInstance(elements.assign.modalEl)
    : null;

  const parseNumber = (value) => {
    if (value === null || value === undefined) return 0;
    if (typeof value === 'number') return value;
    let normalized = String(value).trim();
    if (normalized === '') return 0;
    normalized = normalized.replace(/[^0-9,.\-]/g, '');
    const hasComma = normalized.includes(',');
    if (hasComma) {
      normalized = normalized.replace(/\./g, '');
      normalized = normalized.replace(/,/g, '.');
    }
    const parsed = Number(normalized);
    return Number.isFinite(parsed) ? parsed : 0;
  };

  const formatCurrency = (value, currency = 'EUR') => {
    try {
      return new Intl.NumberFormat('es-ES', { style: 'currency', currency }).format(Number(value) || 0);
    } catch (_) {
      const numeric = Number.isFinite(Number(value)) ? Number(value) : 0;
      return `${numeric.toFixed(2)} ${currency}`;
    }
  };

  const formatNumber = (value, digits = 2) => {
    const numeric = Number(value) || 0;
    return new Intl.NumberFormat('es-ES', { minimumFractionDigits: digits, maximumFractionDigits: digits }).format(numeric);
  };

  const extractColumns = (line = '') => {
    if (!line) return [];
    const normalized = line
      .replace(/\u00A0/g, ' ')
      .replace(/[|]/g, '\t')
      .replace(/;/g, '\t')
      .replace(/\s{3,}/g, '\t')
      .trim();

    const splitByTab = normalized.split('\t').map((col) => col.trim()).filter((col) => col !== '');
    if (splitByTab.length > 1) return splitByTab;

    const splitByMultiSpace = normalized.split(/\s{2,}/).map((col) => col.trim()).filter((col) => col !== '');
    if (splitByMultiSpace.length > 1) return splitByMultiSpace;

    return normalized.split(/\s+/).map((col) => col.trim()).filter((col) => col !== '');
  };

  const setSummary = (totals = {}, currency = 'EUR') => {
    const { summary } = elements;
    summary.tips && (summary.tips.textContent = formatCurrency(totals.tips ?? 0, currency));
    summary.cashDeduction && (summary.cashDeduction.textContent = formatCurrency(totals.cash_out_deduction ?? 0, currency));
    summary.cashPending && (summary.cashPending.textContent = formatCurrency(totals.cash_out_pending ?? 0, currency));
    summary.net && (summary.net.textContent = formatCurrency(totals.net ?? 0, currency));
    if (summary.riders) summary.riders.textContent = `${totals.riders ?? 0}`;
    if (summary.pending) summary.pending.textContent = `${totals.pending_assignments ?? 0}`;
  };

  const setPeriodInfo = (period) => {
    const { periodInfo } = elements;
    periodInfo.range.textContent = period
      ? `${period.start_date ?? '—'} – ${period.end_date ?? '—'}`
      : 'Sin periodo seleccionado';
    periodInfo.status.textContent = period?.status_label ?? '—';
    periodInfo.status.classList.toggle('badge-soft-success', period?.status === 'closed');
    periodInfo.status.classList.toggle('badge-soft-warning', period?.status === 'in_review' || period?.status === 'processing');
    periodInfo.status.classList.toggle('badge-soft-secondary', !['closed', 'in_review', 'processing'].includes(period?.status ?? ''));
    const companyLabel = period?.company?.name ?? getCompanyLabel(state.filters.companyId) ?? 'Todas las delegaciones';
    periodInfo.company.textContent = companyLabel;
    periodInfo.city.textContent = period?.city?.name ?? 'Todas las ciudades';
  };

  const setLoading = (isLoading) => {
    elements.periodLoading?.classList.toggle('d-none', !isLoading);
    if (elements.companySelect) elements.companySelect.disabled = isLoading;
    if (elements.periodSelect) elements.periodSelect.disabled = isLoading;
    elements.refreshBtn?.classList.toggle('disabled', isLoading);
  };

  const setRidersLoading = (isLoading) => {
    elements.ridersLoading?.classList.toggle('d-none', !isLoading);
  };

  const showError = (message = '') => {
    if (!elements.periodError) return;
    if (message) {
      elements.periodError.textContent = message;
      elements.periodError.classList.remove('d-none');
    } else {
      elements.periodError.textContent = '';
      elements.periodError.classList.add('d-none');
    }
  };

  const updateEditButtonState = () => {
    if (!elements.buttons.openEdit) return;
    elements.buttons.openEdit.disabled = !state.selectedPeriodId;
  };

  const getCompanyLabel = (id) => {
    if (!id || !Array.isArray(catalogs.companies)) return null;
    const match = catalogs.companies.find((company) => String(company.id) === String(id));
    return match ? match.name : null;
  };

  const renderCompanyOptions = () => {
    const select = elements.companySelect;
    if (!select) return;
    const companies = Array.isArray(catalogs.companies) ? catalogs.companies : [];
    select.innerHTML = '';
    select.appendChild(new Option('Selecciona empresa', '', !state.filters.companyId, !state.filters.companyId));
    companies.forEach((company) => {
      select.appendChild(new Option(company.name ?? `Empresa ${company.id}`, company.id));
    });
    if (state.filters.companyId) {
      select.value = String(state.filters.companyId);
    }
  };

  const buildPeriodsUrl = () => {
    const url = new URL(endpoints.periods, window.location.origin);
    if (state.filters.companyId) {
      url.searchParams.set('company_id', state.filters.companyId);
    }
    return url;
  };

  const loadCompanies = async () => {
    if (!elements.companySelect) return;
    elements.companySelect.disabled = true;
    try {
      const response = await fetch(endpoints.companies);
      if (!response.ok) throw new Error('No se pudieron obtener las empresas disponibles.');
      const json = await response.json();
      catalogs.companies = Array.isArray(json?.data) ? json.data : [];
      if (!state.filters.companyId && catalogs.companies.length) {
        state.filters.companyId = String(catalogs.companies[0].id);
      } else if (state.filters.companyId) {
        const exists = catalogs.companies.some((company) => String(company.id) === String(state.filters.companyId));
        if (!exists) {
          state.filters.companyId = catalogs.companies.length ? String(catalogs.companies[0].id) : null;
        }
      }
      renderCompanyOptions();
    } catch (error) {
      showError(error?.message || 'No se pudieron cargar las empresas.');
    } finally {
      elements.companySelect.disabled = false;
    }
  };

  const renderPeriodOptions = () => {
    const select = elements.periodSelect;
    if (!select) return;
    select.innerHTML = '';
    select.appendChild(new Option('Selecciona un ciclo de facturación', '', true, false));
    state.periods.forEach((period) => {
      select.appendChild(new Option(`${period.label} · ${period.status_label}`, period.id));
    });
    if (state.selectedPeriodId) select.value = String(state.selectedPeriodId);
    updateEditButtonState();
  };

  const renderRiders = (groups = {}, currency = 'EUR') => {
    const tbody = elements.ridersTableBody;
    if (!tbody) return;
    tbody.innerHTML = '';

    const auto = Array.isArray(groups.auto) ? groups.auto : [];
    const suggested = Array.isArray(groups.suggested) ? groups.suggested : [];
    const pending = Array.isArray(groups.pending) ? groups.pending : [];
    const assigned = Array.isArray(groups.assigned) ? groups.assigned : [];

    state.rowsById = new Map();
    [...auto, ...suggested, ...pending, ...assigned].forEach((row) => {
      if (row && row.id !== undefined) {
        state.rowsById.set(Number(row.id), row);
      }
    });
    state.currency = currency;

    const columnCount = tbody.closest('table')?.querySelectorAll('thead th').length || 8;
    let renderedRows = 0;

    const groupConfigs = [
      {
        key: 'auto',
        label: 'Asignados automáticamente',
        badge: 'success',
        description: 'Conciliados según el historial de credenciales en el periodo.',
        rowClass: 'table-success-subtle',
      },
      {
        key: 'suggested',
        label: 'Coincidencias sugeridas',
        badge: 'info',
        description: 'Propuesta automática del rider con mayor cobertura.',
        rowClass: 'table-info-subtle',
      },
      {
        key: 'pending',
        label: 'Pendientes sin coincidencias',
        badge: 'warning',
        description: 'No se detectaron credenciales activas; asigna manualmente.',
        rowClass: 'table-warning-subtle',
      },
      {
        key: 'assigned',
        label: 'Conciliados manualmente',
        badge: 'secondary',
        description: 'Asignaciones confirmadas por el equipo.',
        rowClass: '',
      },
    ];

    const allowedWhenPendingOnly = new Set(['suggested', 'pending']);

    const buildAssignmentCell = (row, groupKey) => {
      const assignment = row.assignment || {};
      const candidates = Array.isArray(assignment.candidates) ? assignment.candidates : [];
      const bestCandidate = candidates.length ? candidates[0] : null;
      const identifier = assignment.identifier || row.courier_id || null;

      if (groupKey === 'auto') {
        const coverage = bestCandidate?.confidence_percent ?? null;
        const overlap = bestCandidate?.overlap_hours ? `${bestCandidate.overlap_hours} h` : null;
        return `
          <span class="badge bg-label-success mb-1"><i class="ti tabler-sparkles me-1"></i> Auto asignado</span>
          ${coverage !== null ? `<div class="text-muted small">Coincidencia ${coverage}% ${overlap ? `· ${escapeHtml(overlap)}` : ''}</div>` : ''}
          ${identifier ? `<div class="text-muted small">Identificador Glovo: ${escapeHtml(String(identifier))}</div>` : ''}
        `;
      }

      if (groupKey === 'suggested' && bestCandidate) {
        const name = bestCandidate.name ?? `ID ${bestCandidate.rider_user_id}`;
        const coverage = bestCandidate.confidence_percent ?? 0;
        const overlap = bestCandidate.overlap_hours ? `${bestCandidate.overlap_hours} h` : null;
        return `
          <div class="fw-semibold text-heading">${escapeHtml(name)}</div>
          <div class="text-muted small">${coverage}% del periodo${overlap ? ` · ${escapeHtml(overlap)}` : ''}</div>
          <div class="text-muted small">Rider ID sugerido: ${escapeHtml(String(bestCandidate.rider_user_id))}</div>
        `;
      }

      if (groupKey === 'pending') {
        return `
          <div class="text-muted small">Sin coincidencias recientes de credenciales.</div>
          ${identifier ? `<div class="text-muted small">Identificador Glovo: ${escapeHtml(String(identifier))}</div>` : ''}
        `;
      }

      let html = '<div class="text-muted small">Asignación manual confirmada.</div>';
      if (bestCandidate && Number(bestCandidate.rider_user_id) !== Number(row.rider_user_id)) {
        const name = bestCandidate.name ?? `ID ${bestCandidate.rider_user_id}`;
        html += `<div class="text-muted small">Sugerido previamente: ${escapeHtml(name)} (${bestCandidate.confidence_percent ?? 0}%)</div>`;
      }
      return html;
    };

    const appendGroup = (config, items) => {
      if (!items.length) return;
      if (state.filters.pendingOnly && !allowedWhenPendingOnly.has(config.key)) return;

      const headerRow = document.createElement('tr');
      headerRow.className = 'table-group-header';
      headerRow.innerHTML = `
        <td colspan="${columnCount}">
          <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-2">
            <div>
              <div class="text-uppercase small fw-semibold">${escapeHtml(config.label)}</div>
              ${config.description ? `<div class="text-muted small">${escapeHtml(config.description)}</div>` : ''}
            </div>
            <span class="badge bg-label-${config.badge ?? 'secondary'}">${items.length}</span>
          </div>
        </td>
      `;
      tbody.appendChild(headerRow);

      items.forEach((row) => {
        renderedRows += 1;
        const rowCurrency = row.currency || currency || 'EUR';
        const cashDelivered = Number(row.cash_out_delivered ?? row.cash_out_deduction ?? 0);
        const cashPending = Number(row.cash_out_pending ?? 0);
        const net = Number(row.net_to_pay ?? 0);
        const cashDeliveredClass = cashDelivered > 0 ? 'text-heading' : 'text-muted';
        const cashPendingClass = cashPending > 0 ? 'text-warning fw-semibold' : 'text-muted';
        const netClass = net >= 0 ? 'text-success' : 'text-danger';
        const riderIdentifier = row.rider_id || row.courier_id || null;
        const courierIdentifier = row.courier_id && row.courier_id !== row.rider_id ? row.courier_id : null;
        const riderName = escapeHtml(row.rider_name ?? (riderIdentifier ? `Rider ${escapeHtml(String(riderIdentifier))}` : 'Rider sin asignar'));
        const riderEmail = row.rider_email ? `<div class="text-muted small">${escapeHtml(row.rider_email)}</div>` : '';
        const internalIdLine = row.rider_user_id ? `<div class="text-muted small">ID interno: ${escapeHtml(String(row.rider_user_id))}</div>` : '';
        const riderIdLine = riderIdentifier
          ? `<div class="text-muted small">Rider ID: ${escapeHtml(String(riderIdentifier))}</div>`
          : '<div class="text-muted small">Rider ID no informado</div>';
        const courierLine = courierIdentifier
          ? `<div class="text-muted small">Courier ID: ${escapeHtml(String(courierIdentifier))}</div>`
          : '';

        let statusBadge = '';
        if (config.key === 'auto') {
          statusBadge = '<span class="badge bg-label-success ms-2">Auto</span>';
        } else if (config.key === 'suggested') {
          statusBadge = '<span class="badge bg-label-info ms-2">Sugerido</span>';
        } else if (config.key === 'pending') {
          statusBadge = '<span class="badge bg-label-warning ms-2">Pendiente</span>';
        } else {
          statusBadge = '<span class="badge bg-label-secondary ms-2">Manual</span>';
        }

        const companyText = row.company ? escapeHtml(row.company) : '—';
        const cityText = row.city ? escapeHtml(row.city) : 'Sin ciudad';
        const needsAssignment = !!row.needs_assignment;
        const actions = needsAssignment
          ? `<button type="button" class="btn btn-sm btn-primary pref-action-assign" data-id="${row.id}"><i class="ti tabler-user-plus me-1"></i>Asignar rider</button>`
          : `<div class="btn-group btn-group-sm">
               <button type="button" class="btn btn-label-secondary pref-action-change" data-id="${row.id}"><i class="ti tabler-user-edit"></i></button>
               <button type="button" class="btn btn-outline-danger pref-action-clear" data-id="${row.id}"><i class="ti tabler-user-x"></i></button>
             </div>`;

        const tr = document.createElement('tr');
        if (config.rowClass) tr.classList.add(config.rowClass);
        tr.innerHTML = `
          <td>
            <div class="fw-semibold text-heading">${riderName}${statusBadge}</div>
            ${riderEmail}
            ${riderIdLine}
            ${internalIdLine}
            ${courierLine}
          </td>
          <td>
            <div>${companyText}</div>
            <div class="text-muted small">${cityText}</div>
          </td>
          <td class="text-end fw-semibold text-heading">${formatCurrency(row.tips_total ?? 0, rowCurrency)}</td>
          <td class="text-end fw-semibold ${cashDeliveredClass}">${formatCurrency(cashDelivered, rowCurrency)}</td>
          <td class="text-end fw-semibold ${cashPendingClass}">${formatCurrency(cashPending, rowCurrency)}</td>
          <td class="text-end fw-semibold ${netClass}">${formatCurrency(net, rowCurrency)}</td>
          <td>${buildAssignmentCell(row, config.key)}</td>
          <td class="text-end">
            <div class="d-flex flex-column gap-1 align-items-end">
              ${actions}
            </div>
          </td>
        `;

        tbody.appendChild(tr);
      });
    };

    groupConfigs.forEach((config) => {
      appendGroup(config, groups[config.key] ?? []);
    });

    elements.ridersEmpty?.classList.toggle('d-none', renderedRows > 0);
  };

  const findRowById = (id) => state.rowsById.get(Number(id)) || null;

  const resetAssignModal = () => {
    state.assign.selectedRiderId = null;
    state.assign.suggestions = [];
    if (elements.assign.search) elements.assign.search.value = '';
    if (elements.assign.results) elements.assign.results.innerHTML = '';
    elements.assign.empty?.classList.add('d-none');
    if (elements.assign.clearBtn) elements.assign.clearBtn.disabled = true;
    elements.assign.clearBtn?.classList.add('d-none');
  };

  const renderAssignResults = (results = []) => {
    if (!elements.assign.results) return;
    elements.assign.results.innerHTML = '';
    state.assign.suggestions = Array.isArray(results) ? results : [];

    if (!state.assign.suggestions.length) {
      elements.assign.empty?.classList.remove('d-none');
      return;
    }

    elements.assign.empty?.classList.add('d-none');

    state.assign.suggestions.forEach((item) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = `list-group-item list-group-item-action assign-result${state.assign.selectedRiderId === item.id ? ' active' : ''}`;
      button.dataset.userId = item.id;
      const companies = Array.isArray(item.companies) && item.companies.length
        ? item.companies.join(', ')
        : 'Sin delegación';
      const riderIds = Array.isArray(item.rider_ids) ? item.rider_ids.filter(Boolean) : [];
      const courierIds = Array.isArray(item.courier_ids) ? item.courier_ids.filter(Boolean) : [];
      const primaryRiderId = item.primary_rider_id || riderIds[0] || null;
      const riderIdLine = primaryRiderId
        ? `Rider ID: ${escapeHtml(String(primaryRiderId))}`
        : 'Rider ID no disponible';
      const extraRiders = riderIds.length > 1 ? ` (${escapeHtml(riderIds.join(', '))})` : '';
      const courierLine = courierIds.length
        ? `<div class="text-muted small">Courier ID(s): ${escapeHtml(courierIds.join(', '))}</div>`
        : '';
      button.innerHTML = `
        <div class="fw-semibold text-heading">${escapeHtml(item.name ?? 'Rider')}</div>
        ${item.email ? `<div class="text-muted small">${escapeHtml(item.email)}</div>` : ''}
        <div class="text-muted small">DNI: ${escapeHtml(item.dni ?? '—')}</div>
        <div class="text-muted small">${escapeHtml(companies)}</div>
        <div class="text-muted small">${riderIdLine}${extraRiders}</div>
        ${courierLine}
      `;
      elements.assign.results.appendChild(button);
    });
  };

  const fetchAssignSuggestions = async ({ q = '', companyId = null, riderId = null, courierId = null } = {}) => {
    try {
      const url = new URL(endpoints.searchRiders, window.location.origin);
      if (q) url.searchParams.set('q', q);
      if (companyId) url.searchParams.set('company_id', companyId);
      if (riderId) url.searchParams.set('rider_id', riderId);
      if (courierId) url.searchParams.set('courier_id', courierId);
      const response = await fetch(url, { headers: { Accept: 'application/json' } });
      const json = await response.json().catch(() => ({ data: [] }));
      if (!response.ok) throw new Error(json?.message || 'No se pudo obtener el listado de riders.');
      renderAssignResults(Array.isArray(json?.data) ? json.data : []);
    } catch (error) {
      renderAssignResults([]);
      notify(error?.message || 'Error buscando riders', 'error');
    }
  };

  const openAssignModal = async (recordId) => {
    const row = findRowById(recordId);
    if (!row || !elements.assign.recordId) return;
    elements.assign.recordId.value = recordId;

    if (elements.assign.current) {
      const currencyUsed = row.currency || state.currency || 'EUR';
      const riderIdentifier = row.rider_id ? `Rider ID: ${escapeHtml(row.rider_id)}` : 'Rider ID no informado';
      const courierIdentifier = row.courier_id && row.courier_id !== row.rider_id
        ? `<div class="text-muted small">Courier ID: ${escapeHtml(row.courier_id)}</div>`
        : '';
      const internalIdentifier = row.rider_user_id
        ? `<div class="text-muted small">ID interno: ${escapeHtml(String(row.rider_user_id))}</div>`
        : '';
      const assignment = row.assignment || {};
      const topCandidate = Array.isArray(assignment.candidates) ? assignment.candidates[0] : null;
      const suggestionBlock = topCandidate
        ? `<div class="alert alert-info mt-3 mb-0">
             <div class="fw-semibold">Sugerencia automática</div>
             <div class="text-muted small">${escapeHtml(topCandidate.name ?? `ID ${topCandidate.rider_user_id}`)}</div>
             <div class="text-muted small">Coincidencia ${topCandidate.confidence_percent ?? 0}%${topCandidate.overlap_hours ? ` · ${escapeHtml(String(topCandidate.overlap_hours))} h` : ''}</div>
           </div>`
        : '';
      elements.assign.current.innerHTML = `
        <div class="fw-semibold text-heading mb-1">${escapeHtml(row.rider_name ?? 'Rider sin asignar')}</div>
        <div class="text-muted small">${riderIdentifier}</div>
        ${internalIdentifier}
        ${courierIdentifier}
        <div class="text-muted small">Propinas: ${formatCurrency(row.tips_total ?? 0, currencyUsed)}</div>
        <div class="text-muted small">Cash entregado: ${formatCurrency(row.cash_out_delivered ?? 0, currencyUsed)}</div>
        <div class="text-muted small">Neto: ${formatCurrency(row.net_to_pay ?? 0, currencyUsed)}</div>
        ${suggestionBlock}
      `;
    }

    resetAssignModal();
    state.assign.selectedRiderId = row.rider_user_id ?? null;
    if (elements.assign.clearBtn) elements.assign.clearBtn.disabled = !row.rider_user_id;
    elements.assign.clearBtn?.classList.toggle('d-none', !row.rider_user_id);

    if (state.assign.selectedRiderId && elements.assign.results) {
      renderAssignResults([{
        id: row.rider_user_id,
        name: row.rider_name,
        email: row.rider_email,
        dni: null,
        companies: [row.company].filter(Boolean),
        rider_ids: row.rider_id ? [row.rider_id] : [],
        primary_rider_id: row.rider_id ?? null,
        courier_ids: row.courier_id ? [row.courier_id] : [],
      }]);
    }

    assignModal?.show();
      await fetchAssignSuggestions({
        q: '',
        companyId: row.company_id ?? null,
        riderId: row.rider_id ?? null,
        courierId: row.courier_id ?? null,
      });
  };

  const requestAssignment = async (recordId, riderUserId = null) => {
    const body = { rider_user_id: riderUserId };
    const response = await fetch(getAssignUrl(recordId), {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken,
      },
      body: JSON.stringify(body),
    });
    const json = await response.json().catch(() => ({}));
    if (!response.ok) {
      throw new Error(json?.message || 'No se pudo actualizar la asignación.');
    }
    await loadRiders();
    return json;
  };

  const getSelectedPeriod = () => state.periods.find((period) => String(period.id) === String(state.selectedPeriodId)) || null;

  const buildRidersUrl = () => {
    const base = `${getPeriodUrl(state.selectedPeriodId)}/riders`;
    const url = new URL(base, window.location.origin);
    const search = state.filters.q.trim();
    if (search) url.searchParams.set('q', search);
    return url;
  };

  const loadRiders = async () => {
    if (!state.selectedPeriodId) {
      state.groups = { auto: [], suggested: [], pending: [], assigned: [] };
      renderRiders(state.groups, state.currency);
      setSummary();
      setPeriodInfo(null);
      return;
    }

    setRidersLoading(true);
    try {
      const response = await fetch(buildRidersUrl());
      if (!response.ok) throw new Error('No se pudo cargar el detalle del cierre.');
      const json = await response.json();
      const data = json?.data || {};
      const allRows = Array.isArray(data.riders) ? data.riders : [];

      const totals = data.totals || {};
      const period = data.period || getSelectedPeriod();
      const currency = (allRows.find((row) => row?.currency)?.currency) || 'EUR';

      const derivedGroups = { auto: [], suggested: [], pending: [], assigned: [] };

      allRows.forEach((row) => {
        if (!row || typeof row !== 'object') return;
        const assignment = row.assignment || {};
        const candidates = Array.isArray(assignment.candidates) ? assignment.candidates : [];
        const recommendedId = assignment.recommended_user_id ?? null;
        const recommendedReason = assignment.recommended_reason ?? null;
        const isAutoMatch = !row.needs_assignment
          && recommendedId
          && Number(recommendedId) === Number(row.rider_user_id)
          && ['single_candidate', 'high_confidence'].includes(recommendedReason ?? '');

        if (!row.rider_user_id && candidates.length) {
          derivedGroups.suggested.push(row);
        } else if (!row.rider_user_id) {
          derivedGroups.pending.push(row);
        } else if (isAutoMatch) {
          derivedGroups.auto.push(row);
        } else {
          derivedGroups.assigned.push(row);
        }
      });

      state.groups = derivedGroups;

      setSummary(totals, currency);
      setPeriodInfo(period);
      renderRiders(state.groups, currency);
    } catch (error) {
      showError(error?.message || 'Error al cargar el detalle.');
      state.groups = { auto: [], suggested: [], pending: [], assigned: [] };
      renderRiders(state.groups, state.currency);
      setSummary();
    } finally {
      setRidersLoading(false);
    }
  };

  const loadPeriods = async () => {
    setLoading(true);
    showError();
    if (!state.filters.companyId) {
      state.periods = [];
      state.selectedPeriodId = null;
      renderPeriodOptions();
      setSummary();
      setPeriodInfo(null);
      state.groups = { auto: [], suggested: [], pending: [], assigned: [] };
      renderRiders(state.groups, state.currency);
      setLoading(false);
      return;
    }

    try {
      const response = await fetch(buildPeriodsUrl());
      if (!response.ok) throw new Error('No se pudo obtener la lista de cierres.');
      const json = await response.json();
      state.periods = Array.isArray(json?.data) ? json.data : [];

      if (!state.periods.length) {
        state.selectedPeriodId = null;
        renderPeriodOptions();
        setSummary();
        setPeriodInfo(null);
        state.groups = { auto: [], suggested: [], pending: [], assigned: [] };
        renderRiders(state.groups, state.currency);
        return;
      }

      const exists = state.periods.some((period) => String(period.id) === String(state.selectedPeriodId));
      if (!exists) state.selectedPeriodId = state.periods[0]?.id ?? null;

      renderPeriodOptions();
      await loadRiders();
    } catch (error) {
      state.periods = [];
      state.selectedPeriodId = null;
      renderPeriodOptions();
      setSummary();
      setPeriodInfo(null);
      state.groups = { auto: [], suggested: [], pending: [], assigned: [] };
      renderRiders(state.groups, state.currency);
      showError(error?.message || 'Error al cargar los cierres.');
    } finally {
      setLoading(false);
    }
  };

  const fetchCatalog = async (url) => {
    const response = await fetch(url);
    if (!response.ok) throw new Error('No se pudieron cargar los catálogos.');
    const json = await response.json();
    return Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : [];
  };

  const populateSelect = (select, items, placeholder) => {
    if (!select) return;
    const current = select.value;
    select.innerHTML = '';
    placeholder && select.appendChild(new Option(placeholder, '', true, false));
    items.forEach((item) => {
      select.appendChild(new Option(item.name ?? item.label ?? `ID ${item.id}`, item.id));
    });
    current && (select.value = current);
  };

  const ensureSelectValue = (select, value, label = null) => {
    if (!select) return;
    if (value === null || value === undefined || value === '') {
      select.value = '';
      return;
    }
    const stringValue = String(value);
    const exists = Array.from(select.options).some((option) => option.value === stringValue);
    if (!exists) {
      const optionLabel = label ?? `ID ${value}`;
      select.appendChild(new Option(optionLabel, stringValue));
    }
    select.value = stringValue;
  };

  const prepareCreateModal = async () => {
    if (!elements.create.form) return;
    elements.create.form.reset();
    if (elements.create.error) {
      elements.create.error.classList.add('d-none');
      elements.create.error.textContent = '';
    }

    try {
      if (!catalogs.companies) catalogs.companies = await fetchCatalog(endpoints.companies);
      populateSelect(elements.create.company, catalogs.companies, 'Selecciona empresa');
      if (state.filters.companyId) {
        ensureSelectValue(elements.create.company, state.filters.companyId, getCompanyLabel(state.filters.companyId));
      }
      if (!catalogs.cities) catalogs.cities = await fetchCatalog(endpoints.cities);
      populateSelect(elements.create.city, catalogs.cities, 'Todas las ciudades');
    } catch (error) {
      elements.create.error.textContent = error?.message || 'No se pudieron cargar los catálogos.';
      elements.create.error.classList.remove('d-none');
    }
  };

  const prepareEditModal = async () => {
    if (!elements.edit.form) return;
    const period = getSelectedPeriod();
    if (!period) {
      elements.edit.error.textContent = 'Selecciona primero un cierre para poder editarlo.';
      elements.edit.error.classList.remove('d-none');
      return;
    }

    elements.edit.form.reset();
    if (elements.edit.error) {
      elements.edit.error.classList.add('d-none');
      elements.edit.error.textContent = '';
    }

    try {
      if (!catalogs.companies) catalogs.companies = await fetchCatalog(endpoints.companies);
      populateSelect(elements.edit.company, catalogs.companies, 'Selecciona empresa');
      if (!catalogs.cities) catalogs.cities = await fetchCatalog(endpoints.cities);
      populateSelect(elements.edit.city, catalogs.cities, 'Todas las ciudades');
    } catch (error) {
      elements.edit.error.textContent = error?.message || 'No se pudieron cargar los catálogos.';
      elements.edit.error.classList.remove('d-none');
      return;
    }

    if (elements.edit.label) {
      elements.edit.label.textContent = period.label ?? `${period.start_date ?? '—'} · ${period.end_date ?? '—'}`;
    }

    ensureSelectValue(elements.edit.company, period.company?.id ?? '', period.company?.name);
    ensureSelectValue(elements.edit.city, period.city?.id ?? '', period.city?.name);
    if (elements.edit.start) elements.edit.start.value = period.start_date ?? '';
    if (elements.edit.end) elements.edit.end.value = period.end_date ?? '';
    ensureSelectValue(elements.edit.cycle, period.cycle ?? 'weekly', period.cycle ? period.cycle.charAt(0).toUpperCase() + period.cycle.slice(1) : null);
    ensureSelectValue(elements.edit.status, period.status ?? 'draft', period.status_label ?? null);
  };

  const toggleButtonLoading = (button, isLoading) => {
    if (!button) return;
    const spinner = button.querySelector('.spinner-border');
    const label = button.querySelector('span:not(.spinner-border)');
    button.disabled = isLoading;
    spinner?.classList.toggle('d-none', !isLoading);
    label?.classList.toggle('d-none', isLoading);
  };

  const submitCreatePeriod = async (event) => {
    event.preventDefault();
    if (!elements.create.form) return;

    const companyId = elements.create.company?.value;
    const startDate = elements.create.start?.value;
    const endDate = elements.create.end?.value;
    if (!companyId || !startDate || !endDate) {
      elements.create.error.textContent = 'Selecciona empresa y fechas válidas.';
      elements.create.error.classList.remove('d-none');
      return;
    }

    elements.create.error.classList.add('d-none');
    toggleButtonLoading(elements.create.submitBtn, true);

    try {
      const response = await fetch(endpoints.createPeriod, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrfToken,
        },
        body: JSON.stringify({
          company_id: Number(companyId),
          city_id: elements.create.city?.value ? Number(elements.create.city.value) : null,
          start_date: startDate,
          end_date: endDate,
          cycle: elements.create.cycle?.value || 'weekly',
          status: elements.create.status?.value || 'draft',
        }),
      });

      const json = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(json?.message || 'No se pudo crear el cierre.');

      const period = json?.data;
      state.selectedPeriodId = period?.id || state.selectedPeriodId;
      createModal?.hide();
      await loadPeriods();
    } catch (error) {
      elements.create.error.textContent = error?.message || 'No se pudo crear el cierre.';
      elements.create.error.classList.remove('d-none');
    } finally {
      toggleButtonLoading(elements.create.submitBtn, false);
    }
  };

  const submitEditPeriod = async (event) => {
    event.preventDefault();
    if (!elements.edit.form) return;
    if (!state.selectedPeriodId) {
      elements.edit.error.textContent = 'Selecciona un cierre para poder actualizarlo.';
      elements.edit.error.classList.remove('d-none');
      return;
    }

    const companyId = elements.edit.company?.value;
    const startDate = elements.edit.start?.value;
    const endDate = elements.edit.end?.value;

    if (!companyId || !startDate || !endDate) {
      elements.edit.error.textContent = 'Completa empresa y rango de fechas.';
      elements.edit.error.classList.remove('d-none');
      return;
    }

    elements.edit.error.classList.add('d-none');
    toggleButtonLoading(elements.edit.submitBtn, true);

    const payload = {
      company_id: Number(companyId),
      city_id: elements.edit.city?.value ? Number(elements.edit.city.value) : null,
      start_date: startDate,
      end_date: endDate,
      cycle: elements.edit.cycle?.value || null,
      status: elements.edit.status?.value || null,
    };

    if (!payload.cycle) delete payload.cycle;
    if (!payload.status) delete payload.status;

    try {
      const response = await fetch(getPeriodUrl(state.selectedPeriodId), {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrfToken,
        },
        body: JSON.stringify(payload),
      });

      const json = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(json?.message || 'No se pudo actualizar el cierre.');

      editModal?.hide();
      await loadPeriods();
    } catch (error) {
      elements.edit.error.textContent = error?.message || 'No se pudo actualizar el cierre.';
      elements.edit.error.classList.remove('d-none');
    } finally {
      toggleButtonLoading(elements.edit.submitBtn, false);
    }
  };

  const clearImportMessages = () => {
    [elements.import.error, elements.import.info, elements.import.success, elements.import.unmatched].forEach((msg) => {
      if (!msg) return;
      msg.classList.add('d-none');
      msg.textContent = '';
    });
    elements.import.previewCard?.classList.add('d-none');
    elements.import.preview && (elements.import.preview.textContent = '');
  };

  const parseGlovoProduction = (raw) => {
    const errors = [];
    const lines = raw.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
    if (!lines.length) {
      errors.push('No se detectaron filas en el texto pegado.');
      return { rows: [], errors };
    }

    const headerIndex = lines.findIndex((line) => line.toLowerCase().includes('courier'));
    if (headerIndex === -1) {
      errors.push('No se encontró la fila de encabezados (Rider ID, City Code, etc.).');
      return { rows: [], errors };
    }

    const header = extractColumns(lines[headerIndex]);
    if (header.length < 2) {
      errors.push('El encabezado no tiene columnas reconocibles.');
      return { rows: [], errors };
    }
    const findColumn = (needles) => {
      const needleArr = Array.isArray(needles) ? needles : [needles];
      return header.findIndex((col) => {
        const lower = col.toLowerCase();
        return needleArr.some((needle) => lower.includes(needle));
      });
    };

    const idx = {
      courier: findColumn(['courier', 'rider']),
      company: findColumn(['delegacion', 'delegación', 'company', 'ciudad']),
      tips: findColumn(['tip', 'propina']),
      cash: findColumn(['cash', 'efectivo']),
      currency: findColumn(['moneda', 'currency']),
    };

    if (idx.courier === -1) {
      errors.push('No se encontró la columna Rider ID.');
      return { rows: [], errors };
    }
    if (idx.cash === -1) {
      errors.push('No se encontró la columna CashOut.');
      return { rows: [], errors };
    }
    if (idx.tips === -1) {
      errors.push('No se encontró la columna Tips.');
      return { rows: [], errors };
    }

    const dataLines = lines.slice(headerIndex + 1);
    const rows = [];

    dataLines.forEach((line) => {
      const currencyDetected = /€|eur/i.test(line) ? 'EUR' : null;
      const cols = extractColumns(line);
      const riderId = (cols[idx.courier] || '').trim();
      if (!riderId || !/^\d/.test(riderId) || riderId.toLowerCase().includes('total')) return;

      const companyName = idx.company !== -1 ? (cols[idx.company] || '').trim() : null;
      const tips = parseNumber(cols[idx.tips] ?? 0);
      const cashout = parseNumber(cols[idx.cash] ?? 0);
      const currencyCell = idx.currency !== -1 ? String(cols[idx.currency] ?? '').trim().toUpperCase() : '';
      const currency = currencyCell.length === 3 ? currencyCell : (currencyDetected ?? 'EUR');
      const net = Number((tips - cashout).toFixed(2));

      rows.push({
        courier_id: riderId,
        rider_id: riderId,
        company_name: companyName,
        tips_total: tips,
        cash_out_deduction: cashout,
        cash_out_not_delivered: 0,
        net_to_pay: net,
        currency,
      });
    });

    if (!rows.length) errors.push('No se detectaron filas válidas después del encabezado.');
    return { rows, errors };
  };

  const parseTipsCashout = (raw) => {
    const errors = [];
    const rawLines = raw.split(/\r?\n/).map((line) => line.replace(/\u00A0/g, ' '));
    const lines = rawLines.map((line) => line.trim()).filter(Boolean);

    if (!lines.length) {
      errors.push('No se detectaron filas en el texto pegado.');
      return { rows: [], errors };
    }

    let headerIndex = lines.findIndex((line) => /courier/i.test(line) || /propina/i.test(line) || /cash/i.test(line));
    if (headerIndex === -1) {
      headerIndex = 0;
    }

    const header = extractColumns(lines[headerIndex]);
    if (header.length < 2) {
      errors.push('No se detectó un encabezado válido con Rider ID, Propinas y Cash.');
      return { rows: [], errors };
    }

    const findColumn = (keywords) => header.findIndex((col) => {
      const lower = col.toLowerCase();
      return keywords.some((keyword) => lower.includes(keyword));
    });

    const idx = {
      courier: findColumn(['courier', 'rider']),
      company: findColumn(['delegacion', 'delegación', 'company', 'ciudad']),
      tips: findColumn(['tip', 'propina']),
      cash: findColumn(['cash', 'efectivo']),
      currency: findColumn(['moneda', 'currency']),
    };

    if (idx.courier === -1) errors.push('No se encontró la columna Rider ID.');
    if (idx.tips === -1) errors.push('No se encontró la columna de propinas.');
    if (idx.cash === -1) errors.push('No se encontró la columna de cash entregado.');

    if (errors.length) return { rows: [], errors };

    const dataLines = lines.slice(headerIndex + 1);
    const rows = [];

    dataLines.forEach((line) => {
      const currencyDetected = /€|eur/i.test(line) ? 'EUR' : null;
      const cols = extractColumns(line);
      if (!cols.length) return;

      const getCol = (index) => {
        if (typeof index !== 'number' || index < 0) return '';
        return cols[index] ?? '';
      };

      const rawCourier = getCol(idx.courier);
      const riderId = rawCourier.trim();
      if (!riderId || riderId.toLowerCase().includes('total')) return;

      const companyName = (() => {
        const value = getCol(idx.company).trim();
        return value !== '' ? value : null;
      })();

      const tipsValue = parseNumber(getCol(idx.tips));
      const cashValue = parseNumber(getCol(idx.cash));
      const currencyCell = getCol(idx.currency).trim().toUpperCase();
      const currency = currencyCell.length === 3 ? currencyCell : (currencyDetected ?? 'EUR');
      const net = Number((tipsValue - cashValue).toFixed(2));

      rows.push({
        courier_id: riderId,
        rider_id: riderId,
        company_name: companyName,
        tips_total: tipsValue,
        cash_out_deduction: cashValue,
        cash_out_not_delivered: 0,
        net_to_pay: net,
        currency,
      });
    });

    if (!rows.length) {
      errors.push('No se detectaron filas válidas después del encabezado.');
    }

    return { rows, errors };
  };

  const datasetParsers = {
    'tips-cashout': parseTipsCashout,
    'glovo-production': parseGlovoProduction,
  };

  const renderImportPreview = (rows) => {
    if (!elements.import.preview || !elements.import.previewCard) return;
    if (!rows.length) {
      elements.import.previewCard.classList.add('d-none');
      elements.import.preview.textContent = '';
      return;
    }

    const previewRows = rows.slice(0, 5).map((row) => {
      const parts = [];
      const currency = row.currency || 'EUR';

      const riderIdentifier = row.rider_id || row.courier_id;
      if (riderIdentifier) parts.push(`Rider ${escapeHtml(riderIdentifier)}`);
      if (row.company_name) parts.push(`Delegación: ${escapeHtml(row.company_name)}`);
      if ('tips_total' in row) parts.push(`Propinas: ${formatCurrency(row.tips_total ?? 0, currency)}`);
      if ('cash_out_deduction' in row) parts.push(`CashOut: ${formatCurrency(row.cash_out_deduction ?? 0, currency)}`);
      if ('net_to_pay' in row) parts.push(`Neto: ${formatCurrency(row.net_to_pay ?? 0, currency)}`);

      if (!parts.length) parts.push('Fila detectada');
      return parts.join(' · ');
    });

    if (rows.length > 5) previewRows.push(`… y ${rows.length - 5} filas más`);
    elements.import.preview.textContent = previewRows.join('\n');
    elements.import.previewCard.classList.remove('d-none');
  };

  const renderUnmatched = (items) => {
    if (!elements.import.unmatched) return;
    if (!items?.length) {
      elements.import.unmatched.classList.add('d-none');
      elements.import.unmatched.textContent = '';
      return;
    }
    const lines = items.map((item) => {
      const riderIdentifier = item.courier_id ? `Rider ${escapeHtml(item.courier_id)}` : 'Rider sin ID';
      const company = item.company_name ? ` · Delegación: ${escapeHtml(item.company_name)}` : '';
      return `• ${riderIdentifier}${company} (${item.reason ?? 'Sin asignar'})`;
    });
    elements.import.unmatched.textContent = `No se pudieron asignar ${items.length} filas:\n${lines.join('\n')}`;
    elements.import.unmatched.classList.remove('d-none');
  };

  const submitImport = async (event) => {
    event.preventDefault();
    if (!state.selectedPeriodId) {
      elements.import.error.textContent = 'Selecciona primero un cierre para importar datos.';
      elements.import.error.classList.remove('d-none');
      return;
    }

    clearImportMessages();

    const dataset = elements.import.dataset?.value || 'tips-cashout';
    const raw = elements.import.textarea?.value || '';
    const parser = datasetParsers[dataset];
    if (!parser) {
      elements.import.error.textContent = 'El formato de tabla no es compatible.';
      elements.import.error.classList.remove('d-none');
      return;
    }

    const { rows, errors } = parser(raw);
    if (errors?.length) {
      elements.import.error.textContent = errors.join(' ');
      elements.import.error.classList.remove('d-none');
      return;
    }
    if (!rows.length) {
      elements.import.error.textContent = 'No se detectaron filas válidas en la tabla.';
      elements.import.error.classList.remove('d-none');
      return;
    }

    renderImportPreview(rows);
    toggleButtonLoading(elements.import.submitBtn, true);

    try {
      const response = await fetch(getSyncUrl(state.selectedPeriodId), {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrfToken,
        },
        body: JSON.stringify({
          replace: elements.import.replace?.checked ?? false,
          rows,
        }),
      });

      const json = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(json?.message || 'No se pudieron sincronizar los datos.');

      const matched = Array.isArray(json?.data?.matched) ? json.data.matched : [];
      const matchedCount = matched.length;
      const pendingAssignment = matched.filter(item => item.needs_assignment).length;
      const unmatched = Array.isArray(json?.data?.unmatched) ? json.data.unmatched : [];

      if (matchedCount === 0) {
        elements.import.error.textContent = 'No se actualizó ningún registro. Revisa los Rider ID o asigna las filas sin coincidencia.';
        elements.import.error.classList.remove('d-none');
        renderUnmatched(unmatched);
        toggleButtonLoading(elements.import.submitBtn, false);
        return;
      }

      const successMessage = pendingAssignment
        ? `Se importaron ${matchedCount} filas; ${pendingAssignment} quedan pendientes de asignar a un rider.`
        : `Se importaron ${matchedCount} filas correctamente.`;
      elements.import.success.textContent = successMessage;
      elements.import.success.classList.remove('d-none');

      renderUnmatched(unmatched);

      const infoPieces = [];
      if (pendingAssignment) infoPieces.push(`${pendingAssignment} filas sin asignar a un rider.`);
      if (unmatched.length) infoPieces.push(`${unmatched.length} filas no se guardaron por faltas de datos.`);

      if (infoPieces.length) {
        elements.import.info.textContent = infoPieces.join(' ');
        elements.import.info.classList.remove('d-none');
      } else {
        elements.import.info.classList.add('d-none');
        importModal?.hide();
      }

      await loadPeriods();
    } catch (error) {
      elements.import.error.textContent = error?.message || 'No se pudieron sincronizar los datos.';
      elements.import.error.classList.remove('d-none');
    } finally {
      toggleButtonLoading(elements.import.submitBtn, false);
    }
  };

  elements.companySelect?.addEventListener('change', async (event) => {
    state.filters.companyId = event.target.value || null;
    state.selectedPeriodId = null;
    state.periods = [];
    renderPeriodOptions();
    await loadPeriods();
  });

  elements.periodSelect?.addEventListener('change', async (event) => {
    state.selectedPeriodId = event.target.value || null;
    updateEditButtonState();
    await loadRiders();
  });

  elements.refreshBtn?.addEventListener('click', async () => {
    await loadPeriods();
  });

  elements.searchInput?.addEventListener('input', () => {
    clearTimeout(state.debounceHandle);
    state.debounceHandle = setTimeout(() => {
      state.filters.q = elements.searchInput.value || '';
      loadRiders();
    }, 300);
  });

  elements.pendingSwitch?.addEventListener('change', () => {
    state.filters.pendingOnly = !!elements.pendingSwitch.checked;
    renderRiders(state.groups, state.currency);
  });

  elements.ridersTableBody?.addEventListener('click', async (event) => {
    const assignBtn = event.target.closest('.pref-action-assign');
    if (assignBtn) {
      await openAssignModal(assignBtn.dataset.id);
      return;
    }
    const changeBtn = event.target.closest('.pref-action-change');
    if (changeBtn) {
      await openAssignModal(changeBtn.dataset.id);
      return;
    }
    const clearBtn = event.target.closest('.pref-action-clear');
    if (clearBtn) {
      try {
        clearBtn.disabled = true;
        await requestAssignment(clearBtn.dataset.id, null);
        notify('Asignación eliminada');
      } catch (error) {
        notify(error?.message || 'No se pudo eliminar la asignación.', 'error');
      } finally {
        clearBtn.disabled = false;
      }
    }
  });

  elements.assign.results?.addEventListener('click', (event) => {
    const item = event.target.closest('.assign-result');
    if (!item) return;
    state.assign.selectedRiderId = Number(item.dataset.userId);
    renderAssignResults(state.assign.suggestions);
  });

  const triggerAssignSearch = () => {
    if (!elements.assign.recordId) return;
    const recordId = elements.assign.recordId.value;
    if (!recordId) return;
    const row = findRowById(recordId);
    const query = elements.assign.search?.value?.trim() || '';
    fetchAssignSuggestions({
      q: query,
      companyId: row?.company_id ?? null,
      riderId: row?.rider_id ?? null,
      courierId: row?.courier_id ?? null,
    });
  };

  elements.assign.search?.addEventListener('input', () => {
    clearTimeout(state.assign.debounceHandle);
    state.assign.debounceHandle = setTimeout(triggerAssignSearch, 250);
  });

  elements.assign.form?.addEventListener('submit', async (event) => {
    event.preventDefault();
    const recordId = elements.assign.recordId?.value;
    if (!recordId) return;
    if (state.assign.selectedRiderId === null) {
      notify('Selecciona un rider de la lista para asignar.', 'warning');
      return;
    }

    if (elements.assign.submitBtn) elements.assign.submitBtn.disabled = true;
    try {
      await requestAssignment(recordId, state.assign.selectedRiderId);
      assignModal?.hide();
      notify('Rider asignado correctamente.');
    } catch (error) {
      notify(error?.message || 'No se pudo asignar el rider.', 'error');
    } finally {
      if (elements.assign.submitBtn) elements.assign.submitBtn.disabled = false;
    }
  });

  elements.assign.clearBtn?.addEventListener('click', async () => {
    const recordId = elements.assign.recordId?.value;
    if (!recordId) return;
    if (elements.assign.clearBtn) elements.assign.clearBtn.disabled = true;
    try {
      await requestAssignment(recordId, null);
      assignModal?.hide();
      notify('Se eliminó la asignación del rider.');
    } catch (error) {
      notify(error?.message || 'No se pudo eliminar la asignación.', 'error');
    } finally {
      if (elements.assign.clearBtn) elements.assign.clearBtn.disabled = false;
    }
  });

  elements.assign.modalEl?.addEventListener('hidden.bs.modal', () => {
    resetAssignModal();
  });

  elements.assign.modalEl?.addEventListener('shown.bs.modal', () => {
    elements.assign.search?.focus();
  });

  elements.buttons.openCreate?.addEventListener('click', async () => {
    await prepareCreateModal();
    createModal?.show();
  });

  elements.buttons.openEdit?.addEventListener('click', async () => {
    await prepareEditModal();
    editModal?.show();
  });

  elements.buttons.openImport?.addEventListener('click', () => {
    clearImportMessages();
    elements.import.form?.reset();
    if (elements.import.dataset) elements.import.dataset.value = 'tips-cashout';
    importModal?.show();
  });

  elements.create.form?.addEventListener('submit', submitCreatePeriod);
  elements.edit.form?.addEventListener('submit', submitEditPeriod);
  elements.import.form?.addEventListener('submit', submitImport);

  updateEditButtonState();
  (async () => {
    await loadCompanies();
    await loadPeriods();
  })();
});
</script>
@endsection


@section('content')
<style>
  .closing-summary-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
  }
  .closing-summary-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(105, 108, 255, 0.12), rgba(59, 130, 246, 0.05));
    opacity: 0.7;
  }
  .closing-summary-card > .card-body {
    position: relative;
    z-index: 1;
  }
  .closing-summary-value {
    font-size: 1.8rem;
    font-weight: 600;
  }
  .closing-status-badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
  }
  .badge-soft-success {
    background-color: rgba(34, 197, 94, 0.12);
    color: #15803d;
  }
  .badge-soft-warning {
    background-color: rgba(250, 204, 21, 0.15);
    color: #92400e;
  }
  .badge-soft-secondary {
    background-color: rgba(148, 163, 184, 0.18);
    color: #475569;
  }
  .prefactura-table thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #637381;
    border-bottom-width: 1px;
  }
  .prefactura-table tbody td {
    vertical-align: middle;
  }
  .table-group-header td {
    background: #f5f7fb;
    border-top: none;
    border-bottom: 1px solid rgba(79, 82, 94, 0.08);
  }
  .table-success-subtle {
    background-color: rgba(25, 135, 84, 0.08) !important;
  }
  .table-info-subtle {
    background-color: rgba(13, 202, 240, 0.08) !important;
  }
  .table-warning-subtle {
    background-color: rgba(255, 193, 7, 0.1) !important;
  }
</style>

<div class="row g-3 mb-4">
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card closing-summary-card h-100">
      <div class="card-body">
        <div class="text-muted text-uppercase small fw-semibold mb-1">Propinas registradas</div>
        <div id="summaryTips" class="closing-summary-value mb-1">—</div>
        <div class="text-muted small">Registros: <span id="summaryRiders">0</span></div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card closing-summary-card h-100">
      <div class="card-body">
        <div class="text-muted text-uppercase small fw-semibold mb-1">Cash entregado</div>
        <div id="summaryCashDeduction" class="closing-summary-value">—</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card closing-summary-card h-100">
      <div class="card-body">
        <div class="text-muted text-uppercase small fw-semibold mb-1">Cash pendiente</div>
        <div id="summaryCashPending" class="closing-summary-value">—</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card closing-summary-card h-100">
      <div class="card-body">
        <div class="text-muted text-uppercase small fw-semibold mb-1">Neto prefactura</div>
        <div id="summaryNet" class="closing-summary-value">—</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card closing-summary-card h-100">
      <div class="card-body">
        <div class="text-muted text-uppercase small fw-semibold mb-1">Pendientes de asignar</div>
        <div id="summaryPending" class="closing-summary-value">0</div>
        <div class="text-muted small">Riders sin vincular</div>
      </div>
    </div>
  </div>
</div>

<div class="card shadow-sm">
  <div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
    <div>
      <h5 class="mb-1">Cierres y prefacturas</h5>
      <p class="text-muted mb-0">Selecciona un ciclo semanal para revisar propinas, cash y ajustes de Glovo por rider.</p>
    </div>
      <div class="d-flex flex-column flex-xl-row align-items-stretch gap-3 w-100">
        <div class="d-flex flex-wrap gap-2 align-items-stretch">
          <button type="button" class="btn btn-primary" id="openImportModal">
            <i class="icon-base ti tabler-upload"></i>
            Importar tabla
        </button>
        <button type="button" class="btn btn-outline-primary" id="openEditPeriodModal" disabled>
          <i class="icon-base ti tabler-edit"></i>
          Editar cierre
        </button>
        <button type="button" class="btn btn-outline-primary" id="openCreatePeriodModal">
          <i class="icon-base ti tabler-calendar-plus"></i>
          Nuevo cierre
        </button>
          <button type="button" class="btn btn-outline-secondary" id="refreshPeriods">
            <i class="icon-base ti tabler-refresh"></i>
            Actualizar ciclos
          </button>
          <a href="{{ route('admin.propinas') }}" class="btn btn-outline-secondary">
            <i class="icon-base ti tabler-coins"></i>
            Propinas
          </a>
        </div>
      <div class="d-flex flex-column flex-md-row gap-2 flex-grow-1">
        <div class="flex-grow-1">
          <label for="companySelect" class="form-label text-muted small mb-1">Empresa</label>
          <select id="companySelect" class="form-select">
            <option value="">Cargando empresas…</option>
          </select>
        </div>
        <div class="flex-grow-1">
          <label for="billingPeriodSelect" class="form-label text-muted small mb-1">Ciclo de facturación</label>
          <select id="billingPeriodSelect" class="form-select">
            <option value="">Cargando ciclos…</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div id="periodLoading" class="alert alert-info d-flex align-items-center gap-2">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      <span>Cargando ciclos de facturación…</span>
    </div>
    <div id="periodError" class="alert alert-danger d-none"></div>

    <div class="row g-3 align-items-center mb-4">
      <div class="col-md-5">
        <div class="d-flex flex-wrap gap-2 align-items-center">
          <span class="text-muted small text-uppercase fw-semibold">Periodo:</span>
          <span id="periodRange" class="fw-semibold text-heading">—</span>
          <span id="periodStatus" class="closing-status-badge badge-soft-secondary">—</span>
        </div>
      </div>
      <div class="col-md-4">
        <div class="text-muted small">Delegación</div>
        <div id="periodCompany" class="fw-semibold text-heading">—</div>
      </div>
  <div class="col-md-3">
    <div class="text-muted small">Ciudad</div>
    <div id="periodCity" class="fw-semibold text-heading">—</div>
  </div>
</div>

    <div class="row g-3 align-items-center mb-4">
      <div class="col-md-6">
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="ti tabler-search"></i></span>
          <input type="search" id="filterSearch" class="form-control" placeholder="Buscar rider por nombre o email">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-check form-switch mt-1">
          <input class="form-check-input" type="checkbox" id="filterPendingOnly">
          <label class="form-check-label" for="filterPendingOnly">Solo pendientes de asignar</label>
        </div>
      </div>
    </div>

    <div id="ridersLoading" class="alert alert-info d-none d-flex align-items-center gap-2">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      <span>Cargando detalle del cierre…</span>
    </div>

    <div class="table-responsive">
      <table class="table prefactura-table">
        <thead>
          <tr>
            <th>Rider</th>
          <th>Delegación / Ciudad</th>
          <th class="text-end">Propinas</th>
          <th class="text-end">Cash entregado</th>
          <th class="text-end">Cash pendiente</th>
          <th class="text-end">Neto cierre</th>
          <th>Asignación</th>
          <th class="text-end">Acciones</th>
        </tr>
      </thead>
        <tbody id="ridersTableBody"></tbody>
      </table>
    </div>
    <div id="ridersEmpty" class="alert alert-warning d-none">
      No hay movimientos registrados para este cierre.
    </div>
  </div>
</div>

<div class="modal fade" id="assignRiderModal" tabindex="-1" aria-labelledby="assignRiderModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form id="assignRiderForm" autocomplete="off">
        <input type="hidden" id="assignRecordId">
        <div class="modal-header">
          <h5 class="modal-title" id="assignRiderModalLabel">Asignar rider</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <div class="text-muted text-uppercase small fw-semibold mb-1">Resumen del movimiento</div>
            <div id="assignCurrentInfo" class="border rounded p-3 bg-light small">Selecciona un registro para ver los detalles.</div>
          </div>
          <div class="mb-3">
            <label for="assignRiderSearch" class="form-label">Buscar rider</label>
            <div class="input-group input-group-merge">
              <span class="input-group-text"><i class="ti tabler-search"></i></span>
              <input type="search" class="form-control" id="assignRiderSearch" placeholder="Nombre, email o DNI">
            </div>
          <div class="form-text">Mostramos sugerencias basadas en el Rider ID y la delegación del cierre.</div>
          </div>
          <div class="list-group mb-3" id="assignRiderResults"></div>
          <div class="alert alert-info d-none" id="assignRiderEmpty">No se encontraron riders con los criterios actuales.</div>
        </div>
        <div class="modal-footer d-flex flex-wrap justify-content-between gap-2">
          <button type="button" class="btn btn-outline-danger me-auto" id="assignRiderClear">
            <i class="ti tabler-user-x me-1"></i>
            Quitar asignación
          </button>
          <div class="d-flex gap-2">
            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-primary" id="assignRiderSubmit">
              <i class="ti tabler-device-floppy me-1"></i>
              Guardar
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="createPeriodModal" tabindex="-1" aria-labelledby="createPeriodModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form id="createPeriodForm" autocomplete="off">
        <div class="modal-header">
          <h5 class="modal-title" id="createPeriodModalLabel">Nuevo ciclo de prefactura</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger d-none" id="createPeriodError"></div>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="createCompany" class="form-label">Delegación</label>
              <select id="createCompany" class="form-select" required>
                <option value="">Selecciona empresa</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="createCity" class="form-label">Ciudad (opcional)</label>
              <select id="createCity" class="form-select">
                <option value="">Todas las ciudades</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="createStartDate" class="form-label">Fecha inicio</label>
              <input type="date" id="createStartDate" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label for="createEndDate" class="form-label">Fecha fin</label>
              <input type="date" id="createEndDate" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label for="createCycle" class="form-label">Periodicidad</label>
              <select id="createCycle" class="form-select">
                <option value="weekly" selected>Semanal</option>
                <option value="biweekly">Quincenal</option>
                <option value="monthly">Mensual</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="createStatus" class="form-label">Estado inicial</label>
              <select id="createStatus" class="form-select">
                <option value="draft" selected>Borrador</option>
                <option value="in_review">En revisión</option>
                <option value="processing">Procesando</option>
                <option value="closed">Cerrado</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            <span>Crear cierre</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="editPeriodModal" tabindex="-1" aria-labelledby="editPeriodModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form id="editPeriodForm" autocomplete="off">
        <div class="modal-header">
          <h5 class="modal-title" id="editPeriodModalLabel">Editar cierre</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger d-none" id="editPeriodError"></div>
          <div class="mb-3">
            <div class="text-muted small text-uppercase fw-semibold">Cierre seleccionado</div>
            <div class="fw-semibold text-heading" id="editPeriodLabel">—</div>
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="editCompany" class="form-label">Delegación</label>
              <select id="editCompany" class="form-select" required>
                <option value="">Selecciona empresa</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="editCity" class="form-label">Ciudad (opcional)</label>
              <select id="editCity" class="form-select">
                <option value="">Todas las ciudades</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="editStartDate" class="form-label">Fecha inicio</label>
              <input type="date" id="editStartDate" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label for="editEndDate" class="form-label">Fecha fin</label>
              <input type="date" id="editEndDate" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label for="editCycle" class="form-label">Periodicidad</label>
              <select id="editCycle" class="form-select">
                <option value="weekly">Semanal</option>
                <option value="biweekly">Quincenal</option>
                <option value="monthly">Mensual</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="editStatus" class="form-label">Estado</label>
              <select id="editStatus" class="form-select">
                <option value="draft">Borrador</option>
                <option value="in_review">En revisión</option>
                <option value="processing">Procesando</option>
                <option value="closed">Cerrado</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            <span>Guardar cambios</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="importDataModal" tabindex="-1" aria-labelledby="importDataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <form id="importDataForm">
        <div class="modal-header">
          <h5 class="modal-title" id="importDataModalLabel">Importar datos del cierre</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger d-none" id="importDataError"></div>
          <div class="alert alert-info d-none" id="importDataInfo"></div>
          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label for="importDataset" class="form-label">Formato de tabla</label>
              <select id="importDataset" class="form-select" required>
                <option value="tips-cashout" selected>Prefactura (Propinas &amp; Cash)</option>
                <option value="glovo-production">Producción Glovo (completa)</option>
              </select>
            </div>
            <div class="col-md-6 d-flex align-items-end">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="importReplace">
                <label class="form-check-label" for="importReplace">
                  Reemplazar datos existentes del periodo
                </label>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="importRawData" class="form-label">Pega la tabla desde Excel</label>
            <textarea id="importRawData" class="form-control" rows="10" placeholder="Rider ID	Propinas	CashOut"></textarea>
          </div>
          <div class="alert alert-success d-none" id="importDataSuccess"></div>
          <div class="alert alert-warning d-none" id="importDataUnmatched"></div>
          <div class="card d-none" id="importPreviewCard">
            <div class="card-header py-2">
              <h6 class="mb-0">Vista previa</h6>
            </div>
            <div class="card-body py-3">
              <pre class="mb-0 small" id="importDataPreview"></pre>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            <span>Procesar tabla</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection