'use client';

import { Button } from '@/components/ui/button';
import { useSync } from '@/hooks/use-sync';
import { cn } from '@/lib/utils';
import { AlertTriangle, RefreshCw, WifiOff } from 'lucide-react';

export function OfflineIndicator() {
  const { isOnline, isSyncing, lastError, syncNow } = useSync();

  if (isOnline && !lastError) {
    return null;
  }

  return (
    <div
      className={cn(
        /*
         * `inset-x-4` + `sm:left-auto` deja el banner anclado a la derecha en
         * pantallas anchas sin que se corte contra el borde izquierdo en un
         * teléfono angosto (~360px). El offset inferior despeja la barra de
         * navegación fija en móvil (`--bottom-nav-height`); en escritorio, sin
         * esa barra, vuelve a `bottom-4`.
         */
        'fixed inset-x-4 z-40 flex items-center gap-3 rounded-2xl border px-4 py-3 shadow-lg sm:left-auto sm:right-4 sm:max-w-[360px]',
        'bottom-[calc(var(--bottom-nav-height)+0.75rem)] lg:bottom-4',
        !isOnline ? 'border-amber-200 bg-amber-50 text-amber-800' : 'border-rose-200 bg-rose-50 text-rose-800',
      )}
    >
      <div className="flex-shrink-0">
        {!isOnline ? <WifiOff className="h-5 w-5" /> : <AlertTriangle className="h-5 w-5" />}
      </div>

      <div className="min-w-0 flex-1">
        {!isOnline ? (
          <>
            <div className="font-semibold">Sin conexión</div>
            <div className="text-xs opacity-80">Puedes seguir trabajando. El sistema intentará retomar la actualización cuando vuelva la red.</div>
          </>
        ) : (
          <>
            <div className="font-semibold">Actualización pendiente</div>
            <div className="truncate text-xs opacity-80">{lastError || 'No pudimos completar la última actualización.'}</div>
          </>
        )}
      </div>

      {isOnline && lastError ? (
        <Button size="sm" variant="outline" onClick={() => syncNow()} disabled={isSyncing} className="h-8 rounded-xl border-current bg-transparent px-3 text-xs">
          <RefreshCw className={cn('mr-1 h-3.5 w-3.5', isSyncing && 'animate-spin')} />
          Reintentar
        </Button>
      ) : null}
    </div>
  );
}