@extends('layouts.app')
@section('title','Entregador')
@section('header','Entregador • Operação')

@section('content')
<div class="grid gap-4">

  <div class="bg-white rounded-xl shadow p-4 flex items-center justify-between">
    <div>
      <div class="font-semibold">Status</div>
      <div class="text-sm text-gray-600">Fique online para receber ofertas.</div>
    </div>
    <button id="toggleOnline" class="px-4 py-2 rounded bg-black text-white">Ficar online</button>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Notificações</div>
    <button class="px-4 py-2 rounded bg-gray-900 text-white" onclick="enablePush()">Permitir notificações</button>
    <div id="pushMsg" class="text-sm text-gray-600 mt-2"></div>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Entregas disponíveis</div>
    <div id="list" class="text-sm text-gray-700">—</div>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Mapa (sua posição)</div>
    <div id="map" style="height: 360px" class="rounded-xl"></div>
    <div class="text-xs text-gray-500 mt-2">Enviando localização a cada 4s (quando em entrega ativa).</div>
  </div>

  <div class="bg-white rounded-xl shadow p-4">
    <div class="font-semibold mb-2">Enviar prova de entrega</div>
    <div class="text-sm text-gray-600 mb-2">Selecione a entrega ativa e envie a foto após concluir.</div>
    <input id="photo" type="file" accept="image/*" class="border rounded p-2 w-full">
    <button class="mt-2 px-4 py-2 rounded bg-black text-white" onclick="uploadProof()">Enviar foto</button>
    <div id="proofMsg" class="text-sm text-gray-600 mt-2"></div>
  </div>

</div>

<script>
  let isOnline = false;
  let activeDeliveryId = null;
  let watchTimer = null;

  const map = L.map('map').setView([-3.7319, -38.5267], 12);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
  let meMarker = null;

  function renderDeliveries(items) {
    if (!items.length) {
      list.innerHTML = '<span class="text-gray-500">Nenhuma entrega no momento.</span>';
      return;
    }

    list.innerHTML = items.map(d => `
      <div class="border rounded p-3 mb-2">
        <div><b>${d.code}</b> • ${d.status}</div>
        <div class="text-gray-600">Coleta: ${d.pickup_address}</div>
        <div class="text-gray-600">Entrega: ${d.dropoff_address}</div>
        <div class="mt-2 flex gap-2">
          <button class="px-3 py-1 rounded bg-black text-white" onclick="accept(${d.id})">Aceitar</button>
        </div>
      </div>
    `).join('');
  }

  async function refreshAvailable() {
    if (!isOnline) return;
    try {
      const data = await api('/json/rider/deliveries/available');
      renderDeliveries(data.data || []);
    } catch (e) {
      list.innerText = 'Erro ao carregar ofertas.';
    }
  }

  async function accept(id) {
    try {
      await api(`/json/rider/deliveries/${id}/accept`, { method:'POST' });
      activeDeliveryId = id;
      list.innerHTML = `<b>Entrega ativa:</b> #${id}
        <div class="mt-2 flex gap-2">
          <button class="px-3 py-1 rounded bg-gray-900 text-white" onclick="setStatus('picking_up')">Indo coletar</button>
          <button class="px-3 py-1 rounded bg-gray-900 text-white" onclick="setStatus('delivering')">Em entrega</button>
          <button class="px-3 py-1 rounded bg-green-700 text-white" onclick="setStatus('delivered')">Concluída</button>
        </div>`;
      startLocationLoop();
    } catch (e) {
      alert('Entrega indisponível.');
    }
  }

  async function setStatus(status) {
    if (!activeDeliveryId) return;
    await api(`/json/rider/deliveries/${activeDeliveryId}/status`, {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({status})
    });

    if (status === 'delivered') {
      // mantém activeDeliveryId para upload da prova
      stopLocationLoop();
      alert('Entrega concluída! Envie a foto de prova abaixo.');
    }
  }

  function stopLocationLoop() {
    if (watchTimer) clearInterval(watchTimer);
    watchTimer = null;
  }

  function startLocationLoop() {
    if (watchTimer) return;

    watchTimer = setInterval(async () => {
      if (!activeDeliveryId) return;

      navigator.geolocation.getCurrentPosition(async (pos) => {
        const lat = pos.coords.latitude;
        const lng = pos.coords.longitude;

        if (!meMarker) meMarker = L.marker([lat,lng]).addTo(map).bindPopup('Você');
        meMarker.setLatLng([lat,lng]);
        map.panTo([lat,lng]);

        await api(`/json/rider/deliveries/${activeDeliveryId}/location`, {
          method:'POST',
          headers:{'Content-Type':'application/json'},
          body: JSON.stringify({
            lat, lng,
            speed_kmh: pos.coords.speed ? (pos.coords.speed * 3.6) : null,
            heading: pos.coords.heading ?? null,
            accuracy_m: pos.coords.accuracy ?? null,
          })
        });

      }, () => {}, { enableHighAccuracy: true, maximumAge: 0 });
    }, 4000);
  }

  async function uploadProof() {
    if (!activeDeliveryId) return alert('Sem entrega ativa.');
    if (!photo.files.length) return alert('Selecione uma foto.');

    proofMsg.innerText = 'Enviando...';
    const fd = new FormData();
    fd.append('photo', photo.files[0]);

    try {
      const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      const res = await fetch(`/json/rider/deliveries/${activeDeliveryId}/proof`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': token, 'Accept':'application/json' },
        body: fd
      });
      const data = await res.json().catch(()=>({}));
      if (!res.ok) throw data;

      proofMsg.innerText = '✅ Prova enviada!';
    } catch (e) {
      proofMsg.innerText = '❌ Erro ao enviar prova.';
    }
  }

  toggleOnline.onclick = async () => {
    isOnline = !isOnline;
    toggleOnline.innerText = isOnline ? 'Ficar offline' : 'Ficar online';
    await api('/json/rider/online', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({is_online: isOnline})
    });
    if (isOnline) refreshAvailable();
  };

  setInterval(refreshAvailable, 6000);

  function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) outputArray[i] = rawData.charCodeAt(i);
    return outputArray;
  }

  async function enablePush() {
    pushMsg.innerText = 'Ativando...';
    if (!('serviceWorker' in navigator)) return pushMsg.innerText = 'Service Worker não suportado.';
    if (!('PushManager' in window)) return pushMsg.innerText = 'Push não suportado.';

    const reg = await navigator.serviceWorker.register('/sw.js');

    const perm = await Notification.requestPermission();
    if (perm !== 'granted') return pushMsg.innerText = 'Permissão negada.';

    const sub = await reg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(window.VAPID_PUBLIC_KEY)
    });

    const json = sub.toJSON();

    await api('/json/rider/push/subscribe', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
        endpoint: json.endpoint,
        keys: json.keys,
        contentEncoding: 'aesgcm',
        userAgent: navigator.userAgent
      })
    });

    pushMsg.innerHTML = '✅ Notificações ativadas. <button class="underline" onclick="testPush()">Testar</button>';
  }

  async function testPush() {
    await api('/json/rider/push/test', { method:'POST' });
  }
</script>
@endsection