const formatEta = (seconds) => {
  if (seconds == null || seconds === Infinity) {
    return null;
  }
  const clamped = Math.max(0, seconds);
  const mins = Math.floor(clamped / 60);
  const secs = clamped % 60;
  if (mins > 0) {
    return `${mins}m ${secs.toString().padStart(2, '0')}s`;
  }
  return `${secs}s`;
};

const StoreSyncOverlay = ({ state }) => {
  if (!state?.active) {
    return null;
  }

  const percent = Math.round(state.percent || 0);
  const backgroundColor = state.block ? 'rgba(255,255,255,0.95)' : 'rgba(15,23,42,0.4)';
  const etaLabel = formatEta(state.etaSeconds);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center px-4" style={{ backgroundColor }}>
      <div className="bg-white shadow-2xl rounded-lg p-6 w-full max-w-md">
        <p className="text-gray-800 font-semibold mb-3">{state.message || 'Synchronisiere...'}</p>
        <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
          <div
            className="h-3 bg-blue-600 transition-all duration-300 ease-out"
            style={{ width: `${percent}%` }}
          />
        </div>
        <div className="flex items-center justify-between mt-2 text-sm text-gray-500">
          <span>{percent}%</span>
          <span>{etaLabel ? `ETA ~ ${etaLabel}` : 'Bitte warten...'}</span>
        </div>
        <p className="text-xs text-gray-400 mt-2">
          Die Verzögerung schützt vor Rate-Limits während die Betriebe geprüft werden.
        </p>
      </div>
    </div>
  );
};

export default StoreSyncOverlay;