'use client';

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

function formatLastUpdated(updatedAt?: number) {
  if (!updatedAt) return 'Sin actualizar';

  const elapsedSeconds = Math.max(0, Math.floor((Date.now() - updatedAt) / 1000));

  if (elapsedSeconds < 5) return 'Actualizado ahora';
  if (elapsedSeconds < 60) return `Actualizado hace ${elapsedSeconds}s`;

  const elapsedMinutes = Math.floor(elapsedSeconds / 60);
  if (elapsedMinutes < 60) return `Actualizado hace ${elapsedMinutes}m`;

  return `Actualizado hace ${Math.floor(elapsedMinutes / 60)}h`;
}

type DataRefreshControlProps = {
  updatedAt?: number;
  isFetching?: boolean;
  onRefresh: () => void;
  className?: string;
};

export function DataRefreshControl({ updatedAt, isFetching, onRefresh, className }: DataRefreshControlProps) {
  const { isOnline, pendingCount, isSyncing } = useSync();
  const [, setTick] = useState(0);

  useEffect(() => {
    const interval = window.setInterval(() => setTick((value) => value + 1), 15000);
    return () => window.clearInterval(interval);
  }, []);

  const statusLabel = !isOnline
    ? 'Sin conexión'
    : pendingCount > 0
      ? `${pendingCount} pendiente${pendingCount === 1 ? '' : 's'}`
      : isSyncing
        ? 'Sincronizando'
        : 'Sincronizado';

  return (
    <div className={cn('no-print flex flex-wrap items-center gap-2', className)}>
      <div className="rounded-2xl border border-border bg-surface px-3 py-2 text-right text-xs shadow-sm">
        <p className="font-semibold text-foreground">{formatLastUpdated(updatedAt)}</p>
        <p className={cn('mt-0.5 inline-flex items-center gap-1 uppercase tracking-wider', !isOnline || pendingCount > 0 ? 'text-amber-600' : 'text-emerald-600')}>
          {!isOnline ? <WifiOff className="h-3 w-3" /> : null}
          {statusLabel}
        </p>
      </div>
      <Button variant="outline" className="h-11 rounded-2xl border-border bg-surface" onClick={onRefresh} disabled={isFetching}>
        <RefreshCw className={cn('mr-2 h-4 w-4', isFetching ? 'animate-spin' : '')} />
        Actualizar
      </Button>
    </div>
  );
}