import { useEffect, useMemo, useRef, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { Icono } from '@gustito/shared/iconos';
import { ESTADO_META, formatUsd, variablesTema, type Pedido } from '@gustito/shared';
import { supabase } from '../lib/supabase';
import { useInstalarPWA } from '../lib/useInstalarPWA';
import MapaEntrega from '../components/MapaEntrega';
import AvisosPush from '../components/AvisosPush';
import Historial from './Historial';

interface MiRepartidor {
  repartidor_id: string;
  estado: 'disponible' | 'ocupado' | 'offline';
  restaurante_id: string;
  restaurante_nombre: string;
  restaurante_color: string | null;
  restaurante_logo_url: string | null;
  restaurante_latitud: number | null;
  restaurante_longitud: number | null;
  restaurante_direccion: string | null;
}

interface EntregaDisponible {
  pedido_id: string;
  codigo: string;
  cliente_nombre: string;
  direccion: string | null;
  direccion_latitud: number | null;
  direccion_longitud: number | null;
  total_usd: number;
  restaurante_nombre: string;
  listo_en: string | null;
}

interface ItemEntrega {
  pedido_id: string;
  nombre: string;
  cantidad: number;
  nota: string | null;
}

// Lo que el repartidor lleva en la bolsa, para verificar contra el pedido.
function Llevas({ items }: { items: ItemEntrega[] | undefined }) {
  if (!items || items.length === 0) return null;
  return (
    <div className="mt-3 rounded-xl border border-stone-200 bg-stone-50 p-3">
      <p className="mb-1.5 text-xs font-bold uppercase tracking-wide text-stone-500">Lo que llevas</p>
      <ul className="space-y-1">
        {items.map((it, i) => (
          <li key={i} className="flex gap-2 text-sm">
            <span className="shrink-0 font-bold text-marca-oscuro">{it.cantidad}×</span>
            <span className="text-stone-800">
              {it.nombre}
              {it.nota && <span className="block text-xs text-stone-500">{it.nota}</span>}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

const soloDigitos = (t: string | null) => (t || '').replace(/\D/g, '');
const telHref = (t: string | null) => `tel:${soloDigitos(t)}`;
function waHref(t: string | null) {
  let d = soloDigitos(t);
  if (d.startsWith('0')) d = '58' + d.slice(1);
  else if (!d.startsWith('58')) d = '58' + d;
  return `https://wa.me/${d}`;
}
function navHref(lat: number | null, lng: number | null, direccion: string | null) {
  if (lat != null && lng != null)
    return `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
  return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(direccion || '')}`;
}

// Avisa al repartidor que llego una entrega: vibra + suena dos tonos.
function pitido(ctx: AudioContext, hz: number, cuando: number) {
  const o = ctx.createOscillator();
  const g = ctx.createGain();
  o.connect(g);
  g.connect(ctx.destination);
  o.type = 'sine';
  o.frequency.value = hz;
  g.gain.setValueAtTime(0.0001, cuando);
  g.gain.exponentialRampToValueAtTime(0.35, cuando + 0.02);
  g.gain.exponentialRampToValueAtTime(0.0001, cuando + 0.45);
  o.start(cuando);
  o.stop(cuando + 0.45);
}
function avisarNuevaEntrega() {
  try {
    navigator.vibrate?.([250, 120, 250]);
  } catch {
    /* sin vibracion */
  }
  try {
    const AC = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
    const ctx = new AC();
    pitido(ctx, 880, ctx.currentTime);
    pitido(ctx, 1175, ctx.currentTime + 0.35);
    window.setTimeout(() => ctx.close().catch(() => {}), 1200);
  } catch {
    /* el navegador puede bloquear audio sin interaccion; la vibracion cubre el aviso */
  }
}

const MARCA_CACHE = 'gx_rep_marca';
type MarcaCache = { color: string | null; logo: string | null; nombre: string | null };
function leerMarcaCache(): MarcaCache | null {
  try {
    const raw = localStorage.getItem(MARCA_CACHE);
    return raw ? (JSON.parse(raw) as MarcaCache) : null;
  } catch {
    return null;
  }
}

export default function Home({ salir }: { salir: () => void }) {
  const qc = useQueryClient();
  const posRef = useRef<{ lat: number; lng: number }>({ lat: 9.5597, lng: -69.2019 });
  const lastPersist = useRef(0);
  const [gpsError, setGpsError] = useState<string | null>(null);
  const [accion, setAccion] = useState<string | null>(null);
  const [menuAbierto, setMenuAbierto] = useState(false);
  const [vista, setVista] = useState<'entregas' | 'historial'>('entregas');
  const [mapaExpandido, setMapaExpandido] = useState<{ lat: number; lng: number } | null>(null);
  // Confirmacion de entrega: marcar entregado es IRREVERSIBLE y con dos pedidos
  // activos la tarjeta de abajo sube al cerrar la de arriba (paso en el piloto:
  // un doble toque cerro el pedido equivocado). El modal muestra CUAL se cierra.
  const [confirmaEntrega, setConfirmaEntrega] = useState<Pedido | null>(null);
  const { instalable, instalar, instalado } = useInstalarPWA();

  const perfilQ = useQuery({
    queryKey: ['mi-repartidor'],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('mi_perfil_repartidor');
      if (error) throw error;
      return ((data as unknown as MiRepartidor[]) ?? [])[0] ?? null;
    },
  });

  const activasQ = useQuery({
    queryKey: ['mis-activas'],
    queryFn: async () => {
      // Incluye las asignadas por el restaurante ('listo') y las que ya van en camino.
      const { data, error } = await supabase.rpc('mis_entregas_activas');
      if (error) throw error;
      return (data as unknown as Pedido[]) ?? [];
    },
    refetchInterval: 6000,
  });

  const dispQ = useQuery({
    queryKey: ['entregas-disponibles'],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('entregas_disponibles');
      if (error) throw error;
      return (data as unknown as EntregaDisponible[]) ?? [];
    },
    refetchInterval: 6000,
  });

  const perfil = perfilQ.data;
  const [marcaCache] = useState<MarcaCache | null>(leerMarcaCache);
  // Marca efectiva: la del RPC si ya llego; si no, la ultima guardada (evita el "flash" naranja al cargar).
  const marcaColor = perfil?.restaurante_color ?? marcaCache?.color ?? null;
  const marcaLogo = perfil?.restaurante_logo_url ?? marcaCache?.logo ?? null;
  const marcaNombre = perfil?.restaurante_nombre ?? marcaCache?.nombre ?? null;

  useEffect(() => {
    if (!perfil) return;
    const m: MarcaCache = {
      color: perfil.restaurante_color,
      logo: perfil.restaurante_logo_url,
      nombre: perfil.restaurante_nombre,
    };
    try {
      localStorage.setItem(MARCA_CACHE, JSON.stringify(m));
    } catch {
      /* almacenamiento no disponible */
    }
    if (perfil.restaurante_color) {
      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', perfil.restaurante_color);
    }
  }, [perfil]);

  // useMemo: sin el, `?? []` fabrica un array NUEVO en cada render y el efecto
  // del aviso sonoro (deps [activas, disponibles]) se re-dispara de gratis.
  const activas = useMemo(() => activasQ.data ?? [], [activasQ.data]);
  const disponibles = useMemo(() => dispQ.data ?? [], [dispQ.data]);

  // Que lleva el repartidor en cada entrega (activas + disponibles). Una sola
  // consulta; solo se repite cuando cambia el conjunto de pedidos visibles.
  const idsVisibles = [...activas.map((p) => p.id), ...disponibles.map((d) => d.pedido_id)].sort();
  const itemsQ = useQuery({
    queryKey: ['items-entregas', idsVisibles.join(',')],
    enabled: idsVisibles.length > 0,
    queryFn: async () => {
      const { data, error } = await supabase.rpc('items_entregas_repartidor', { p_ids: idsVisibles });
      if (error) throw error;
      const map = new Map<string, ItemEntrega[]>();
      for (const it of ((data as unknown as ItemEntrega[]) ?? [])) {
        const arr = map.get(it.pedido_id) ?? [];
        arr.push(it);
        map.set(it.pedido_id, arr);
      }
      return map;
    },
  });
  const itemsPorPedido = itemsQ.data ?? new Map<string, ItemEntrega[]>();
  // GPS/broadcast solo para las que van EN CAMINO (las 'listo' asignadas aun no salieron).
  const enCaminoIds = activas.filter((p) => p.estado === 'en_camino').map((p) => p.id).join(',');
  const enEntrega = activas.length > 0;

  // Aviso (sonido + vibracion) cuando aparece una entrega nueva: asignada por el
  // restaurante o del pool. Asi al repartidor "le llega" el pedido aunque no mire la pantalla.
  const vistosRef = useRef<Set<string> | null>(null);
  const [avisoNueva, setAvisoNueva] = useState(false);
  useEffect(() => {
    // Esperar a que ambas listas carguen por primera vez (no avisar por lo que ya estaba).
    if (dispQ.isLoading || activasQ.isLoading) return;
    const ids = [
      ...disponibles.map((d) => d.pedido_id),
      ...activas.filter((p) => p.estado === 'listo').map((p) => p.id),
    ];
    if (vistosRef.current === null) {
      vistosRef.current = new Set(ids);
      return;
    }
    const hayNuevas = ids.some((id) => !vistosRef.current!.has(id));
    vistosRef.current = new Set(ids);
    if (hayNuevas) {
      avisarNuevaEntrega();
      setAvisoNueva(true);
    }
  }, [disponibles, activas, dispQ.isLoading, activasQ.isLoading]);

  /**
   * La posicion se GUARDA cada 15 segundos y ya. Nada de canales en vivo.
   *
   * Antes el repartidor abria un canal de Realtime por cada entrega en camino
   * para mandarle su punto al cliente. Eso se quito por dos razones: el cliente
   * ya no escucha (lee la posicion del mismo sondeo que trae el estado del
   * pedido), asi que se estaba transmitiendo para nadie; y ese cupo de
   * conexiones es el MISMO de las pantallas del negocio, que es lo que de
   * verdad no puede fallar cuando haya cien locales trabajando a la vez.
   *
   * Al marcar la entrega, el pedido sale de `en_camino`, se apaga el GPS y deja
   * de guardarse nada: cero consumo despues de entregar.
   */
  function guardarPosicion(p: { lat: number; lng: number }) {
    const now = Date.now();
    if (now - lastPersist.current > 15000) {
      lastPersist.current = now;
      supabase.rpc('actualizar_ubicacion_repartidor', { p_lat: p.lat, p_lng: p.lng });
    }
  }

  // GPS del telefono mientras haya al menos una entrega activa.
  useEffect(() => {
    if (!enCaminoIds) return;
    setGpsError(null);
    if (!('geolocation' in navigator)) {
      setGpsError('Este dispositivo no tiene GPS.');
      return;
    }
    const watchId = navigator.geolocation.watchPosition(
      (pos) => {
        const p = { lat: pos.coords.latitude, lng: pos.coords.longitude };
        posRef.current = p;
        setGpsError(null);
        guardarPosicion(p);
      },
      (e) => setGpsError('GPS: ' + e.message + '. Activa la ubicacion.'),
      { enableHighAccuracy: true, maximumAge: 2000, timeout: 12000 },
    );
    return () => navigator.geolocation.clearWatch(watchId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [enCaminoIds]);

  function simular() {
    const p = { lat: posRef.current.lat + 0.0006, lng: posRef.current.lng + 0.0006 };
    posRef.current = p;
    guardarPosicion(p);
  }

  const refrescar = () => {
    qc.invalidateQueries({ queryKey: ['mis-activas'] });
    qc.invalidateQueries({ queryKey: ['entregas-disponibles'] });
    qc.invalidateQueries({ queryKey: ['mi-repartidor'] });
  };

  async function tomar(pedidoId: string) {
    setAccion(pedidoId);
    const { error } = await supabase.rpc('tomar_pedido', { p_pedido_id: pedidoId });
    setAccion(null);
    if (error) alert(error.message);
    refrescar();
  }

  async function entregar(pedidoId: string) {
    setAccion(pedidoId);
    const { error } = await supabase.rpc('cambiar_estado_pedido', {
      p_pedido_id: pedidoId,
      p_nuevo_estado: 'entregado',
    });
    setAccion(null);
    if (error) alert(error.message);
    refrescar();
  }

  // El repartidor recogio el pedido asignado y sale: listo -> en_camino (arranca el GPS en vivo).
  async function comenzar(pedidoId: string) {
    setAccion(pedidoId);
    const { error } = await supabase.rpc('cambiar_estado_pedido', {
      p_pedido_id: pedidoId,
      p_nuevo_estado: 'en_camino',
    });
    setAccion(null);
    if (error) alert(error.message);
    refrescar();
  }

  async function toggleOnline() {
    if (!perfil) return;
    const { error } = await supabase.rpc('cambiar_disponibilidad', {
      p_disponible: perfil.estado === 'offline',
    });
    if (error) alert(error.message);
    qc.invalidateQueries({ queryKey: ['mi-repartidor'] });
  }

  return (
    <div className="min-h-full bg-crema" style={variablesTema(marcaColor ?? '#0D0F1E')}>
      <header className="bg-gradient-to-br from-marca to-marca-oscuro text-white px-4 py-3 sticky top-0 z-10 shadow-md">
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2 min-w-0">
            {marcaLogo && (
              <img
                src={marcaLogo}
                alt=""
                className="h-9 w-9 rounded-full object-cover shrink-0 bg-white ring-2 ring-white/40"
              />
            )}
            <div className="min-w-0">
              <p className="font-bold leading-tight truncate">
                {marcaNombre ?? 'Gustito Xpress'}
              </p>
              <p className="text-xs text-white/75 truncate">Repartidor · Gustito Xpress</p>
            </div>
          </div>
          <button
            onClick={() => setMenuAbierto(true)}
            className="-mr-1 shrink-0 p-1 text-white"
            aria-label="Abrir menu"
          >
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              <path d="M4 7h16M4 12h16M4 17h16" />
            </svg>
          </button>
        </div>
        {perfil && (
          <div className="mt-2 flex items-center gap-2">
            {enEntrega || perfil.estado === 'ocupado' ? (
              <span className="text-xs font-bold px-2.5 py-1 rounded-full bg-white/20 text-white">
                ● En entrega
              </span>
            ) : (
              <button
                onClick={toggleOnline}
                className={`text-xs font-bold px-2.5 py-1 rounded-full ${
                  perfil.estado === 'disponible'
                    ? 'bg-green-300 text-green-900'
                    : 'bg-white/20 text-white/80'
                }`}
              >
                {perfil.estado === 'disponible' ? '● En linea (toca para pausar)' : 'Fuera de linea (toca para entrar)'}
              </button>
            )}
          </div>
        )}
      </header>

      <main className="max-w-md mx-auto p-4 space-y-4">
        <AvisosPush contexto="repartidor" />
        {avisoNueva && (
          <button
            onClick={() => {
              setVista('entregas');
              setAvisoNueva(false);
            }}
            className="flex w-full animate-pulse items-center gap-2 rounded-2xl border-2 border-marca bg-marca-claro px-4 py-3 text-left font-bold text-marca-oscuro shadow-flotante"
          >
            <Icono nombre="moto" className="h-5 w-5 shrink-0" />
            <span className="flex-1">Nueva entrega. Toca para verla.</span>
            <span className="text-xs opacity-60">✕</span>
          </button>
        )}
        {vista === 'historial' ? (
          <Historial />
        ) : (
          <>
        {/* Entregas activas */}
        {activas.length > 0 && (
          <section className="space-y-3">
            <h2 className="text-sm font-bold text-stone-500 uppercase tracking-wide">Tu entrega</h2>
            {enCaminoIds &&
              (gpsError ? (
                <div className="bg-red-50 text-red-700 rounded-xl p-3 text-sm">{gpsError}</div>
              ) : (
                <div className="bg-marca-claro border border-marca rounded-xl p-3 text-sm text-marca-oscuro font-semibold">
                  {/* Decia "en vivo" y ya no es cierto: se quito la transmision
                      por Realtime y ahora la posicion se guarda cada 15 s. No se
                      le puede prometer al repartidor algo que el programa no hace. */}
                  Tu ubicacion se guarda cada 15 segundos para que el cliente sepa por donde vas
                </div>
              ))}
            {activas.map((p) => {
              const destino =
                p.direccion_latitud != null && p.direccion_longitud != null
                  ? { lat: p.direccion_latitud, lng: p.direccion_longitud }
                  : null;
              return (
              <article key={p.id} className="bg-white rounded-2xl border p-4 shadow-tarjeta">
                <div className="flex items-center justify-between">
                  <p className="font-bold">{p.codigo}</p>
                  <span
                    className="text-xs text-white font-semibold px-2 py-1 rounded-full"
                    style={{ backgroundColor: ESTADO_META[p.estado].color }}
                  >
                    {ESTADO_META[p.estado].label}
                  </span>
                </div>
                <p className="text-sm font-semibold text-stone-800 mt-1">{p.cliente_nombre}</p>
                <p className="text-sm text-stone-500">{p.direccion}</p>
                <p className="text-sm font-bold mt-1">Total {formatUsd(p.total_usd)}</p>

                <Llevas items={itemsPorPedido.get(p.id)} />

                {p.estado === 'listo' && (
                  <p className="mt-2 rounded-lg bg-marca-claro px-3 py-2 text-xs font-semibold text-marca-oscuro">
                    Te la asigno el restaurante. Cuando la recojas, toca "Recogí el pedido, voy en camino".
                  </p>
                )}

                {destino ? (
                  <div className="relative mt-3">
                    <MapaEntrega
                      destino={destino}
                      posRef={posRef}
                      alto={170}
                      className="rounded-xl overflow-hidden border border-stone-200"
                    />
                    <button
                      onClick={() => setMapaExpandido(destino)}
                      className="absolute right-2 top-2 z-[1000] rounded-lg bg-white/95 px-2.5 py-1 text-xs font-bold text-stone-700 shadow"
                    >
                      ⤢ Expandir
                    </button>
                  </div>
                ) : (
                  <p className="mt-3 rounded-xl bg-amber-50 px-3 py-2 text-xs text-amber-700">
                    El cliente no compartio su ubicacion exacta. Guiate por la direccion y toca Navegar.
                  </p>
                )}

                <div className="grid grid-cols-3 gap-2 mt-3">
                  <a href={telHref(p.cliente_telefono)} className="btn bg-stone-100 text-stone-700 text-center text-sm">
                    Llamar
                  </a>
                  <a
                    href={waHref(p.cliente_telefono)}
                    target="_blank"
                    rel="noreferrer"
                    className="btn bg-green-600 text-white text-center text-sm"
                  >
                    WhatsApp
                  </a>
                  <a
                    href={navHref(p.direccion_latitud, p.direccion_longitud, p.direccion)}
                    target="_blank"
                    rel="noreferrer"
                    className="btn bg-blue-600 text-white text-center text-sm"
                  >
                    Navegar
                  </a>
                </div>

                {p.estado === 'en_camino' ? (
                  <button
                    onClick={() => setConfirmaEntrega(p)}
                    disabled={accion !== null}
                    className="btn w-full bg-green-600 text-white mt-2 disabled:opacity-60"
                  >
                    {accion === p.id ? '...' : 'Marcar entregado'}
                  </button>
                ) : (
                  <button
                    onClick={() => comenzar(p.id)}
                    disabled={accion !== null}
                    className="btn w-full bg-marca text-marca-contraste mt-2 disabled:opacity-60"
                  >
                    {accion === p.id ? '...' : 'Recogí el pedido, voy en camino'}
                  </button>
                )}
              </article>
              );
            })}
            {enCaminoIds && (
              <button onClick={simular} className="text-xs text-stone-400 underline w-full text-center">
                Simular movimiento (prueba sin GPS)
              </button>
            )}
          </section>
        )}

        {/* Entregas disponibles */}
        <section className="space-y-3">
          <h2 className="text-sm font-bold text-stone-500 uppercase tracking-wide">
            Entregas disponibles
          </h2>
          {dispQ.isLoading && <p className="text-stone-400 text-sm">Buscando...</p>}
          {!dispQ.isLoading && disponibles.length === 0 && (
            <p className="text-stone-400 text-center py-8 text-sm">
              No hay entregas por ahora. Te avisamos cuando salga una lista.
            </p>
          )}
          {disponibles.map((d) => (
            <article key={d.pedido_id} className="bg-white rounded-2xl border p-4 shadow-tarjeta">
              <div className="flex items-center justify-between">
                <p className="font-bold">{d.codigo}</p>
                <span className="text-xs font-bold text-marca-oscuro">Recoger en {d.restaurante_nombre}</span>
              </div>
              <p className="text-sm text-stone-600 mt-1">Para {d.cliente_nombre}</p>
              <p className="text-sm text-stone-500">{d.direccion}</p>
              <p className="text-sm font-bold mt-1">Total {formatUsd(d.total_usd)}</p>

              <Llevas items={itemsPorPedido.get(d.pedido_id)} />

              {perfil && (perfil.restaurante_latitud != null || perfil.restaurante_direccion) && (
                <a
                  href={navHref(perfil.restaurante_latitud, perfil.restaurante_longitud, perfil.restaurante_direccion)}
                  target="_blank"
                  rel="noreferrer"
                  className="block text-center text-sm font-semibold text-blue-600 mt-2"
                >
                  Navegar al negocio (retiro)
                </a>
              )}
              <button
                onClick={() => tomar(d.pedido_id)}
                disabled={accion !== null}
                className="btn w-full bg-marca text-marca-contraste mt-2 disabled:opacity-60"
              >
                {accion === d.pedido_id ? 'Tomando...' : 'Tomar entrega'}
              </button>
            </article>
          ))}
        </section>
          </>
        )}
      </main>

      {/* Confirmar entrega: accion irreversible, se muestra CUAL pedido se cierra */}
      {confirmaEntrega && (
        <>
          <div className="fixed inset-0 z-[1700] bg-black/50" onClick={() => setConfirmaEntrega(null)} />
          <div className="fixed inset-x-4 top-1/2 z-[1800] -translate-y-1/2 rounded-2xl bg-white p-5 shadow-2xl max-w-sm mx-auto">
            <p className="text-lg font-bold text-stone-900">¿Ya entregaste este pedido?</p>
            <div className="mt-3 rounded-xl bg-stone-50 border border-stone-200 p-3">
              <p className="font-bold text-stone-900">{confirmaEntrega.codigo}</p>
              <p className="text-sm font-semibold text-stone-800">{confirmaEntrega.cliente_nombre}</p>
              <p className="text-sm text-stone-500">{confirmaEntrega.direccion}</p>
            </div>
            <p className="mt-3 text-xs text-stone-500">Esto cierra la entrega y avisa al negocio. Revisa que sea el pedido correcto.</p>
            <div className="mt-4 grid grid-cols-2 gap-2">
              <button
                onClick={() => setConfirmaEntrega(null)}
                className="btn bg-stone-100 text-stone-700"
              >
                Todavía no
              </button>
              <button
                onClick={() => {
                  const id = confirmaEntrega.id;
                  setConfirmaEntrega(null);
                  void entregar(id);
                }}
                className="btn bg-green-600 text-white"
              >
                Sí, ya lo entregué
              </button>
            </div>
          </div>
        </>
      )}

      {/* Menu hamburguesa */}
      {menuAbierto && (
        <>
          <div className="fixed inset-0 z-[1500] bg-black/40" onClick={() => setMenuAbierto(false)} />
          <aside className="fixed top-0 right-0 z-[1600] flex h-full w-72 max-w-[80%] flex-col bg-white shadow-2xl">
            <div className="bg-gradient-to-br from-marca to-marca-oscuro p-4 text-white">
              <div className="flex items-center gap-2">
                {marcaLogo && (
                  <img src={marcaLogo} alt="" className="h-10 w-10 rounded-full bg-white object-cover ring-2 ring-white/40" />
                )}
                <div className="min-w-0">
                  <p className="truncate font-bold">{marcaNombre ?? 'Gustito Xpress'}</p>
                  <p className="text-xs text-white/75">Repartidor · Gustito Xpress</p>
                </div>
              </div>
            </div>
            <nav className="flex-1 space-y-1 p-2">
              <button
                onClick={() => {
                  setVista('entregas');
                  setMenuAbierto(false);
                }}
                className={`w-full rounded-lg px-3 py-2.5 text-left font-semibold ${
                  vista === 'entregas' ? 'bg-marca-claro text-marca-oscuro' : 'text-stone-700 hover:bg-stone-100'
                }`}
              >
                🛵 Entregas
              </button>
              <button
                onClick={() => {
                  setVista('historial');
                  setMenuAbierto(false);
                }}
                className={`w-full rounded-lg px-3 py-2.5 text-left font-semibold ${
                  vista === 'historial' ? 'bg-marca-claro text-marca-oscuro' : 'text-stone-700 hover:bg-stone-100'
                }`}
              >
                📋 Mis entregas
              </button>
              {!instalado && instalable && (
                <button
                  onClick={() => {
                    setMenuAbierto(false);
                    instalar();
                  }}
                  className="w-full rounded-lg px-3 py-2.5 text-left font-semibold text-stone-700 hover:bg-stone-100"
                >
                  ⬇️ Instalar app
                </button>
              )}
            </nav>
            <div className="border-t p-2">
              <button
                onClick={salir}
                className="w-full rounded-lg px-3 py-2.5 text-left font-semibold text-red-600 hover:bg-red-50"
              >
                Salir
              </button>
              <a
                href="/eliminar-cuenta"
                className="mt-1 block rounded-lg px-3 py-2 text-left text-sm text-gray-500 hover:bg-gray-50"
              >
                Eliminar cuenta
              </a>
            </div>
          </aside>
        </>
      )}

      {/* Mapa expandido a pantalla completa */}
      {mapaExpandido && (
        <div className="fixed inset-0 z-[2000] flex flex-col bg-black/90">
          <div className="flex items-center justify-between bg-gradient-to-br from-marca to-marca-oscuro px-4 py-3 text-white">
            <span className="font-bold">Mapa de la entrega</span>
            <button onClick={() => setMapaExpandido(null)} className="text-sm font-semibold">
              Cerrar ✕
            </button>
          </div>
          <div className="flex-1">
            <MapaEntrega destino={mapaExpandido} posRef={posRef} alto="100%" />
          </div>
          <div className="bg-white p-3">
            <a
              href={navHref(mapaExpandido.lat, mapaExpandido.lng, null)}
              target="_blank"
              rel="noreferrer"
              className="btn block w-full bg-blue-600 py-3 text-center font-bold text-white"
            >
              Abrir navegacion paso a paso
            </a>
          </div>
        </div>
      )}
    </div>
  );
}
